@mirai/ui 1.0.2 → 1.0.3
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/build/components/InputSelect/InputSelect.js +2 -1
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +7 -7
- package/build/components/InputText/InputText.js +8 -3
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.module.css +31 -9
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +44 -1
- package/package.json +1 -1
|
@@ -80,7 +80,8 @@ var InputSelect = function InputSelect(_ref) {
|
|
|
80
80
|
onEnter: handleEnter,
|
|
81
81
|
onLeave: handleLeave
|
|
82
82
|
})), !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
83
|
-
name: "CloseArrow"
|
|
83
|
+
name: "CloseArrow",
|
|
84
|
+
className: [_InputTextModule.default.icon, _InputTextModule.default.right]
|
|
84
85
|
})), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
85
86
|
small: true,
|
|
86
87
|
className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, error && _InputTextModule.default.error)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"names":["InputSelect","disabled","error","hint","label","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","displayName"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"names":["InputSelect","disabled","error","hint","label","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","icon","right","displayName"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nconst InputSelect = ({\n disabled,\n error,\n hint,\n label,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n event.target?.blur();\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n value: others.value !== undefined && others.value?.length > 0,\n };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n {label && (\n <Text\n className={styles(\n style.text,\n style.label,\n focus && style.focus,\n error && style.error,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View row className={styles(style.inputBorder, focus && !error && style.focus, error && style.error)}>\n <Select\n {...others}\n disabled={disabled}\n value={others.value || ''}\n className={style.input}\n style={undefined}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n {!disabled && <Icon name=\"CloseArrow\" className={[style.icon, style.right]} />}\n </View>\n\n {hint && (\n <Text small className={styles(style.text, style.hint, error && style.error)}>\n {hint}\n </Text>\n )}\n </View>\n );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"file":"InputSelect.js"}
|
|
@@ -39,7 +39,7 @@ exports[`component:<InputSelect> inherit:className 1`] = `
|
|
|
39
39
|
</option>
|
|
40
40
|
</select>
|
|
41
41
|
<span
|
|
42
|
-
class="icon"
|
|
42
|
+
class="icon icon right"
|
|
43
43
|
>
|
|
44
44
|
<svg
|
|
45
45
|
fill="none"
|
|
@@ -145,7 +145,7 @@ exports[`component:<InputSelect> prop:error 1`] = `
|
|
|
145
145
|
</option>
|
|
146
146
|
</select>
|
|
147
147
|
<span
|
|
148
|
-
class="icon"
|
|
148
|
+
class="icon icon right"
|
|
149
149
|
>
|
|
150
150
|
<svg
|
|
151
151
|
fill="none"
|
|
@@ -207,7 +207,7 @@ exports[`component:<InputSelect> prop:hint 1`] = `
|
|
|
207
207
|
</option>
|
|
208
208
|
</select>
|
|
209
209
|
<span
|
|
210
|
-
class="icon"
|
|
210
|
+
class="icon icon right"
|
|
211
211
|
>
|
|
212
212
|
<svg
|
|
213
213
|
fill="none"
|
|
@@ -279,7 +279,7 @@ exports[`component:<InputSelect> prop:label 1`] = `
|
|
|
279
279
|
</option>
|
|
280
280
|
</select>
|
|
281
281
|
<span
|
|
282
|
-
class="icon"
|
|
282
|
+
class="icon icon right"
|
|
283
283
|
>
|
|
284
284
|
<svg
|
|
285
285
|
fill="none"
|
|
@@ -341,7 +341,7 @@ exports[`component:<InputSelect> prop:label 2`] = `
|
|
|
341
341
|
</option>
|
|
342
342
|
</select>
|
|
343
343
|
<span
|
|
344
|
-
class="icon"
|
|
344
|
+
class="icon icon right"
|
|
345
345
|
>
|
|
346
346
|
<svg
|
|
347
347
|
fill="none"
|
|
@@ -403,7 +403,7 @@ exports[`component:<InputSelect> renders 1`] = `
|
|
|
403
403
|
</option>
|
|
404
404
|
</select>
|
|
405
405
|
<span
|
|
406
|
-
class="icon"
|
|
406
|
+
class="icon icon right"
|
|
407
407
|
>
|
|
408
408
|
<svg
|
|
409
409
|
fill="none"
|
|
@@ -466,7 +466,7 @@ exports[`component:<InputSelect> testID 1`] = `
|
|
|
466
466
|
</option>
|
|
467
467
|
</select>
|
|
468
468
|
<span
|
|
469
|
-
class="icon"
|
|
469
|
+
class="icon icon right"
|
|
470
470
|
>
|
|
471
471
|
<svg
|
|
472
472
|
fill="none"
|
|
@@ -21,7 +21,7 @@ var _primitives = require("../../primitives");
|
|
|
21
21
|
|
|
22
22
|
var _InputTextModule = _interopRequireDefault(require("./InputText.module.css"));
|
|
23
23
|
|
|
24
|
-
var _excluded = ["disabled", "error", "hint", "label", "type", "onChange", "onEnter", "onLeave"];
|
|
24
|
+
var _excluded = ["disabled", "error", "hint", "icon", "label", "type", "onChange", "onEnter", "onLeave"];
|
|
25
25
|
|
|
26
26
|
var InputText = function InputText(_ref) {
|
|
27
27
|
var _others$value;
|
|
@@ -29,6 +29,7 @@ var InputText = function InputText(_ref) {
|
|
|
29
29
|
var disabled = _ref.disabled,
|
|
30
30
|
error = _ref.error,
|
|
31
31
|
hint = _ref.hint,
|
|
32
|
+
icon = _ref.icon,
|
|
32
33
|
label = _ref.label,
|
|
33
34
|
type = _ref.type,
|
|
34
35
|
_ref$onChange = _ref.onChange,
|
|
@@ -77,16 +78,20 @@ var InputText = function InputText(_ref) {
|
|
|
77
78
|
}, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
78
79
|
row: true,
|
|
79
80
|
className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, focus && !error && _InputTextModule.default.focus, error && _InputTextModule.default.error)
|
|
80
|
-
}, /*#__PURE__*/_react.default.createElement(_primitives.
|
|
81
|
+
}, icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
82
|
+
name: icon,
|
|
83
|
+
className: [_InputTextModule.default.icon, _InputTextModule.default.left]
|
|
84
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.Input, Object.assign({}, others, {
|
|
81
85
|
disabled: disabled,
|
|
82
86
|
type: !is.password || password ? type : 'text',
|
|
83
87
|
value: others.value || '',
|
|
84
|
-
className: _InputTextModule.default.input,
|
|
88
|
+
className: (0, _helpers.styles)(_InputTextModule.default.input, icon && _InputTextModule.default.iconLeft),
|
|
85
89
|
style: undefined,
|
|
86
90
|
onChange: handleChange,
|
|
87
91
|
onEnter: handleEnter,
|
|
88
92
|
onLeave: handleLeave
|
|
89
93
|
})), is.password && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
94
|
+
className: _InputTextModule.default.pressable,
|
|
90
95
|
onPress: function onPress() {
|
|
91
96
|
return setPassword(!password);
|
|
92
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/InputText/InputText.jsx"],"names":["InputText","disabled","error","hint","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputContainer","className","text","inputBorder","input","displayName"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/InputText/InputText.jsx"],"names":["InputText","disabled","error","hint","icon","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputContainer","className","text","inputBorder","left","input","iconLeft","pressable","displayName"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n type,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = () => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n value: others.value !== undefined && others.value?.length > 0,\n };\n const is = { password: type === 'password' };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n {label && (\n <Text\n className={styles(\n style.text,\n style.label,\n focus && style.focus,\n error && style.error,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View row className={styles(style.inputBorder, focus && !error && style.focus, error && style.error)}>\n {icon && <Icon name={icon} className={[style.icon, style.left]} />}\n <Input\n {...others}\n disabled={disabled}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, icon && style.iconLeft)}\n style={undefined}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n {is.password && !disabled && (\n <Pressable className={style.pressable} onPress={() => setPassword(!password)}>\n <Icon name={password ? 'EyeClose' : 'EyeOpen'} />\n </Pressable>\n )}\n </View>\n\n {hint && (\n <Text small className={styles(style.text, style.hint, error && style.error)}>\n {hint}\n </Text>\n )}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.string,\n label: PropTypes.string,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n type: PropTypes.string,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"file":"InputText.js"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
--mirai-ui-input-field-border: solid 1px var(--mirai-ui-lighten);
|
|
3
3
|
--mirai-ui-input-field-focus: var(--mirai-ui-accent);
|
|
4
4
|
--mirai-ui-input-field-padding-x: var(--mirai-ui-space-S);
|
|
5
|
-
--mirai-ui-input-field-padding-y: var(--mirai-ui-space-
|
|
5
|
+
--mirai-ui-input-field-padding-y: var(--mirai-ui-space-S);
|
|
6
6
|
--mirai-ui-input-field-radius: var(--mirai-ui-border-radius);
|
|
7
7
|
}
|
|
8
8
|
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
.inputBorder {
|
|
15
15
|
border: var(--mirai-ui-input-field-border);
|
|
16
16
|
border-radius: var(--mirai-ui-input-field-radius);
|
|
17
|
-
padding: 0 var(--mirai-ui-input-field-padding-x) 0 0;
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
.inputBorder.error {
|
|
@@ -29,20 +28,35 @@
|
|
|
29
28
|
padding: var(--mirai-ui-input-field-padding-y) var(--mirai-ui-input-field-padding-x);
|
|
30
29
|
}
|
|
31
30
|
|
|
31
|
+
.input.iconLeft {
|
|
32
|
+
padding-left: calc(var(--mirai-ui-input-field-padding-x) * 3);
|
|
33
|
+
}
|
|
34
|
+
|
|
32
35
|
.input::placeholder {
|
|
33
36
|
color: var(--mirai-ui-base);
|
|
34
37
|
}
|
|
35
38
|
|
|
36
|
-
.
|
|
39
|
+
.hint {
|
|
40
|
+
margin: calc(var(--mirai-ui-input-field-padding-x) / 4) var(--mirai-ui-input-field-padding-x);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.icon {
|
|
37
44
|
color: var(--mirai-ui-lighten);
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
position: absolute;
|
|
38
47
|
}
|
|
39
48
|
|
|
40
|
-
.
|
|
41
|
-
|
|
49
|
+
.pressable {
|
|
50
|
+
position: absolute;
|
|
51
|
+
right: var(--mirai-ui-input-field-padding-x);
|
|
42
52
|
}
|
|
43
53
|
|
|
44
|
-
.
|
|
45
|
-
|
|
54
|
+
.icon.left {
|
|
55
|
+
left: var(--mirai-ui-input-field-padding-x);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.icon.right {
|
|
59
|
+
right: var(--mirai-ui-input-field-padding-x);
|
|
46
60
|
}
|
|
47
61
|
|
|
48
62
|
.label {
|
|
@@ -62,6 +76,14 @@
|
|
|
62
76
|
top: calc(calc(var(--mirai-ui-input-field-padding-y) * -1) + calc(var(--mirai-ui-input-field-padding-y) / 2));
|
|
63
77
|
}
|
|
64
78
|
|
|
65
|
-
.
|
|
66
|
-
|
|
79
|
+
.text {
|
|
80
|
+
color: var(--mirai-ui-lighten);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.text.focus {
|
|
84
|
+
color: var(--mirai-ui-input-field-focus);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.text.error {
|
|
88
|
+
color: var(--mirai-ui-error);
|
|
67
89
|
}
|
|
@@ -82,6 +82,49 @@ exports[`component:<InputText> prop:hint 1`] = `
|
|
|
82
82
|
</DocumentFragment>
|
|
83
83
|
`;
|
|
84
84
|
|
|
85
|
+
exports[`component:<InputText> prop:icon 1`] = `
|
|
86
|
+
<DocumentFragment>
|
|
87
|
+
<div
|
|
88
|
+
class="view inputContainer"
|
|
89
|
+
>
|
|
90
|
+
<div
|
|
91
|
+
class="view row inputBorder"
|
|
92
|
+
>
|
|
93
|
+
<span
|
|
94
|
+
class="icon icon left"
|
|
95
|
+
>
|
|
96
|
+
<svg
|
|
97
|
+
fill="none"
|
|
98
|
+
height="1em"
|
|
99
|
+
stroke="currentColor"
|
|
100
|
+
stroke-linecap="round"
|
|
101
|
+
stroke-linejoin="round"
|
|
102
|
+
stroke-width="2"
|
|
103
|
+
viewBox="0 0 24 24"
|
|
104
|
+
width="1em"
|
|
105
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
106
|
+
>
|
|
107
|
+
<path
|
|
108
|
+
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
|
|
109
|
+
/>
|
|
110
|
+
<circle
|
|
111
|
+
cx="12"
|
|
112
|
+
cy="12"
|
|
113
|
+
r="3"
|
|
114
|
+
/>
|
|
115
|
+
</svg>
|
|
116
|
+
</span>
|
|
117
|
+
<input
|
|
118
|
+
class="input input iconLeft"
|
|
119
|
+
name="name"
|
|
120
|
+
type="text"
|
|
121
|
+
value=""
|
|
122
|
+
/>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</DocumentFragment>
|
|
126
|
+
`;
|
|
127
|
+
|
|
85
128
|
exports[`component:<InputText> prop:label 1`] = `
|
|
86
129
|
<DocumentFragment>
|
|
87
130
|
<div
|
|
@@ -139,7 +182,7 @@ exports[`component:<InputText> prop:type 1`] = `
|
|
|
139
182
|
value=""
|
|
140
183
|
/>
|
|
141
184
|
<button
|
|
142
|
-
class="pressable"
|
|
185
|
+
class="pressable pressable"
|
|
143
186
|
>
|
|
144
187
|
<span
|
|
145
188
|
class="icon"
|