@mirai/ui 1.0.153 → 1.0.154
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/README.md
CHANGED
|
@@ -236,6 +236,7 @@ const MyComponent = ({ isDesktop }) => (
|
|
|
236
236
|
### Select
|
|
237
237
|
|
|
238
238
|
This primitive returns a select element and receives the following props:
|
|
239
|
+
|
|
239
240
|
- `disabled:boolean` applying 'disabled' attribute
|
|
240
241
|
- `emptyOption:string` label for the empty default value (e.g. 'Select an option')
|
|
241
242
|
- `options:string[]` select options text and values
|
|
@@ -255,13 +256,15 @@ const Example = (props) => {
|
|
|
255
256
|
setValue(next);
|
|
256
257
|
};
|
|
257
258
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
return (
|
|
260
|
+
<Select
|
|
261
|
+
emptyOption="Select one option..."
|
|
262
|
+
name="Select"
|
|
261
263
|
options={['foo', 'bar']}
|
|
262
|
-
value={value}
|
|
264
|
+
value={value}
|
|
263
265
|
onChange={handleChange}
|
|
264
|
-
|
|
266
|
+
/>
|
|
267
|
+
);
|
|
265
268
|
};
|
|
266
269
|
```
|
|
267
270
|
|
|
@@ -528,10 +531,10 @@ Component that unites various inputs of different types into a single form. It r
|
|
|
528
531
|
- `showErrors:boolean` indicates whether to display the validation errors for the form fields
|
|
529
532
|
- `tag:string` HTML tag name to be used for rendering the form element ('form' by default)
|
|
530
533
|
- `validateOnMount:boolean` indicates whether to perform validation on form mount
|
|
531
|
-
- `onBlur:function` executed when a form field loses focus
|
|
532
534
|
- `onChange:function` executed when any field value changes
|
|
535
|
+
- `onEnter:function` when a form field gets focus
|
|
533
536
|
- `onError:function` executed when one or more fields have errors
|
|
534
|
-
- `
|
|
537
|
+
- `onLeave:function` executed when a form field loses focus
|
|
535
538
|
- `onSubmit:function` executed when the form is submitted
|
|
536
539
|
|
|
537
540
|
```jsx
|
|
@@ -545,54 +548,50 @@ const Example = (props) => {
|
|
|
545
548
|
});
|
|
546
549
|
const [error, setError] = useState({});
|
|
547
550
|
|
|
548
|
-
const
|
|
551
|
+
const handleChange = (next, ...others) => setForm(next);
|
|
549
552
|
|
|
550
|
-
const
|
|
551
|
-
setForm(next);
|
|
552
|
-
};
|
|
553
|
+
const handleEnter = (...others) => console.log('<Form>::onEnter', ...others);
|
|
553
554
|
|
|
554
|
-
const handleError = (next, ...others) =>
|
|
555
|
-
setError(next);
|
|
556
|
-
};
|
|
555
|
+
const handleError = (next, ...others) => setError(next);
|
|
557
556
|
|
|
558
|
-
const
|
|
557
|
+
const handleLeave = (...others) => console.log('<Form>::onLeave', ...others);
|
|
559
558
|
|
|
560
559
|
const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);
|
|
561
560
|
|
|
562
561
|
return (
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
562
|
+
<Form
|
|
563
|
+
{...props}
|
|
564
|
+
onChange={handleChange}
|
|
565
|
+
onEnter={handleEnter}
|
|
566
|
+
onError={handleError}
|
|
567
|
+
onLeave={handleLeave}
|
|
568
|
+
onSubmit={handleSubmit}
|
|
569
|
+
>
|
|
570
|
+
<InputText
|
|
571
|
+
name="email"
|
|
572
|
+
error={!!error.email}
|
|
573
|
+
test={(value) => value.includes('@mirai.com')}
|
|
574
|
+
label="Email"
|
|
575
|
+
hint="Should contains @mirai.com"
|
|
576
|
+
required
|
|
577
|
+
type="email"
|
|
578
|
+
value={form.email}
|
|
579
|
+
/>
|
|
580
|
+
<InputDate
|
|
581
|
+
name="dateOfBirth"
|
|
582
|
+
error={!!error.dateOfBirth}
|
|
583
|
+
label="Your birthdate"
|
|
584
|
+
max="31/12/2022"
|
|
585
|
+
min="10/04/1980"
|
|
586
|
+
required
|
|
587
|
+
type="inputDate"
|
|
588
|
+
value={form.dateOfBirth}
|
|
589
|
+
/>
|
|
590
|
+
|
|
591
|
+
<Button disabled={Object.keys(error).length !== 0} type="submit" wide>
|
|
592
|
+
Submit
|
|
593
|
+
</Button>
|
|
594
|
+
</Form>
|
|
596
595
|
);
|
|
597
596
|
};
|
|
598
597
|
```
|
|
@@ -623,9 +622,9 @@ const Example = ({ value: propValue, ...props }) => {
|
|
|
623
622
|
|
|
624
623
|
return (
|
|
625
624
|
<InputDate
|
|
626
|
-
format=
|
|
627
|
-
min=
|
|
628
|
-
max=
|
|
625
|
+
format="MM/DD/YYYY"
|
|
626
|
+
min="03/20/2023"
|
|
627
|
+
max="03/20/2028"
|
|
629
628
|
value={value}
|
|
630
629
|
onChange={handleChange}
|
|
631
630
|
onError={handleError}
|
|
@@ -766,10 +765,10 @@ export const Story = (props) => {
|
|
|
766
765
|
|
|
767
766
|
return (
|
|
768
767
|
<InputPhone
|
|
769
|
-
hint=
|
|
770
|
-
label=
|
|
771
|
-
labelPrefix=
|
|
772
|
-
name=
|
|
768
|
+
hint="hint"
|
|
769
|
+
label="Phone Number"
|
|
770
|
+
labelPrefix="Code"
|
|
771
|
+
name="name"
|
|
773
772
|
prefixes={['+34', '+44', '+001', '+999', '+39', '+56']}
|
|
774
773
|
required
|
|
775
774
|
value={value}
|
|
@@ -787,7 +786,7 @@ A select input component that receives the following props:
|
|
|
787
786
|
- `disabled:boolean` applying 'disabled' attribute
|
|
788
787
|
- `error:boolean` indicating whether there is an error in the input
|
|
789
788
|
- `hint:string` text with additional info to be displayed below the input
|
|
790
|
-
- `label:string` label text
|
|
789
|
+
- `label:string` label text
|
|
791
790
|
- `name:string` - required prop, input name
|
|
792
791
|
- `showRequired:boolean` indicating whether the "required" indicator should be shown
|
|
793
792
|
- `showState:boolean` indicating whether to show the state icons for errors, success, and warning
|
|
@@ -811,16 +810,18 @@ const Example = (props) => {
|
|
|
811
810
|
const handleEnter = (...others) => console.log('<InputSelect>::onEnter', ...others);
|
|
812
811
|
const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);
|
|
813
812
|
|
|
814
|
-
return (
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
813
|
+
return (
|
|
814
|
+
<InputSelect
|
|
815
|
+
hint="hint"
|
|
816
|
+
label="label"
|
|
817
|
+
name="name"
|
|
818
|
+
options={['one', 'two', 'three', 'four', 'five']}
|
|
819
|
+
value={value}
|
|
820
|
+
onChange={handleChange}
|
|
821
|
+
onEnter={handleEnter}
|
|
822
|
+
onLeave={handleLeave}
|
|
823
|
+
/>
|
|
824
|
+
);
|
|
824
825
|
};
|
|
825
826
|
```
|
|
826
827
|
|
|
@@ -993,16 +994,10 @@ A component that displays a notification message with optional icons and close b
|
|
|
993
994
|
import { Notification } from '@mirai/ui';
|
|
994
995
|
|
|
995
996
|
const Example = (props) => (
|
|
996
|
-
<Notification
|
|
997
|
-
error
|
|
998
|
-
large
|
|
999
|
-
wide
|
|
1000
|
-
onClose={() => console.log('Closing...')}
|
|
1001
|
-
>
|
|
997
|
+
<Notification error large wide onClose={() => console.log('Closing...')}>
|
|
1002
998
|
Something went wrong...
|
|
1003
999
|
</Notification>
|
|
1004
|
-
)
|
|
1005
|
-
;
|
|
1000
|
+
);
|
|
1006
1001
|
```
|
|
1007
1002
|
|
|
1008
1003
|
### Progress
|
|
@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _Form = require("./Form.constants");
|
|
11
11
|
var _helpers = require("./helpers");
|
|
12
|
-
var _excluded = ["children", "debounce", "schema", "showErrors", "tag", "validateOnMount", "
|
|
12
|
+
var _excluded = ["children", "debounce", "schema", "showErrors", "tag", "validateOnMount", "onChange", "onEnter", "onError", "onLeave", "onSubmit"];
|
|
13
13
|
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); }
|
|
14
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -37,10 +37,10 @@ var Form = function Form(_ref) {
|
|
|
37
37
|
tag = _ref$tag === void 0 ? 'form' : _ref$tag,
|
|
38
38
|
_ref$validateOnMount = _ref.validateOnMount,
|
|
39
39
|
validateOnMount = _ref$validateOnMount === void 0 ? false : _ref$validateOnMount,
|
|
40
|
-
onBlur = _ref.onBlur,
|
|
41
40
|
onChange = _ref.onChange,
|
|
41
|
+
onEnter = _ref.onEnter,
|
|
42
42
|
onError = _ref.onError,
|
|
43
|
-
|
|
43
|
+
onLeave = _ref.onLeave,
|
|
44
44
|
onSubmit = _ref.onSubmit,
|
|
45
45
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
46
46
|
var _useState = (0, _react.useState)({}),
|
|
@@ -130,9 +130,9 @@ var Form = function Form(_ref) {
|
|
|
130
130
|
hasError: hasError
|
|
131
131
|
};
|
|
132
132
|
};
|
|
133
|
-
var
|
|
133
|
+
var handleLeave = function handleLeave(field, event) {
|
|
134
134
|
setTouched(_objectSpread(_objectSpread({}, touched), {}, _defineProperty({}, field, true)));
|
|
135
|
-
if (
|
|
135
|
+
if (onEnter) onEnter(field, event);
|
|
136
136
|
};
|
|
137
137
|
var handleSubmit = function handleSubmit(event) {
|
|
138
138
|
var _handleError = handleError(values),
|
|
@@ -163,13 +163,13 @@ var Form = function Form(_ref) {
|
|
|
163
163
|
key: index
|
|
164
164
|
}, field ? _objectSpread(_objectSpread(_objectSpread({}, props), schema[field]), {}, (_objectSpread4 = {
|
|
165
165
|
error: !_Form.FIELDS_WITHOUT_ERRORS.includes(displayName) ? props.error || showErrors && error[field] : undefined
|
|
166
|
-
}, _defineProperty(_objectSpread4, _Form.FIELDS_BOOLEAN.includes(displayName) ? 'checked' : 'value', values[field]), _defineProperty(_objectSpread4, "
|
|
167
|
-
return onBlur(field, event);
|
|
168
|
-
} : undefined), _defineProperty(_objectSpread4, "onChange", function onChange(value) {
|
|
166
|
+
}, _defineProperty(_objectSpread4, _Form.FIELDS_BOOLEAN.includes(displayName) ? 'checked' : 'value', values[field]), _defineProperty(_objectSpread4, "onChange", function onChange(value) {
|
|
169
167
|
return handleChange(field, value);
|
|
170
|
-
}), _defineProperty(_objectSpread4, "
|
|
171
|
-
return
|
|
172
|
-
}), _objectSpread4
|
|
168
|
+
}), _defineProperty(_objectSpread4, "onEnter", function onEnter(event) {
|
|
169
|
+
return handleLeave(field, event);
|
|
170
|
+
}), _defineProperty(_objectSpread4, "onLeave", onLeave ? function (event) {
|
|
171
|
+
return onLeave(field, event);
|
|
172
|
+
} : undefined), _objectSpread4)) : type === 'submit' ? _objectSpread(_objectSpread({}, props), {}, {
|
|
173
173
|
onPress: handleSubmit
|
|
174
174
|
}) : undefined));
|
|
175
175
|
}));
|
|
@@ -186,10 +186,10 @@ Form.propTypes = {
|
|
|
186
186
|
showErrors: _propTypes.default.bool,
|
|
187
187
|
tag: _propTypes.default.string,
|
|
188
188
|
validateOnMount: _propTypes.default.bool,
|
|
189
|
-
onBlur: _propTypes.default.func,
|
|
190
189
|
onChange: _propTypes.default.func,
|
|
190
|
+
onEnter: _propTypes.default.func,
|
|
191
191
|
onError: _propTypes.default.func,
|
|
192
|
-
|
|
192
|
+
onLeave: _propTypes.default.func,
|
|
193
193
|
onSubmit: _propTypes.default.func
|
|
194
194
|
};
|
|
195
195
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","names":["Form","children","debounce","DEFAULT_TIMEOUT_ONCHANGE","schema","showErrors","tag","validateOnMount","onBlur","onChange","onError","onFocus","onSubmit","others","useState","error","setError","initialValue","setInitialValue","touched","setTouched","values","setValues","useEffect","nextValues","getChildrenValues","nextChildrenKeys","Object","keys","sort","length","JSON","stringify","nextError","getChildrenErrors","collision","some","key","groupState","value","timer","setTimeout","clearTimeout","handleChange","field","fieldValue","handleError","DEFAULT_TIMEOUT_ONERROR","hasError","changed","errors","handleFocus","event","handleSubmit","preventDefault","useMemo","React","createElement","Children","map","child","index","props","type","displayName","getField","cloneElement","FIELDS_WITHOUT_ERRORS","includes","undefined","FIELDS_BOOLEAN","onPress","propTypes","PropTypes","node","number","shape","bool","string","func"],"sources":["../../../src/components/Form/Form.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport {\n DEFAULT_TIMEOUT_ONCHANGE,\n DEFAULT_TIMEOUT_ONERROR,\n FIELDS_BOOLEAN,\n FIELDS_WITHOUT_ERRORS,\n} from './Form.constants';\nimport { getChildrenErrors, getChildrenValues, getField, groupState } from './helpers';\n\nconst Form = ({\n children,\n debounce = DEFAULT_TIMEOUT_ONCHANGE,\n schema = {},\n showErrors,\n tag = 'form',\n validateOnMount = false,\n onBlur,\n onChange,\n onError,\n onFocus,\n onSubmit,\n ...others\n}) => {\n const [error, setError] = useState({});\n const [initialValue, setInitialValue] = useState({});\n const [touched, setTouched] = useState({});\n const [values, setValues] = useState({});\n\n useEffect(() => {\n const nextValues = getChildrenValues(children);\n const nextChildrenKeys = Object.keys(nextValues).sort();\n\n if (!Object.keys(nextValues).length) return;\n\n if (JSON.stringify(nextChildrenKeys) !== JSON.stringify(Object.keys(initialValue).sort())) {\n setInitialValue(nextValues);\n setValues(nextValues);\n\n if (validateOnMount) {\n const nextError = getChildrenErrors({ children, schema, values: nextValues });\n setError(nextError);\n onError && onError(nextError);\n } else {\n setError({});\n }\n setTouched({});\n } else {\n const collision = nextChildrenKeys.some((key) => JSON.stringify(values[key]) !== JSON.stringify(nextValues[key]));\n if (collision) setValues(nextValues);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children]);\n\n useEffect(() => {\n if (!onChange || values === initialValue || !Object.keys(values).length) return;\n\n if (!debounce) return onChange(values, groupState({ initialValue, value: values, touched }));\n\n const timer = setTimeout(() => onChange(values, groupState({ initialValue, value: values, touched })), debounce);\n return () => clearTimeout(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [values]);\n\n const handleChange = (field, fieldValue) => {\n const nextValues = { ...values, [field]: fieldValue };\n\n setValues(nextValues);\n setTimeout(() => handleError(nextValues), DEFAULT_TIMEOUT_ONERROR);\n };\n\n const handleError = (values) => {\n const nextError = getChildrenErrors({ children, schema, values });\n const hasError = Object.keys(nextError).length > 0;\n const changed = JSON.stringify(error) !== JSON.stringify(nextError);\n\n if (changed) {\n setError(nextError);\n onError && onError(nextError, hasError);\n }\n\n return { changed, errors: nextError, hasError };\n };\n\n const handleFocus = (field, event) => {\n setTouched({ ...touched, [field]: true });\n if (onFocus) onFocus(field, event);\n };\n\n const handleSubmit = (event) => {\n const { errors, hasError } = handleError(values);\n\n if (hasError && onError) onError(errors, hasError);\n else if (onSubmit) onSubmit(values, groupState({ initialValue, value: values, touched }), event);\n event.preventDefault();\n };\n\n return useMemo(\n () =>\n React.createElement(\n tag,\n { ...others, onSubmit: handleSubmit },\n React.Children.map(children, (child, index) => {\n if (!child || child === null) return;\n\n const { props = {}, type: { displayName } = {} } = child || {};\n const { type } = props;\n const field = getField(props);\n\n return React.cloneElement(child, {\n key: index,\n ...(field\n ? {\n ...props,\n ...schema[field],\n error: !FIELDS_WITHOUT_ERRORS.includes(displayName)\n ? props.error || (showErrors && error[field])\n : undefined,\n [FIELDS_BOOLEAN.includes(displayName) ? 'checked' : 'value']: values[field],\n onBlur: onBlur ? (event) => onBlur(field, event) : undefined,\n onChange: (value) => handleChange(field, value),\n onFocus: (event) => handleFocus(field, event),\n }\n : type === 'submit'\n ? { ...props, onPress: handleSubmit }\n : undefined),\n });\n }),\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [children, error, others, schema],\n );\n};\n\nForm.displayName = 'Component:Form';\n\nForm.propTypes = {\n children: PropTypes.node,\n debounce: PropTypes.number,\n schema: PropTypes.shape({}),\n showErrors: PropTypes.bool,\n tag: PropTypes.string,\n validateOnMount: PropTypes.bool,\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n onError: PropTypes.func,\n onFocus: PropTypes.func,\n onSubmit: PropTypes.func,\n};\n\nexport { Form };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Form.js","names":["Form","children","debounce","DEFAULT_TIMEOUT_ONCHANGE","schema","showErrors","tag","validateOnMount","onChange","onEnter","onError","onLeave","onSubmit","others","useState","error","setError","initialValue","setInitialValue","touched","setTouched","values","setValues","useEffect","nextValues","getChildrenValues","nextChildrenKeys","Object","keys","sort","length","JSON","stringify","nextError","getChildrenErrors","collision","some","key","groupState","value","timer","setTimeout","clearTimeout","handleChange","field","fieldValue","handleError","DEFAULT_TIMEOUT_ONERROR","hasError","changed","errors","handleLeave","event","handleSubmit","preventDefault","useMemo","React","createElement","Children","map","child","index","props","type","displayName","getField","cloneElement","FIELDS_WITHOUT_ERRORS","includes","undefined","FIELDS_BOOLEAN","onPress","propTypes","PropTypes","node","number","shape","bool","string","func"],"sources":["../../../src/components/Form/Form.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport {\n DEFAULT_TIMEOUT_ONCHANGE,\n DEFAULT_TIMEOUT_ONERROR,\n FIELDS_BOOLEAN,\n FIELDS_WITHOUT_ERRORS,\n} from './Form.constants';\nimport { getChildrenErrors, getChildrenValues, getField, groupState } from './helpers';\n\nconst Form = ({\n children,\n debounce = DEFAULT_TIMEOUT_ONCHANGE,\n schema = {},\n showErrors,\n tag = 'form',\n validateOnMount = false,\n onChange,\n onEnter,\n onError,\n onLeave,\n onSubmit,\n ...others\n}) => {\n const [error, setError] = useState({});\n const [initialValue, setInitialValue] = useState({});\n const [touched, setTouched] = useState({});\n const [values, setValues] = useState({});\n\n useEffect(() => {\n const nextValues = getChildrenValues(children);\n const nextChildrenKeys = Object.keys(nextValues).sort();\n\n if (!Object.keys(nextValues).length) return;\n\n if (JSON.stringify(nextChildrenKeys) !== JSON.stringify(Object.keys(initialValue).sort())) {\n setInitialValue(nextValues);\n setValues(nextValues);\n\n if (validateOnMount) {\n const nextError = getChildrenErrors({ children, schema, values: nextValues });\n setError(nextError);\n onError && onError(nextError);\n } else {\n setError({});\n }\n setTouched({});\n } else {\n const collision = nextChildrenKeys.some((key) => JSON.stringify(values[key]) !== JSON.stringify(nextValues[key]));\n if (collision) setValues(nextValues);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children]);\n\n useEffect(() => {\n if (!onChange || values === initialValue || !Object.keys(values).length) return;\n\n if (!debounce) return onChange(values, groupState({ initialValue, value: values, touched }));\n\n const timer = setTimeout(() => onChange(values, groupState({ initialValue, value: values, touched })), debounce);\n return () => clearTimeout(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [values]);\n\n const handleChange = (field, fieldValue) => {\n const nextValues = { ...values, [field]: fieldValue };\n\n setValues(nextValues);\n setTimeout(() => handleError(nextValues), DEFAULT_TIMEOUT_ONERROR);\n };\n\n const handleError = (values) => {\n const nextError = getChildrenErrors({ children, schema, values });\n const hasError = Object.keys(nextError).length > 0;\n const changed = JSON.stringify(error) !== JSON.stringify(nextError);\n\n if (changed) {\n setError(nextError);\n onError && onError(nextError, hasError);\n }\n\n return { changed, errors: nextError, hasError };\n };\n\n const handleLeave = (field, event) => {\n setTouched({ ...touched, [field]: true });\n if (onEnter) onEnter(field, event);\n };\n\n const handleSubmit = (event) => {\n const { errors, hasError } = handleError(values);\n\n if (hasError && onError) onError(errors, hasError);\n else if (onSubmit) onSubmit(values, groupState({ initialValue, value: values, touched }), event);\n event.preventDefault();\n };\n\n return useMemo(\n () =>\n React.createElement(\n tag,\n { ...others, onSubmit: handleSubmit },\n React.Children.map(children, (child, index) => {\n if (!child || child === null) return;\n\n const { props = {}, type: { displayName } = {} } = child || {};\n const { type } = props;\n const field = getField(props);\n\n return React.cloneElement(child, {\n key: index,\n ...(field\n ? {\n ...props,\n ...schema[field],\n error: !FIELDS_WITHOUT_ERRORS.includes(displayName)\n ? props.error || (showErrors && error[field])\n : undefined,\n [FIELDS_BOOLEAN.includes(displayName) ? 'checked' : 'value']: values[field],\n onChange: (value) => handleChange(field, value),\n onEnter: (event) => handleLeave(field, event),\n onLeave: onLeave ? (event) => onLeave(field, event) : undefined,\n }\n : type === 'submit'\n ? { ...props, onPress: handleSubmit }\n : undefined),\n });\n }),\n ),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [children, error, others, schema],\n );\n};\n\nForm.displayName = 'Component:Form';\n\nForm.propTypes = {\n children: PropTypes.node,\n debounce: PropTypes.number,\n schema: PropTypes.shape({}),\n showErrors: PropTypes.bool,\n tag: PropTypes.string,\n validateOnMount: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onError: PropTypes.func,\n onLeave: PropTypes.func,\n onSubmit: PropTypes.func,\n};\n\nexport { Form };\n"],"mappings":"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"}
|
|
@@ -54,20 +54,20 @@ var Story = function Story(props) {
|
|
|
54
54
|
});
|
|
55
55
|
}, []); // * Simulate a state hydration
|
|
56
56
|
|
|
57
|
-
var
|
|
57
|
+
var handleChange = function handleChange(next) {
|
|
58
58
|
var _console;
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
setForm(next);
|
|
60
|
+
for (var _len = arguments.length, others = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
61
|
+
others[_key - 1] = arguments[_key];
|
|
61
62
|
}
|
|
62
|
-
|
|
63
|
+
(_console = console).log.apply(_console, ['<Form>::onChange', next].concat(others));
|
|
63
64
|
};
|
|
64
|
-
var
|
|
65
|
+
var handleEnter = function handleEnter() {
|
|
65
66
|
var _console2;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
others[_key2 - 1] = arguments[_key2];
|
|
67
|
+
for (var _len2 = arguments.length, others = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
68
|
+
others[_key2] = arguments[_key2];
|
|
69
69
|
}
|
|
70
|
-
(_console2 = console).log.apply(_console2, ['<Form>::
|
|
70
|
+
return (_console2 = console).log.apply(_console2, ['<Form>::onEnter'].concat(others));
|
|
71
71
|
};
|
|
72
72
|
var handleError = function handleError(next) {
|
|
73
73
|
var _console3;
|
|
@@ -77,12 +77,12 @@ var Story = function Story(props) {
|
|
|
77
77
|
}
|
|
78
78
|
(_console3 = console).log.apply(_console3, ['<Form>::onError', next].concat(others));
|
|
79
79
|
};
|
|
80
|
-
var
|
|
80
|
+
var handleLeave = function handleLeave() {
|
|
81
81
|
var _console4;
|
|
82
82
|
for (var _len4 = arguments.length, others = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
83
83
|
others[_key4] = arguments[_key4];
|
|
84
84
|
}
|
|
85
|
-
return (_console4 = console).log.apply(_console4, ['<Form>::
|
|
85
|
+
return (_console4 = console).log.apply(_console4, ['<Form>::onLeave'].concat(others));
|
|
86
86
|
};
|
|
87
87
|
var handleSubmit = function handleSubmit() {
|
|
88
88
|
var _console5;
|
|
@@ -92,10 +92,10 @@ var Story = function Story(props) {
|
|
|
92
92
|
return (_console5 = console).log.apply(_console5, ['<Form>::onSubmit'].concat(others));
|
|
93
93
|
};
|
|
94
94
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Form.Form, _extends({}, props, {
|
|
95
|
-
|
|
95
|
+
onLeave: handleLeave,
|
|
96
96
|
onChange: handleChange,
|
|
97
97
|
onError: handleError,
|
|
98
|
-
|
|
98
|
+
onEnter: handleEnter,
|
|
99
99
|
onSubmit: handleSubmit
|
|
100
100
|
}), /*#__PURE__*/_react.default.createElement(_.View, {
|
|
101
101
|
row: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.stories.js","names":["title","Story","props","useState","condition","setCondition","email","checkbox","dateOfBirth","switch","radio","form","setForm","error","setError","useEffect","
|
|
1
|
+
{"version":3,"file":"Form.stories.js","names":["title","Story","props","useState","condition","setCondition","email","checkbox","dateOfBirth","switch","radio","form","setForm","error","setError","useEffect","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","handleSubmit","value","includes","password","emptyOption","gender","phone","bio","children","Array","from","keys","map","index","Object","length","justifyContent","marginTop","marginRight","storyName","args","debounce","schema","showErrors","validateOnMount","argTypes"],"sources":["../../../src/components/Form/Form.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputDate, InputNumber, InputOption, InputPhone, InputText, InputSelect, Text, View } from '../../';\nimport { Form } from './Form';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [condition, setCondition] = useState(false);\n const [form, setForm] = useState({\n email: 'javi@mirai.com',\n checkbox: true,\n dateOfBirth: '04/10/1980',\n switch: true,\n radio: 'radio-2',\n });\n const [error, setError] = useState({});\n\n useEffect(\n () =>\n setForm({\n email: 'javi@mirai.com',\n checkbox: true,\n dateOfBirth: '04/10/1980',\n switch: true,\n radio: 'radio-2',\n }),\n [],\n ); // * Simulate a state hydration\n\n const handleChange = (next, ...others) => {\n setForm(next);\n console.log('<Form>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<Form>::onEnter', ...others);\n\n const handleError = (next, ...others) => {\n setError(next);\n console.log('<Form>::onError', next, ...others);\n };\n\n const handleLeave = (...others) => console.log('<Form>::onLeave', ...others);\n\n const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);\n\n return (\n <>\n <Form\n {...props}\n onLeave={handleLeave}\n onChange={handleChange}\n onError={handleError}\n onEnter={handleEnter}\n onSubmit={handleSubmit}\n >\n <View row>\n <Text headline>Form component</Text>\n </View>\n\n <InputText\n name=\"email\"\n error={!!error.email}\n test={(value) => value.includes('@mirai.com')}\n label=\"Email\"\n hint=\"Should contains @mirai.com\"\n required\n type=\"email\"\n value={form.email}\n />\n <InputText\n name=\"password\"\n error={!!error.password}\n hint=\"At least 10 chars.\"\n label=\"Password\"\n required\n minLength={10}\n type=\"password\"\n value={form.password}\n />\n <InputSelect\n name=\"gender\"\n emptyOption=\"Select...\"\n error={!!error.emptyOption}\n label=\"Your gender\"\n options={['one', 'two', 'three', 'four', 'five']}\n value={form.gender}\n />\n <InputDate\n name=\"dateOfBirth\"\n error={!!error.dateOfBirth}\n label=\"Your birthdate\"\n max=\"31/12/2022\"\n min=\"10/04/1980\"\n required\n type=\"inputDate\"\n value={form.dateOfBirth}\n />\n <InputPhone\n name=\"phone\"\n error={!!error.phone}\n label=\"Phone\"\n labelPrefix=\"Prefix\"\n prefixes={['+34', '+44', '+001', '+999', '+39', '+56']}\n required\n type=\"inputPhone\"\n value={form.phone}\n />\n <InputText name=\"bio\" label=\"Bio\" multiLine value={form.bio} />\n <InputNumber name=\"children\" label=\"Children\" hint=\"Ages 0 - 17\" value={form.children} required />\n <InputOption type=\"checkbox\" name=\"checkbox\" label=\"checkbox\" checked={form.checkbox} required />\n <InputOption type=\"switch\" name=\"switch\" label=\"switch\" checked={form.switch} />\n {Array.from(Array(2).keys()).map((index) => (\n <InputOption\n key={index}\n type=\"radio\"\n name=\"radio\"\n value={`radio-${index}`}\n label={`radio-${index}`}\n checked={form.radio === `radio-${index}`}\n />\n ))}\n {condition && <InputText label=\"condition\" name=\"condition\" />}\n\n <Button disabled={Object.keys(error).length !== 0} type=\"submit\" wide>\n Submit\n </Button>\n </Form>\n\n <View row style={{ justifyContent: 'flex-end', marginTop: 'var(--mirai-ui-space-L)' }}>\n <Button small secondary onPress={() => setForm({})} style={{ marginRight: 'var(--mirai-ui-space-M)' }}>\n Reset\n </Button>\n <Button small secondary onPress={() => setCondition(!condition)}>\n {`${condition ? 'Hide' : 'Show'} dynamic field`}\n </Button>\n </View>\n </>\n );\n};\n\nStory.storyName = 'Form';\n\nStory.args = {\n debounce: 0,\n schema: {},\n showErrors: false,\n validateOnMount: false,\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
|