@mirai/ui 1.0.128 → 1.0.129
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/Form/Form.stories.js +15 -12
- package/build/components/Form/Form.stories.js.map +1 -1
- package/build/components/InputDate/InputDate.js +13 -8
- package/build/components/InputDate/InputDate.js.map +1 -1
- package/build/components/InputDate/InputDate.module.css +21 -4
- package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap +955 -618
- package/build/components/InputNumber/InputNumber.js +14 -9
- package/build/components/InputNumber/InputNumber.js.map +1 -1
- package/build/components/InputNumber/InputNumber.module.css +2 -6
- package/build/components/InputNumber/InputNumber.stories.js +1 -0
- package/build/components/InputNumber/InputNumber.stories.js.map +1 -1
- package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap +71 -4
- package/build/components/InputOption/InputOption.js +10 -4
- package/build/components/InputOption/InputOption.js.map +1 -1
- package/build/components/InputOption/InputOption.module.css +3 -7
- package/build/components/InputOption/InputOption.stories.js +1 -0
- package/build/components/InputOption/InputOption.stories.js.map +1 -1
- package/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap +9 -4
- package/build/components/InputPhone/InputPhone.js +1 -1
- package/build/components/InputPhone/InputPhone.js.map +1 -1
- package/build/components/InputPhone/InputPhone.module.css +2 -2
- package/build/components/InputText/InputText.module.css +4 -4
- package/build/components/InputText/partials/InputText.Label.js +3 -2
- package/build/components/InputText/partials/InputText.Label.js.map +1 -1
- package/package.json +1 -1
|
@@ -137,20 +137,32 @@ var Story = function Story(props) {
|
|
|
137
137
|
required: true,
|
|
138
138
|
type: "inputDate",
|
|
139
139
|
value: form.dateOfBirth
|
|
140
|
+
}), /*#__PURE__*/_react.default.createElement(_.InputPhone, {
|
|
141
|
+
name: "phone",
|
|
142
|
+
error: !!error.phone,
|
|
143
|
+
label: "Phone",
|
|
144
|
+
labelPrefix: "Prefix",
|
|
145
|
+
prefixes: ['+34', '+44', '+001', '+999', '+39', '+56'],
|
|
146
|
+
required: true,
|
|
147
|
+
type: "inputPhone",
|
|
148
|
+
value: form.phone
|
|
140
149
|
}), /*#__PURE__*/_react.default.createElement(_.InputText, {
|
|
141
150
|
name: "bio",
|
|
142
151
|
label: "Bio",
|
|
143
|
-
multiLine: true
|
|
152
|
+
multiLine: true,
|
|
153
|
+
value: form.bio
|
|
144
154
|
}), /*#__PURE__*/_react.default.createElement(_.InputNumber, {
|
|
145
155
|
name: "children",
|
|
146
156
|
label: "Children",
|
|
147
157
|
hint: "Ages 0 - 17",
|
|
148
|
-
value: form.children
|
|
158
|
+
value: form.children,
|
|
159
|
+
required: true
|
|
149
160
|
}), /*#__PURE__*/_react.default.createElement(_.InputOption, {
|
|
150
161
|
type: "checkbox",
|
|
151
162
|
name: "checkbox",
|
|
152
163
|
label: "checkbox",
|
|
153
|
-
checked: form.checkbox
|
|
164
|
+
checked: form.checkbox,
|
|
165
|
+
required: true
|
|
154
166
|
}), /*#__PURE__*/_react.default.createElement(_.InputOption, {
|
|
155
167
|
type: "switch",
|
|
156
168
|
name: "switch",
|
|
@@ -168,15 +180,6 @@ var Story = function Story(props) {
|
|
|
168
180
|
}), condition && /*#__PURE__*/_react.default.createElement(_.InputText, {
|
|
169
181
|
label: "condition",
|
|
170
182
|
name: "condition"
|
|
171
|
-
}), /*#__PURE__*/_react.default.createElement(_.InputPhone, {
|
|
172
|
-
error: !!error.phone,
|
|
173
|
-
label: "Phone",
|
|
174
|
-
labelPrefix: "Code",
|
|
175
|
-
name: "phone",
|
|
176
|
-
prefixes: ['+34', '+44', '+001', '+999', '+39', '+56'],
|
|
177
|
-
required: true,
|
|
178
|
-
type: "inputPhone",
|
|
179
|
-
value: form.phone
|
|
180
183
|
}), /*#__PURE__*/_react.default.createElement(_.Button, {
|
|
181
184
|
disabled: Object.keys(error).length !== 0,
|
|
182
185
|
type: "submit",
|
|
@@ -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","handleBlur","others","console","log","handleChange","next","handleError","handleFocus","handleSubmit","value","includes","password","emptyOption","gender","children","Array","from","keys","map","index","
|
|
1
|
+
{"version":3,"file":"Form.stories.js","names":["title","Story","props","useState","condition","setCondition","email","checkbox","dateOfBirth","switch","radio","form","setForm","error","setError","useEffect","handleBlur","others","console","log","handleChange","next","handleError","handleFocus","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 handleBlur = (...others) => console.log('<Form>::onBlur', ...others);\n\n const handleChange = (next, ...others) => {\n setForm(next);\n console.log('<Form>::onChange', next, ...others);\n };\n\n const handleError = (next, ...others) => {\n setError(next);\n console.log('<Form>::onError', next, ...others);\n };\n\n const handleFocus = (...others) => console.log('<Form>::onFocus', ...others);\n\n const handleSubmit = (...others) => console.log('<Form>::onSubmit', ...others);\n\n return (\n <>\n <Form\n {...props}\n onBlur={handleBlur}\n onChange={handleChange}\n onError={handleError}\n onFocus={handleFocus}\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":";;;;;;;AAAA;AAEA;AACA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAAkC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA1CC,SAAS;IAAEC,YAAY;EAC9B,iBAAwB,IAAAF,eAAQ,EAAC;MAC/BG,KAAK,EAAE,gBAAgB;MACvBC,QAAQ,EAAE,IAAI;MACdC,WAAW,EAAE,YAAY;MACzBC,MAAM,EAAE,IAAI;MACZC,KAAK,EAAE;IACT,CAAC,CAAC;IAAA;IANKC,IAAI;IAAEC,OAAO;EAOpB,iBAA0B,IAAAT,eAAQ,EAAC,CAAC,CAAC,CAAC;IAAA;IAA/BU,KAAK;IAAEC,QAAQ;EAEtB,IAAAC,gBAAS,EACP;IAAA,OACEH,OAAO,CAAC;MACNN,KAAK,EAAE,gBAAgB;MACvBC,QAAQ,EAAE,IAAI;MACdC,WAAW,EAAE,YAAY;MACzBC,MAAM,EAAE,IAAI;MACZC,KAAK,EAAE;IACT,CAAC,CAAC;EAAA,GACJ,EAAE,CACH,CAAC,CAAC;;EAEH,IAAMM,UAAU,GAAG,SAAbA,UAAU;IAAA;IAAA,kCAAOC,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,gBAAgB,SAAKF,MAAM,EAAC;EAAA;EAE1E,IAAMG,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCT,OAAO,CAACS,IAAI,CAAC;IAAC,mCADeJ,MAAM;MAANA,MAAM;IAAA;IAEnC,aAAAC,OAAO,EAACC,GAAG,mBAAC,kBAAkB,EAAEE,IAAI,SAAKJ,MAAM,EAAC;EAClD,CAAC;EAED,IAAMK,WAAW,GAAG,SAAdA,WAAW,CAAID,IAAI,EAAgB;IAAA;IACvCP,QAAQ,CAACO,IAAI,CAAC;IAAC,mCADaJ,MAAM;MAANA,MAAM;IAAA;IAElC,aAAAC,OAAO,EAACC,GAAG,mBAAC,iBAAiB,EAAEE,IAAI,SAAKJ,MAAM,EAAC;EACjD,CAAC;EAED,IAAMM,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAON,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,iBAAiB,SAAKF,MAAM,EAAC;EAAA;EAE5E,IAAMO,YAAY,GAAG,SAAfA,YAAY;IAAA;IAAA,mCAAOP,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,kBAAkB,SAAKF,MAAM,EAAC;EAAA;EAE9E,oBACE,yEACE,6BAAC,UAAI,eACCf,KAAK;IACT,MAAM,EAAEc,UAAW;IACnB,QAAQ,EAAEI,YAAa;IACvB,OAAO,EAAEE,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,QAAQ,EAAEC;EAAa,iBAEvB,6BAAC,MAAI;IAAC,GAAG;EAAA,gBACP,6BAAC,MAAI;IAAC,QAAQ;EAAA,oBAAsB,CAC/B,eAEP,6BAAC,WAAS;IACR,IAAI,EAAC,OAAO;IACZ,KAAK,EAAE,CAAC,CAACX,KAAK,CAACP,KAAM;IACrB,IAAI,EAAE,cAACmB,KAAK;MAAA,OAAKA,KAAK,CAACC,QAAQ,CAAC,YAAY,CAAC;IAAA,CAAC;IAC9C,KAAK,EAAC,OAAO;IACb,IAAI,EAAC,4BAA4B;IACjC,QAAQ;IACR,IAAI,EAAC,OAAO;IACZ,KAAK,EAAEf,IAAI,CAACL;EAAM,EAClB,eACF,6BAAC,WAAS;IACR,IAAI,EAAC,UAAU;IACf,KAAK,EAAE,CAAC,CAACO,KAAK,CAACc,QAAS;IACxB,IAAI,EAAC,oBAAoB;IACzB,KAAK,EAAC,UAAU;IAChB,QAAQ;IACR,SAAS,EAAE,EAAG;IACd,IAAI,EAAC,UAAU;IACf,KAAK,EAAEhB,IAAI,CAACgB;EAAS,EACrB,eACF,6BAAC,aAAW;IACV,IAAI,EAAC,QAAQ;IACb,WAAW,EAAC,WAAW;IACvB,KAAK,EAAE,CAAC,CAACd,KAAK,CAACe,WAAY;IAC3B,KAAK,EAAC,aAAa;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAE;IACjD,KAAK,EAAEjB,IAAI,CAACkB;EAAO,EACnB,eACF,6BAAC,WAAS;IACR,IAAI,EAAC,aAAa;IAClB,KAAK,EAAE,CAAC,CAAChB,KAAK,CAACL,WAAY;IAC3B,KAAK,EAAC,gBAAgB;IACtB,GAAG,EAAC,YAAY;IAChB,GAAG,EAAC,YAAY;IAChB,QAAQ;IACR,IAAI,EAAC,WAAW;IAChB,KAAK,EAAEG,IAAI,CAACH;EAAY,EACxB,eACF,6BAAC,YAAU;IACT,IAAI,EAAC,OAAO;IACZ,KAAK,EAAE,CAAC,CAACK,KAAK,CAACiB,KAAM;IACrB,KAAK,EAAC,OAAO;IACb,WAAW,EAAC,QAAQ;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAE;IACvD,QAAQ;IACR,IAAI,EAAC,YAAY;IACjB,KAAK,EAAEnB,IAAI,CAACmB;EAAM,EAClB,eACF,6BAAC,WAAS;IAAC,IAAI,EAAC,KAAK;IAAC,KAAK,EAAC,KAAK;IAAC,SAAS;IAAC,KAAK,EAAEnB,IAAI,CAACoB;EAAI,EAAG,eAC/D,6BAAC,aAAW;IAAC,IAAI,EAAC,UAAU;IAAC,KAAK,EAAC,UAAU;IAAC,IAAI,EAAC,aAAa;IAAC,KAAK,EAAEpB,IAAI,CAACqB,QAAS;IAAC,QAAQ;EAAA,EAAG,eAClG,6BAAC,aAAW;IAAC,IAAI,EAAC,UAAU;IAAC,IAAI,EAAC,UAAU;IAAC,KAAK,EAAC,UAAU;IAAC,OAAO,EAAErB,IAAI,CAACJ,QAAS;IAAC,QAAQ;EAAA,EAAG,eACjG,6BAAC,aAAW;IAAC,IAAI,EAAC,QAAQ;IAAC,IAAI,EAAC,QAAQ;IAAC,KAAK,EAAC,QAAQ;IAAC,OAAO,EAAEI,IAAI,CAACF;EAAO,EAAG,EAC/EwB,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,CAAC,CAAC,CAACE,IAAI,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,KAAK;IAAA,oBACrC,6BAAC,aAAW;MACV,GAAG,EAAEA,KAAM;MACX,IAAI,EAAC,OAAO;MACZ,IAAI,EAAC,OAAO;MACZ,KAAK,kBAAWA,KAAK,CAAG;MACxB,KAAK,kBAAWA,KAAK,CAAG;MACxB,OAAO,EAAE1B,IAAI,CAACD,KAAK,qBAAc2B,KAAK;IAAG,EACzC;EAAA,CACH,CAAC,EACDjC,SAAS,iBAAI,6BAAC,WAAS;IAAC,KAAK,EAAC,WAAW;IAAC,IAAI,EAAC;EAAW,EAAG,eAE9D,6BAAC,QAAM;IAAC,QAAQ,EAAEkC,MAAM,CAACH,IAAI,CAACtB,KAAK,CAAC,CAAC0B,MAAM,KAAK,CAAE;IAAC,IAAI,EAAC,QAAQ;IAAC,IAAI;EAAA,YAE5D,CACJ,eAEP,6BAAC,MAAI;IAAC,GAAG;IAAC,KAAK,EAAE;MAAEC,cAAc,EAAE,UAAU;MAAEC,SAAS,EAAE;IAA0B;EAAE,gBACpF,6BAAC,QAAM;IAAC,KAAK;IAAC,SAAS;IAAC,OAAO,EAAE;MAAA,OAAM7B,OAAO,CAAC,CAAC,CAAC,CAAC;IAAA,CAAC;IAAC,KAAK,EAAE;MAAE8B,WAAW,EAAE;IAA0B;EAAE,WAE7F,eACT,6BAAC,QAAM;IAAC,KAAK;IAAC,SAAS;IAAC,OAAO,EAAE;MAAA,OAAMrC,YAAY,CAAC,CAACD,SAAS,CAAC;IAAA;EAAC,aAC1DA,SAAS,GAAG,MAAM,GAAG,MAAM,oBACxB,CACJ,CACN;AAEP,CAAC;AAAC;AAEFH,KAAK,CAAC0C,SAAS,GAAG,MAAM;AAExB1C,KAAK,CAAC2C,IAAI;EACRC,QAAQ,EAAE,CAAC;EACXC,MAAM,EAAE,CAAC,CAAC;EACVC,UAAU,EAAE,KAAK;EACjBC,eAAe,EAAE;AAAK,gCAErB,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAED/C,KAAK,CAACgD,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -98,20 +98,26 @@ var InputDate = function InputDate(_ref) {
|
|
|
98
98
|
error: error,
|
|
99
99
|
focus: focus,
|
|
100
100
|
label: label,
|
|
101
|
+
required: required,
|
|
101
102
|
className: _InputDateModule.default.label
|
|
102
103
|
})), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
103
104
|
row: true,
|
|
104
|
-
className: _InputDateModule.default.
|
|
105
|
+
className: (0, _helpers.styles)(_InputDateModule.default.fieldset, _InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, focus && !error && _InputTextModule.default.focus)
|
|
105
106
|
}, parts.map(function (part, index) {
|
|
106
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
107
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
108
|
+
row: true,
|
|
109
|
+
key: index,
|
|
110
|
+
className: (0, _helpers.styles)(_InputDateModule.default.inputField)
|
|
111
|
+
}, /*#__PURE__*/_react.default.createElement(_InputText.InputText, _extends({}, rest, {
|
|
107
112
|
disabled: disabled,
|
|
108
113
|
error: error,
|
|
109
|
-
key: index,
|
|
110
114
|
label: labels[index] || part,
|
|
111
115
|
maxLength: part.length,
|
|
112
116
|
name: "".concat(name, ":").concat(part),
|
|
113
|
-
showState:
|
|
117
|
+
showState: index === parts.length - 1,
|
|
118
|
+
success: success,
|
|
114
119
|
value: values[index],
|
|
120
|
+
warning: warning,
|
|
115
121
|
onChange: function onChange(value) {
|
|
116
122
|
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
117
123
|
rest[_key - 1] = arguments[_key];
|
|
@@ -122,11 +128,10 @@ var InputDate = function InputDate(_ref) {
|
|
|
122
128
|
onLeave: handleLeave,
|
|
123
129
|
className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)]),
|
|
124
130
|
"data-testid": testId ? "".concat(testId, "-").concat(part) : undefined
|
|
131
|
+
})), index != parts.length - 1 && /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
132
|
+
forceRow: true,
|
|
133
|
+
className: _InputDateModule.default.separator
|
|
125
134
|
}));
|
|
126
|
-
}), (error || success || warning) && /*#__PURE__*/_react.default.createElement(_partials.IconState, {
|
|
127
|
-
error: error,
|
|
128
|
-
success: success,
|
|
129
|
-
warning: warning
|
|
130
135
|
})), hint && /*#__PURE__*/_react.default.createElement(_partials.Hint, {
|
|
131
136
|
disabled: disabled,
|
|
132
137
|
error: error,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","DEFAULT_DATE_FORMAT","hint","label","labels","max","min","name","required","success","value","warning","onChange","onError","onEnter","onLeave","others","useState","focus","setFocus","parts","splitDate","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","getInputDateErrors","Object","keys","length","handleEnter","handleLeave","className","testId","rest","styles","style","inputContainer","styleDate","
|
|
1
|
+
{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","DEFAULT_DATE_FORMAT","hint","label","labels","max","min","name","required","success","value","warning","onChange","onError","onEnter","onLeave","others","useState","focus","setFocus","parts","splitDate","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","getInputDateErrors","Object","keys","length","handleEnter","handleLeave","className","testId","rest","styles","style","inputContainer","styleDate","fieldset","inputBorder","inputField","input","substring","undefined","separator","displayName","propTypes","PropTypes","bool","string","arrayOf","isRequired","placeholder","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import { DEFAULT_DATE_FORMAT } from '@mirai/locale';\nimport PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, splitDate, styles } from '../../helpers';\nimport { View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, Label } from '../InputText/partials';\nimport styleDate from './InputDate.module.css';\n\nconst InputDate = ({\n disabled,\n error,\n format = DEFAULT_DATE_FORMAT,\n hint,\n label,\n labels = [],\n max,\n min,\n name,\n required,\n success,\n value = '',\n warning,\n onChange = () => {},\n onError = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const parts = splitDate(format);\n const values = splitDate(value);\n\n const handleChange = (partValue = '', partKey, event) => {\n const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n onChange(nextValue, event);\n\n const errors = getInputDateErrors({ format, max, min, value, required });\n if (Object.keys(errors || {}).length > 0) onError(errors);\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 { className, ['data-testid']: testId, ...rest } = others;\n\n return (\n <View className={styles(style.inputContainer, className)} data-testid={testId}>\n {label && (\n <View row>\n {label && <Label {...{ disabled, error, focus, label, required, className: styleDate.label }} />}\n </View>\n )}\n\n <View\n row\n className={styles(\n styleDate.fieldset,\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {parts.map((part, index) => (\n <View row key={index} className={styles(styleDate.inputField)}>\n <InputText\n {...rest}\n disabled={disabled}\n error={error}\n label={labels[index] || part}\n maxLength={part.length}\n name={`${name}:${part}`}\n showState={index === parts.length - 1}\n success={success}\n value={values[index]}\n warning={warning}\n onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n onEnter={handleEnter}\n onLeave={handleLeave}\n className={styles(styleDate.input, styleDate[part.substring(0, 1)])}\n data-testid={testId ? `${testId}-${part}` : undefined}\n />\n {index != parts.length - 1 && <View forceRow className={styleDate.separator}></View>}\n </View>\n ))}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\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,\n label: PropTypes.string,\n labels: PropTypes.arrayOf(PropTypes.string),\n max: PropTypes.string,\n min: PropTypes.string,\n name: PropTypes.string.isRequired,\n placeholder: PropTypes.bool,\n required: PropTypes.bool,\n success: PropTypes.bool,\n value: PropTypes.string,\n warning: PropTypes.bool,\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,15 +1,27 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
1
|
+
.fieldset {
|
|
2
|
+
padding: 0;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.inputField:not(:last-child) {
|
|
6
|
+
flex: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.inputField:last-child {
|
|
10
|
+
flex: 1;
|
|
3
11
|
}
|
|
4
12
|
|
|
5
13
|
.input {
|
|
6
|
-
max-width: calc(calc(var(--mirai-ui-input-font-size) * 2.5) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
7
14
|
margin-bottom: 0;
|
|
8
15
|
margin-top: 0;
|
|
16
|
+
min-width: calc(calc(var(--mirai-ui-font-size-paragraph) * 2.75) + var(--mirai-ui-input-text-padding-x));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.input > * {
|
|
20
|
+
border: none;
|
|
9
21
|
}
|
|
10
22
|
|
|
11
23
|
.input.Y {
|
|
12
|
-
|
|
24
|
+
min-width: calc(calc(var(--mirai-ui-font-size-paragraph) * 3.5) + var(--mirai-ui-input-text-padding-x));
|
|
13
25
|
}
|
|
14
26
|
|
|
15
27
|
.label {
|
|
@@ -18,3 +30,8 @@
|
|
|
18
30
|
margin: calc(var(--mirai-ui-input-text-padding-y) / 4) var(--mirai-ui-input-text-padding-x);
|
|
19
31
|
width: fit-content;
|
|
20
32
|
}
|
|
33
|
+
|
|
34
|
+
.separator {
|
|
35
|
+
border-right: var(--mirai-ui-input-text-border);
|
|
36
|
+
padding: var(--mirai-ui-space-M) 0;
|
|
37
|
+
}
|