@mirai/ui 1.0.162 → 1.0.163
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/InputText/InputText.js +11 -3
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.module.css +14 -2
- package/build/components/InputText/InputText.stories.js +9 -2
- package/build/components/InputText/InputText.stories.js.map +1 -1
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +1 -2
- package/build/primitives/Input/Input.js +19 -4
- package/build/primitives/Input/Input.js.map +1 -1
- package/build/primitives/Input/Input.module.css +6 -0
- package/build/primitives/Input/Input.stories.js +1 -0
- package/build/primitives/Input/Input.stories.js.map +1 -1
- package/build/primitives/Input/__tests__/__snapshots__/Input.test.js.snap +20 -1
- package/package.json +1 -1
|
@@ -11,11 +11,16 @@ var _helpers = require("../../helpers");
|
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
12
|
var _InputTextModule = _interopRequireDefault(require("./InputText.module.css"));
|
|
13
13
|
var _partials = require("./partials");
|
|
14
|
-
var _excluded = ["disabled", "error", "hint", "icon", "label", "showRequired", "showState", "success", "type", "warning", "onChange", "onEnter", "onLeave"];
|
|
14
|
+
var _excluded = ["disabled", "error", "hint", "icon", "label", "multiLine", "showRequired", "showState", "success", "type", "warning", "onChange", "onEnter", "onLeave"];
|
|
15
15
|
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); }
|
|
16
16
|
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; }
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
19
|
+
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; }
|
|
20
|
+
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; }
|
|
21
|
+
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; }
|
|
22
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
23
|
+
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); }
|
|
19
24
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
20
25
|
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."); }
|
|
21
26
|
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); }
|
|
@@ -31,6 +36,7 @@ var InputText = function InputText(_ref) {
|
|
|
31
36
|
hint = _ref.hint,
|
|
32
37
|
icon = _ref.icon,
|
|
33
38
|
label = _ref.label,
|
|
39
|
+
multiLine = _ref.multiLine,
|
|
34
40
|
_ref$showRequired = _ref.showRequired,
|
|
35
41
|
showRequired = _ref$showRequired === void 0 ? false : _ref$showRequired,
|
|
36
42
|
_ref$showState = _ref.showState,
|
|
@@ -96,11 +102,13 @@ var InputText = function InputText(_ref) {
|
|
|
96
102
|
label: label,
|
|
97
103
|
required: showRequired && others.required,
|
|
98
104
|
value: others.value
|
|
99
|
-
}), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({},
|
|
105
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, _objectSpread({
|
|
100
106
|
disabled: disabled,
|
|
107
|
+
multiLine: multiLine
|
|
108
|
+
}, others), {
|
|
101
109
|
type: !is.password || password ? type : 'text',
|
|
102
110
|
value: others.value || '',
|
|
103
|
-
className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel),
|
|
111
|
+
className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, multiLine && _InputTextModule.default.multiLine),
|
|
104
112
|
onChange: handleChange,
|
|
105
113
|
onEnter: handleEnter,
|
|
106
114
|
onLeave: handleLeave
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","
|
|
1
|
+
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","multiLine","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n multiLine,\n showRequired = false,\n showState = true,\n success,\n type,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const handlePress = (event) => {\n if (is.password) setPassword(!password);\n else if (is.search) onChange(undefined, event);\n };\n\n const is = {\n password: type === 'password',\n search: type === 'search',\n };\n\n const has = {\n icon: !!icon || is.search,\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {has.icon && (\n <Icon\n value={icon || ICON.SEARCH}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n <View wide className={style.content}>\n {label && (\n <Label\n {...{ disabled, error, focus, label, required: showRequired && others.required, value: others.value }}\n />\n )}\n\n <Input\n {...{ disabled, multiLine, ...others }}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n </View>\n\n {(is.password || (is.search && has.value)) && !disabled && (\n <Pressable tabIndex={-1} onPress={handlePress}>\n <Icon\n value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n className={style.icon}\n />\n </Pressable>\n )}\n\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n type: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
|
|
@@ -48,14 +48,26 @@
|
|
|
48
48
|
|
|
49
49
|
.input {
|
|
50
50
|
border-radius: var(--mirai-ui-input-text-radius);
|
|
51
|
-
padding: var(--mirai-ui-input-text-padding-y) calc(var(--mirai-ui-input-text-padding-x) / 2);
|
|
52
51
|
min-height: var(--mirai-ui-input-min-height);
|
|
53
52
|
}
|
|
54
53
|
|
|
55
|
-
.input.
|
|
54
|
+
.input:not(.multiLine) {
|
|
55
|
+
padding: var(--mirai-ui-input-text-padding-y) calc(var(--mirai-ui-input-text-padding-x) / 2);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.input.multiLine {
|
|
59
|
+
margin: var(--mirai-ui-input-text-padding-y) 0;
|
|
60
|
+
padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.input.withLabel:not(.multiLine) {
|
|
56
64
|
padding-top: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S));
|
|
57
65
|
}
|
|
58
66
|
|
|
67
|
+
.input.withLabel.multiLine {
|
|
68
|
+
margin-top: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-M));
|
|
69
|
+
}
|
|
70
|
+
|
|
59
71
|
.input.empty:not(:focus) {
|
|
60
72
|
color: var(--mirai-ui-base);
|
|
61
73
|
}
|
|
@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _primitives = require("../../primitives");
|
|
10
10
|
var _InputText = require("./InputText");
|
|
11
11
|
var _Story$args;
|
|
12
|
+
var _excluded = ["value"];
|
|
12
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); }
|
|
13
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; }
|
|
14
15
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
@@ -25,12 +26,16 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
25
26
|
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; }
|
|
26
27
|
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; } }
|
|
27
28
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
29
|
+
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; }
|
|
30
|
+
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; }
|
|
28
31
|
var _default = {
|
|
29
32
|
title: 'Components'
|
|
30
33
|
};
|
|
31
34
|
exports.default = _default;
|
|
32
|
-
var Story = function Story(
|
|
33
|
-
var
|
|
35
|
+
var Story = function Story(_ref) {
|
|
36
|
+
var propValue = _ref.value,
|
|
37
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
+
var _useState = (0, _react.useState)(propValue),
|
|
34
39
|
_useState2 = _slicedToArray(_useState, 2),
|
|
35
40
|
value = _useState2[0],
|
|
36
41
|
setValue = _useState2[1];
|
|
@@ -67,6 +72,7 @@ var Story = function Story(props) {
|
|
|
67
72
|
exports.Story = Story;
|
|
68
73
|
Story.storyName = 'InputText';
|
|
69
74
|
Story.args = (_Story$args = {
|
|
75
|
+
autoResize: false,
|
|
70
76
|
disabled: false,
|
|
71
77
|
error: false,
|
|
72
78
|
hint: 'hint',
|
|
@@ -80,6 +86,7 @@ Story.args = (_Story$args = {
|
|
|
80
86
|
showState: true,
|
|
81
87
|
success: false,
|
|
82
88
|
type: 'text',
|
|
89
|
+
value: 'value',
|
|
83
90
|
warning: false
|
|
84
91
|
}, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);
|
|
85
92
|
Story.argTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.stories.js","names":["title","Story","
|
|
1
|
+
{"version":3,"file":"InputText.stories.js","names":["title","Story","propValue","value","props","useState","setValue","handleChange","next","others","console","log","handleEnter","handleLeave","ICON","icon","storyName","args","autoResize","disabled","error","hint","undefined","label","multiLine","name","placeholder","required","showRequired","showState","success","type","warning","argTypes","options","Object","keys","control","defaultValue"],"sources":["../../../src/components/InputText/InputText.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { ICON } from '../../primitives';\nimport { InputText } from './InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ value: propValue, ...props }) => {\n const [value, setValue] = useState(propValue);\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputText>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputText>::onEnter', ...others);\n\n const handleLeave = (...others) => console.log('<InputText>::onLeave', ...others);\n\n return (\n <InputText\n {...props}\n icon={ICON[props.icon]}\n value={value}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n );\n};\n\nStory.storyName = 'InputText';\n\nStory.args = {\n autoResize: false,\n disabled: false,\n error: false,\n hint: 'hint',\n icon: undefined,\n label: 'label',\n multiLine: false,\n name: 'name',\n placeholder: '',\n required: false,\n showRequired: false,\n showState: true,\n success: false,\n type: 'text',\n value: 'value',\n warning: false,\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n icon: {\n options: [undefined, ...Object.keys(ICON)],\n control: { type: 'select' },\n defaultValue: undefined,\n },\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,OAAuC;EAAA,IAA1BC,SAAS,QAAhBC,KAAK;IAAgBC,KAAK;EAChD,gBAA0B,IAAAC,eAAQ,EAACH,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEG,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,oBACE,6BAAC,oBAAS,eACJL,KAAK;IACT,IAAI,EAAEU,gBAAI,CAACV,KAAK,CAACW,IAAI,CAAE;IACvB,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAEI,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFZ,KAAK,CAACe,SAAS,GAAG,WAAW;AAE7Bf,KAAK,CAACgB,IAAI;EACRC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZN,IAAI,EAAEO,SAAS;EACfC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,MAAM;EACZC,WAAW,EAAE,EAAE;EACfC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,KAAK;EACnBC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,MAAM;EACZ5B,KAAK,EAAE,OAAO;EACd6B,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAED/B,KAAK,CAACgC,QAAQ,GAAG;EACflB,IAAI,EAAE;IACJmB,OAAO,GAAGZ,SAAS,4BAAKa,MAAM,CAACC,IAAI,CAACtB,gBAAI,CAAC,EAAC;IAC1CuB,OAAO,EAAE;MAAEN,IAAI,EAAE;IAAS,CAAC;IAC3BO,YAAY,EAAEhB;EAChB,CAAC;EACDS,IAAI,EAAE;IACJG,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACxDG,OAAO,EAAE;MAAEN,IAAI,EAAE;IAAS,CAAC;IAC3BO,YAAY,EAAE;EAChB;AACF,CAAC"}
|
|
@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _helpers2 = require("./helpers");
|
|
12
12
|
var _InputModule = _interopRequireDefault(require("./Input.module.css"));
|
|
13
|
-
var _excluded = ["disabled", "multiLine", "type", "onChange", "onEnter", "onError", "onLeave"];
|
|
13
|
+
var _excluded = ["autoResize", "disabled", "multiLine", "type", "onChange", "onEnter", "onError", "onLeave"];
|
|
14
14
|
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); }
|
|
15
15
|
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; }
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -22,7 +22,8 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
|
|
|
22
22
|
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; }
|
|
23
23
|
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; }
|
|
24
24
|
var Input = function Input(_ref) {
|
|
25
|
-
var
|
|
25
|
+
var autoResize = _ref.autoResize,
|
|
26
|
+
disabled = _ref.disabled,
|
|
26
27
|
multiLine = _ref.multiLine,
|
|
27
28
|
_ref$type = _ref.type,
|
|
28
29
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
@@ -31,11 +32,18 @@ var Input = function Input(_ref) {
|
|
|
31
32
|
onError = _ref.onError,
|
|
32
33
|
onLeave = _ref.onLeave,
|
|
33
34
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
35
|
+
var ref = (0, _react.useRef)(null);
|
|
34
36
|
(0, _react.useEffect)(function () {
|
|
35
37
|
var errors = (0, _helpers.getInputErrors)(_objectSpread(_objectSpread({}, others), {}, {
|
|
36
38
|
type: type
|
|
37
39
|
}));
|
|
38
40
|
if (errors && onError) onError(errors);
|
|
41
|
+
if (autoResize && multiLine && ref !== null && ref !== void 0 && ref.current) {
|
|
42
|
+
var _ref$current = ref.current,
|
|
43
|
+
scrollHeight = _ref$current.scrollHeight,
|
|
44
|
+
clientHeight = _ref$current.clientHeight;
|
|
45
|
+
if (scrollHeight > clientHeight) resize();
|
|
46
|
+
}
|
|
39
47
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
40
48
|
}, []);
|
|
41
49
|
var handleChange = function handleChange() {
|
|
@@ -48,13 +56,19 @@ var Input = function Input(_ref) {
|
|
|
48
56
|
value: value
|
|
49
57
|
})));
|
|
50
58
|
onChange && onChange(value || '', event);
|
|
59
|
+
if (autoResize && multiLine) resize();
|
|
60
|
+
};
|
|
61
|
+
var resize = function resize() {
|
|
62
|
+
ref.current.style.height = 'auto';
|
|
63
|
+
ref.current.style.height = ref.current.scrollHeight + 'px';
|
|
51
64
|
};
|
|
52
65
|
return /*#__PURE__*/_react.default.createElement(multiLine ? 'textarea' : 'input', _objectSpread(_objectSpread({}, others), {}, {
|
|
53
66
|
disabled: disabled,
|
|
67
|
+
ref: autoResize ? ref : undefined,
|
|
54
68
|
test: undefined,
|
|
55
|
-
type: type,
|
|
69
|
+
type: !multiLine ? type : undefined,
|
|
56
70
|
value: others.value || '',
|
|
57
|
-
className: (0, _helpers.styles)(_InputModule.default.input, others.className)
|
|
71
|
+
className: (0, _helpers.styles)(_InputModule.default.input, autoResize && multiLine && _InputModule.default.autoResize, others.className)
|
|
58
72
|
}, !disabled ? {
|
|
59
73
|
onChange: function onChange(event) {
|
|
60
74
|
return handleChange(event.target.value, event);
|
|
@@ -66,6 +80,7 @@ var Input = function Input(_ref) {
|
|
|
66
80
|
exports.Input = Input;
|
|
67
81
|
Input.displayName = 'Primitive:Input';
|
|
68
82
|
Input.propTypes = {
|
|
83
|
+
autoResize: _propTypes.default.bool,
|
|
69
84
|
disabled: _propTypes.default.bool,
|
|
70
85
|
multiLine: _propTypes.default.bool,
|
|
71
86
|
name: _propTypes.default.string.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Input","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","useEffect","errors","getInputErrors","handleChange","next","event","isNaN","value","parseValue","React","createElement","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useEffect","errors","getInputErrors","current","scrollHeight","clientHeight","resize","handleChange","next","event","isNaN","value","parseValue","style","height","React","createElement","undefined","test","className","styles","input","target","onFocus","onBlur","displayName","propTypes","PropTypes","bool","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({ autoResize, disabled, multiLine, type = 'text', onChange, onEnter, onError, onLeave, ...others }) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const errors = getInputErrors({ ...others, type });\n if (errors && onError) onError(errors);\n\n if (autoResize && multiLine && ref?.current) {\n const { scrollHeight, clientHeight } = ref.current;\n if (scrollHeight > clientHeight) resize();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (next = '', event) => {\n if (type === 'number' && isNaN(next)) return;\n const value = parseValue(next, type, others);\n\n onError && onError(getInputErrors({ ...others, type, value }));\n onChange && onChange(value || '', event);\n if (autoResize && multiLine) resize();\n };\n\n const resize = () => {\n ref.current.style.height = 'auto';\n ref.current.style.height = ref.current.scrollHeight + 'px';\n };\n\n return React.createElement(multiLine ? 'textarea' : 'input', {\n ...others,\n disabled,\n ref: autoResize ? ref : undefined,\n test: undefined,\n type: !multiLine ? type : undefined,\n value: others.value || '',\n className: styles(style.input, autoResize && multiLine && style.autoResize, others.className),\n ...(!disabled\n ? {\n onChange: (event) => handleChange(event.target.value, event),\n onFocus: onEnter,\n onBlur: onLeave,\n }\n : {}),\n });\n};\n\nInput.displayName = 'Primitive:Input';\n\nInput.propTypes = {\n autoResize: PropTypes.bool,\n disabled: PropTypes.bool,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n type: PropTypes.string,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onError: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","disabled","multiLine","name","placeholder","type","onEnter","onError","onLeave","argTypes","options","control","defaultValue"],"sources":["../../../src/primitives/Input/Input.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Input } from './Input';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState();\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<Input>::onChange', next, ...others);\n };\n\n return <Input {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Input';\n\nStory.args = {\n disabled: false,\n multiLine: false,\n name: 'Input',\n placeholder: 'placeholder',\n type: 'text',\n onEnter: (...props) => console.log('<Select>::onEnter', ...props),\n onError: (...props) => console.log('<Select>::onError', ...props),\n onLeave: (...props) => console.log('<Select>::onLeave', ...props),\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,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,mBAAmB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACnD,CAAC;EAED,oBAAO,6BAAC,YAAK,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACnE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,OAAO;AAEzBV,KAAK,CAACW,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,OAAO;EACbC,WAAW,EAAE,aAAa;EAC1BC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE;IAAA;IAAA,
|
|
1
|
+
{"version":3,"file":"Input.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","autoResize","disabled","multiLine","name","placeholder","type","onEnter","onError","onLeave","argTypes","options","control","defaultValue"],"sources":["../../../src/primitives/Input/Input.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Input } from './Input';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState();\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<Input>::onChange', next, ...others);\n };\n\n return <Input {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Input';\n\nStory.args = {\n autoResize: false,\n disabled: false,\n multiLine: false,\n name: 'Input',\n placeholder: 'placeholder',\n type: 'text',\n onEnter: (...props) => console.log('<Select>::onEnter', ...props),\n onError: (...props) => console.log('<Select>::onError', ...props),\n onLeave: (...props) => console.log('<Select>::onLeave', ...props),\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,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,mBAAmB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACnD,CAAC;EAED,oBAAO,6BAAC,YAAK,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACnE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,OAAO;AAEzBV,KAAK,CAACW,IAAI;EACRC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,OAAO;EACbC,WAAW,EAAE,aAAa;EAC1BC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE;IAAA;IAAA,mCAAIjB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEkB,OAAO,EAAE;IAAA;IAAA,mCAAIlB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEmB,OAAO,EAAE;IAAA;IAAA,mCAAInB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;AAAA,gCAEhE,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDD,KAAK,CAACqB,QAAQ,GAAG;EACfJ,IAAI,EAAE;IACJK,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACxDC,OAAO,EAAE;MAAEN,IAAI,EAAE;IAAS,CAAC;IAC3BO,YAAY,EAAE;EAChB;AACF,CAAC"}
|
|
@@ -11,6 +11,17 @@ exports[`primitive:<Input> inherit:className 1`] = `
|
|
|
11
11
|
</DocumentFragment>
|
|
12
12
|
`;
|
|
13
13
|
|
|
14
|
+
exports[`primitive:<Input> prop:autoResize 1`] = `
|
|
15
|
+
<DocumentFragment>
|
|
16
|
+
<input
|
|
17
|
+
class="input"
|
|
18
|
+
name="name"
|
|
19
|
+
type="text"
|
|
20
|
+
value=""
|
|
21
|
+
/>
|
|
22
|
+
</DocumentFragment>
|
|
23
|
+
`;
|
|
24
|
+
|
|
14
25
|
exports[`primitive:<Input> prop:disabled 1`] = `
|
|
15
26
|
<DocumentFragment>
|
|
16
27
|
<input
|
|
@@ -23,12 +34,20 @@ exports[`primitive:<Input> prop:disabled 1`] = `
|
|
|
23
34
|
</DocumentFragment>
|
|
24
35
|
`;
|
|
25
36
|
|
|
37
|
+
exports[`primitive:<Input> prop:multiLine && prop:autoResize 1`] = `
|
|
38
|
+
<DocumentFragment>
|
|
39
|
+
<textarea
|
|
40
|
+
class="input autoResize"
|
|
41
|
+
name="name"
|
|
42
|
+
/>
|
|
43
|
+
</DocumentFragment>
|
|
44
|
+
`;
|
|
45
|
+
|
|
26
46
|
exports[`primitive:<Input> prop:multiLine 1`] = `
|
|
27
47
|
<DocumentFragment>
|
|
28
48
|
<textarea
|
|
29
49
|
class="input"
|
|
30
50
|
name="name"
|
|
31
|
-
type="text"
|
|
32
51
|
/>
|
|
33
52
|
</DocumentFragment>
|
|
34
53
|
`;
|