@mirai/ui 1.0.56 → 1.0.57
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/InputDate/InputDate.js +1 -0
- package/build/components/InputDate/InputDate.js.map +1 -1
- package/build/components/InputSelect/InputSelect.js +11 -3
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +108 -0
- package/build/components/InputText/InputText.js +19 -4
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.module.css +9 -0
- package/build/components/InputText/InputText.stories.js +3 -0
- package/build/components/InputText/InputText.stories.js.map +1 -1
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +141 -0
- package/build/components/Notification/Notification.js +5 -1
- package/build/components/Notification/Notification.js.map +1 -1
- package/build/helpers/getIconName.js +18 -0
- package/build/helpers/getIconName.js.map +1 -0
- package/build/helpers/index.js +13 -0
- package/build/helpers/index.js.map +1 -1
- package/build/theme/default.theme.css +5 -1
- package/package.json +1 -1
|
@@ -119,6 +119,7 @@ var InputDate = function InputDate(_ref) {
|
|
|
119
119
|
key: index,
|
|
120
120
|
maxLength: part.length,
|
|
121
121
|
name: "".concat(name, ":").concat(part),
|
|
122
|
+
showState: false,
|
|
122
123
|
value: values[index],
|
|
123
124
|
onChange: function onChange(value) {
|
|
124
125
|
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","label","labels","max","min","name","required","value","onChange","onError","onEnter","onLeave","others","focus","setFocus","parts","split","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","Object","keys","length","handleEnter","handleLeave","testId","className","style","rest","input","substring","undefined","displayName","propTypes","PropTypes","bool","string","hint","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, styles } from '../../helpers';\nimport { Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from './InputDate.module.css';\n\nconst InputDate = ({\n disabled,\n error,\n format = 'DD/MM/YYYY',\n label,\n labels = [],\n max,\n min,\n name,\n required,\n value = '',\n onChange = () => {},\n onError = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const parts = format.split('/');\n const values = value?.split('/') || [];\n\n const handleChange = (partValue = '', partKey, event) => {\n const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n const errors = getInputDateErrors({ format, max, min, value, required });\n if (Object.keys(errors).length > 0) onError(errors);\n\n onChange(nextValue, event);\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 { ['data-testid']: testId } = others;\n\n return (\n <View className={others.className} data-testid={testId}>\n <Text className={styles(style.label, disabled && style.disabled, focus && style.focus, error && style.error)}>\n {label}\n </Text>\n\n <View row>\n {parts.map((part, index) => (\n <InputText\n disabled={disabled}\n error={error}\n hint={labels[index] || part}\n key={index}\n maxLength={part.length}\n name={`${name}:${part}`}\n value={values[index]}\n onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n onEnter={handleEnter}\n onLeave={handleLeave}\n className={styles(style.input, style[part.substring(0, 1)])}\n data-testid={testId ? `${testId}-${part}` : undefined}\n />\n ))}\n </View>\n </View>\n );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n format: PropTypes.string,\n hint: PropTypes.string, // !TODO\n label: PropTypes.string,\n labels: PropTypes.arrayOf(PropTypes.string),\n max: PropTypes.string,\n min: PropTypes.string,\n name: PropTypes.string.isRequired,\n required: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onError: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","label","labels","max","min","name","required","value","onChange","onError","onEnter","onLeave","others","focus","setFocus","parts","split","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","Object","keys","length","handleEnter","handleLeave","testId","className","style","rest","input","substring","undefined","displayName","propTypes","PropTypes","bool","string","hint","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, styles } from '../../helpers';\nimport { Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from './InputDate.module.css';\n\nconst InputDate = ({\n disabled,\n error,\n format = 'DD/MM/YYYY',\n label,\n labels = [],\n max,\n min,\n name,\n required,\n value = '',\n onChange = () => {},\n onError = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const parts = format.split('/');\n const values = value?.split('/') || [];\n\n const handleChange = (partValue = '', partKey, event) => {\n const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n const errors = getInputDateErrors({ format, max, min, value, required });\n if (Object.keys(errors).length > 0) onError(errors);\n\n onChange(nextValue, event);\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 { ['data-testid']: testId } = others;\n\n return (\n <View className={others.className} data-testid={testId}>\n <Text className={styles(style.label, disabled && style.disabled, focus && style.focus, error && style.error)}>\n {label}\n </Text>\n\n <View row>\n {parts.map((part, index) => (\n <InputText\n disabled={disabled}\n error={error}\n hint={labels[index] || part}\n key={index}\n maxLength={part.length}\n name={`${name}:${part}`}\n showState={false}\n value={values[index]}\n onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n onEnter={handleEnter}\n onLeave={handleLeave}\n className={styles(style.input, style[part.substring(0, 1)])}\n data-testid={testId ? `${testId}-${part}` : undefined}\n />\n ))}\n </View>\n </View>\n );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n format: PropTypes.string,\n hint: PropTypes.string, // !TODO\n label: PropTypes.string,\n labels: PropTypes.arrayOf(PropTypes.string),\n max: PropTypes.string,\n min: PropTypes.string,\n name: PropTypes.string.isRequired,\n required: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onError: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@ var _primitives = require("../../primitives");
|
|
|
17
17
|
|
|
18
18
|
var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
|
|
19
19
|
|
|
20
|
-
var _excluded = ["disabled", "error", "hint", "label", "onChange", "onEnter", "onLeave"];
|
|
20
|
+
var _excluded = ["disabled", "error", "hint", "label", "success", "warning", "onChange", "onEnter", "onLeave"];
|
|
21
21
|
|
|
22
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
23
|
|
|
@@ -50,6 +50,8 @@ var InputSelect = function InputSelect(_ref) {
|
|
|
50
50
|
error = _ref.error,
|
|
51
51
|
hint = _ref.hint,
|
|
52
52
|
label = _ref.label,
|
|
53
|
+
success = _ref.success,
|
|
54
|
+
warning = _ref.warning,
|
|
53
55
|
_ref$onChange = _ref.onChange,
|
|
54
56
|
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
55
57
|
_ref$onEnter = _ref.onEnter,
|
|
@@ -100,8 +102,12 @@ var InputSelect = function InputSelect(_ref) {
|
|
|
100
102
|
onEnter: handleEnter,
|
|
101
103
|
onLeave: handleLeave
|
|
102
104
|
})), !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
103
|
-
name:
|
|
104
|
-
|
|
105
|
+
name: !focus && (error || success || warning) ? (0, _helpers.getIconName)({
|
|
106
|
+
error: error,
|
|
107
|
+
success: success,
|
|
108
|
+
warning: warning
|
|
109
|
+
}) : 'CloseArrow',
|
|
110
|
+
className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.right, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
|
|
105
111
|
})), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
106
112
|
small: true,
|
|
107
113
|
className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
|
|
@@ -116,6 +122,8 @@ InputSelect.propTypes = {
|
|
|
116
122
|
hint: _propTypes.default.string,
|
|
117
123
|
label: _propTypes.default.string,
|
|
118
124
|
name: _propTypes.default.string.isRequired,
|
|
125
|
+
success: _propTypes.default.bool,
|
|
126
|
+
warning: _propTypes.default.bool,
|
|
119
127
|
onChange: _propTypes.default.func,
|
|
120
128
|
onEnter: _propTypes.default.func,
|
|
121
129
|
onLeave: _propTypes.default.func
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.js","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","iconRight","empty","icon","right","displayName","propTypes","PropTypes","bool","string","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"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';\n\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 disabled && style.disabled,\n error && style.error,\n focus && style.focus,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n focus && !error && style.focus,\n error && style.error,\n )}\n >\n <Select\n {...others}\n disabled={disabled}\n value={others.value || ''}\n className={styles(style.input, style.iconRight, !!label && !(focus || error || has.value) && style.empty)}\n style={undefined}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n {!disabled && <Icon
|
|
1
|
+
{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","success","warning","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","iconRight","empty","icon","right","displayName","propTypes","PropTypes","bool","string","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getIconName, styles } from '../../helpers';\nimport { Icon, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\n\nconst InputSelect = ({\n disabled,\n error,\n hint,\n label,\n success,\n warning,\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 disabled && style.disabled,\n error && style.error,\n focus && style.focus,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n focus && !error && style.focus,\n error && style.error,\n )}\n >\n <Select\n {...others}\n disabled={disabled}\n value={others.value || ''}\n className={styles(style.input, style.iconRight, !!label && !(focus || error || has.value) && style.empty)}\n style={undefined}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n {!disabled && (\n <Icon\n name={!focus && (error || success || warning) ? getIconName({ error, success, warning }) : 'CloseArrow'}\n className={styles(\n style.icon,\n style.right,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n )}\n />\n )}\n </View>\n\n {hint && (\n <Text small className={styles(style.text, style.hint, disabled && style.disabled, 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 success: PropTypes.bool,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}
|
|
@@ -364,6 +364,114 @@ exports[`component:<InputSelect> prop:label 2`] = `
|
|
|
364
364
|
</DocumentFragment>
|
|
365
365
|
`;
|
|
366
366
|
|
|
367
|
+
exports[`component:<InputSelect> prop:success 1`] = `
|
|
368
|
+
<DocumentFragment>
|
|
369
|
+
<div
|
|
370
|
+
class="view inputContainer"
|
|
371
|
+
>
|
|
372
|
+
<div
|
|
373
|
+
class="view row inputBorder disabled"
|
|
374
|
+
>
|
|
375
|
+
<select
|
|
376
|
+
class="select empty input iconRight"
|
|
377
|
+
disabled=""
|
|
378
|
+
name="name"
|
|
379
|
+
>
|
|
380
|
+
<option
|
|
381
|
+
value="one"
|
|
382
|
+
>
|
|
383
|
+
one
|
|
384
|
+
</option>
|
|
385
|
+
<option
|
|
386
|
+
value="two"
|
|
387
|
+
>
|
|
388
|
+
two
|
|
389
|
+
</option>
|
|
390
|
+
<option
|
|
391
|
+
value="three"
|
|
392
|
+
>
|
|
393
|
+
three
|
|
394
|
+
</option>
|
|
395
|
+
<option
|
|
396
|
+
value="four"
|
|
397
|
+
>
|
|
398
|
+
four
|
|
399
|
+
</option>
|
|
400
|
+
<option
|
|
401
|
+
value="five"
|
|
402
|
+
>
|
|
403
|
+
five
|
|
404
|
+
</option>
|
|
405
|
+
</select>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
</DocumentFragment>
|
|
409
|
+
`;
|
|
410
|
+
|
|
411
|
+
exports[`component:<InputSelect> prop:warning 1`] = `
|
|
412
|
+
<DocumentFragment>
|
|
413
|
+
<div
|
|
414
|
+
class="view inputContainer"
|
|
415
|
+
>
|
|
416
|
+
<div
|
|
417
|
+
class="view row inputBorder"
|
|
418
|
+
>
|
|
419
|
+
<select
|
|
420
|
+
class="select empty input iconRight"
|
|
421
|
+
name="name"
|
|
422
|
+
>
|
|
423
|
+
<option
|
|
424
|
+
value="one"
|
|
425
|
+
>
|
|
426
|
+
one
|
|
427
|
+
</option>
|
|
428
|
+
<option
|
|
429
|
+
value="two"
|
|
430
|
+
>
|
|
431
|
+
two
|
|
432
|
+
</option>
|
|
433
|
+
<option
|
|
434
|
+
value="three"
|
|
435
|
+
>
|
|
436
|
+
three
|
|
437
|
+
</option>
|
|
438
|
+
<option
|
|
439
|
+
value="four"
|
|
440
|
+
>
|
|
441
|
+
four
|
|
442
|
+
</option>
|
|
443
|
+
<option
|
|
444
|
+
value="five"
|
|
445
|
+
>
|
|
446
|
+
five
|
|
447
|
+
</option>
|
|
448
|
+
</select>
|
|
449
|
+
<span
|
|
450
|
+
class="icon paragraph icon right warning"
|
|
451
|
+
>
|
|
452
|
+
<svg
|
|
453
|
+
fill="currentColor"
|
|
454
|
+
height="1em"
|
|
455
|
+
stroke="currentColor"
|
|
456
|
+
stroke-width="0"
|
|
457
|
+
viewBox="0 0 24 24"
|
|
458
|
+
width="1em"
|
|
459
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
460
|
+
>
|
|
461
|
+
<path
|
|
462
|
+
d="M0 0h24v24H0z"
|
|
463
|
+
fill="none"
|
|
464
|
+
/>
|
|
465
|
+
<path
|
|
466
|
+
d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
|
|
467
|
+
/>
|
|
468
|
+
</svg>
|
|
469
|
+
</span>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</DocumentFragment>
|
|
473
|
+
`;
|
|
474
|
+
|
|
367
475
|
exports[`component:<InputSelect> renders 1`] = `
|
|
368
476
|
<DocumentFragment>
|
|
369
477
|
<div
|
|
@@ -17,7 +17,7 @@ var _primitives = require("../../primitives");
|
|
|
17
17
|
|
|
18
18
|
var _InputTextModule = _interopRequireDefault(require("./InputText.module.css"));
|
|
19
19
|
|
|
20
|
-
var _excluded = ["disabled", "error", "hint", "icon", "label", "type", "onChange", "onEnter", "onLeave"];
|
|
20
|
+
var _excluded = ["disabled", "error", "hint", "icon", "label", "showState", "success", "type", "warning", "onChange", "onEnter", "onLeave"];
|
|
21
21
|
|
|
22
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
23
|
|
|
@@ -51,7 +51,11 @@ var InputText = function InputText(_ref) {
|
|
|
51
51
|
hint = _ref.hint,
|
|
52
52
|
icon = _ref.icon,
|
|
53
53
|
label = _ref.label,
|
|
54
|
+
_ref$showState = _ref.showState,
|
|
55
|
+
showState = _ref$showState === void 0 ? true : _ref$showState,
|
|
56
|
+
success = _ref.success,
|
|
54
57
|
type = _ref.type,
|
|
58
|
+
warning = _ref.warning,
|
|
55
59
|
_ref$onChange = _ref.onChange,
|
|
56
60
|
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
57
61
|
_ref$onEnter = _ref.onEnter,
|
|
@@ -85,7 +89,8 @@ var InputText = function InputText(_ref) {
|
|
|
85
89
|
};
|
|
86
90
|
|
|
87
91
|
var has = {
|
|
88
|
-
value: others.value !== undefined && ((_others$value = others.value) === null || _others$value === void 0 ? void 0 : _others$value.length) > 0
|
|
92
|
+
value: others.value !== undefined && ((_others$value = others.value) === null || _others$value === void 0 ? void 0 : _others$value.length) > 0,
|
|
93
|
+
stateIcon: showState && (error || success || warning)
|
|
89
94
|
};
|
|
90
95
|
var is = {
|
|
91
96
|
password: type === 'password'
|
|
@@ -100,7 +105,7 @@ var InputText = function InputText(_ref) {
|
|
|
100
105
|
className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, focus && !error && _InputTextModule.default.focus)
|
|
101
106
|
}, icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
102
107
|
name: icon,
|
|
103
|
-
className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.left, disabled && _InputTextModule.default.disabled)
|
|
108
|
+
className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.left, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
|
|
104
109
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, others, {
|
|
105
110
|
disabled: disabled,
|
|
106
111
|
type: !is.password || password ? type : 'text',
|
|
@@ -110,7 +115,14 @@ var InputText = function InputText(_ref) {
|
|
|
110
115
|
onChange: handleChange,
|
|
111
116
|
onEnter: handleEnter,
|
|
112
117
|
onLeave: handleLeave
|
|
113
|
-
})),
|
|
118
|
+
})), has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
119
|
+
name: (0, _helpers.getIconName)({
|
|
120
|
+
error: error,
|
|
121
|
+
success: success,
|
|
122
|
+
warning: warning
|
|
123
|
+
}),
|
|
124
|
+
className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.right, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
|
|
125
|
+
}), is.password && !disabled && !has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
114
126
|
tabIndex: -1,
|
|
115
127
|
type: "button",
|
|
116
128
|
className: _InputTextModule.default.pressable,
|
|
@@ -135,7 +147,10 @@ InputText.propTypes = {
|
|
|
135
147
|
label: _propTypes.default.string,
|
|
136
148
|
multiLine: _propTypes.default.bool,
|
|
137
149
|
name: _propTypes.default.string.isRequired,
|
|
150
|
+
showState: _propTypes.default.bool,
|
|
151
|
+
success: _propTypes.default.bool,
|
|
138
152
|
type: _propTypes.default.string,
|
|
153
|
+
warning: _propTypes.default.bool,
|
|
139
154
|
onChange: _propTypes.default.func,
|
|
140
155
|
onEnter: _propTypes.default.func,
|
|
141
156
|
onLeave: _propTypes.default.func
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.js","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","withIcon","inputBorder","left","input","iconLeft","pressable","displayName","propTypes","PropTypes","bool","string","multiLine","name","isRequired","func"],"sources":["../../../src/components/InputText/InputText.jsx"],"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 disabled && style.disabled,\n focus && style.focus,\n error && style.error,\n icon && style.withIcon,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {icon && <Icon
|
|
1
|
+
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","showState","success","type","warning","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","stateIcon","is","style","inputContainer","className","text","withIcon","inputBorder","left","input","iconLeft","right","pressable","displayName","propTypes","PropTypes","bool","string","multiLine","name","isRequired","func"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getIconName, 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 showState = true,\n success,\n type,\n warning,\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 stateIcon: showState && (error || success || warning),\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 disabled && style.disabled,\n focus && style.focus,\n error && style.error,\n icon && style.withIcon,\n (focus || error || has.value) && style.value,\n )}\n >\n {label}\n </Text>\n )}\n\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {icon && (\n <Icon\n name={icon}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\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\n {has.stateIcon && (\n <Icon\n name={getIconName({ error, success, warning })}\n className={styles(\n style.icon,\n style.right,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n )}\n />\n )}\n {is.password && !disabled && !has.stateIcon && (\n <Pressable tabIndex={-1} type=\"button\" 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, disabled && style.disabled, 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 showState: PropTypes.bool,\n success: PropTypes.bool,\n type: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
|
|
@@ -119,6 +119,15 @@
|
|
|
119
119
|
color: var(--mirai-ui-input-text-focus);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
+
.icon.error,
|
|
122
123
|
.text.error {
|
|
123
124
|
color: var(--mirai-ui-error);
|
|
124
125
|
}
|
|
126
|
+
|
|
127
|
+
.icon.success {
|
|
128
|
+
color: var(--mirai-ui-success);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.icon.warning {
|
|
132
|
+
color: var(--mirai-ui-warning);
|
|
133
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.stories.js","names":["title","Story","props","storyName","args","disabled","error","hint","icon","undefined","label","multiLine","name","type","value","onChange","console","log","onEnter","onLeave","argTypes","options","Object","keys","ICONS","control","defaultValue"],"sources":["../../../src/components/InputText/InputText.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { ICONS } from '../../primitives';\nimport { InputText } from './InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputText {...props} />;\n\nStory.storyName = 'InputText';\n\nStory.args = {\n disabled: false,\n error: false,\n hint: 'hint',\n icon: undefined,\n label: 'label',\n multiLine: false,\n name: 'name',\n type: 'text',\n value: 'value',\n onChange: (...props) => console.log('<InputText>::onChange', ...props),\n onEnter: (...props) => console.log('<InputText>::onEnter', ...props),\n onLeave: (...props) => console.log('<InputText>::onLeave', ...props),\n};\n\nStory.argTypes = {\n icon: {\n options: [undefined, ...Object.keys(ICONS)],\n control: { type: 'select' },\n defaultValue: undefined,\n },\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,oBAAD,EAAeA,KAAf,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,WAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,QAAQ,EAAE,KADC;EAEXC,KAAK,EAAE,KAFI;EAGXC,IAAI,EAAE,MAHK;EAIXC,IAAI,EAAEC,SAJK;EAKXC,KAAK,EAAE,OALI;EAMXC,SAAS,EAAE,KANA;EAOXC,IAAI,EAAE,MAPK;EAQXC,
|
|
1
|
+
{"version":3,"file":"InputText.stories.js","names":["title","Story","props","storyName","args","disabled","error","hint","icon","undefined","label","multiLine","name","showState","success","type","value","warning","onChange","console","log","onEnter","onLeave","argTypes","options","Object","keys","ICONS","control","defaultValue"],"sources":["../../../src/components/InputText/InputText.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { ICONS } from '../../primitives';\nimport { InputText } from './InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputText {...props} />;\n\nStory.storyName = 'InputText';\n\nStory.args = {\n disabled: false,\n error: false,\n hint: 'hint',\n icon: undefined,\n label: 'label',\n multiLine: false,\n name: 'name',\n showState: true,\n success: false,\n type: 'text',\n value: 'value',\n warning: false,\n onChange: (...props) => console.log('<InputText>::onChange', ...props),\n onEnter: (...props) => console.log('<InputText>::onEnter', ...props),\n onLeave: (...props) => console.log('<InputText>::onLeave', ...props),\n};\n\nStory.argTypes = {\n icon: {\n options: [undefined, ...Object.keys(ICONS)],\n control: { type: 'select' },\n defaultValue: undefined,\n },\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,oBAAD,EAAeA,KAAf,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,WAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,QAAQ,EAAE,KADC;EAEXC,KAAK,EAAE,KAFI;EAGXC,IAAI,EAAE,MAHK;EAIXC,IAAI,EAAEC,SAJK;EAKXC,KAAK,EAAE,OALI;EAMXC,SAAS,EAAE,KANA;EAOXC,IAAI,EAAE,MAPK;EAQXC,SAAS,EAAE,IARA;EASXC,OAAO,EAAE,KATE;EAUXC,IAAI,EAAE,MAVK;EAWXC,KAAK,EAAE,OAXI;EAYXC,OAAO,EAAE,KAZE;EAaXC,QAAQ,EAAE;IAAA;;IAAA,kCAAIhB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAiB,OAAO,EAACC,GAAR,kBAAY,uBAAZ,SAAwClB,KAAxC,EAAd;EAAA,CAbC;EAcXmB,OAAO,EAAE;IAAA;;IAAA,mCAAInB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAiB,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuClB,KAAvC,EAAd;EAAA,CAdE;EAeXoB,OAAO,EAAE;IAAA;;IAAA,mCAAIpB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAiB,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuClB,KAAvC,EAAd;EAAA;AAfE,CAAb;AAkBAD,KAAK,CAACsB,QAAN,GAAiB;EACff,IAAI,EAAE;IACJgB,OAAO,GAAGf,SAAH,4BAAiBgB,MAAM,CAACC,IAAP,CAAYC,iBAAZ,CAAjB,EADH;IAEJC,OAAO,EAAE;MAAEb,IAAI,EAAE;IAAR,CAFL;IAGJc,YAAY,EAAEpB;EAHV,CADS;EAMfM,IAAI,EAAE;IACJS,OAAO,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,QAArB,EAA+B,OAA/B,EAAwC,MAAxC,CADL;IAEJI,OAAO,EAAE;MAAEb,IAAI,EAAE;IAAR,CAFL;IAGJc,YAAY,EAAE;EAHV;AANS,CAAjB"}
|
|
@@ -53,6 +53,27 @@ exports[`component:<InputText> prop:error 1`] = `
|
|
|
53
53
|
type="text"
|
|
54
54
|
value=""
|
|
55
55
|
/>
|
|
56
|
+
<span
|
|
57
|
+
class="icon paragraph icon right error"
|
|
58
|
+
>
|
|
59
|
+
<svg
|
|
60
|
+
fill="currentColor"
|
|
61
|
+
height="1em"
|
|
62
|
+
stroke="currentColor"
|
|
63
|
+
stroke-width="0"
|
|
64
|
+
viewBox="0 0 24 24"
|
|
65
|
+
width="1em"
|
|
66
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
67
|
+
>
|
|
68
|
+
<path
|
|
69
|
+
d="M0 0h24v24H0z"
|
|
70
|
+
fill="none"
|
|
71
|
+
/>
|
|
72
|
+
<path
|
|
73
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
|
|
74
|
+
/>
|
|
75
|
+
</svg>
|
|
76
|
+
</span>
|
|
56
77
|
</div>
|
|
57
78
|
</div>
|
|
58
79
|
</DocumentFragment>
|
|
@@ -167,6 +188,86 @@ exports[`component:<InputText> prop:multiLine 1`] = `
|
|
|
167
188
|
</DocumentFragment>
|
|
168
189
|
`;
|
|
169
190
|
|
|
191
|
+
exports[`component:<InputText> prop:showState (false) 1`] = `
|
|
192
|
+
<DocumentFragment>
|
|
193
|
+
<div
|
|
194
|
+
class="view inputContainer"
|
|
195
|
+
>
|
|
196
|
+
<div
|
|
197
|
+
class="view row inputBorder error"
|
|
198
|
+
>
|
|
199
|
+
<input
|
|
200
|
+
class="input input"
|
|
201
|
+
name="name"
|
|
202
|
+
type="text"
|
|
203
|
+
value=""
|
|
204
|
+
/>
|
|
205
|
+
<span
|
|
206
|
+
class="icon paragraph icon right error"
|
|
207
|
+
>
|
|
208
|
+
<svg
|
|
209
|
+
fill="currentColor"
|
|
210
|
+
height="1em"
|
|
211
|
+
stroke="currentColor"
|
|
212
|
+
stroke-width="0"
|
|
213
|
+
viewBox="0 0 24 24"
|
|
214
|
+
width="1em"
|
|
215
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
216
|
+
>
|
|
217
|
+
<path
|
|
218
|
+
d="M0 0h24v24H0z"
|
|
219
|
+
fill="none"
|
|
220
|
+
/>
|
|
221
|
+
<path
|
|
222
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
|
|
223
|
+
/>
|
|
224
|
+
</svg>
|
|
225
|
+
</span>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</DocumentFragment>
|
|
229
|
+
`;
|
|
230
|
+
|
|
231
|
+
exports[`component:<InputText> prop:success 1`] = `
|
|
232
|
+
<DocumentFragment>
|
|
233
|
+
<div
|
|
234
|
+
class="view inputContainer"
|
|
235
|
+
>
|
|
236
|
+
<div
|
|
237
|
+
class="view row inputBorder"
|
|
238
|
+
>
|
|
239
|
+
<input
|
|
240
|
+
class="input input"
|
|
241
|
+
name="name"
|
|
242
|
+
type="text"
|
|
243
|
+
value=""
|
|
244
|
+
/>
|
|
245
|
+
<span
|
|
246
|
+
class="icon paragraph icon right success"
|
|
247
|
+
>
|
|
248
|
+
<svg
|
|
249
|
+
fill="currentColor"
|
|
250
|
+
height="1em"
|
|
251
|
+
stroke="currentColor"
|
|
252
|
+
stroke-width="0"
|
|
253
|
+
viewBox="0 0 24 24"
|
|
254
|
+
width="1em"
|
|
255
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
256
|
+
>
|
|
257
|
+
<path
|
|
258
|
+
d="M0 0h24v24H0z"
|
|
259
|
+
fill="none"
|
|
260
|
+
/>
|
|
261
|
+
<path
|
|
262
|
+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
|
263
|
+
/>
|
|
264
|
+
</svg>
|
|
265
|
+
</span>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
</DocumentFragment>
|
|
269
|
+
`;
|
|
270
|
+
|
|
170
271
|
exports[`component:<InputText> prop:type 1`] = `
|
|
171
272
|
<DocumentFragment>
|
|
172
273
|
<div
|
|
@@ -217,6 +318,46 @@ exports[`component:<InputText> prop:type 1`] = `
|
|
|
217
318
|
</DocumentFragment>
|
|
218
319
|
`;
|
|
219
320
|
|
|
321
|
+
exports[`component:<InputText> prop:warning 1`] = `
|
|
322
|
+
<DocumentFragment>
|
|
323
|
+
<div
|
|
324
|
+
class="view inputContainer"
|
|
325
|
+
>
|
|
326
|
+
<div
|
|
327
|
+
class="view row inputBorder"
|
|
328
|
+
>
|
|
329
|
+
<input
|
|
330
|
+
class="input input"
|
|
331
|
+
name="name"
|
|
332
|
+
type="text"
|
|
333
|
+
value=""
|
|
334
|
+
/>
|
|
335
|
+
<span
|
|
336
|
+
class="icon paragraph icon right warning"
|
|
337
|
+
>
|
|
338
|
+
<svg
|
|
339
|
+
fill="currentColor"
|
|
340
|
+
height="1em"
|
|
341
|
+
stroke="currentColor"
|
|
342
|
+
stroke-width="0"
|
|
343
|
+
viewBox="0 0 24 24"
|
|
344
|
+
width="1em"
|
|
345
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
346
|
+
>
|
|
347
|
+
<path
|
|
348
|
+
d="M0 0h24v24H0z"
|
|
349
|
+
fill="none"
|
|
350
|
+
/>
|
|
351
|
+
<path
|
|
352
|
+
d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
|
|
353
|
+
/>
|
|
354
|
+
</svg>
|
|
355
|
+
</span>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</DocumentFragment>
|
|
359
|
+
`;
|
|
360
|
+
|
|
220
361
|
exports[`component:<InputText> renders 1`] = `
|
|
221
362
|
<DocumentFragment>
|
|
222
363
|
<div
|
|
@@ -46,7 +46,11 @@ var Notification = function Notification(_ref) {
|
|
|
46
46
|
row: true,
|
|
47
47
|
className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, inline && _NotificationModule.default.inline, small && _NotificationModule.default.small, others.className)
|
|
48
48
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Icon, _extends({
|
|
49
|
-
name:
|
|
49
|
+
name: (0, _helpers.getIconName)({
|
|
50
|
+
error: error,
|
|
51
|
+
success: success,
|
|
52
|
+
warning: warning
|
|
53
|
+
})
|
|
50
54
|
}, textStyle)), /*#__PURE__*/_react.default.createElement(_primitives.Text, _extends({}, textStyle, {
|
|
51
55
|
className: (0, _helpers.styles)(_NotificationModule.default.text, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined)
|
|
52
56
|
}), children), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","small","success","warning","onClose","others","textStyle","headline","level","style","notification","undefined","outlined","className","text","pressable","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, inline = false, small, success, warning, onClose, ...others }) => {\n const textStyle = small ? { small: true } : { headline: true, level: 4 };\n\n return (\n <View\n {...others}\n row\n className={styles(\n style.notification,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n inline ? style.inline : style.outlined,\n inline && style.inline,\n small && style.small,\n others.className,\n )}\n >\n <Icon name={error
|
|
1
|
+
{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","small","success","warning","onClose","others","textStyle","headline","level","style","notification","undefined","outlined","className","text","pressable","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconName, styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, inline = false, small, success, warning, onClose, ...others }) => {\n const textStyle = small ? { small: true } : { headline: true, level: 4 };\n\n return (\n <View\n {...others}\n row\n className={styles(\n style.notification,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n inline ? style.inline : style.outlined,\n inline && style.inline,\n small && style.small,\n others.className,\n )}\n >\n <Icon name={getIconName({ error, success, warning })} {...textStyle} />\n <Text\n {...textStyle}\n className={styles(\n style.text,\n error ? style.error : warning ? style.warning : success ? style.success : undefined,\n )}\n >\n {children}\n </Text>\n {onClose && (\n <Pressable className={style.pressable} onPress={onClose}>\n <Icon name=\"Close\" {...textStyle} />\n </Pressable>\n )}\n </View>\n );\n};\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n children: PropTypes.string.isRequired,\n error: PropTypes.bool,\n inline: PropTypes.bool,\n small: PropTypes.bool,\n success: PropTypes.bool,\n warning: PropTypes.bool,\n onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAsF;EAAA,IAAnFC,QAAmF,QAAnFA,QAAmF;EAAA,IAAzEC,KAAyE,QAAzEA,KAAyE;EAAA,uBAAlEC,MAAkE;EAAA,IAAlEA,MAAkE,4BAAzD,KAAyD;EAAA,IAAlDC,KAAkD,QAAlDA,KAAkD;EAAA,IAA3CC,OAA2C,QAA3CA,OAA2C;EAAA,IAAlCC,OAAkC,QAAlCA,OAAkC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EACzG,IAAMC,SAAS,GAAGL,KAAK,GAAG;IAAEA,KAAK,EAAE;EAAT,CAAH,GAAqB;IAAEM,QAAQ,EAAE,IAAZ;IAAkBC,KAAK,EAAE;EAAzB,CAA5C;EAEA,oBACE,6BAAC,gBAAD,eACMH,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTI,4BAAMC,YADG,EAETX,KAAK,GAAGU,4BAAMV,KAAT,GAAiBI,OAAO,GAAGM,4BAAMN,OAAT,GAAmBD,OAAO,GAAGO,4BAAMP,OAAT,GAAmBS,SAFjE,EAGTX,MAAM,GAAGS,4BAAMT,MAAT,GAAkBS,4BAAMG,QAHrB,EAITZ,MAAM,IAAIS,4BAAMT,MAJP,EAKTC,KAAK,IAAIQ,4BAAMR,KALN,EAMTI,MAAM,CAACQ,SANE;EAHb,iBAYE,6BAAC,gBAAD;IAAM,IAAI,EAAE,0BAAY;MAAEd,KAAK,EAALA,KAAF;MAASG,OAAO,EAAPA,OAAT;MAAkBC,OAAO,EAAPA;IAAlB,CAAZ;EAAZ,GAA0DG,SAA1D,EAZF,eAaE,6BAAC,gBAAD,eACMA,SADN;IAEE,SAAS,EAAE,qBACTG,4BAAMK,IADG,EAETf,KAAK,GAAGU,4BAAMV,KAAT,GAAiBI,OAAO,GAAGM,4BAAMN,OAAT,GAAmBD,OAAO,GAAGO,4BAAMP,OAAT,GAAmBS,SAFjE;EAFb,IAOGb,QAPH,CAbF,EAsBGM,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEK,4BAAMM,SAA5B;IAAuC,OAAO,EAAEX;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,GAAuBE,SAAvB,EADF,CAvBJ,CADF;AA8BD,CAjCD;;;AAmCAT,YAAY,CAACmB,WAAb,GAA2B,wBAA3B;AAEAnB,YAAY,CAACoB,SAAb,GAAyB;EACvBnB,QAAQ,EAAEoB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBrB,KAAK,EAAEmB,mBAAUG,IAFM;EAGvBrB,MAAM,EAAEkB,mBAAUG,IAHK;EAIvBpB,KAAK,EAAEiB,mBAAUG,IAJM;EAKvBnB,OAAO,EAAEgB,mBAAUG,IALI;EAMvBlB,OAAO,EAAEe,mBAAUG,IANI;EAOvBjB,OAAO,EAAEc,mBAAUI;AAPI,CAAzB"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getIconName = void 0;
|
|
7
|
+
|
|
8
|
+
var getIconName = function getIconName() {
|
|
9
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
10
|
+
error = _ref.error,
|
|
11
|
+
success = _ref.success,
|
|
12
|
+
warning = _ref.warning;
|
|
13
|
+
|
|
14
|
+
return error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info';
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
exports.getIconName = getIconName;
|
|
18
|
+
//# sourceMappingURL=getIconName.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getIconName.js","names":["getIconName","error","success","warning"],"sources":["../../src/helpers/getIconName.js"],"sourcesContent":["export const getIconName = ({ error, success, warning } = {}) =>\n error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info';\n"],"mappings":";;;;;;;AAAO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,+EAA+B,EAA/B;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,IAAUC,OAAV,QAAUA,OAAV;EAAA,IAAmBC,OAAnB,QAAmBA,OAAnB;;EAAA,OACzBF,KAAK,GAAG,OAAH,GAAaE,OAAO,GAAG,SAAH,GAAeD,OAAO,GAAG,SAAH,GAAe,MADrC;AAAA,CAApB"}
|
package/build/helpers/index.js
CHANGED
|
@@ -4,6 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
+
var _getIconName = require("./getIconName");
|
|
8
|
+
|
|
9
|
+
Object.keys(_getIconName).forEach(function (key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
if (key in exports && exports[key] === _getIconName[key]) return;
|
|
12
|
+
Object.defineProperty(exports, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _getIconName[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
7
20
|
var _getInputDateErrors = require("./getInputDateErrors");
|
|
8
21
|
|
|
9
22
|
Object.keys(_getInputDateErrors).forEach(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/helpers/index.js"],"sourcesContent":["export * from './getInputDateErrors';\nexport * from './getInputErrors';\nexport * from './isJest';\nexport * from './styles';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/helpers/index.js"],"sourcesContent":["export * from './getIconName';\nexport * from './getInputDateErrors';\nexport * from './getInputErrors';\nexport * from './isJest';\nexport * from './styles';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -69,6 +69,11 @@
|
|
|
69
69
|
--mirai-ui-space-XL: 48px;
|
|
70
70
|
--mirai-ui-space-XXL: 64px;
|
|
71
71
|
|
|
72
|
+
/* breakpoints */
|
|
73
|
+
--mirai-ui-breakpoint-S: 430px;
|
|
74
|
+
--mirai-ui-breakpoint-M: 768px;
|
|
75
|
+
/* --mirai-ui-breakpoint-L: 769px; */
|
|
76
|
+
|
|
72
77
|
/* motion */
|
|
73
78
|
--mirai-ui-motion-collapse: 200ms;
|
|
74
79
|
--mirai-ui-motion-expand: 300ms;
|
|
@@ -142,7 +147,6 @@
|
|
|
142
147
|
/* -- COMPONENTS ------------------------------------------------------------ */
|
|
143
148
|
/* ------------- ------------------------------------------------------------ */
|
|
144
149
|
:root {
|
|
145
|
-
/* Button */
|
|
146
150
|
--mirai-ui-button-background: var(--mirai-ui-accent);
|
|
147
151
|
--mirai-ui-button-busy-width: 0%;
|
|
148
152
|
--mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
|