@mirai/ui 1.0.85 → 1.0.87
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 +1 -0
- package/build/components/Button/Button.js +10 -5
- package/build/components/Button/Button.js.map +1 -1
- package/build/components/Button/Button.module.css +130 -29
- package/build/components/Button/Button.stories.js +28 -6
- package/build/components/Button/Button.stories.js.map +1 -1
- package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap +24 -8
- package/build/components/Form/__tests__/__snapshots__/Form.test.jsx.snap +6 -6
- package/build/components/InputDate/InputDate.js +8 -10
- package/build/components/InputDate/InputDate.js.map +1 -1
- package/build/components/InputDate/InputDate.module.css +6 -14
- package/build/components/InputDate/InputDate.stories.js +2 -2
- package/build/components/InputDate/InputDate.stories.js.map +1 -1
- package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap +322 -139
- package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap +9 -9
- package/build/components/InputSelect/InputSelect.js +8 -5
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +6 -6
- package/build/components/InputText/InputText.js +6 -5
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.module.css +17 -26
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +6 -6
- package/build/theme/default.theme.css +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -400,6 +400,7 @@ const MyComponent = (props) => {
|
|
|
400
400
|
--mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
|
|
401
401
|
--mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
|
|
402
402
|
--mirai-ui-button-secondary-background: var(--mirai-ui-base);
|
|
403
|
+
--mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
|
|
403
404
|
--mirai-ui-button-padding-y: var(--mirai-ui-space-S);
|
|
404
405
|
--mirai-ui-button-padding-x: var(--mirai-ui-space-L);
|
|
405
406
|
--mirai-ui-button-radius: var(--mirai-ui-border-radius);
|
|
@@ -37,11 +37,16 @@ var Button = function Button(_ref) {
|
|
|
37
37
|
return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
|
|
38
38
|
disabled: disabled || busy,
|
|
39
39
|
tag: tag,
|
|
40
|
-
className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, secondary && _ButtonModule.default.secondary,
|
|
41
|
-
onPress:
|
|
42
|
-
}), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null,
|
|
43
|
-
className: (0, _helpers.styles)(_ButtonModule.default.
|
|
44
|
-
}
|
|
40
|
+
className: (0, _helpers.styles)(_ButtonModule.default.button, busy && !disabled && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, secondary && !disabled && _ButtonModule.default.secondary, (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
|
|
41
|
+
onPress: onPress
|
|
42
|
+
}), busy === undefined ? children : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
43
|
+
className: (0, _helpers.styles)(_ButtonModule.default.busyContainer, busy && _ButtonModule.default.active)
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
45
|
+
className: _ButtonModule.default.spinner
|
|
46
|
+
})), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
47
|
+
row: true,
|
|
48
|
+
className: _ButtonModule.default.children
|
|
49
|
+
}, children)));
|
|
45
50
|
};
|
|
46
51
|
exports.Button = Button;
|
|
47
52
|
Button.displayName = 'Component:Button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","styles","style","button","undefined","
|
|
1
|
+
{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","styles","style","button","undefined","busyContainer","active","spinner","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n busy,\n children,\n disabled,\n large,\n rounded,\n secondary,\n small,\n squared = false,\n tag = 'button',\n wide,\n onPress,\n ...others\n}) =>\n React.createElement(\n Pressable,\n {\n ...others,\n disabled: disabled || busy,\n tag,\n className: styles(\n style.button,\n busy && !disabled && style.busy,\n large && style.large,\n small && style.small,\n rounded && style.rounded,\n squared && style.squared,\n secondary && !disabled && style.secondary,\n (disabled || busy) && style.disabled,\n wide && style.wide,\n others.className,\n ),\n onPress,\n },\n busy === undefined ? (\n children\n ) : (\n <>\n <View className={styles(style.busyContainer, busy && style.active)}>\n <View className={style.spinner} />\n </View>\n <View row className={style.children}>\n {children}\n </View>\n </>\n ),\n );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n busy: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n disabled: PropTypes.bool,\n large: PropTypes.bool,\n rounded: PropTypes.bool,\n secondary: PropTypes.bool,\n small: PropTypes.bool,\n squared: PropTypes.bool,\n tag: PropTypes.string,\n wide: PropTypes.bool,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,gBACfC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTT,QAAQ,EAAEA,QAAQ,IAAIF,IAAI;IAC1BQ,GAAG,EAAHA,GAAG;IACHO,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZlB,IAAI,IAAI,CAACE,QAAQ,IAAIe,qBAAK,CAACjB,IAAI,EAC/BG,KAAK,IAAIc,qBAAK,CAACd,KAAK,EACpBG,KAAK,IAAIW,qBAAK,CAACX,KAAK,EACpBF,OAAO,IAAIa,qBAAK,CAACb,OAAO,EACxBG,OAAO,IAAIU,qBAAK,CAACV,OAAO,EACxBF,SAAS,IAAI,CAACH,QAAQ,IAAIe,qBAAK,CAACZ,SAAS,EACzC,CAACH,QAAQ,IAAIF,IAAI,KAAKiB,qBAAK,CAACf,QAAQ,EACpCO,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAClBE,MAAM,CAACI,SAAS,CACjB;IACDL,OAAO,EAAPA;EAAO,IAETV,IAAI,KAAKmB,SAAS,GAChBlB,QAAQ,gBAER,yEACE,6BAAC,gBAAI;IAAC,SAAS,EAAE,IAAAe,eAAM,EAACC,qBAAK,CAACG,aAAa,EAAEpB,IAAI,IAAIiB,qBAAK,CAACI,MAAM;EAAE,gBACjE,6BAAC,gBAAI;IAAC,SAAS,EAAEJ,qBAAK,CAACK;EAAQ,EAAG,CAC7B,eACP,6BAAC,gBAAI;IAAC,GAAG;IAAC,SAAS,EAAEL,qBAAK,CAAChB;EAAS,GACjCA,QAAQ,CACJ,CAEV,CACF;AAAA;AAAC;AAEJF,MAAM,CAACwB,WAAW,GAAG,kBAAkB;AAEvCxB,MAAM,CAACyB,SAAS,GAAG;EACjBxB,IAAI,EAAEyB,kBAAS,CAACC,IAAI;EACpBzB,QAAQ,EAAEwB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,IAAI,CAAC,CAAC;EACjE3B,QAAQ,EAAEuB,kBAAS,CAACC,IAAI;EACxBvB,KAAK,EAAEsB,kBAAS,CAACC,IAAI;EACrBtB,OAAO,EAAEqB,kBAAS,CAACC,IAAI;EACvBrB,SAAS,EAAEoB,kBAAS,CAACC,IAAI;EACzBpB,KAAK,EAAEmB,kBAAS,CAACC,IAAI;EACrBnB,OAAO,EAAEkB,kBAAS,CAACC,IAAI;EACvBlB,GAAG,EAAEiB,kBAAS,CAACG,MAAM;EACrBnB,IAAI,EAAEgB,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBrB,OAAO,EAAEe,kBAAS,CAACM;AACrB,CAAC"}
|
|
@@ -18,35 +18,6 @@
|
|
|
18
18
|
color: var(--mirai-ui-button-disabled-color);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
@keyframes mirai-button-busy {
|
|
22
|
-
from {
|
|
23
|
-
width: var(--mirai-ui-button-busy-width);
|
|
24
|
-
}
|
|
25
|
-
to {
|
|
26
|
-
width: 100%;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.secondary .busyProgress {
|
|
31
|
-
background-color: var(--mirai-ui-button-background);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.busyProgress {
|
|
35
|
-
background-color: var(--mirai-ui-button-color);
|
|
36
|
-
opacity: 0.2;
|
|
37
|
-
height: 100%;
|
|
38
|
-
left: 0;
|
|
39
|
-
position: absolute;
|
|
40
|
-
width: 0%;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.busyProgress.active {
|
|
44
|
-
animation-duration: var(--mirai-ui-button-busy-motion);
|
|
45
|
-
animation-iteration-count: infinite;
|
|
46
|
-
animation-name: mirai-button-busy;
|
|
47
|
-
animation-timing-function: var(--mirai-ui-motion-easing);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
21
|
.button:not(.secondary):not(:disabled):active {
|
|
51
22
|
box-shadow: inset 0 0 var(--mirai-ui-space-XL) var(--mirai-ui-space-XL) var(--mirai-ui-button-color-active);
|
|
52
23
|
}
|
|
@@ -93,6 +64,136 @@
|
|
|
93
64
|
width: 100%;
|
|
94
65
|
}
|
|
95
66
|
|
|
67
|
+
/* busy:bool */
|
|
68
|
+
|
|
69
|
+
.button .children,
|
|
70
|
+
.button .spinner {
|
|
71
|
+
transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
|
|
72
|
+
transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.button.busy .children {
|
|
76
|
+
opacity: 0;
|
|
77
|
+
transform: translateY(var(--mirai-ui-space-XL));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.button .spinner {
|
|
81
|
+
opacity: 0;
|
|
82
|
+
transform: translateY(calc(var(--mirai-ui-space-XL) * -1));
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.button.busy .spinner {
|
|
86
|
+
opacity: 1;
|
|
87
|
+
transform: translateY(0%);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.busyContainer {
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
height: 100%;
|
|
94
|
+
left: 0;
|
|
95
|
+
pointer-events: none;
|
|
96
|
+
position: absolute;
|
|
97
|
+
width: 100%;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.busyContainer:before {
|
|
101
|
+
background-color: var(--mirai-ui-base);
|
|
102
|
+
content: '';
|
|
103
|
+
display: inline-block;
|
|
104
|
+
opacity: 0;
|
|
105
|
+
position: absolute;
|
|
106
|
+
top: 0;
|
|
107
|
+
left: 0;
|
|
108
|
+
width: 100%;
|
|
109
|
+
height: 100%;
|
|
110
|
+
display: block;
|
|
111
|
+
transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.secondary:not(:disabled) .busyContainer:before {
|
|
115
|
+
background-color: var(--mirai-ui-button-background);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.busyContainer.active:before {
|
|
119
|
+
opacity: 0.2;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.spinner,
|
|
123
|
+
.spinner::before,
|
|
124
|
+
.spinner::after {
|
|
125
|
+
animation: mirai-button-busy calc(var(--mirai-ui-motion-expand) * 3) infinite var(--mirai-ui-motion-easing) alternate;
|
|
126
|
+
background-color: var(--mirai-ui-button-color-active);
|
|
127
|
+
border-radius: calc(var(--mirai-ui-space-XS) / 2);
|
|
128
|
+
height: var(--mirai-ui-space-XS);
|
|
129
|
+
width: var(--mirai-ui-space-XS);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.squared .spinner,
|
|
133
|
+
.squared .spinner::before,
|
|
134
|
+
.squared .spinner::after {
|
|
135
|
+
height: calc(var(--mirai-ui-space-XS) / 1.5);
|
|
136
|
+
width: calc(var(--mirai-ui-space-XS) / 1.5);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.secondary .spinner,
|
|
140
|
+
.secondary .spinner::before,
|
|
141
|
+
.secondary .spinner::after {
|
|
142
|
+
animation-name: mirai-button-secondary-busy;
|
|
143
|
+
background-color: var(--mirai-ui-button-secondary-color-active);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.spinner::before,
|
|
147
|
+
.spinner::after {
|
|
148
|
+
content: '';
|
|
149
|
+
display: inline-block;
|
|
150
|
+
position: absolute;
|
|
151
|
+
top: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.spinner::before {
|
|
155
|
+
animation-delay: 0s;
|
|
156
|
+
left: calc(var(--mirai-ui-space-S) * -1);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.squared .spinner::before {
|
|
160
|
+
left: calc(var(--mirai-ui-space-S) * -0.75);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.spinner {
|
|
164
|
+
animation-delay: calc(var(--mirai-ui-motion-expand) * 2);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.spinner::after {
|
|
168
|
+
animation-delay: calc(var(--mirai-ui-motion-expand) * 3);
|
|
169
|
+
left: var(--mirai-ui-space-S);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.squared .spinner::after {
|
|
173
|
+
left: calc(var(--mirai-ui-space-S) * 0.75);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@keyframes mirai-button-busy {
|
|
177
|
+
0% {
|
|
178
|
+
background-color: var(--mirai-ui-base);
|
|
179
|
+
}
|
|
180
|
+
50%,
|
|
181
|
+
100% {
|
|
182
|
+
background-color: var(--mirai-ui-button-color-active);
|
|
183
|
+
background-color: var();
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@keyframes mirai-button-secondary-busy {
|
|
188
|
+
0% {
|
|
189
|
+
background-color: var(--mirai-ui-button-background);
|
|
190
|
+
}
|
|
191
|
+
50%,
|
|
192
|
+
100% {
|
|
193
|
+
background-color: var(--mirai-ui-button-secondary-color-active);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
96
197
|
@media only screen and (min-width: 600px) {
|
|
97
198
|
.button:not(:disabled).secondary:hover:not(:active) {
|
|
98
199
|
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-color-hover);
|
|
@@ -5,15 +5,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Story = void 0;
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _ = require("../../");
|
|
10
10
|
var _Button = require("./Button");
|
|
11
11
|
var _Story$args;
|
|
12
|
-
var _excluded = ["icon"];
|
|
13
|
-
function
|
|
12
|
+
var _excluded = ["busy", "icon"];
|
|
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
|
+
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
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
14
17
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
18
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
16
19
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
20
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
21
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
22
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
23
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
24
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
25
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
17
26
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
18
27
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
19
28
|
var _default = {
|
|
@@ -21,11 +30,24 @@ var _default = {
|
|
|
21
30
|
};
|
|
22
31
|
exports.default = _default;
|
|
23
32
|
var Story = function Story(_ref) {
|
|
24
|
-
var
|
|
33
|
+
var busyProp = _ref.busy,
|
|
34
|
+
icon = _ref.icon,
|
|
25
35
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
-
|
|
36
|
+
var _useState = (0, _react.useState)(busyProp),
|
|
37
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
38
|
+
busy = _useState2[0],
|
|
39
|
+
setBusy = _useState2[1];
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
|
|
41
|
+
busy: busy
|
|
42
|
+
})), /*#__PURE__*/_react.default.createElement(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
|
|
43
|
+
busy: busy
|
|
44
|
+
}), /*#__PURE__*/_react.default.createElement(_.Icon, {
|
|
27
45
|
value: _.ICON[icon]
|
|
28
|
-
}))
|
|
46
|
+
})), /*#__PURE__*/_react.default.createElement("view", {
|
|
47
|
+
onClick: function onClick() {
|
|
48
|
+
return setBusy(!busy);
|
|
49
|
+
}
|
|
50
|
+
}, "Switch busy"));
|
|
29
51
|
};
|
|
30
52
|
exports.Story = Story;
|
|
31
53
|
Story.storyName = 'Button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","names":["title","Story","icon","props","ICON","storyName","args","
|
|
1
|
+
{"version":3,"file":"Button.stories.js","names":["title","Story","busyProp","busy","icon","props","useState","setBusy","ICON","storyName","args","children","disabled","undefined","large","rounded","secondary","small","squared","tag","wide","marginBottom","argTypes","options","Object","keys","control","type","defaultValue","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { Icon, ICON } from '../../';\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ busy: busyProp, icon, ...props }) => {\n const [busy, setBusy] = useState(busyProp);\n\n return (\n <>\n <Button {...{ ...props, busy }} />\n <Button {...{ ...props, busy }}>\n <Icon value={ICON[icon]} />\n </Button>\n\n <view onClick={() => setBusy(!busy)}>Switch busy</view>\n </>\n );\n};\n\nStory.storyName = 'Button';\n\nStory.args = {\n busy: false,\n children: 'children',\n disabled: false,\n icon: undefined,\n large: false,\n rounded: false,\n secondary: false,\n small: false,\n squared: false,\n tag: 'button',\n wide: false,\n // inherited properties\n ['data-testid']: 'test-story',\n style: { marginBottom: 'var(--mirai-ui-space-M)' },\n};\n\nStory.argTypes = {\n icon: {\n options: Object.keys(ICON),\n control: { type: 'select' },\n defaultValue: Object.keys(ICON)[0],\n },\n onEnter: { action: 'onEnter' },\n onLeave: { action: 'onLeave' },\n onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAA2C;EAAA,IAA/BC,QAAQ,QAAdC,IAAI;IAAYC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EACpD,gBAAwB,IAAAC,eAAQ,EAACJ,QAAQ,CAAC;IAAA;IAAnCC,IAAI;IAAEI,OAAO;EAEpB,oBACE,yEACE,6BAAC,cAAM,kCAAUF,KAAK;IAAEF,IAAI,EAAJA;EAAI,GAAM,eAClC,6BAAC,cAAM,kCAAUE,KAAK;IAAEF,IAAI,EAAJA;EAAI,iBAC1B,6BAAC,MAAI;IAAC,KAAK,EAAEK,MAAI,CAACJ,IAAI;EAAE,EAAG,CACpB,eAET;IAAM,OAAO,EAAE;MAAA,OAAMG,OAAO,CAAC,CAACJ,IAAI,CAAC;IAAA;EAAC,iBAAmB,CACtD;AAEP,CAAC;AAAC;AAEFF,KAAK,CAACQ,SAAS,GAAG,QAAQ;AAE1BR,KAAK,CAACS,IAAI;EACRP,IAAI,EAAE,KAAK;EACXQ,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfR,IAAI,EAAES,SAAS;EACfC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,yCACtB;EAAEC,YAAY,EAAE;AAA0B,CAAC,eACnD;AAEDpB,KAAK,CAACqB,QAAQ,GAAG;EACflB,IAAI,EAAE;IACJmB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACjB,MAAI,CAAC;IAC1BkB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACjB,MAAI,CAAC,CAAC,CAAC;EACnC,CAAC;EACDqB,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
|
|
@@ -13,13 +13,21 @@ exports[`component:<Button> inherit:className 1`] = `
|
|
|
13
13
|
exports[`component:<Button> prop:busy 1`] = `
|
|
14
14
|
<DocumentFragment>
|
|
15
15
|
<button
|
|
16
|
-
class="pressable disabled button busy"
|
|
16
|
+
class="pressable disabled button busy disabled"
|
|
17
17
|
disabled=""
|
|
18
18
|
>
|
|
19
19
|
<div
|
|
20
|
-
class="view
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
class="view busyContainer active"
|
|
21
|
+
>
|
|
22
|
+
<div
|
|
23
|
+
class="view spinner"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
<div
|
|
27
|
+
class="view row children"
|
|
28
|
+
>
|
|
29
|
+
children
|
|
30
|
+
</div>
|
|
23
31
|
</button>
|
|
24
32
|
</DocumentFragment>
|
|
25
33
|
`;
|
|
@@ -27,7 +35,7 @@ exports[`component:<Button> prop:busy 1`] = `
|
|
|
27
35
|
exports[`component:<Button> prop:disabled 1`] = `
|
|
28
36
|
<DocumentFragment>
|
|
29
37
|
<button
|
|
30
|
-
class="pressable disabled button"
|
|
38
|
+
class="pressable disabled button disabled"
|
|
31
39
|
disabled=""
|
|
32
40
|
>
|
|
33
41
|
children
|
|
@@ -52,9 +60,17 @@ exports[`component:<Button> prop:secondary && prop:busy 1`] = `
|
|
|
52
60
|
disabled=""
|
|
53
61
|
>
|
|
54
62
|
<div
|
|
55
|
-
class="view
|
|
56
|
-
|
|
57
|
-
|
|
63
|
+
class="view busyContainer active"
|
|
64
|
+
>
|
|
65
|
+
<div
|
|
66
|
+
class="view spinner"
|
|
67
|
+
/>
|
|
68
|
+
</div>
|
|
69
|
+
<div
|
|
70
|
+
class="view row children"
|
|
71
|
+
>
|
|
72
|
+
children
|
|
73
|
+
</div>
|
|
58
74
|
</button>
|
|
59
75
|
</DocumentFragment>
|
|
60
76
|
`;
|
|
@@ -14,16 +14,16 @@ exports[`component:<Form> prop:children 1`] = `
|
|
|
14
14
|
<div
|
|
15
15
|
class="view inputContainer"
|
|
16
16
|
>
|
|
17
|
-
<span
|
|
18
|
-
class="text paragraph text label"
|
|
19
|
-
>
|
|
20
|
-
label
|
|
21
|
-
</span>
|
|
22
17
|
<div
|
|
23
18
|
class="view row inputBorder"
|
|
24
19
|
>
|
|
20
|
+
<span
|
|
21
|
+
class="text paragraph text label"
|
|
22
|
+
>
|
|
23
|
+
label
|
|
24
|
+
</span>
|
|
25
25
|
<input
|
|
26
|
-
class="input input"
|
|
26
|
+
class="input input withLabel"
|
|
27
27
|
name="name"
|
|
28
28
|
type="text"
|
|
29
29
|
value=""
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.InputDate = void 0;
|
|
8
|
+
var _locale = require("@mirai/locale");
|
|
8
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
11
|
var _helpers = require("../../helpers");
|
|
@@ -12,7 +13,7 @@ var _primitives = require("../../primitives");
|
|
|
12
13
|
var _InputText = require("../InputText");
|
|
13
14
|
var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
|
|
14
15
|
var _InputDateModule = _interopRequireDefault(require("./InputDate.module.css"));
|
|
15
|
-
var _excluded = ["disabled", "error", "format", "hint", "label", "labels", "max", "min", "name", "
|
|
16
|
+
var _excluded = ["disabled", "error", "format", "hint", "label", "labels", "max", "min", "name", "required", "success", "value", "warning", "onChange", "onError", "onEnter", "onLeave"],
|
|
16
17
|
_excluded2 = ["className", "data-testid"];
|
|
17
18
|
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); }
|
|
18
19
|
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; }
|
|
@@ -30,7 +31,7 @@ var InputDate = function InputDate(_ref) {
|
|
|
30
31
|
var disabled = _ref.disabled,
|
|
31
32
|
error = _ref.error,
|
|
32
33
|
_ref$format = _ref.format,
|
|
33
|
-
format = _ref$format === void 0 ?
|
|
34
|
+
format = _ref$format === void 0 ? _locale.DEFAULT_DATE_FORMAT : _ref$format,
|
|
34
35
|
hint = _ref.hint,
|
|
35
36
|
label = _ref.label,
|
|
36
37
|
_ref$labels = _ref.labels,
|
|
@@ -38,8 +39,6 @@ var InputDate = function InputDate(_ref) {
|
|
|
38
39
|
max = _ref.max,
|
|
39
40
|
min = _ref.min,
|
|
40
41
|
name = _ref.name,
|
|
41
|
-
_ref$placeholder = _ref.placeholder,
|
|
42
|
-
placeholder = _ref$placeholder === void 0 ? true : _ref$placeholder,
|
|
43
42
|
required = _ref.required,
|
|
44
43
|
success = _ref.success,
|
|
45
44
|
_ref$value = _ref.value,
|
|
@@ -91,7 +90,7 @@ var InputDate = function InputDate(_ref) {
|
|
|
91
90
|
return /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
92
91
|
className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, className),
|
|
93
92
|
"data-testid": testId
|
|
94
|
-
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
93
|
+
}, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
95
94
|
small: true,
|
|
96
95
|
className: (0, _helpers.styles)(_InputDateModule.default.label, _InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error)
|
|
97
96
|
}, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
@@ -100,12 +99,11 @@ var InputDate = function InputDate(_ref) {
|
|
|
100
99
|
return /*#__PURE__*/_react.default.createElement(_InputText.InputText, _extends({}, rest, {
|
|
101
100
|
disabled: disabled,
|
|
102
101
|
error: error,
|
|
103
|
-
hint: !placeholder ? labels[index] || part : undefined,
|
|
104
102
|
key: index,
|
|
103
|
+
label: labels[index] || part,
|
|
105
104
|
maxLength: part.length,
|
|
106
105
|
name: "".concat(name, ":").concat(part),
|
|
107
|
-
|
|
108
|
-
showState: false,
|
|
106
|
+
fork: true,
|
|
109
107
|
value: values[index],
|
|
110
108
|
onChange: function onChange(value) {
|
|
111
109
|
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -115,7 +113,7 @@ var InputDate = function InputDate(_ref) {
|
|
|
115
113
|
},
|
|
116
114
|
onEnter: handleEnter,
|
|
117
115
|
onLeave: handleLeave,
|
|
118
|
-
className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)]
|
|
116
|
+
className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)]),
|
|
119
117
|
"data-testid": testId ? "".concat(testId, "-").concat(part) : undefined
|
|
120
118
|
}));
|
|
121
119
|
}), (error || success || warning) && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
@@ -124,7 +122,7 @@ var InputDate = function InputDate(_ref) {
|
|
|
124
122
|
success: success,
|
|
125
123
|
warning: warning
|
|
126
124
|
}),
|
|
127
|
-
className: (0, _helpers.styles)(_InputTextModule.default.icon, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined
|
|
125
|
+
className: (0, _helpers.styles)(_InputTextModule.default.icon, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
|
|
128
126
|
})), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
129
127
|
small: true,
|
|
130
128
|
className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","hint","label","labels","max","min","name","
|
|
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","text","input","substring","undefined","getIconState","icon","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 { getIconState, getInputDateErrors, splitDate, styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from '../InputText/InputText.module.css';\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 <Text\n small\n className={styles(\n styleDate.label,\n style.text,\n style.hint,\n disabled && style.disabled,\n focus && style.focus,\n error && style.error,\n )}\n >\n {label}\n </Text>\n )}\n\n <View row>\n {parts.map((part, index) => (\n <InputText\n {...rest}\n disabled={disabled}\n error={error}\n key={index}\n label={labels[index] || part}\n maxLength={part.length}\n name={`${name}:${part}`}\n fork\n value={values[index]}\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 ))}\n\n {(error || success || warning) && (\n <Icon\n value={getIconState({ error, success, warning })}\n className={styles(\n style.icon,\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\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,26 +1,18 @@
|
|
|
1
1
|
.input {
|
|
2
|
-
max-width: calc(calc(var(--mirai-ui-input-font-size) * 2.
|
|
2
|
+
max-width: calc(calc(var(--mirai-ui-input-font-size) * 2.2) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
3
3
|
margin-bottom: 0;
|
|
4
4
|
margin-top: 0;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.input:not(:last-child) {
|
|
8
|
-
margin-right: var(--mirai-ui-input-text-padding-x);
|
|
8
|
+
margin-right: calc(var(--mirai-ui-input-text-padding-x) / 2);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.input.Y
|
|
12
|
-
|
|
13
|
-
max-width: calc(calc(var(--mirai-ui-input-font-size) * 3.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.input.state.Y {
|
|
17
|
-
max-width: calc(calc(var(--mirai-ui-input-font-size) * 4.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
11
|
+
.input.Y {
|
|
12
|
+
max-width: calc(calc(var(--mirai-ui-input-font-size) * 3) + calc(var(--mirai-ui-input-text-padding-x) * 2));
|
|
18
13
|
}
|
|
19
14
|
|
|
20
15
|
.label {
|
|
21
|
-
margin-top: calc(var(--mirai-ui-font-size-small) * -0.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
.withHint {
|
|
25
|
-
margin-bottom: calc(var(--mirai-ui-input-text-padding-y) * 2);
|
|
16
|
+
margin-top: calc(var(--mirai-ui-font-size-small) * -0.25);
|
|
17
|
+
width: fit-content;
|
|
26
18
|
}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Story = void 0;
|
|
8
|
+
var _locale = require("@mirai/locale");
|
|
8
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
10
|
var _InputDate = require("./InputDate");
|
|
10
11
|
var _Story$args;
|
|
@@ -71,14 +72,13 @@ Story.storyName = 'InputDate';
|
|
|
71
72
|
Story.args = (_Story$args = {
|
|
72
73
|
disabled: false,
|
|
73
74
|
error: false,
|
|
74
|
-
format:
|
|
75
|
+
format: _locale.DEFAULT_DATE_FORMAT,
|
|
75
76
|
hint: 'hint',
|
|
76
77
|
label: 'label',
|
|
77
78
|
labels: ['Day', 'Month', 'Year'],
|
|
78
79
|
max: '10/04/2080',
|
|
79
80
|
min: '10/04/1980',
|
|
80
81
|
name: 'name',
|
|
81
|
-
placeholder: true,
|
|
82
82
|
required: false,
|
|
83
83
|
success: false,
|
|
84
84
|
warning: false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDate.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","storyName","args","disabled","error","format","hint","label","labels","max","min","name","
|
|
1
|
+
{"version":3,"file":"InputDate.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","storyName","args","disabled","error","format","DEFAULT_DATE_FORMAT","hint","label","labels","max","min","name","required","success","warning","argTypes"],"sources":["../../../src/components/InputDate/InputDate.stories.jsx"],"sourcesContent":["import { DEFAULT_DATE_FORMAT } from '@mirai/locale';\nimport React, { useState } from 'react';\n\nimport { InputDate } from './InputDate';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState('06/05/2020');\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputDate>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputDate>::onEnter', ...others);\n\n const handleError = (...others) => console.log('<InputDate>::onError', ...others);\n\n const handleLeave = (...others) => console.log('<InputDate>::onLeave', ...others);\n\n return (\n <InputDate\n {...props}\n value={value}\n onChange={handleChange}\n onEnter={handleEnter}\n onError={handleError}\n onLeave={handleLeave}\n />\n );\n};\n\nStory.storyName = 'InputDate';\n\nStory.args = {\n disabled: false,\n error: false,\n format: DEFAULT_DATE_FORMAT,\n hint: 'hint',\n label: 'label',\n labels: ['Day', 'Month', 'Year'],\n max: '10/04/2080',\n min: '10/04/1980',\n name: 'name',\n required: false,\n success: false,\n warning: false,\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEzB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,YAAY,CAAC;IAAA;IAAzCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,QAAQ,CAACE,IAAI,CAAC;IAAC,kCADcC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,uBAAuB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACvD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMK,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOL,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,oBACE,6BAAC,oBAAS,eACJN,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEE,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFZ,KAAK,CAACa,SAAS,GAAG,WAAW;AAE7Bb,KAAK,CAACc,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,MAAM,EAAEC,2BAAmB;EAC3BC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;EAChCC,GAAG,EAAE,YAAY;EACjBC,GAAG,EAAE,YAAY;EACjBC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAED3B,KAAK,CAAC4B,QAAQ,GAAG,CAAC,CAAC"}
|