ywana-core8 0.0.169 → 0.0.170
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +12 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +19 -0
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +12 -1
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +12 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/textfield-outlined.css +6 -0
- package/src/html/textfield.css +13 -0
- package/src/html/textfield.js +6 -1
package/package.json
CHANGED
package/src/html/textfield.css
CHANGED
|
@@ -29,6 +29,12 @@
|
|
|
29
29
|
outline: none;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
.textfield>.icon {
|
|
33
|
+
position: absolute;
|
|
34
|
+
top: 1.7rem;
|
|
35
|
+
right: .2rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
32
38
|
.textfield > label {
|
|
33
39
|
color: var(--primary-color);
|
|
34
40
|
font-size: .9rem;
|
|
@@ -104,6 +110,13 @@ input:read-only ~ label,
|
|
|
104
110
|
right: .2rem;
|
|
105
111
|
}
|
|
106
112
|
|
|
113
|
+
.dropdown>.textfield>.icon,
|
|
114
|
+
.dropdown>.textfield-outlined>.icon {
|
|
115
|
+
position: absolute;
|
|
116
|
+
top: 1.7rem;
|
|
117
|
+
right: 4rem;
|
|
118
|
+
}
|
|
119
|
+
|
|
107
120
|
.dropdown>menu {
|
|
108
121
|
z-index: 2;
|
|
109
122
|
position: absolute;
|
package/src/html/textfield.js
CHANGED
|
@@ -11,7 +11,7 @@ import './textfield.css'
|
|
|
11
11
|
export const TextField = (props) => {
|
|
12
12
|
|
|
13
13
|
const site = useContext(SiteContext)
|
|
14
|
-
const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, onChange, onEnter, onClick } = props
|
|
14
|
+
const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick } = props
|
|
15
15
|
|
|
16
16
|
function onKeyPress(event) {
|
|
17
17
|
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
|
|
@@ -37,6 +37,10 @@ export const TextField = (props) => {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
function clear() {
|
|
41
|
+
if (onChange) onChange(id, "")
|
|
42
|
+
}
|
|
43
|
+
|
|
40
44
|
const borderStyle = outlined ? "textfield-outlined" : "textfield"
|
|
41
45
|
const labelStyle = label ? "" : "no-label"
|
|
42
46
|
const style = `${labelStyle} ${borderStyle}`
|
|
@@ -44,6 +48,7 @@ export const TextField = (props) => {
|
|
|
44
48
|
return (
|
|
45
49
|
<div className={`${style}`} onClick={onClick}>
|
|
46
50
|
<input id={id} type={type} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} />
|
|
51
|
+
{canClear ? <Icon icon="close" clickable size="small" action={clear} /> : null }
|
|
47
52
|
<span className="bar"></span>
|
|
48
53
|
{label ? <label>{labelTxt}</label> : null}
|
|
49
54
|
</div>
|