@mirai/ui 1.0.134 → 1.0.136
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 +38 -4
- package/build/components/InputDate/InputDate.js +1 -11
- package/build/components/InputDate/InputDate.js.map +1 -1
- package/build/components/InputDate/InputDate.stories.js +1 -0
- package/build/components/InputDate/InputDate.stories.js.map +1 -1
- package/build/components/InputNumber/InputNumber.js +5 -2
- package/build/components/InputNumber/InputNumber.js.map +1 -1
- 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 +67 -0
- package/build/components/InputOption/InputOption.js +16 -6
- package/build/components/InputOption/InputOption.js.map +1 -1
- package/build/components/InputOption/InputOption.stories.js +2 -0
- package/build/components/InputOption/InputOption.stories.js.map +1 -1
- package/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap +60 -11
- package/build/components/InputPhone/InputPhone.js +6 -3
- package/build/components/InputPhone/InputPhone.js.map +1 -1
- package/build/components/InputPhone/InputPhone.stories.js +1 -0
- package/build/components/InputPhone/InputPhone.stories.js.map +1 -1
- package/build/components/InputPhone/__tests__/__snapshots__/InputPhone.test.js.snap +93 -1
- package/build/components/InputSelect/InputSelect.js +5 -2
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputSelect/InputSelect.stories.js +1 -0
- package/build/components/InputSelect/InputSelect.stories.js.map +1 -1
- package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +76 -1
- package/build/components/InputText/InputText.js +5 -2
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.stories.js +1 -0
- package/build/components/InputText/InputText.stories.js.map +1 -1
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +30 -1
- package/build/components/Progress/Progress.js +40 -0
- package/build/components/Progress/Progress.js.map +1 -0
- package/build/components/Progress/Progress.module.css +37 -0
- package/build/components/Progress/Progress.stories.js +32 -0
- package/build/components/Progress/Progress.stories.js.map +1 -0
- package/build/components/Progress/__tests__/__snapshots__/Progress.test.jsx.snap +79 -0
- package/build/components/Progress/index.js +17 -0
- package/build/components/Progress/index.js.map +1 -0
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +8 -8
- package/build/primitives/Checkbox/Checkbox.js +1 -1
- package/build/primitives/Checkbox/Checkbox.js.map +1 -1
- package/build/primitives/Checkbox/Checkbox.module.css +6 -0
- package/build/primitives/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +8 -8
- package/build/primitives/Radio/Radio.js +2 -1
- package/build/primitives/Radio/Radio.js.map +1 -1
- package/build/primitives/Radio/Radio.module.css +6 -0
- package/build/primitives/Radio/__tests__/__snapshots__/Radio.test.js.snap +7 -0
- package/build/theme/default.theme.css +6 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputPhone.js","names":["InputPhone","disabled","error","hint","icon","label","labelPrefix","name","prefixes","showState","success","propValue","value","warning","onChange","onEnter","onError","onLeave","others","useState","focus","setFocus","prefixFocus","setPrefixFocus","setValue","useEffect","handleChange","next","event","isPhone","hasPrefixes","split","undefined","prefix","phone","nextValue","replace","join","trim","getInputPhoneErrors","handleEnter","handleLeave","length","has","stateIcon","testId","styles","stylePhone","container","className","style","inputBorder","content","required","input","withLabel","empty","ICON","EXPAND_MORE","select","expand","separator","left","displayName","propTypes","PropTypes","bool","string","func","isRequired","arrayOf"],"sources":["../../../src/components/InputPhone/InputPhone.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { getInputPhoneErrors } from '../../helpers';\nimport { Icon, ICON, Input, Select, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport stylePhone from './InputPhone.module.css';\n\nconst InputPhone = ({\n disabled,\n error,\n hint,\n icon,\n label,\n labelPrefix,\n name,\n prefixes,\n showState = true,\n success,\n value: propValue,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onError,\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [prefixFocus, setPrefixFocus] = useState(false);\n const [value, setValue] = useState();\n\n useEffect(() => {\n setValue(propValue);\n }, [propValue]);\n\n const handleChange = (next, event, { isPhone = true } = {}) => {\n const [prefix = '', phone = ''] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n let nextValue = (isPhone ? [prefix, next?.replace(/[^\\d]/g, '')] : [next, phone]).join(' ');\n if (!hasPrefixes) nextValue = nextValue.trim();\n\n setValue(nextValue);\n onError && onError(getInputPhoneErrors({ prefixes, value: nextValue }));\n onChange(nextValue, event);\n };\n\n const handleEnter = (event, { isPhone = true } = {}) => {\n isPhone ? setFocus(true) : setPrefixFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event, { isPhone = true } = {}) => {\n isPhone ? setFocus(false) : setPrefixFocus(false);\n onLeave(event);\n };\n const hasPrefixes = !!prefixes?.length;\n const [prefix, phone] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n const has = {\n icon: !!icon,\n label: !!label,\n labelPrefix: !!labelPrefix,\n prefix: prefix?.length > 0,\n phone: phone?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n const { ['data-testid']: testId } = others;\n\n return (\n <View className={styles(stylePhone.container, 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 || prefixFocus) && !error && style.focus,\n )}\n >\n {hasPrefixes && (\n <>\n <View row>\n <View className={styles(style.content)}>\n {labelPrefix && (\n <Label\n {...{\n disabled,\n error,\n focus: prefixFocus,\n label: labelPrefix,\n required: others.required,\n value: prefix,\n }}\n />\n )}\n <Select\n {...others}\n disabled={disabled}\n name={`${name}-prefix`}\n options={prefixes}\n style={undefined}\n type={undefined}\n value={prefix || ''}\n onChange={(value, event) => handleChange(value, event, { isPhone: false })}\n onEnter={(event) => handleEnter(event, { isPhone: false })}\n onLeave={(event) => handleLeave(event, { isPhone: false })}\n className={styles(\n style.input,\n stylePhone.prefix,\n has.labelPrefix && style.withLabel,\n has.labelPrefix && !(prefixFocus || error || has.prefix) && style.empty,\n )}\n data-testid={testId ? `${testId}-select` : undefined}\n />\n </View>\n {!disabled && <Icon value={ICON.EXPAND_MORE} className={(style.icon, style.select, stylePhone.expand)} />}\n </View>\n <View forceRow className={stylePhone.separator}></View>\n </>\n )}\n\n <View row wide>\n {has.icon && (\n <Icon\n value={icon}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n <View wide className={style.content}>\n {label && <Label {...{ disabled, error, focus, label, required: others.required, value: phone }} />}\n <Input\n {...others}\n disabled={disabled}\n name={`${name}-phone`}\n type=\"tel\"\n value={phone || ''}\n onChange={(value, event) => handleChange(value, event)}\n onEnter={(event) => handleEnter(event)}\n onLeave={(event) => handleLeave(event)}\n className={styles(style.input, has.label && style.withLabel)}\n data-testid={testId ? `${testId}-input` : undefined}\n />\n </View>\n </View>\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputPhone.displayName = 'Component:InputPhone';\n\nInputPhone.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n labelPrefix: PropTypes.string,\n name: PropTypes.string.isRequired,\n prefixes: PropTypes.arrayOf(PropTypes.string),\n showState: PropTypes.bool,\n success: PropTypes.bool,\n value: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onError: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputPhone };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputPhone.js","names":["InputPhone","disabled","error","hint","icon","label","labelPrefix","name","prefixes","showRequired","showState","success","propValue","value","warning","onChange","onEnter","onError","onLeave","others","useState","focus","setFocus","prefixFocus","setPrefixFocus","setValue","useEffect","handleChange","next","event","isPhone","hasPrefixes","split","undefined","prefix","phone","nextValue","replace","join","trim","getInputPhoneErrors","handleEnter","handleLeave","length","has","stateIcon","testId","styles","stylePhone","container","className","style","inputBorder","content","required","input","withLabel","empty","ICON","EXPAND_MORE","select","expand","separator","left","displayName","propTypes","PropTypes","bool","string","func","isRequired","arrayOf"],"sources":["../../../src/components/InputPhone/InputPhone.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { getInputPhoneErrors } from '../../helpers';\nimport { Icon, ICON, Input, Select, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport stylePhone from './InputPhone.module.css';\n\nconst InputPhone = ({\n disabled,\n error,\n hint,\n icon,\n label,\n labelPrefix,\n name,\n prefixes,\n showRequired = false,\n showState = true,\n success,\n value: propValue,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onError,\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [prefixFocus, setPrefixFocus] = useState(false);\n const [value, setValue] = useState();\n\n useEffect(() => {\n setValue(propValue);\n }, [propValue]);\n\n const handleChange = (next, event, { isPhone = true } = {}) => {\n const [prefix = '', phone = ''] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n let nextValue = (isPhone ? [prefix, next?.replace(/[^\\d]/g, '')] : [next, phone]).join(' ');\n if (!hasPrefixes) nextValue = nextValue.trim();\n\n setValue(nextValue);\n onError && onError(getInputPhoneErrors({ prefixes, value: nextValue }));\n onChange(nextValue, event);\n };\n\n const handleEnter = (event, { isPhone = true } = {}) => {\n isPhone ? setFocus(true) : setPrefixFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event, { isPhone = true } = {}) => {\n isPhone ? setFocus(false) : setPrefixFocus(false);\n onLeave(event);\n };\n const hasPrefixes = !!prefixes?.length;\n const [prefix, phone] = hasPrefixes ? value?.split(' ') || [] : [undefined, value];\n const has = {\n icon: !!icon,\n label: !!label,\n labelPrefix: !!labelPrefix,\n prefix: prefix?.length > 0,\n phone: phone?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n const { ['data-testid']: testId } = others;\n\n return (\n <View className={styles(stylePhone.container, 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 || prefixFocus) && !error && style.focus,\n )}\n >\n {hasPrefixes && (\n <>\n <View row>\n <View className={styles(style.content)}>\n {labelPrefix && (\n <Label\n {...{\n disabled,\n error,\n focus: prefixFocus,\n label: labelPrefix,\n required: showRequired && others.required,\n value: prefix,\n }}\n />\n )}\n <Select\n {...others}\n disabled={disabled}\n name={`${name}-prefix`}\n options={prefixes}\n style={undefined}\n type={undefined}\n value={prefix || ''}\n onChange={(value, event) => handleChange(value, event, { isPhone: false })}\n onEnter={(event) => handleEnter(event, { isPhone: false })}\n onLeave={(event) => handleLeave(event, { isPhone: false })}\n className={styles(\n style.input,\n stylePhone.prefix,\n has.labelPrefix && style.withLabel,\n has.labelPrefix && !(prefixFocus || error || has.prefix) && style.empty,\n )}\n data-testid={testId ? `${testId}-select` : undefined}\n />\n </View>\n {!disabled && <Icon value={ICON.EXPAND_MORE} className={(style.icon, style.select, stylePhone.expand)} />}\n </View>\n <View forceRow className={stylePhone.separator}></View>\n </>\n )}\n\n <View row wide>\n {has.icon && (\n <Icon\n value={icon}\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 {...{ disabled, error, focus, label, required: showRequired && others.required, value: phone }} />\n )}\n <Input\n {...others}\n disabled={disabled}\n name={`${name}-phone`}\n type=\"tel\"\n value={phone || ''}\n onChange={(value, event) => handleChange(value, event)}\n onEnter={(event) => handleEnter(event)}\n onLeave={(event) => handleLeave(event)}\n className={styles(style.input, has.label && style.withLabel)}\n data-testid={testId ? `${testId}-input` : undefined}\n />\n </View>\n </View>\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputPhone.displayName = 'Component:InputPhone';\n\nInputPhone.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n labelPrefix: PropTypes.string,\n name: PropTypes.string.isRequired,\n prefixes: PropTypes.arrayOf(PropTypes.string),\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n value: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onError: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputPhone };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputPhone.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","ICON","icon","storyName","args","disabled","error","hint","undefined","label","labelPrefix","name","prefixes","required","showState","success","warning","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/components/InputPhone/InputPhone.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { ICON } from '../../primitives';\nimport { InputPhone } from './InputPhone';\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState('+34 615702323');\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputPhone>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputSelect>::onEnter', ...others);\n\n const handleError = (...others) => console.log('<InputSelect>::onError', ...others);\n\n const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);\n\n return (\n <InputPhone\n {...props}\n icon={ICON[props.icon]}\n value={value}\n onChange={handleChange}\n onEnter={handleEnter}\n onError={handleError}\n onLeave={handleLeave}\n />\n );\n};\n\nStory.storyName = 'InputPhone';\n\nStory.args = {\n disabled: false,\n error: false,\n hint: 'hint',\n icon: undefined,\n label: 'Phone Number',\n labelPrefix: 'Code',\n name: 'name',\n prefixes: ['+34', '+44', '+001', '+999', '+39', '+56'],\n required: true,\n showState: true,\n success: false,\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};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAC3B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,eAAe,CAAC;IAAA;IAA5CC,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,wBAAwB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACxD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,IAAMK,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOL,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,oBACE,6BAAC,sBAAU,eACLN,KAAK;IACT,IAAI,EAAEY,gBAAI,CAACZ,KAAK,CAACa,IAAI,CAAE;IACvB,KAAK,EAAEX,KAAM;IACb,QAAQ,EAAEE,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFZ,KAAK,CAACe,SAAS,GAAG,YAAY;AAE9Bf,KAAK,CAACgB,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZL,IAAI,EAAEM,SAAS;EACfC,KAAK,EAAE,cAAc;EACrBC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC;EACtDC,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;
|
|
1
|
+
{"version":3,"file":"InputPhone.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","ICON","icon","storyName","args","disabled","error","hint","undefined","label","labelPrefix","name","prefixes","required","showRequired","showState","success","warning","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/components/InputPhone/InputPhone.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { ICON } from '../../primitives';\nimport { InputPhone } from './InputPhone';\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState('+34 615702323');\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputPhone>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputSelect>::onEnter', ...others);\n\n const handleError = (...others) => console.log('<InputSelect>::onError', ...others);\n\n const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);\n\n return (\n <InputPhone\n {...props}\n icon={ICON[props.icon]}\n value={value}\n onChange={handleChange}\n onEnter={handleEnter}\n onError={handleError}\n onLeave={handleLeave}\n />\n );\n};\n\nStory.storyName = 'InputPhone';\n\nStory.args = {\n disabled: false,\n error: false,\n hint: 'hint',\n icon: undefined,\n label: 'Phone Number',\n labelPrefix: 'Code',\n name: 'name',\n prefixes: ['+34', '+44', '+001', '+999', '+39', '+56'],\n required: true,\n showRequired: false,\n showState: true,\n success: false,\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};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAC3B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,eAAe,CAAC;IAAA;IAA5CC,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,wBAAwB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACxD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,IAAMK,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOL,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,oBACE,6BAAC,sBAAU,eACLN,KAAK;IACT,IAAI,EAAEY,gBAAI,CAACZ,KAAK,CAACa,IAAI,CAAE;IACvB,KAAK,EAAEX,KAAM;IACb,QAAQ,EAAEE,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFZ,KAAK,CAACe,SAAS,GAAG,YAAY;AAE9Bf,KAAK,CAACgB,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZL,IAAI,EAAEM,SAAS;EACfC,KAAK,EAAE,cAAc;EACrBC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC;EACtDC,QAAQ,EAAE,IAAI;EACdC,YAAY,EAAE,KAAK;EACnBC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAED7B,KAAK,CAAC8B,QAAQ,GAAG;EACfhB,IAAI,EAAE;IACJiB,OAAO,GAAGX,SAAS,4BAAKY,MAAM,CAACC,IAAI,CAACpB,gBAAI,CAAC,EAAC;IAC1CqB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEhB;EAChB;AACF,CAAC"}
|
|
@@ -800,7 +800,7 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
|
|
|
800
800
|
</DocumentFragment>
|
|
801
801
|
`;
|
|
802
802
|
|
|
803
|
-
exports[`component:<InputPhone> prop:required 1`] = `
|
|
803
|
+
exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
|
|
804
804
|
<DocumentFragment>
|
|
805
805
|
<div
|
|
806
806
|
class="view container"
|
|
@@ -902,6 +902,98 @@ exports[`component:<InputPhone> prop:required 1`] = `
|
|
|
902
902
|
</DocumentFragment>
|
|
903
903
|
`;
|
|
904
904
|
|
|
905
|
+
exports[`component:<InputPhone> prop:required 1`] = `
|
|
906
|
+
<DocumentFragment>
|
|
907
|
+
<div
|
|
908
|
+
class="view container"
|
|
909
|
+
>
|
|
910
|
+
<div
|
|
911
|
+
class="view row inputBorder"
|
|
912
|
+
>
|
|
913
|
+
<div
|
|
914
|
+
class="view row"
|
|
915
|
+
>
|
|
916
|
+
<div
|
|
917
|
+
class="view content"
|
|
918
|
+
>
|
|
919
|
+
<span
|
|
920
|
+
class="text paragraph text label"
|
|
921
|
+
>
|
|
922
|
+
labelPrefix
|
|
923
|
+
</span>
|
|
924
|
+
<select
|
|
925
|
+
class="select empty input prefix withLabel empty"
|
|
926
|
+
name="name-prefix"
|
|
927
|
+
required=""
|
|
928
|
+
>
|
|
929
|
+
<option
|
|
930
|
+
value="+34"
|
|
931
|
+
>
|
|
932
|
+
+34
|
|
933
|
+
</option>
|
|
934
|
+
<option
|
|
935
|
+
value="+44"
|
|
936
|
+
>
|
|
937
|
+
+44
|
|
938
|
+
</option>
|
|
939
|
+
<option
|
|
940
|
+
value="+001"
|
|
941
|
+
>
|
|
942
|
+
+001
|
|
943
|
+
</option>
|
|
944
|
+
</select>
|
|
945
|
+
</div>
|
|
946
|
+
<span
|
|
947
|
+
class="icon headline-3 expand"
|
|
948
|
+
>
|
|
949
|
+
<svg
|
|
950
|
+
fill="currentColor"
|
|
951
|
+
height="1em"
|
|
952
|
+
stroke="currentColor"
|
|
953
|
+
stroke-width="0"
|
|
954
|
+
viewBox="0 0 24 24"
|
|
955
|
+
width="1em"
|
|
956
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
957
|
+
>
|
|
958
|
+
<path
|
|
959
|
+
d="M24 24H0V0h24v24z"
|
|
960
|
+
fill="none"
|
|
961
|
+
opacity=".87"
|
|
962
|
+
/>
|
|
963
|
+
<path
|
|
964
|
+
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
|
|
965
|
+
/>
|
|
966
|
+
</svg>
|
|
967
|
+
</span>
|
|
968
|
+
</div>
|
|
969
|
+
<div
|
|
970
|
+
class="view forceRow separator"
|
|
971
|
+
/>
|
|
972
|
+
<div
|
|
973
|
+
class="view row wide"
|
|
974
|
+
>
|
|
975
|
+
<div
|
|
976
|
+
class="view wide content"
|
|
977
|
+
>
|
|
978
|
+
<span
|
|
979
|
+
class="text paragraph text label"
|
|
980
|
+
>
|
|
981
|
+
label
|
|
982
|
+
</span>
|
|
983
|
+
<input
|
|
984
|
+
class="input input withLabel"
|
|
985
|
+
name="name-phone"
|
|
986
|
+
required=""
|
|
987
|
+
type="tel"
|
|
988
|
+
value=""
|
|
989
|
+
/>
|
|
990
|
+
</div>
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
</div>
|
|
994
|
+
</DocumentFragment>
|
|
995
|
+
`;
|
|
996
|
+
|
|
905
997
|
exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
|
|
906
998
|
<DocumentFragment>
|
|
907
999
|
<div
|
|
@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
|
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
12
|
var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
|
|
13
13
|
var _partials = require("../InputText/partials");
|
|
14
|
-
var _excluded = ["disabled", "error", "hint", "label", "showState", "success", "warning", "onChange", "onEnter", "onLeave"];
|
|
14
|
+
var _excluded = ["disabled", "error", "hint", "label", "showRequired", "showState", "success", "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 }; }
|
|
@@ -30,6 +30,8 @@ var InputSelect = function InputSelect(_ref) {
|
|
|
30
30
|
error = _ref.error,
|
|
31
31
|
hint = _ref.hint,
|
|
32
32
|
label = _ref.label,
|
|
33
|
+
_ref$showRequired = _ref.showRequired,
|
|
34
|
+
showRequired = _ref$showRequired === void 0 ? false : _ref$showRequired,
|
|
33
35
|
_ref$showState = _ref.showState,
|
|
34
36
|
showState = _ref$showState === void 0 ? true : _ref$showState,
|
|
35
37
|
success = _ref.success,
|
|
@@ -77,7 +79,7 @@ var InputSelect = function InputSelect(_ref) {
|
|
|
77
79
|
error: error,
|
|
78
80
|
focus: focus,
|
|
79
81
|
label: label,
|
|
80
|
-
required: others.required,
|
|
82
|
+
required: showRequired && others.required,
|
|
81
83
|
value: others.value
|
|
82
84
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Select, _extends({}, others, {
|
|
83
85
|
disabled: disabled,
|
|
@@ -108,6 +110,7 @@ InputSelect.propTypes = {
|
|
|
108
110
|
hint: _propTypes.default.string,
|
|
109
111
|
label: _propTypes.default.string,
|
|
110
112
|
name: _propTypes.default.string.isRequired,
|
|
113
|
+
showRequired: _propTypes.default.bool,
|
|
111
114
|
showState: _propTypes.default.bool,
|
|
112
115
|
success: _propTypes.default.bool,
|
|
113
116
|
warning: _propTypes.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","styles","style","inputContainer","className","inputBorder","content","required","input","withLabel","empty","ICON","EXPAND_MORE","icon","select","displayName","propTypes","PropTypes","bool","string","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Select, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\n\nconst InputSelect = ({\n disabled,\n error,\n hint,\n label,\n showState = true,\n success,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n event.target?.blur();\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n 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 focus && !error && style.focus,\n error && style.error,\n )}\n >\n <View wide className={style.content}>\n {label && <Label
|
|
1
|
+
{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","showRequired","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","styles","style","inputContainer","className","inputBorder","content","required","input","withLabel","empty","ICON","EXPAND_MORE","icon","select","displayName","propTypes","PropTypes","bool","string","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Select, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\n\nconst InputSelect = ({\n disabled,\n error,\n hint,\n label,\n showRequired = false,\n showState = true,\n success,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n event.target?.blur();\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n 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 focus && !error && style.focus,\n error && style.error,\n )}\n >\n <View wide className={style.content}>\n {label && (\n <Label\n {...{\n disabled,\n error,\n focus,\n label,\n required: showRequired && others.required,\n value: others.value,\n }}\n />\n )}\n\n <Select\n {...others}\n disabled={disabled}\n value={others.value || ''}\n className={styles(\n style.input,\n has.label && style.withLabel,\n !!label && !(focus || error || has.value) && style.empty,\n )}\n style={undefined}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n </View>\n\n {!disabled && <Icon value={ICON.EXPAND_MORE} className={styles(style.icon, style.select)} />}\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA+D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE/D,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAaX;EAAA;EAAA,IAZJC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,KAAK;IAAA,sBACpBC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAA,oBACnBC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IAAA,oBAClBC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAET,gBAA0B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAlCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAEC,KAAK,EAAK;IAAA;IACrCT,QAAQ,CAACQ,KAAK,EAAEC,KAAK,CAAC;IACtB,iBAAAA,KAAK,CAACC,MAAM,kDAAZ,cAAcC,IAAI,EAAE;EACtB,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIH,KAAK,EAAK;IAC7BH,QAAQ,CAAC,IAAI,CAAC;IACdL,OAAO,CAACQ,KAAK,CAAC;EAChB,CAAC;EAED,IAAMI,WAAW,GAAG,SAAdA,WAAW,CAAIJ,KAAK,EAAK;IAC7BH,QAAQ,CAAC,KAAK,CAAC;IACfJ,OAAO,CAACO,KAAK,CAAC;EAChB,CAAC;EAED,IAAMK,GAAG,GAAG;IACVnB,KAAK,EAAE,CAAC,CAACA,KAAK;IACda,KAAK,EAAEL,MAAM,CAACK,KAAK,KAAKO,SAAS,IAAI,kBAAAZ,MAAM,CAACK,KAAK,kDAAZ,cAAcQ,MAAM,IAAG,CAAC;IAC7DC,SAAS,EAAEpB,SAAS,KAAKJ,KAAK,IAAIK,OAAO,IAAIC,OAAO;EACtD,CAAC;EAED,oBACE,6BAAC,gBAAI;IAAC,SAAS,EAAE,IAAAmB,eAAM,EAACC,wBAAK,CAACC,cAAc,EAAEjB,MAAM,CAACkB,SAAS,CAAE;IAAC,KAAK,EAAElB,MAAM,CAACgB;EAAM,gBACnF,6BAAC,gBAAI;IACH,GAAG;IACH,SAAS,EAAE,IAAAD,eAAM,EACfC,wBAAK,CAACG,WAAW,EACjB9B,QAAQ,IAAI2B,wBAAK,CAAC3B,QAAQ,EAC1Ba,KAAK,IAAI,CAACZ,KAAK,IAAI0B,wBAAK,CAACd,KAAK,EAC9BZ,KAAK,IAAI0B,wBAAK,CAAC1B,KAAK;EACpB,gBAEF,6BAAC,gBAAI;IAAC,IAAI;IAAC,SAAS,EAAE0B,wBAAK,CAACI;EAAQ,GACjC5B,KAAK,iBACJ,6BAAC,eAAK;IAEFH,QAAQ,EAARA,QAAQ;IACRC,KAAK,EAALA,KAAK;IACLY,KAAK,EAALA,KAAK;IACLV,KAAK,EAALA,KAAK;IACL6B,QAAQ,EAAE5B,YAAY,IAAIO,MAAM,CAACqB,QAAQ;IACzChB,KAAK,EAAEL,MAAM,CAACK;EAAK,EAGxB,eAED,6BAAC,kBAAM,eACDL,MAAM;IACV,QAAQ,EAAEX,QAAS;IACnB,KAAK,EAAEW,MAAM,CAACK,KAAK,IAAI,EAAG;IAC1B,SAAS,EAAE,IAAAU,eAAM,EACfC,wBAAK,CAACM,KAAK,EACXX,GAAG,CAACnB,KAAK,IAAIwB,wBAAK,CAACO,SAAS,EAC5B,CAAC,CAAC/B,KAAK,IAAI,EAAEU,KAAK,IAAIZ,KAAK,IAAIqB,GAAG,CAACN,KAAK,CAAC,IAAIW,wBAAK,CAACQ,KAAK,CACxD;IACF,KAAK,EAAEZ,SAAU;IACjB,QAAQ,EAAER,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB,CACG,EAEN,CAACrB,QAAQ,iBAAI,6BAAC,gBAAI;IAAC,KAAK,EAAEoC,gBAAI,CAACC,WAAY;IAAC,SAAS,EAAE,IAAAX,eAAM,EAACC,wBAAK,CAACW,IAAI,EAAEX,wBAAK,CAACY,MAAM;EAAE,EAAG,EAC3FjB,GAAG,CAACG,SAAS,iBAAI,6BAAC,mBAAS;IAAOxB,KAAK,EAALA,KAAK;IAAEK,OAAO,EAAPA,OAAO;IAAEC,OAAO,EAAPA;EAAO,EAAM,CAC3D,EAENL,IAAI,iBAAI,6BAAC,cAAI;IAAOF,QAAQ,EAARA,QAAQ;IAAEC,KAAK,EAALA,KAAK;IAAEC,IAAI,EAAJA;EAAI,EAAM,CAC3C;AAEX,CAAC;AAAC;AAEFH,WAAW,CAACyC,WAAW,GAAG,uBAAuB;AAEjDzC,WAAW,CAAC0C,SAAS,GAAG;EACtBzC,QAAQ,EAAE0C,kBAAS,CAACC,IAAI;EACxB1C,KAAK,EAAEyC,kBAAS,CAACC,IAAI;EACrBzC,IAAI,EAAEwC,kBAAS,CAACE,MAAM;EACtBzC,KAAK,EAAEuC,kBAAS,CAACE,MAAM;EACvBC,IAAI,EAAEH,kBAAS,CAACE,MAAM,CAACE,UAAU;EACjC1C,YAAY,EAAEsC,kBAAS,CAACC,IAAI;EAC5BtC,SAAS,EAAEqC,kBAAS,CAACC,IAAI;EACzBrC,OAAO,EAAEoC,kBAAS,CAACC,IAAI;EACvBpC,OAAO,EAAEmC,kBAAS,CAACC,IAAI;EACvBnC,QAAQ,EAAEkC,kBAAS,CAACK,IAAI;EACxBtC,OAAO,EAAEiC,kBAAS,CAACK,IAAI;EACvBrC,OAAO,EAAEgC,kBAAS,CAACK;AACrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleLeave","storyName","args","disabled","emptyOption","error","hint","label","name","required","showState","success","warning","options","argTypes"],"sources":["../../../src/components/InputSelect/InputSelect.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputSelect } from './InputSelect';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState('two');\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputSelect>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputSelect>::onEnter', ...others);\n\n const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);\n\n return <InputSelect {...props} value={value} onChange={handleChange} onEnter={handleEnter} onLeave={handleLeave} />;\n};\n\nStory.storyName = 'InputSelect';\n\nStory.args = {\n disabled: false,\n emptyOption: 'Select one option...',\n error: false,\n hint: 'hint',\n label: 'label',\n name: 'name',\n required: false,\n showState: true,\n success: false,\n warning: false,\n options: ['one', 'two', 'three', 'four', 'five'],\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE7B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAlCC,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,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE,YAAa;IAAC,OAAO,EAAEK,WAAY;IAAC,OAAO,EAAEC;EAAY,GAAG;AACrH,CAAC;AAAC;AAEFX,KAAK,CAACY,SAAS,GAAG,aAAa;AAE/BZ,KAAK,CAACa,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,WAAW,EAAE,sBAAsB;EACnCC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM;AAAC,gCAE/C,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;
|
|
1
|
+
{"version":3,"file":"InputSelect.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleLeave","storyName","args","disabled","emptyOption","error","hint","label","name","required","showRequired","showState","success","warning","options","argTypes"],"sources":["../../../src/components/InputSelect/InputSelect.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputSelect } from './InputSelect';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState('two');\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputSelect>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputSelect>::onEnter', ...others);\n\n const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);\n\n return <InputSelect {...props} value={value} onChange={handleChange} onEnter={handleEnter} onLeave={handleLeave} />;\n};\n\nStory.storyName = 'InputSelect';\n\nStory.args = {\n disabled: false,\n emptyOption: 'Select one option...',\n error: false,\n hint: 'hint',\n label: 'label',\n name: 'name',\n required: false,\n showRequired: false,\n showState: true,\n success: false,\n warning: false,\n options: ['one', 'two', 'three', 'four', 'five'],\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE7B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAlCC,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,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,SAAKF,MAAM,EAAC;EAAA;EAEnF,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE,YAAa;IAAC,OAAO,EAAEK,WAAY;IAAC,OAAO,EAAEC;EAAY,GAAG;AACrH,CAAC;AAAC;AAEFX,KAAK,CAACY,SAAS,GAAG,aAAa;AAE/BZ,KAAK,CAACa,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,WAAW,EAAE,sBAAsB;EACnCC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,KAAK;EACnBC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM;AAAC,gCAE/C,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDzB,KAAK,CAAC0B,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -334,7 +334,7 @@ exports[`component:<InputSelect> prop:label 1`] = `
|
|
|
334
334
|
</DocumentFragment>
|
|
335
335
|
`;
|
|
336
336
|
|
|
337
|
-
exports[`component:<InputSelect> prop:required 1`] = `
|
|
337
|
+
exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] = `
|
|
338
338
|
<DocumentFragment>
|
|
339
339
|
<div
|
|
340
340
|
class="view inputContainer"
|
|
@@ -414,6 +414,81 @@ exports[`component:<InputSelect> prop:required 1`] = `
|
|
|
414
414
|
</DocumentFragment>
|
|
415
415
|
`;
|
|
416
416
|
|
|
417
|
+
exports[`component:<InputSelect> prop:required 1`] = `
|
|
418
|
+
<DocumentFragment>
|
|
419
|
+
<div
|
|
420
|
+
class="view inputContainer"
|
|
421
|
+
>
|
|
422
|
+
<div
|
|
423
|
+
class="view row inputBorder"
|
|
424
|
+
>
|
|
425
|
+
<div
|
|
426
|
+
class="view wide content"
|
|
427
|
+
>
|
|
428
|
+
<span
|
|
429
|
+
class="text paragraph text label"
|
|
430
|
+
>
|
|
431
|
+
label
|
|
432
|
+
</span>
|
|
433
|
+
<select
|
|
434
|
+
class="select empty input withLabel empty"
|
|
435
|
+
name="name"
|
|
436
|
+
required=""
|
|
437
|
+
>
|
|
438
|
+
<option
|
|
439
|
+
value="one"
|
|
440
|
+
>
|
|
441
|
+
one
|
|
442
|
+
</option>
|
|
443
|
+
<option
|
|
444
|
+
value="two"
|
|
445
|
+
>
|
|
446
|
+
two
|
|
447
|
+
</option>
|
|
448
|
+
<option
|
|
449
|
+
value="three"
|
|
450
|
+
>
|
|
451
|
+
three
|
|
452
|
+
</option>
|
|
453
|
+
<option
|
|
454
|
+
value="four"
|
|
455
|
+
>
|
|
456
|
+
four
|
|
457
|
+
</option>
|
|
458
|
+
<option
|
|
459
|
+
value="five"
|
|
460
|
+
>
|
|
461
|
+
five
|
|
462
|
+
</option>
|
|
463
|
+
</select>
|
|
464
|
+
</div>
|
|
465
|
+
<span
|
|
466
|
+
class="icon headline-3 icon select"
|
|
467
|
+
>
|
|
468
|
+
<svg
|
|
469
|
+
fill="currentColor"
|
|
470
|
+
height="1em"
|
|
471
|
+
stroke="currentColor"
|
|
472
|
+
stroke-width="0"
|
|
473
|
+
viewBox="0 0 24 24"
|
|
474
|
+
width="1em"
|
|
475
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
476
|
+
>
|
|
477
|
+
<path
|
|
478
|
+
d="M24 24H0V0h24v24z"
|
|
479
|
+
fill="none"
|
|
480
|
+
opacity=".87"
|
|
481
|
+
/>
|
|
482
|
+
<path
|
|
483
|
+
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
|
|
484
|
+
/>
|
|
485
|
+
</svg>
|
|
486
|
+
</span>
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
</DocumentFragment>
|
|
490
|
+
`;
|
|
491
|
+
|
|
417
492
|
exports[`component:<InputSelect> prop:success 1`] = `
|
|
418
493
|
<DocumentFragment>
|
|
419
494
|
<div
|
|
@@ -11,7 +11,7 @@ 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", "showState", "success", "type", "warning", "onChange", "onEnter", "onLeave"];
|
|
14
|
+
var _excluded = ["disabled", "error", "hint", "icon", "label", "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 }; }
|
|
@@ -31,6 +31,8 @@ var InputText = function InputText(_ref) {
|
|
|
31
31
|
hint = _ref.hint,
|
|
32
32
|
icon = _ref.icon,
|
|
33
33
|
label = _ref.label,
|
|
34
|
+
_ref$showRequired = _ref.showRequired,
|
|
35
|
+
showRequired = _ref$showRequired === void 0 ? false : _ref$showRequired,
|
|
34
36
|
_ref$showState = _ref.showState,
|
|
35
37
|
showState = _ref$showState === void 0 ? true : _ref$showState,
|
|
36
38
|
success = _ref.success,
|
|
@@ -92,7 +94,7 @@ var InputText = function InputText(_ref) {
|
|
|
92
94
|
error: error,
|
|
93
95
|
focus: focus,
|
|
94
96
|
label: label,
|
|
95
|
-
required: others.required,
|
|
97
|
+
required: showRequired && others.required,
|
|
96
98
|
value: others.value
|
|
97
99
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, others, {
|
|
98
100
|
disabled: disabled,
|
|
@@ -128,6 +130,7 @@ InputText.propTypes = {
|
|
|
128
130
|
label: _propTypes.default.string,
|
|
129
131
|
multiLine: _propTypes.default.bool,
|
|
130
132
|
name: _propTypes.default.string.isRequired,
|
|
133
|
+
showRequired: _propTypes.default.bool,
|
|
131
134
|
showState: _propTypes.default.bool,
|
|
132
135
|
success: _propTypes.default.bool,
|
|
133
136
|
type: _propTypes.default.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","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","multiLine","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 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 && <Label
|
|
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","multiLine","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 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 {...others}\n disabled={disabled}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, has.label && style.withLabel)}\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleLeave","ICON","icon","storyName","args","disabled","error","hint","undefined","label","multiLine","name","placeholder","required","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 = (props) => {\n const [value, setValue] = useState('value');\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 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 showState: true,\n success: false,\n type: 'text',\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,eAEzB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,OAAO,CAAC;IAAA;IAApCC,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,oBACE,6BAAC,oBAAS,eACJN,KAAK;IACT,IAAI,EAAEW,gBAAI,CAACX,KAAK,CAACY,IAAI,CAAE;IACvB,KAAK,EAAEV,KAAM;IACb,QAAQ,EAAEE,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFX,KAAK,CAACc,SAAS,GAAG,WAAW;AAE7Bd,KAAK,CAACe,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZL,IAAI,EAAEM,SAAS;EACfC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,MAAM;EACZC,WAAW,EAAE,EAAE;EACfC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;
|
|
1
|
+
{"version":3,"file":"InputText.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","handleEnter","handleLeave","ICON","icon","storyName","args","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 = (props) => {\n const [value, setValue] = useState('value');\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 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 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,eAEzB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,EAAC,OAAO,CAAC;IAAA;IAApCC,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,oBACE,6BAAC,oBAAS,eACJN,KAAK;IACT,IAAI,EAAEW,gBAAI,CAACX,KAAK,CAACY,IAAI,CAAE;IACvB,KAAK,EAAEV,KAAM;IACb,QAAQ,EAAEE,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFX,KAAK,CAACc,SAAS,GAAG,WAAW;AAE7Bd,KAAK,CAACe,IAAI;EACRC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZL,IAAI,EAAEM,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;EACZC,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAED7B,KAAK,CAAC8B,QAAQ,GAAG;EACfjB,IAAI,EAAE;IACJkB,OAAO,GAAGZ,SAAS,4BAAKa,MAAM,CAACC,IAAI,CAACrB,gBAAI,CAAC,EAAC;IAC1CsB,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"}
|
|
@@ -213,7 +213,7 @@ exports[`component:<InputText> prop:multiLine 1`] = `
|
|
|
213
213
|
</DocumentFragment>
|
|
214
214
|
`;
|
|
215
215
|
|
|
216
|
-
exports[`component:<InputText> prop:required 1`] = `
|
|
216
|
+
exports[`component:<InputText> prop:required & prop:showRequired (true) 1`] = `
|
|
217
217
|
<DocumentFragment>
|
|
218
218
|
<div
|
|
219
219
|
class="view inputContainer"
|
|
@@ -247,6 +247,35 @@ exports[`component:<InputText> prop:required 1`] = `
|
|
|
247
247
|
</DocumentFragment>
|
|
248
248
|
`;
|
|
249
249
|
|
|
250
|
+
exports[`component:<InputText> prop:required 1`] = `
|
|
251
|
+
<DocumentFragment>
|
|
252
|
+
<div
|
|
253
|
+
class="view inputContainer"
|
|
254
|
+
>
|
|
255
|
+
<div
|
|
256
|
+
class="view row inputBorder"
|
|
257
|
+
>
|
|
258
|
+
<div
|
|
259
|
+
class="view wide content"
|
|
260
|
+
>
|
|
261
|
+
<span
|
|
262
|
+
class="text paragraph text label"
|
|
263
|
+
>
|
|
264
|
+
label
|
|
265
|
+
</span>
|
|
266
|
+
<input
|
|
267
|
+
class="input input withLabel"
|
|
268
|
+
name="name"
|
|
269
|
+
required=""
|
|
270
|
+
type="text"
|
|
271
|
+
value=""
|
|
272
|
+
/>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</DocumentFragment>
|
|
277
|
+
`;
|
|
278
|
+
|
|
250
279
|
exports[`component:<InputText> prop:showState (false) 1`] = `
|
|
251
280
|
<DocumentFragment>
|
|
252
281
|
<div
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Progress = void 0;
|
|
7
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _helpers = require("../../helpers");
|
|
10
|
+
var _primitives = require("../../primitives");
|
|
11
|
+
var _ProgressModule = _interopRequireDefault(require("./Progress.module.css"));
|
|
12
|
+
var _excluded = ["indeterminate", "value", "visible"];
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
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); }
|
|
15
|
+
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; }
|
|
16
|
+
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; }
|
|
17
|
+
var Progress = function Progress(_ref) {
|
|
18
|
+
var _ref$indeterminate = _ref.indeterminate,
|
|
19
|
+
indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
|
|
20
|
+
_ref$value = _ref.value,
|
|
21
|
+
value = _ref$value === void 0 ? 0 : _ref$value,
|
|
22
|
+
_ref$visible = _ref.visible,
|
|
23
|
+
visible = _ref$visible === void 0 ? false : _ref$visible,
|
|
24
|
+
others = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
|
|
26
|
+
className: (0, _helpers.styles)(_ProgressModule.default.progress, visible && _ProgressModule.default.visible, others.className)
|
|
27
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
28
|
+
className: (0, _helpers.styles)(_ProgressModule.default.value, indeterminate && _ProgressModule.default.indeterminate),
|
|
29
|
+
style: !indeterminate ? {
|
|
30
|
+
width: "".concat(value, "%")
|
|
31
|
+
} : undefined
|
|
32
|
+
}));
|
|
33
|
+
};
|
|
34
|
+
exports.Progress = Progress;
|
|
35
|
+
Progress.propTypes = {
|
|
36
|
+
indeterminate: _propTypes.default.bool,
|
|
37
|
+
value: _propTypes.default.number,
|
|
38
|
+
visible: _propTypes.default.bool
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=Progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Progress.js","names":["Progress","indeterminate","value","visible","others","styles","style","progress","className","width","undefined","propTypes","PropTypes","bool","number"],"sources":["../../../src/components/Progress/Progress.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { View } from '../../primitives';\nimport style from './Progress.module.css';\n\nconst Progress = ({ indeterminate = false, value = 0, visible = false, ...others }) => (\n <View {...others} className={styles(style.progress, visible && style.visible, others.className)}>\n <View\n className={styles(style.value, indeterminate && style.indeterminate)}\n style={!indeterminate ? { width: `${value}%` } : undefined}\n />\n </View>\n);\n\nProgress.propTypes = {\n indeterminate: PropTypes.bool,\n value: PropTypes.number,\n visible: PropTypes.bool,\n};\n\nexport { Progress };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ;EAAA,8BAAMC,aAAa;IAAbA,aAAa,mCAAG,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAKC,MAAM;EAAA,oBAC9E,6BAAC,gBAAI,eAAKA,MAAM;IAAE,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEJ,OAAO,IAAIG,uBAAK,CAACH,OAAO,EAAEC,MAAM,CAACI,SAAS;EAAE,iBAC9F,6BAAC,gBAAI;IACH,SAAS,EAAE,IAAAH,eAAM,EAACC,uBAAK,CAACJ,KAAK,EAAED,aAAa,IAAIK,uBAAK,CAACL,aAAa,CAAE;IACrE,KAAK,EAAE,CAACA,aAAa,GAAG;MAAEQ,KAAK,YAAKP,KAAK;IAAI,CAAC,GAAGQ;EAAU,EAC3D,CACG;AAAA,CACR;AAAC;AAEFV,QAAQ,CAACW,SAAS,GAAG;EACnBV,aAAa,EAAEW,kBAAS,CAACC,IAAI;EAC7BX,KAAK,EAAEU,kBAAS,CAACE,MAAM;EACvBX,OAAO,EAAES,kBAAS,CAACC;AACrB,CAAC"}
|