@mirai/ui 1.0.118 → 1.0.120

package/build/components/InputText/InputText.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _InputTextModule = _interopRequireDefault(require("./InputText.module.css"));
+var _partials = require("./partials");
 var _excluded = ["disabled", "error", "hint", "icon", "label", "showState", "success", "type", "warning", "onChange", "onEnter", "onLeave"];
 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); }
 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; }
@@ -57,7 +58,7 @@ var InputText = function InputText(_ref) {
     setFocus(true);
     onEnter(event);
   };
-  var handleLeave = function handleLeave() {
+  var handleLeave = function handleLeave(event) {
     setFocus(false);
     onLeave(event);
   };
@@ -80,39 +81,41 @@ var InputText = function InputText(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
     className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, focus && !error && _InputTextModule.default.focus)
-  }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, has.icon && _InputTextModule.default.withIcon, (focus || error || has.value) && _InputTextModule.default.withValue)
-  }, label), has.icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+  }, has.icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: icon || _primitives.ICON.SEARCH,
     className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.left, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
+  }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    wide: true,
+    className: _InputTextModule.default.content
+  }, label && /*#__PURE__*/_react.default.createElement(_partials.Label, {
+    disabled: disabled,
+    error: error,
+    focus: focus,
+    label: label,
+    value: others.value
   }), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, others, {
     disabled: disabled,
     type: !is.password || password ? type : 'text',
     value: others.value || '',
-    className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, has.icon && _InputTextModule.default.iconLeft),
+    className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel),
     onChange: handleChange,
     onEnter: handleEnter,
     onLeave: handleLeave
-  })), ((is.password || is.search) && !disabled || has.stateIcon) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    row: true,
-    className: _InputTextModule.default.icons
-  }, (is.password || is.search) && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  }))), (is.password || is.search) && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     tabIndex: -1,
     onPress: handlePress
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: is.password ? password ? _primitives.ICON.EYE_CLOSE : _primitives.ICON.EYE_OPEN : _primitives.ICON.CLOSE,
-    className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.pressable)
-  })), has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: (0, _helpers.getIconState)({
-      error: error,
-      success: success,
-      warning: warning
-    }),
-    className: (0, _helpers.styles)(_InputTextModule.default.icon, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
-  }))), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    small: true,
-    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
-  }, hint));
+    className: _InputTextModule.default.icon
+  })), has.stateIcon && /*#__PURE__*/_react.default.createElement(_partials.IconState, {
+    error: error,
+    success: success,
+    warning: warning
+  })), hint && /*#__PURE__*/_react.default.createElement(_partials.Hint, {
+    disabled: disabled,
+    error: error,
+    hint: hint
+  }));
 };
 exports.InputText = InputText;
 InputText.displayName = 'Component:InputText';

package/build/components/InputText/InputText.js.map

@@ -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","text","withIcon","withValue","ICON","SEARCH","left","input","withLabel","iconLeft","icons","EYE_CLOSE","EYE_OPEN","CLOSE","pressable","getIconState","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 { getIconState, styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\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 = () => {\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        {label && (\n          <Text\n            className={styles(\n              style.text,\n              style.label,\n              disabled && style.disabled,\n              focus && style.focus,\n              error && style.error,\n              has.icon && style.withIcon,\n              (focus || error || has.value) && style.withValue,\n            )}\n          >\n            {label}\n          </Text>\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\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, has.icon && style.iconLeft)}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n\n        {(((is.password || is.search) && !disabled) || has.stateIcon) && (\n          <View row className={style.icons}>\n            {(is.password || is.search) && !disabled && (\n              <Pressable tabIndex={-1} onPress={handlePress}>\n                <Icon\n                  value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n                  className={styles(style.icon, style.pressable)}\n                />\n              </Pressable>\n            )}\n\n            {has.stateIcon && (\n              <Icon\n                value={getIconState({ error, success, warning })}\n                className={styles(\n                  style.icon,\n                  error ? style.error : warning ? style.warning : success ? style.success : undefined,\n                )}\n              />\n            )}\n          </View>\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\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  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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"}
+{"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","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 {...{ disabled, error, focus, label, value: others.value }} />}\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) && !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  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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"}

package/build/components/InputText/InputText.module.css

@@ -8,6 +8,9 @@
 .inputBorder {
   border: var(--mirai-ui-input-text-border);
   border-radius: var(--mirai-ui-input-text-radius);
+  background-color: white;
+  padding-left: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  padding-right: calc(var(--mirai-ui-input-text-padding-x) / 2);
 }
 
 .inputBorder.disabled {
@@ -22,27 +25,30 @@
   border-color: var(--mirai-ui-input-text-focus);
 }
 
+.content {
+  position: relative;
+}
+
 .icon {
   font-size: var(--mirai-ui-input-text-icon);
   height: var(--mirai-ui-input-text-icon);
   line-height: var(--mirai-ui-input-text-icon);
   width: var(--mirai-ui-input-text-icon);
+  margin: 0 calc(var(--mirai-ui-input-text-padding-x) / 3);
 }
 
 .icon.left {
   color: var(--mirai-ui-input-disabled);
-  left: var(--mirai-ui-input-text-padding-x);
   pointer-events: none;
-  position: absolute;
 }
 
-.icon.pressable {
-  color: var(--mirai-ui-content);
+.icon.select {
+  pointer-events: none;
 }
 
 .input {
   border-radius: var(--mirai-ui-input-text-radius);
-  padding: var(--mirai-ui-input-text-padding-y) var(--mirai-ui-input-text-padding-x);
+  padding: var(--mirai-ui-input-text-padding-y) calc(var(--mirai-ui-input-text-padding-x) / 2);
   min-height: var(--mirai-ui-input-min-height);
 }
 
@@ -50,14 +56,6 @@
   padding-top: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S));
 }
 
-.input.iconLeft {
-  padding-left: calc(var(--mirai-ui-input-text-icon) + var(--mirai-ui-input-text-padding-x) + var(--mirai-ui-space-XS));
-}
-
-.input.iconRight {
-  padding-right: calc(var(--mirai-ui-input-text-padding-x) * 3);
-}
-
 .input.empty:not(:focus) {
   color: var(--mirai-ui-base);
 }
@@ -66,28 +64,14 @@
   margin: calc(var(--mirai-ui-input-text-padding-y) / 4) var(--mirai-ui-input-text-padding-x);
 }
 
-.icons {
-  position: absolute;
-  right: var(--mirai-ui-input-text-padding-x);
-}
-
-.icons.select {
-  pointer-events: none;
-}
-
-.icons > .icon {
-  margin-left: calc(var(--mirai-ui-input-text-icon) / 2);
-  position: relative;
-}
-
 .label {
   background-color: var(--mirai-ui-input-background);
   font-size: var(--mirai-ui-input-font-size);
-  left: var(--mirai-ui-input-text-padding-x);
+  left: calc(var(--mirai-ui-input-text-padding-x) / 2);
   line-height: calc(var(--mirai-ui-input-min-height) - var(--mirai-ui-border-width));
   pointer-events: none;
   position: absolute;
-  right: var(--mirai-ui-input-text-padding-x);
+  right: calc(var(--mirai-ui-input-text-padding-x) / 2);
   top: var(--mirai-ui-border-width);
   transition: font-size var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     line-height var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
@@ -95,14 +79,9 @@
     top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
 }
 
-.label.withIcon {
-  left: calc(var(--mirai-ui-input-text-icon) + var(--mirai-ui-input-text-padding-x) + var(--mirai-ui-space-XS));
-}
-
 .label.withValue {
   font-size: var(--mirai-ui-font-size-small);
   line-height: var(--mirai-ui-line-height-small);
-  right: calc(var(--mirai-ui-input-text-padding-x) + var(--mirai-ui-input-text-icon));
   top: var(--mirai-ui-space-XS);
 }
 
@@ -137,5 +116,5 @@ input.input,
 textarea.input {
   border: none;
   margin: 0;
-  padding: var(--mirai-ui-input-text-padding-y) var(--mirai-ui-input-text-padding-x);
+  padding: var(--mirai-ui-input-text-padding-y) calc(var(--mirai-ui-input-text-padding-x) / 2);
 }