Skip to content

Commit 79e877e

Browse files
author
elis-k
committed
fix: select.nice, ssr, bootstrap and add feature: label/description
1 parent 347ae49 commit 79e877e

29 files changed

+759
-290
lines changed

‎docs/Button.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ import {Button, Alert} from 'elementz';
2121
iconRight='sad'
2222
onClick={()=> Alert.danger("So dangerous")}
2323
>I'm dangerous</Button>
24-
<Button success>I'm successful</Button>
24+
<Button
25+
success
26+
onClick={()=> Alert.success("Yes")}
27+
>I'm successful</Button>
2528
</Button.Group>
2629
```
2730

‎docs/Input.md‎

Lines changed: 126 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ Input elements have similar syntax to native HTML elements
55
import {Input} from 'elementz';
66

77
<Input.Group space>
8-
<Input placeholder='Just a text input'/>
9-
<Input type='password' placeholder='Just a password input'/>
8+
<Input
9+
placeholder='Just a text input'
10+
label='Text'
11+
/>
12+
<Input
13+
type='password'
14+
placeholder='Just a password input'
15+
label='Password'
16+
/>
1017
</Input.Group>
1118
```
1219

@@ -17,8 +24,14 @@ I challenge you to type any character other than a number
1724
import {Input, Badge} from 'elementz';
1825
<>
1926

20-
<Input type='number' incremental={1} max={100} onChange={console.log.bind(null,"Change number:")} />
21-
<small>Try scrolling on it</small>
27+
<Input
28+
type='number'
29+
incremental={1}
30+
max={100}
31+
onChange={console.log.bind(null,"Change number:")}
32+
description='Try scrolling on it'
33+
/>
34+
2235

2336
<Input.Group className='mt-20'>
2437
<Input type='number' sm noButtons incremental={1} max={100}/>
@@ -62,8 +75,7 @@ import {copy} from '../src/Functions/Functions';
6275
const [show, setShow] = useState(false);
6376
6477
<Input
65-
active
66-
readonly
78+
readOnly
6779
full
6880
spellCheck={false}
6981
after={<Icon name='copy' />}
@@ -72,7 +84,7 @@ const [show, setShow] = useState(false);
7284
value={"bc1qte5dj2g04pzefxcwxu4gxvu83mmf5qsucnpl0n"}
7385
overlay={
7486
show ? (
75-
<div className='ez-bg-primary ez-animation-pop flex center ez-text-white w-100 h-100'>
87+
<div className='ez-bg-primary ez-animation-pop flex center middle ez-text-white w-100 h-100'>
7688
Copied <Icon name='checkmark' />
7789
</div>
7890
) : null
@@ -90,6 +102,61 @@ const [show, setShow] = useState(false);
90102
91103
```
92104
105+
### Upload
106+
Make custom file uploaders by simply wrapping them
107+
108+
```js
109+
import {Badge} from 'elementz';
110+
import React,{useState} from 'react';
111+
112+
const [image, setImage] = useState('https://i.imgur.com/sw9mJQo.png');
113+
const [path, setPath] = useState('');
114+
115+
<Input.Group space>
116+
117+
<Input
118+
type='file'
119+
accept="image/png, image/gif, image/jpeg"
120+
onChange={(e)=>{
121+
const files = e.target.files;
122+
if (FileReader && files && files.length) {
123+
var reader = new FileReader();
124+
reader.onload = function () {
125+
setImage(reader.result);
126+
}
127+
reader.readAsDataURL(files[0]);
128+
}
129+
}}>
130+
<Badge
131+
circle
132+
className='upload-overlay'
133+
xl>
134+
<img
135+
src={image}
136+
className='w-100'
137+
/>
138+
</Badge>
139+
</Input>
140+
141+
<Input
142+
type='file'
143+
onChange={(e)=>(
144+
setPath(e.target.value)
145+
)}>
146+
<Input.Group>
147+
<Input
148+
type='text'
149+
placeholder='Choose a file'
150+
value={path}
151+
className='clickable'
152+
readOnly
153+
/>
154+
<Badge icon='cloud-upload' />
155+
</Input.Group>
156+
</Input>
157+
158+
</Input.Group>
159+
```
93160

94161

95162
### States
@@ -105,39 +172,6 @@ import {Input, Icon, Badge, Button} from 'elementz';
105172
</Input.Group>
106173
```
107174

108-
### Sizes
109-
110-
```js
111-
112-
import {Input, Icon, Badge} from 'elementz';
113-
114-
115-
<>
116-
<Input.Group space ns>
117-
<Input placeholder='Just a text input' sm/>
118-
<Input placeholder='Just a text input' md/>
119-
<Input placeholder='Just a text input' lg/>
120-
<Input placeholder='Just a text input' xl/>
121-
122-
</Input.Group>
123-
<Input.Group space className='mt-5' ns>
124-
<Input type='checkbox' sm/>
125-
<Input type='checkbox' md disabled/>
126-
<Input type='checkbox' lg/>
127-
<Input type='checkbox' xl/>
128-
<Input type='radio' name='radio' sm/>
129-
<Input type='radio' name='radio' md/>
130-
<Input type='radio' name='radio' lg/>
131-
<Input type='radio' name='radio' xl/>
132-
133-
<Input.Group full>
134-
<Badge primary icon='search'></Badge>
135-
<Input active primary full placeholder="A flexible width input"/>
136-
</Input.Group>
137-
</Input.Group>
138-
</>
139-
```
140-
141175
### Actions
142176
```js
143177
import React, {useState} from 'react';
@@ -209,3 +243,55 @@ const [showPassword, setShowPassword] = useState(false);
209243
</Input.Group>
210244
```
211245

246+
### Sizes
247+
248+
```js
249+
250+
import {Input, Icon, Badge} from 'elementz';
251+
252+
253+
<>
254+
<Input.Group space ns>
255+
<Input placeholder='Just a text input' sm/>
256+
<Input placeholder='Just a text input' md/>
257+
<Input placeholder='Just a text input' lg/>
258+
<Input placeholder='Just a text input' xl/>
259+
260+
</Input.Group>
261+
<Input.Group space className='mt-5' ns>
262+
<Input type='checkbox' sm/>
263+
<Input type='checkbox' md disabled/>
264+
<Input type='checkbox' lg/>
265+
<Input type='checkbox' xl/>
266+
<Input type='radio' name='radio' sm/>
267+
<Input type='radio' name='radio' md/>
268+
<Input type='radio' name='radio' lg/>
269+
<Input type='radio' name='radio' xl/>
270+
271+
<Input.Group full>
272+
<Badge primary icon='search'></Badge>
273+
<Input active primary full placeholder="A flexible width input"/>
274+
</Input.Group>
275+
</Input.Group>
276+
</>
277+
```
278+
279+
280+
### Labels
281+
```js
282+
<Input
283+
type='text'
284+
label='Username'
285+
description='The username is required'
286+
placeholder='@example'
287+
mb
288+
/>
289+
290+
<Input
291+
type='password'
292+
label='Password'
293+
description='Your secret password'
294+
mb
295+
/>
296+
```
297+

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "elementz",
3-
"version": "2.0.4",
3+
"version": "2.0.5",
44
"description": "A React UI Library for modern and easier development",
55
"main": "lib/elementz.js",
66
"scripts": {
@@ -25,8 +25,8 @@
2525
},
2626
"homepage": "https://elementz.style",
2727
"peerDependencies": {
28-
"react": "^16.0.0",
29-
"react-dom": "^16.0.0"
28+
"react": "^17.0.2",
29+
"react-dom": "^17.0.2"
3030
},
3131
"devDependencies": {
3232
"@babel/core": "^7.12.10",

‎src/Assets/ezTheme.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
window.EzTheme = {
1+
const EzThemeHelpers = {
22
initialize: function () {
3+
if(window.document.querySelector(".ez-theme-initial")) {
4+
return false; //Already initialized
5+
}
36
var mode = window.localStorage.getItem('ez-mode'),
47
size = window.localStorage.getItem('ez-size'),
58
saver = document.head['insertAdjacentHTML'](
@@ -9,14 +12,14 @@ window.EzTheme = {
912
opacity:0; display:flex; position: absolute; left: -9999px; background: url('https://api.elementz.style/i.png');
1013
}
1114
</style>`) || document.body['insertAdjacentHTML']('beforeend', `<div class='ez-theme-initial'></div>`);
12-
15+
1316
if(mode === 'dark') {
1417
document.body.classList.add('ez-dark');
1518
}
1619
if(size !== 'md' && ['sm', 'lg', 'xl'].includes(size)) {
1720
document.body.classList.add('ez-sz-' + size);
1821
}
19-
22+
2023
},
2124

2225
toggleDarkMode: function () {
@@ -38,12 +41,12 @@ window.EzTheme = {
3841

3942
var sizesClasses = sizes.map((s) => ('ez-sz-' + s));
4043
document.body.classList.remove(...sizesClasses);
41-
44+
4245
if(size === 'md') {
4346
window.localStorage.removeItem('ez-size');
4447
return true;
4548
}
46-
49+
4750
document.body.classList.add('ez-sz-' + size);
4851
window.localStorage.setItem('ez-size', size);
4952
return true;
@@ -58,7 +61,12 @@ window.EzTheme = {
5861
}
5962
};
6063

64+
if(typeof window !== "undefined") {
65+
window.EzTheme = EzThemeHelpers;
66+
67+
window.addEventListener('DOMContentLoaded', (e) => {
68+
window.EzTheme.initialize();
69+
});
70+
}
6171

62-
window.addEventListener('DOMContentLoaded', (e) => {
63-
window.EzTheme.initialize();
64-
});
72+
export default EzThemeHelpers;

‎src/Components/Alert.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ var Toaster = function () {
281281

282282
Toastify.reposition = function () {
283283

284-
284+
285285
var topLeftOffsetSize = {
286286
top: 15,
287287
bottom: 15,

‎src/Components/Box.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function Box(props) {
1212
const className = classNames(
1313
"ez-box",
1414
{
15-
"ez-outside-header": props.title,
15+
"ez-outside-header": props.open || props.out,
1616
"full": props.full, //Full Height
1717
"center": props.center,
1818
"circle": props.circle,
@@ -21,7 +21,9 @@ function Box(props) {
2121
'lg': props.lg || props.large,
2222
'xl': props.xl || props.xlarge,
2323
'no-shadow': props.noShadow,
24-
'no-border': props.noBorder
24+
'no-border': props.noBorder,
25+
'join-bottom': props.join,
26+
'join-right': props.joinRight
2527
},
2628
props.className
2729
);
@@ -42,7 +44,7 @@ function Box(props) {
4244
}
4345
)
4446

45-
const passProps = filterProps(props, ['title']);
47+
const passProps = filterProps(props, ['open', 'out', 'join','joinRight']);
4648

4749
return (
4850
<div {...passProps} className={className}>

‎src/Components/Group.jsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,20 @@ import "./../Style/Group.scss";
55
import PropTypes from 'prop-types';
66

77
function Group(props) {
8-
const className = classNames('ez-input-group', props.className, {
9-
'space': props.space,
10-
'vertical': props.vertical,
11-
'flex-end': props.end,
12-
'flex-start': props.start,
13-
'full': props.full,
14-
'nw': props.nw || props.noWrap,
15-
'ns': props.ns || props.noStretch
16-
});
8+
const className = classNames('ez-input-group', props.className,
9+
{
10+
'space': props.space,
11+
'vertical': props.vertical,
12+
'flex-end': props.end,
13+
'flex-start': props.start,
14+
'full': props.full,
15+
'nw': props.nw || props.noWrap,
16+
'ns': props.ns || props.noStretch,
17+
},
18+
props.col && !isNaN(parseInt(props.col)) && (`ez-group-col-${props.col}`)
19+
);
1720

18-
const passProps = filterProps(props, ['sapce', 'vertical','end','start','full']);
21+
const passProps = filterProps(props, ['sapce', 'vertical','end','start','full','col']);
1922
return (
2023
<div {...passProps} className={className}>
2124
{props.children}

0 commit comments

Comments
 (0)