@mirai/ui 1.1.0-f → 1.1.1

package/build/components/InputPhone/InputPhone.js

@@ -9,8 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
+var _theme = require("../../theme");
+var _partials = require("../InputSelect/partials");
 var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
-var _partials = require("../InputText/partials");
+var _partials2 = require("../InputText/partials");
 var _helpers2 = require("./helpers");
 var _InputPhoneModule = _interopRequireDefault(require("./InputPhone.module.css"));
 var _excluded = ["disabled", "error", "hint", "icon", "label", "labelPrefix", "name", "prefixes", "showRequired", "showState", "success", "value", "warning", "onChange", "onEnter", "onError", "onLeave"];
@@ -52,6 +54,7 @@ var InputPhone = function InputPhone(_ref) {
     _ref$onLeave = _ref.onLeave,
     onLeave = _ref$onLeave === void 0 ? function () {} : _ref$onLeave,
     others = _objectWithoutProperties(_ref, _excluded);
+  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     focus = _useState2[0],
@@ -60,16 +63,16 @@ var InputPhone = function InputPhone(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     prefixFocus = _useState4[0],
     setPrefixFocus = _useState4[1];
-  var _useState5 = (0, _react.useState)((0, _helpers2.parseValue)(propValue, prefixes)),
+  var _useState5 = (0, _react.useState)((0, _helpers2.parseValue)(propValue, (0, _helpers2.sanitizePrefixes)(prefixes))),
     _useState6 = _slicedToArray(_useState5, 2),
     value = _useState6[0],
     setValue = _useState6[1];
   (0, _react.useEffect)(function () {
-    setValue((0, _helpers2.parseValue)(propValue, prefixes));
+    setValue((0, _helpers2.parseValue)(propValue, (0, _helpers2.sanitizePrefixes)(prefixes)));
   }, [prefixes, propValue]);
   (0, _react.useEffect)(function () {
     onError((0, _helpers.getInputPhoneErrors)({
-      prefixes: prefixes,
+      prefixes: (0, _helpers2.sanitizePrefixes)(prefixes),
       value: value
     }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -88,9 +91,7 @@ var InputPhone = function InputPhone(_ref) {
     if (!hasPrefixes) nextValue = nextValue.trim();
     setValue(nextValue);
     onChange(nextValue, event);
-    // onError && onError(getInputPhoneErrors({ prefixes, value: nextValue }));
   };
-
   var handleEnter = function handleEnter(event) {
     var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref5$isPhone = _ref5.isPhone,
@@ -119,28 +120,33 @@ var InputPhone = function InputPhone(_ref) {
     stateIcon: showState && (error || success || warning)
   };
   var testId = others.testId;
+  var prefixDirection = !defaultDirection ? '‎' : '';
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
     role: others.role || 'input-phone',
-    className: (0, _helpers.styles)(_InputPhoneModule.default.inputPhone, others.className),
+    className: (0, _helpers.styles)(_InputPhoneModule.default.container, others.className),
     style: others.style
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, (focus || prefixFocus) && !error && _InputTextModule.default.focus)
+    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, (focus || prefixFocus) && _InputTextModule.default.focus)
   }, hasPrefixes && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: (0, _helpers.styles)(_InputTextModule.default.content)
-  }, labelPrefix && /*#__PURE__*/_react.default.createElement(_partials.Label, {
+    className: _InputTextModule.default.content
+  }, labelPrefix && /*#__PURE__*/_react.default.createElement(_partials2.Label, {
     disabled: disabled,
     error: error,
     focus: prefixFocus,
     label: labelPrefix,
-    required: showRequired && others.required,
     value: prefix
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Select, _extends({}, others, {
+  }), prefix && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: _InputPhoneModule.default.prefixValue
+  }, prefixDirection, prefix), /*#__PURE__*/_react.default.createElement(_primitives.Select, _extends({}, others, {
     disabled: disabled,
     name: "".concat(name, "-prefix"),
-    options: prefixes,
+    options: prefixes.map(function (prefix) {
+      return "".concat(prefixDirection).concat(prefix);
+    }),
+    values: (0, _helpers2.sanitizePrefixes)(prefixes),
     style: undefined,
     type: undefined,
     value: prefix || '',
@@ -161,10 +167,7 @@ var InputPhone = function InputPhone(_ref) {
     },
     className: (0, _helpers.styles)(_InputTextModule.default.input, _InputPhoneModule.default.prefix, has.labelPrefix && _InputTextModule.default.withLabel, has.labelPrefix && !(prefixFocus || error || has.prefix) && _InputTextModule.default.empty),
     testId: testId ? "".concat(testId, "-select") : undefined
-  }))), !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: _primitives.ICON.EXPAND_MORE,
-    className: (_InputTextModule.default.icon, _InputTextModule.default.select, _InputPhoneModule.default.expand)
-  })), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+  }))), !disabled && /*#__PURE__*/_react.default.createElement(_partials.Expand, null)), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     forceRow: true,
     className: _InputPhoneModule.default.separator
   })), /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -176,7 +179,7 @@ var InputPhone = function InputPhone(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     wide: true,
     className: _InputTextModule.default.content
-  }, label && /*#__PURE__*/_react.default.createElement(_partials.Label, {
+  }, label && /*#__PURE__*/_react.default.createElement(_partials2.Label, {
     disabled: disabled,
     error: error,
     focus: focus,
@@ -200,11 +203,11 @@ var InputPhone = function InputPhone(_ref) {
     },
     className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel),
     testId: testId ? "".concat(testId, "-input") : undefined
-  })))), has.stateIcon && /*#__PURE__*/_react.default.createElement(_partials.IconState, {
+  })))), has.stateIcon && /*#__PURE__*/_react.default.createElement(_partials2.IconState, {
     error: error,
     success: success,
     warning: warning
-  })), hint && /*#__PURE__*/_react.default.createElement(_partials.Hint, {
+  })), hint && /*#__PURE__*/_react.default.createElement(_partials2.Hint, {
     disabled: disabled,
     error: error,
     hint: hint

package/build/components/InputPhone/InputPhone.js.map

@@ -1 +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","parseValue","setValue","useEffect","getInputPhoneErrors","handleChange","next","event","isPhone","hasPrefixes","split","undefined","prefix","phone","nextValue","replace","join","trim","handleEnter","handleLeave","length","has","stateIcon","testId","role","styles","stylePhone","inputPhone","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 { parseValue } from './helpers';\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(parseValue(propValue, prefixes));\n\n  useEffect(() => {\n    setValue(parseValue(propValue, prefixes));\n  }, [prefixes, propValue]);\n\n  useEffect(() => {\n    onError(getInputPhoneErrors({ prefixes, value }));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prefixes, value]);\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    onChange(nextValue, event);\n    // onError && onError(getInputPhoneErrors({ prefixes, value: nextValue }));\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\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 { testId } = others;\n\n  return (\n    <View\n      role={others.role || 'input-phone'}\n      className={styles(stylePhone.inputPhone, others.className)}\n      style={others.style}\n    >\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                  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              maxLength={12}\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              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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"}
+{"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","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","useState","focus","setFocus","prefixFocus","setPrefixFocus","parseValue","sanitizePrefixes","setValue","useEffect","getInputPhoneErrors","handleChange","next","event","isPhone","hasPrefixes","split","undefined","prefix","phone","nextValue","replace","join","trim","handleEnter","handleLeave","length","has","stateIcon","testId","prefixDirection","role","styles","stylePhone","container","className","style","inputBorder","content","prefixValue","map","input","withLabel","empty","separator","left","required","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, Input, Select, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Expand } from '../InputSelect/partials';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport { parseValue, sanitizePrefixes } from './helpers';\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 defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n\n  const [focus, setFocus] = useState(false);\n  const [prefixFocus, setPrefixFocus] = useState(false);\n  const [value, setValue] = useState(parseValue(propValue, sanitizePrefixes(prefixes)));\n\n  useEffect(() => {\n    setValue(parseValue(propValue, sanitizePrefixes(prefixes)));\n  }, [prefixes, propValue]);\n\n  useEffect(() => {\n    onError(getInputPhoneErrors({ prefixes: sanitizePrefixes(prefixes), value }));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prefixes, value]);\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    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\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 { testId } = others;\n  const prefixDirection = !defaultDirection ? '‎' : '';\n\n  return (\n    <View\n      role={others.role || 'input-phone'}\n      className={styles(stylePhone.container, others.className)}\n      style={others.style}\n    >\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          (focus || prefixFocus) && style.focus,\n        )}\n      >\n        {hasPrefixes && (\n          <>\n            <View row>\n              <View className={style.content}>\n                {labelPrefix && (\n                  <Label {...{ disabled, error, focus: prefixFocus, label: labelPrefix, value: prefix }} />\n                )}\n                {prefix && (\n                  <Text className={stylePhone.prefixValue}>\n                    {prefixDirection}\n                    {prefix}\n                  </Text>\n                )}\n                <Select\n                  {...others}\n                  disabled={disabled}\n                  name={`${name}-prefix`}\n                  options={prefixes.map((prefix) => `${prefixDirection}${prefix}`)}\n                  values={sanitizePrefixes(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                  testId={testId ? `${testId}-select` : undefined}\n                />\n              </View>\n\n              {!disabled && <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              maxLength={12}\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              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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"}

package/build/components/InputPhone/InputPhone.module.css

@@ -1,15 +1,28 @@
-.inputPhone {
+.container {
   margin-bottom: var(--mirai-ui-input-text-padding-y);
 }
 
-.expand {
-  padding-left: calc(var(--mirai-ui-input-text-padding-x) / 4);
-  padding-right: calc(var(--mirai-ui-input-text-padding-x) / 4);
-}
-
 .prefix {
   padding-right: 0;
   width: calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-XS));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.prefixValue {
+  background-color: var(--mirai-ui-base);
+  bottom: var(--mirai-ui-input-text-padding-y);
+  font-family: var(--mirai-ui-input-font);
+  font-size: var(--mirai-ui-input-font-size);
+  font-weight: inherit;
+  left: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  pointer-events: none;
+  position: absolute;
+  right: calc(var(--mirai-ui-input-text-padding-x) / 2);
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 .separator {

package/build/components/InputPhone/InputPhone.stories.js

@@ -71,7 +71,7 @@ var Story = function Story(_ref) {
     return (_console4 = console).log.apply(_console4, ['<InputSelect>::onLeave'].concat(others));
   };
   return /*#__PURE__*/_react.default.createElement(_InputPhone.InputPhone, _extends({}, props, {
-    error: error,
+    error: error !== undefined,
     icon: _primitives.ICON[props.icon],
     value: value,
     onChange: handleChange,
@@ -90,9 +90,9 @@ Story.args = {
   label: 'Phone Number',
   labelPrefix: 'Code',
   name: 'name',
-  prefixes: ['+34', '+44', '+001', '+999', '+39', '+56'],
+  prefixes: ['+1 (United States)', '+34 (Spain)', '+44', '+001 (United States)', '+999', '+39', '+56'],
   required: true,
-  showRequired: false,
+  showRequired: true,
   showState: true,
   success: false,
   value: '+34 615702323',

package/build/components/InputPhone/InputPhone.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhone.stories.js","names":["title","Story","propError","error","propValue","value","props","useState","setValue","setError","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","ICON","icon","storyName","args","disabled","hint","undefined","label","labelPrefix","name","prefixes","required","showRequired","showState","success","warning","testId","style","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 = ({ error: propError, value: propValue, ...props }) => {\n  const [value, setValue] = useState(propValue);\n  const [error, setError] = useState(propError);\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 = (error, ...others) => {\n    setError(error, ...others);\n    console.log('<InputSelect>::onError', error, ...others);\n  };\n\n  const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);\n\n  return (\n    <InputPhone\n      {...props}\n      error={error}\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  value: '+34 615702323',\n  warning: false,\n  // inherited properties\n  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,eAC3B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAAyD;EAAA,IAA5CC,SAAS,QAAhBC,KAAK;IAAoBC,SAAS,QAAhBC,KAAK;IAAgBC,KAAK;EAClE,gBAA0B,IAAAC,eAAQ,EAACH,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEG,QAAQ;EACtB,iBAA0B,IAAAD,eAAQ,EAACL,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEM,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCH,QAAQ,CAACG,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,CAAIb,KAAK,EAAgB;IAAA;IAAA,mCAAXS,MAAM;MAANA,MAAM;IAAA;IACnCH,QAAQ,gBAACN,KAAK,SAAKS,MAAM,EAAC;IAC1B,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,EAAEX,KAAK,SAAKS,MAAM,EAAC;EACzD,CAAC;EAED,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,KAAK,EAAEH,KAAM;IACb,IAAI,EAAEe,gBAAI,CAACZ,KAAK,CAACa,IAAI,CAAE;IACvB,KAAK,EAAEd,KAAM;IACb,QAAQ,EAAEK,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFhB,KAAK,CAACmB,SAAS,GAAG,YAAY;AAE9BnB,KAAK,CAACoB,IAAI,GAAG;EACXC,QAAQ,EAAE,KAAK;EACfnB,KAAK,EAAE,KAAK;EACZoB,IAAI,EAAE,MAAM;EACZJ,IAAI,EAAEK,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;EACd3B,KAAK,EAAE,eAAe;EACtB4B,OAAO,EAAE,KAAK;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlC,KAAK,CAACmC,QAAQ,GAAG;EACfjB,IAAI,EAAE;IACJkB,OAAO,GAAGb,SAAS,4BAAKc,MAAM,CAACC,IAAI,CAACrB,gBAAI,CAAC,EAAC;IAC1CsB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAElB;EAChB;AACF,CAAC"}
+{"version":3,"file":"InputPhone.stories.js","names":["title","Story","propError","error","propValue","value","props","useState","setValue","setError","handleChange","next","others","console","log","handleEnter","handleError","handleLeave","undefined","ICON","icon","storyName","args","disabled","hint","label","labelPrefix","name","prefixes","required","showRequired","showState","success","warning","testId","style","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 = ({ error: propError, value: propValue, ...props }) => {\n  const [value, setValue] = useState(propValue);\n  const [error, setError] = useState(propError);\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 = (error, ...others) => {\n    setError(error, ...others);\n    console.log('<InputSelect>::onError', error, ...others);\n  };\n\n  const handleLeave = (...others) => console.log('<InputSelect>::onLeave', ...others);\n\n  return (\n    <InputPhone\n      {...props}\n      error={error !== undefined}\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: ['+1 (United States)', '+34 (Spain)', '+44', '+001 (United States)', '+999', '+39', '+56'],\n  required: true,\n  showRequired: true,\n  showState: true,\n  success: false,\n  value: '+34 615702323',\n  warning: false,\n  // inherited properties\n  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,eAC3B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAAyD;EAAA,IAA5CC,SAAS,QAAhBC,KAAK;IAAoBC,SAAS,QAAhBC,KAAK;IAAgBC,KAAK;EAClE,gBAA0B,IAAAC,eAAQ,EAACH,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEG,QAAQ;EACtB,iBAA0B,IAAAD,eAAQ,EAACL,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEM,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCH,QAAQ,CAACG,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,CAAIb,KAAK,EAAgB;IAAA;IAAA,mCAAXS,MAAM;MAANA,MAAM;IAAA;IACnCH,QAAQ,gBAACN,KAAK,SAAKS,MAAM,EAAC;IAC1B,aAAAC,OAAO,EAACC,GAAG,mBAAC,wBAAwB,EAAEX,KAAK,SAAKS,MAAM,EAAC;EACzD,CAAC;EAED,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,KAAK,EAAEH,KAAK,KAAKe,SAAU;IAC3B,IAAI,EAAEC,gBAAI,CAACb,KAAK,CAACc,IAAI,CAAE;IACvB,KAAK,EAAEf,KAAM;IACb,QAAQ,EAAEK,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFhB,KAAK,CAACoB,SAAS,GAAG,YAAY;AAE9BpB,KAAK,CAACqB,IAAI,GAAG;EACXC,QAAQ,EAAE,KAAK;EACfpB,KAAK,EAAE,KAAK;EACZqB,IAAI,EAAE,MAAM;EACZJ,IAAI,EAAEF,SAAS;EACfO,KAAK,EAAE,cAAc;EACrBC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,CAAC,oBAAoB,EAAE,aAAa,EAAE,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC;EACpGC,QAAQ,EAAE,IAAI;EACdC,YAAY,EAAE,IAAI;EAClBC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACd3B,KAAK,EAAE,eAAe;EACtB4B,OAAO,EAAE,KAAK;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlC,KAAK,CAACmC,QAAQ,GAAG;EACfhB,IAAI,EAAE;IACJiB,OAAO,GAAGnB,SAAS,4BAAKoB,MAAM,CAACC,IAAI,CAACpB,gBAAI,CAAC,EAAC;IAC1CqB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAExB;EAChB;AACF,CAAC"}