@nutui/nutui-react 1.5.1 → 2.0.0-alpha.1

package/dist/esm/Input.js

@@ -1,180 +1,137 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "type", "name", "defaultValue", "placeholder", "label", "labelClass", "labelWidth", "labelAlign", "colon", "inputAlign", "center", "required", "disabled", "readonly", "error", "maxlength", "leftIcon", "leftIconSize", "rightIcon", "rightIconSize", "clearable", "clearIcon", "clearSize", "border", "formatTrigger", "rules", "errorMessage", "errorMessageAlign", "showWordLimit", "autofocus", "style", "className", "rows", "slotButton", "slotInput", "onChange", "onBlur", "onFocus", "onClear", "formatter", "keypress", "onClickInput", "onClickLeftIcon", "onClickRightIcon", "onClick", "iconClassPrefix", "iconFontClassName"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from 'react';
-import Icon from './Icon.js';
-import { useConfig } from './ConfigProvider.js';
-import { C as ComponentDefaults } from './typings-f27b58f4.js';
+var _excluded = ["children", "type", "name", "defaultValue", "placeholder", "label", "labelClass", "labelWidth", "labelAlign", "colon", "inputAlign", "center", "required", "disabled", "readonly", "error", "maxlength", "leftIcon", "rightIcon", "clearable", "clearIcon", "clearSize", "border", "formatTrigger", "rules", "errorMessage", "errorMessageAlign", "showWordLimit", "autofocus", "style", "className", "rows", "slotButton", "slotInput", "onChange", "onBlur", "onFocus", "onClear", "formatter", "keypress", "onClickInput", "onClickLeftIcon", "onClickRightIcon", "onClick"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from "react";
+import { MaskClose } from "@nutui/icons-react";
+import { useConfig } from "./ConfigProvider.js";
+import { C as ComponentDefaults } from "./typings.js";
 function trimExtraChar(value, _char, regExp) {
   var index = value.indexOf(_char);
   if (index === -1) {
     return value;
   }
-  if (_char === '-' && index !== 0) {
+  if (_char === "-" && index !== 0) {
     return value.slice(0, index);
   }
-  return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, "");
 }
 function formatNumber(value) {
-  var allowDot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var allowMinus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var allowDot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
+  var allowMinus = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
   if (allowDot) {
-    value = trimExtraChar(value, '.', /\./g);
+    value = trimExtraChar(value, ".", /\./g);
   } else {
-    value = value.split('.')[0];
+    value = value.split(".")[0];
   }
   if (allowMinus) {
-    value = trimExtraChar(value, '-', /-/g);
+    value = trimExtraChar(value, "-", /-/g);
   } else {
-    value = value.replace(/-/, '');
+    value = value.replace(/-/, "");
   }
   var regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
-  return value.replace(regExp, '');
+  return value.replace(regExp, "");
 }
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  type: 'text',
-  name: '',
-  defaultValue: '',
-  placeholder: '',
-  label: '',
-  labelClass: '',
-  labelWidth: '80',
-  labelAlign: 'left',
+  type: "text",
+  name: "",
+  defaultValue: "",
+  placeholder: "",
+  label: "",
+  labelClass: "",
+  labelWidth: "80",
+  labelAlign: "left",
   colon: false,
-  inputAlign: 'left',
+  inputAlign: "left",
   center: false,
   required: false,
   disabled: false,
   readonly: false,
   error: false,
-  maxlength: '9999',
-  leftIcon: '',
-  leftIconSize: '',
-  rightIcon: '',
-  rightIconSize: '',
+  maxlength: "9999",
+  leftIcon: null,
+  rightIcon: null,
   clearable: false,
-  clearIcon: 'mask-close',
-  clearSize: '14',
+  clearIcon: null,
+  clearSize: "14",
   border: true,
-  formatTrigger: 'onChange',
+  formatTrigger: "onChange",
   rules: [],
   rows: null,
-  errorMessage: '',
-  errorMessageAlign: '',
+  errorMessage: "",
+  errorMessageAlign: "",
   showWordLimit: false,
   autofocus: false,
   slotButton: null,
   slotInput: null
 });
-var Input = forwardRef(function (props, ref) {
-  var _useConfig = useConfig(),
-    locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    children = _defaultProps$props.children,
-    type = _defaultProps$props.type,
-    name = _defaultProps$props.name,
-    defaultValue = _defaultProps$props.defaultValue,
-    placeholder = _defaultProps$props.placeholder,
-    label = _defaultProps$props.label,
-    labelClass = _defaultProps$props.labelClass,
-    labelWidth = _defaultProps$props.labelWidth,
-    labelAlign = _defaultProps$props.labelAlign,
-    colon = _defaultProps$props.colon,
-    inputAlign = _defaultProps$props.inputAlign,
-    center = _defaultProps$props.center,
-    required = _defaultProps$props.required,
-    disabled = _defaultProps$props.disabled,
-    readonly = _defaultProps$props.readonly,
-    error = _defaultProps$props.error,
-    maxlength = _defaultProps$props.maxlength,
-    leftIcon = _defaultProps$props.leftIcon,
-    leftIconSize = _defaultProps$props.leftIconSize,
-    rightIcon = _defaultProps$props.rightIcon,
-    rightIconSize = _defaultProps$props.rightIconSize,
-    clearable = _defaultProps$props.clearable,
-    clearIcon = _defaultProps$props.clearIcon,
-    clearSize = _defaultProps$props.clearSize,
-    border = _defaultProps$props.border,
-    formatTrigger = _defaultProps$props.formatTrigger,
-    rules = _defaultProps$props.rules,
-    errorMessage = _defaultProps$props.errorMessage,
-    errorMessageAlign = _defaultProps$props.errorMessageAlign,
-    showWordLimit = _defaultProps$props.showWordLimit,
-    autofocus = _defaultProps$props.autofocus,
-    style = _defaultProps$props.style,
-    className = _defaultProps$props.className,
-    rows = _defaultProps$props.rows,
-    slotButton = _defaultProps$props.slotButton,
-    slotInput = _defaultProps$props.slotInput,
-    onChange = _defaultProps$props.onChange,
-    onBlur = _defaultProps$props.onBlur,
-    onFocus = _defaultProps$props.onFocus,
-    onClear = _defaultProps$props.onClear,
-    formatter = _defaultProps$props.formatter,
-    keypress = _defaultProps$props.keypress,
-    onClickInput = _defaultProps$props.onClickInput,
-    onClickLeftIcon = _defaultProps$props.onClickLeftIcon,
-    onClickRightIcon = _defaultProps$props.onClickRightIcon,
-    _onClick = _defaultProps$props.onClick,
-    iconClassPrefix = _defaultProps$props.iconClassPrefix,
-    iconFontClassName = _defaultProps$props.iconFontClassName,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+var Input = forwardRef(function(props, ref) {
+  var _useConfig = useConfig(), locale = _useConfig.locale;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, type = _defaultProps$props.type, name = _defaultProps$props.name, defaultValue = _defaultProps$props.defaultValue, placeholder = _defaultProps$props.placeholder, label = _defaultProps$props.label, labelClass = _defaultProps$props.labelClass, labelWidth = _defaultProps$props.labelWidth, labelAlign = _defaultProps$props.labelAlign, colon = _defaultProps$props.colon, inputAlign = _defaultProps$props.inputAlign, center = _defaultProps$props.center, required = _defaultProps$props.required, disabled = _defaultProps$props.disabled, readonly = _defaultProps$props.readonly, error = _defaultProps$props.error, maxlength = _defaultProps$props.maxlength, leftIcon = _defaultProps$props.leftIcon, rightIcon = _defaultProps$props.rightIcon, clearable = _defaultProps$props.clearable, clearIcon = _defaultProps$props.clearIcon, clearSize = _defaultProps$props.clearSize, border = _defaultProps$props.border, formatTrigger = _defaultProps$props.formatTrigger, rules = _defaultProps$props.rules, errorMessage = _defaultProps$props.errorMessage, errorMessageAlign = _defaultProps$props.errorMessageAlign, showWordLimit = _defaultProps$props.showWordLimit, autofocus = _defaultProps$props.autofocus, style = _defaultProps$props.style, className = _defaultProps$props.className, rows = _defaultProps$props.rows, slotButton = _defaultProps$props.slotButton, slotInput = _defaultProps$props.slotInput, onChange = _defaultProps$props.onChange, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus, onClear = _defaultProps$props.onClear, formatter = _defaultProps$props.formatter, keypress = _defaultProps$props.keypress, onClickInput = _defaultProps$props.onClickInput, onClickLeftIcon = _defaultProps$props.onClickLeftIcon, onClickRightIcon = _defaultProps$props.onClickRightIcon, _onClick = _defaultProps$props.onClick, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var inputPlaceholder = placeholder || locale.placeholder;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputValue = _useState2[0],
-    SetInputValue = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    active = _useState4[0],
-    SetActive = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    classes = _useState6[0],
-    setClasses = _useState6[1];
-  var getModelValue = function getModelValue() {
-    return String(inputValue !== null && inputValue !== void 0 ? inputValue : '');
+  var _useState = useState(""), _useState2 = _slicedToArray(_useState, 2), inputValue = _useState2[0], SetInputValue = _useState2[1];
+  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), active = _useState4[0], SetActive = _useState4[1];
+  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), classes = _useState6[0], setClasses = _useState6[1];
+  var getModelValue = function getModelValue2() {
+    return String(inputValue !== null && inputValue !== void 0 ? inputValue : "");
   };
   var inputRef = useRef(null);
-  useEffect(function () {
+  useEffect(function() {
     setClasses(inputClass);
     SetInputValue(defaultValue);
   }, [defaultValue]);
-  useEffect(function () {
+  useEffect(function() {
     if (inputValue) {
       updateValue(getModelValue());
       resetValidation();
     }
   }, [inputValue]);
-  useImperativeHandle(ref, function () {
+  useImperativeHandle(ref, function() {
     return inputRef.current;
   });
-  var inputClass = useCallback(function () {
-    var prefixCls = 'nut-input';
-    return [prefixCls, "".concat(center ? 'center' : ''), "".concat(disabled ? "".concat(prefixCls, "-disabled") : ''), "".concat(required ? "".concat(prefixCls, "-required") : ''), "".concat(error ? "".concat(prefixCls, "-error") : ''), "".concat(border ? "".concat(prefixCls, "-border") : ''), "".concat(slotButton || rightIcon ? "".concat(prefixCls, "-right-mark") : '')].filter(Boolean).join(' ');
+  var inputClass = useCallback(function() {
+    var prefixCls = "nut-input";
+    return [prefixCls, "".concat(center ? "center" : ""), "".concat(disabled ? "".concat(prefixCls, "-disabled") : ""), "".concat(required ? "".concat(prefixCls, "-required") : ""), "".concat(error ? "".concat(prefixCls, "-error") : ""), "".concat(border ? "".concat(prefixCls, "-border") : ""), "".concat(slotButton || rightIcon ? "".concat(prefixCls, "-right-mark") : "")].filter(Boolean).join(" ");
   }, [disabled, required, error, border, slotButton, rightIcon, center]);
-  // 样式状态重置
-  useEffect(function () {
+  useEffect(function() {
     setClasses(inputClass);
   }, [disabled, required, error, border, slotButton, rightIcon, center]);
-  var updateValue = function updateValue(value) {
+  var updateValue = function updateValue2(value) {
     var _inputRef$current;
-    var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
-    var event = arguments.length > 2 ? arguments[2] : undefined;
+    var trigger = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "onChange";
+    var event = arguments.length > 2 ? arguments[2] : void 0;
     var val = value;
-    if (type === 'digit' || type === 'tel') {
+    if (type === "digit" || type === "tel") {
       val = formatNumber(val, false, false);
     }
-    if (type === 'number') {
+    if (type === "number") {
       val = formatNumber(val, true, true);
     }
-    if (type === 'tel' && !formatter) {
+    if (type === "tel" && !formatter) {
       var regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
       var regNumber = /[^-0-9]/g;
-      val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, '');
+      val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, "");
     }
     if (formatter && trigger === formatTrigger) {
       val = formatter(val);
@@ -184,56 +141,57 @@ var Input = forwardRef(function (props, ref) {
     }
     SetInputValue(val);
   };
-  var handleFocus = function handleFocus(event) {
+  var handleFocus = function handleFocus2(event) {
     var val = event.target.value;
     SetActive(true);
     onFocus && onFocus(val, event);
   };
-  var handleInput = function handleInput(event) {
+  var handleInput = function handleInput2(event) {
     var val = event.target.value;
     if (maxlength && val.length > Number(maxlength)) {
       val = val.slice(0, Number(maxlength));
     }
-    updateValue(val, 'onChange');
+    updateValue(val, "onChange");
     onChange && onChange(val, event);
   };
-  var handleBlur = function handleBlur(event) {
-    setTimeout(function () {
+  var handleBlur = function handleBlur2(event) {
+    setTimeout(function() {
       SetActive(false);
     }, 200);
     var val = event.target.value;
     if (maxlength && val.length > Number(maxlength)) {
       val = val.slice(0, Number(maxlength));
     }
-    updateValue(val, 'onBlur');
+    updateValue(val, "onBlur");
     onBlur && onBlur(val, event);
   };
-  var handleClickInput = function handleClickInput(event) {
+  var handleClickInput = function handleClickInput2(event) {
     onClickInput && onClickInput(event);
   };
-  var handleClickLeftIcon = function handleClickLeftIcon(event) {
+  var handleClickLeftIcon = function handleClickLeftIcon2(event) {
     onClickLeftIcon && onClickLeftIcon(event);
   };
-  var handleClickRightIcon = function handleClickRightIcon(event) {
+  var handleClickRightIcon = function handleClickRightIcon2(event) {
     onClickRightIcon && onClickRightIcon(event);
   };
-  var resetValidation = function resetValidation() {};
-  var inputType = function inputType(type) {
-    if (type === 'number') {
-      return 'text';
+  var resetValidation = function resetValidation2() {
+  };
+  var inputType = function inputType2(type2) {
+    if (type2 === "number") {
+      return "text";
     }
-    if (type === 'digit') {
-      return 'tel';
+    if (type2 === "digit") {
+      return "tel";
     }
-    return type;
+    return type2;
   };
-  var handleClear = function handleClear(event) {
-    updateValue('');
-    onClear && onClear('', event);
+  var handleClear = function handleClear2(event) {
+    updateValue("");
+    onClear && onClear("", event);
   };
   return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: "".concat(classes, "  ").concat(className || ''),
-    style: style
+    className: "".concat(classes, "  ").concat(className || ""),
+    style
   }, rest), {}, {
     onClick: function onClick(e) {
       _onClick && _onClick(e);
@@ -246,24 +204,19 @@ var Input = forwardRef(function (props, ref) {
     }
   }, React__default.createElement("div", {
     className: "label-string"
-  }, label, colon ? ':' : '')) : null, React__default.createElement("div", {
+  }, label, colon ? ":" : "")) : null, React__default.createElement("div", {
     className: "nut-input-value"
   }, React__default.createElement("div", {
     className: "nut-input-inner",
     onClick: function onClick(e) {
       handleClickInput(e);
     }
-  }, slotInput))) : React__default.createElement(React__default.Fragment, null, leftIcon && leftIcon.length > 0 ? React__default.createElement("div", {
+  }, slotInput))) : React__default.createElement(React__default.Fragment, null, React__default.isValidElement(leftIcon) ? React__default.createElement("div", {
     className: "nut-input-left-icon",
     onClick: function onClick(e) {
       handleClickLeftIcon(e);
     }
-  }, React__default.createElement(Icon, {
-    classPrefix: iconClassPrefix,
-    fontClassName: iconFontClassName,
-    name: leftIcon,
-    size: leftIconSize
-  })) : null, label ? React__default.createElement("div", {
+  }, leftIcon) : null, label ? React__default.createElement("div", {
     className: "nut-input-label ".concat(labelClass),
     style: {
       width: "".concat(labelWidth, "px"),
@@ -271,7 +224,7 @@ var Input = forwardRef(function (props, ref) {
     }
   }, React__default.createElement("div", {
     className: "label-string"
-  }, label, colon ? ':' : '')) : null, React__default.createElement("div", {
+  }, label, colon ? ":" : "")) : null, React__default.createElement("div", {
     className: "nut-input-value"
   }, React__default.createElement("div", {
     className: "nut-input-main-con"
@@ -280,8 +233,8 @@ var Input = forwardRef(function (props, ref) {
     onClick: function onClick(e) {
       handleClickInput(e);
     }
-  }, type === 'textarea' ? React__default.createElement("textarea", {
-    name: name,
+  }, type === "textarea" ? React__default.createElement("textarea", {
+    name,
     className: "input-text",
     ref: inputRef,
     style: {
@@ -290,21 +243,21 @@ var Input = forwardRef(function (props, ref) {
     },
     maxLength: maxlength,
     placeholder: inputPlaceholder,
-    disabled: disabled,
+    disabled,
     readOnly: readonly,
     value: inputValue,
     autoFocus: autofocus,
-    onBlur: function onBlur(e) {
+    onBlur: function onBlur2(e) {
       handleBlur(e);
     },
-    onFocus: function onFocus(e) {
+    onFocus: function onFocus2(e) {
       handleFocus(e);
     },
     onInput: function onInput(e) {
       handleInput(e);
     }
   }) : React__default.createElement("input", {
-    name: name,
+    name,
     className: "input-text",
     ref: inputRef,
     style: {
@@ -313,39 +266,32 @@ var Input = forwardRef(function (props, ref) {
     type: inputType(type),
     maxLength: maxlength,
     placeholder: inputPlaceholder,
-    disabled: disabled,
+    disabled,
     readOnly: readonly,
     value: inputValue,
     autoFocus: autofocus,
-    onBlur: function onBlur(e) {
+    onBlur: function onBlur2(e) {
       handleBlur(e);
     },
-    onFocus: function onFocus(e) {
+    onFocus: function onFocus2(e) {
       handleFocus(e);
     },
     onInput: function onInput(e) {
       handleInput(e);
     }
-  }), clearable && !readonly && active && inputValue.length > 0 ? React__default.createElement(Icon, {
-    classPrefix: iconClassPrefix,
-    fontClassName: iconFontClassName,
-    className: "nut-input-clear",
-    name: clearIcon,
-    size: clearSize,
+  }), clearable && !readonly && active && inputValue.length > 0 ? React__default.createElement("span", {
+    className: "nut-input-clear-wrap",
     onClick: function onClick(e) {
-      handleClear(e);
+      return handleClear(e);
     }
-  }) : null), rightIcon && rightIcon.length > 0 ? React__default.createElement("div", {
+  }, clearIcon || React__default.createElement(MaskClose, {
+    className: "nut-input-clear"
+  })) : null), React__default.isValidElement(rightIcon) ? React__default.createElement("div", {
     className: "nut-input-right-icon",
     onClick: function onClick(e) {
       handleClickRightIcon(e);
     }
-  }, React__default.createElement(Icon, {
-    classPrefix: iconClassPrefix,
-    fontClassName: iconFontClassName,
-    name: rightIcon,
-    size: rightIconSize
-  })) : null, slotButton ? React__default.createElement("div", {
+  }, rightIcon) : null, slotButton ? React__default.createElement("div", {
     className: "nut-input-button"
   }, slotButton) : null, showWordLimit && maxlength ? React__default.createElement("div", {
     className: "nut-input-word-limit"
@@ -359,5 +305,7 @@ var Input = forwardRef(function (props, ref) {
   }, errorMessage) : React__default.createElement("div", null))));
 });
 Input.defaultProps = defaultProps;
-Input.displayName = 'NutInput';
-export { Input as default };
+Input.displayName = "NutInput";
+export {
+  Input as default
+};

package/dist/esm/InputNumber/style/index.js

@@ -1,2 +1,2 @@
-import '../../Icon/style'
+
 import '../../../packages/inputnumber/inputnumber.scss'