@nutui/nutui-react 1.2.0 → 1.2.1-beta.0

package/dist/esm/Input.js

@@ -1,15 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "type", "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", "change", "blur", "focus", "clear", "formatter", "keypress", "clickInput", "clickLeftIcon", "clickRightIcon", "click"];
 
 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, { useState, useEffect } from 'react';
-import { c as cn } from './bem-893ad28d.js';
+import React__default, { useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react';
 import Icon from './Icon.js';
 import { useConfig } from './ConfigProvider.js';
-import '@bem-react/classname';
 
 function trimExtraChar(value, _char, regExp) {
   var index = value.indexOf(_char);
@@ -32,7 +32,7 @@ function formatNumber(value) {
   if (allowDot) {
     value = trimExtraChar(value, '.', /\./g);
   } else {
-    value = value.replace(/\./g, '');
+    value = value.split('.')[0];
   }
 
   if (allowMinus) {
@@ -50,12 +50,34 @@ var defaultProps = {
   defaultValue: '',
   placeholder: '',
   label: '',
-  requireShow: false,
+  labelClass: '',
+  labelWidth: '80',
+  labelAlign: 'left',
+  colon: false,
+  inputAlign: 'left',
+  center: false,
+  required: false,
   disabled: false,
   readonly: false,
-  textAlign: 'left',
-  maxLength: '',
-  clearable: true
+  error: false,
+  maxlength: '9999',
+  leftIcon: '',
+  leftIconSize: '',
+  rightIcon: '',
+  rightIconSize: '',
+  clearable: false,
+  clearIcon: 'mask-close',
+  clearSize: '14',
+  border: true,
+  formatTrigger: 'onChange',
+  rules: [],
+  rows: null,
+  errorMessage: '',
+  errorMessageAlign: '',
+  showWordLimit: false,
+  autofocus: false,
+  slotButton: null,
+  slotInput: null
 };
 
 var Input = function Input(props) {
@@ -63,25 +85,54 @@ var Input = function Input(props) {
       locale = _useConfig.locale;
 
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
       type = _defaultProps$props.type,
       defaultValue = _defaultProps$props.defaultValue,
       placeholder = _defaultProps$props.placeholder,
       label = _defaultProps$props.label,
-      requireShow = _defaultProps$props.requireShow,
+      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,
-      textAlign = _defaultProps$props.textAlign,
-      maxLength = _defaultProps$props.maxLength,
+      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,
       change = _defaultProps$props.change,
       blur = _defaultProps$props.blur,
       focus = _defaultProps$props.focus,
-      clear = _defaultProps$props.clear;
+      clear = _defaultProps$props.clear,
+      formatter = _defaultProps$props.formatter,
+      keypress = _defaultProps$props.keypress,
+      clickInput = _defaultProps$props.clickInput,
+      clickLeftIcon = _defaultProps$props.clickLeftIcon,
+      clickRightIcon = _defaultProps$props.clickRightIcon,
+      click = _defaultProps$props.click,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
 
   locale.placeholder = placeholder || locale.placeholder;
-  var inputBem = cn('input');
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -93,97 +144,241 @@ var Input = function Input(props) {
       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 inputRef = useRef(null);
+  useLayoutEffect(function () {
+    updateValue(getModelValue(), formatTrigger);
+  });
   useEffect(function () {
+    setClasses(inputClass);
+
     if (defaultValue) {
       SetInputValue(defaultValue);
     }
   }, [defaultValue]);
+  useEffect(function () {
+    if (inputValue) {
+      updateValue(getModelValue());
+      resetValidation();
+    }
+  }, [inputValue]);
+  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") : '')].filter(Boolean).join(' ');
+  }, [disabled, required, error, border]);
 
-  var valueChange = function valueChange(event) {
-    var val = event.target.value;
+  var updateValue = function updateValue(value) {
+    var _inputRef$current;
+
+    var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
+    var val = value;
 
     if (type === 'digit') {
-      val = formatNumber(val, true);
+      val = formatNumber(val, false, false);
     }
 
     if (type === 'number') {
-      val = formatNumber(val, false);
+      val = formatNumber(val, true, true);
     }
 
-    if (maxLength && val.length > Number(maxLength)) {
-      val = val.slice(0, Number(maxLength));
+    if (formatter && trigger === formatTrigger) {
+      val = formatter(val);
     }
 
-    change && change(val, event);
-    SetInputValue(val);
+    if ((inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== val) {
+      inputRef.current.value = val;
+    } // if (val !== defaultValue) {
+
+
+    SetInputValue(val); // }
   };
 
-  var valueFocus = function valueFocus(event) {
+  var _onFocus = function onFocus(event) {
     var val = event.target.value;
     SetActive(true);
+    focus && focus(val, event);
+  };
 
-    if (focus) {
-      focus(val, event);
+  var _onInput = function onInput(event) {
+    var val = event.target.value;
+
+    if (maxlength && val.length > Number(maxlength)) {
+      val = val.slice(0, Number(maxlength));
     }
+
+    updateValue(val);
+    change && change(val, event);
   };
 
-  var valueBlur = function valueBlur(event) {
+  var _onBlur = function onBlur(event) {
     setTimeout(function () {
       SetActive(false);
-    }, 0);
+    }, 200);
     var val = event.target.value;
 
-    if (blur) {
-      blur(val, event);
+    if (maxlength && val.length > Number(maxlength)) {
+      val = val.slice(0, Number(maxlength));
     }
+
+    updateValue(getModelValue(), 'onBlur');
+    blur && blur(val, event);
   };
 
-  var handleClear = function handleClear(event) {
-    if (clear) {
-      clear('', event);
+  var onClickInput = function onClickInput(event) {
+    clickInput && clickInput(event);
+  };
+
+  var onClickLeftIcon = function onClickLeftIcon(event) {
+    clickLeftIcon && clickLeftIcon(event);
+  };
+
+  var onClickRightIcon = function onClickRightIcon(event) {
+    clickRightIcon && clickRightIcon(event);
+  };
+
+  var resetValidation = function resetValidation() {};
+
+  var inputType = function inputType(type) {
+    if (type === 'number') {
+      return 'text';
     }
 
-    SetInputValue('');
+    if (type === 'digit') {
+      return 'tel';
+    }
+
+    return type;
   };
 
-  var textAlignStyle = {
-    textAlign: textAlign
+  var handleClear = function handleClear(event) {
+    updateValue('');
+    clear && clear('', event);
   };
-  return React__default.createElement("div", {
-    className: "".concat(inputBem(), " ").concat(disabled ? inputBem('disabled') : '', "  ").concat(className || '')
+
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "".concat(classes, "  ").concat(className || ''),
+    style: style
+  }, rest), {}, {
+    onClick: function onClick(e) {
+      click && click(e);
+    }
+  }), slotInput ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "nut-input-label ".concat(labelClass),
+    style: {
+      width: "".concat(labelWidth, "px"),
+      textAlign: labelAlign
+    }
+  }, React__default.createElement("div", {
+    className: "label-string"
+  }, label, colon ? ':' : '')), React__default.createElement("div", {
+    className: "nut-input-value"
+  }, React__default.createElement("div", {
+    className: "nut-input-inner",
+    onClick: function onClick(e) {
+      onClickInput(e);
+    }
+  }, slotInput))) : React__default.createElement(React__default.Fragment, null, leftIcon && leftIcon.length > 0 ? React__default.createElement("div", {
+    className: "nut-input-left-icon",
+    onClick: function onClick(e) {
+      onClickLeftIcon(e);
+    }
+  }, React__default.createElement(Icon, {
+    name: leftIcon,
+    size: leftIconSize
+  })) : null, React__default.createElement("div", {
+    className: "nut-input-label ".concat(labelClass),
+    style: {
+      width: "".concat(labelWidth, "px"),
+      textAlign: labelAlign
+    }
   }, React__default.createElement("div", {
-    className: inputBem('label')
-  }, requireShow ? React__default.createElement("div", {
-    className: inputBem('require')
-  }, "*") : null, label ? React__default.createElement("div", {
     className: "label-string"
-  }, label) : null), React__default.createElement("input", {
+  }, label, colon ? ':' : '')), React__default.createElement("div", {
+    className: "nut-input-value"
+  }, React__default.createElement("div", {
+    className: "nut-input-inner",
+    onClick: function onClick(e) {
+      onClickInput(e);
+    }
+  }, type === 'textarea' ? React__default.createElement("textarea", {
     className: "input-text",
-    type: type,
-    placeholder: placeholder,
+    ref: inputRef,
+    style: {
+      textAlign: inputAlign,
+      height: "".concat(Number(rows) * 24, "px")
+    },
+    maxLength: maxlength,
+    placeholder: placeholder || locale.placeholder,
     disabled: disabled,
     readOnly: readonly,
     value: inputValue,
-    style: _objectSpread(_objectSpread({}, style), textAlignStyle),
-    maxLength: maxLength,
+    autoFocus: autofocus,
     onBlur: function onBlur(e) {
-      valueBlur(e);
+      _onBlur(e);
     },
     onFocus: function onFocus(e) {
-      valueFocus(e);
+      _onFocus(e);
     },
-    onChange: function onChange(e) {
-      valueChange(e);
+    onInput: function onInput(e) {
+      _onInput(e);
     }
-  }), clearable && !readonly && active ? React__default.createElement("div", {
-    onClick: function onClick(e) {
-      handleClear(e);
+  }) : React__default.createElement("input", {
+    className: "input-text",
+    ref: inputRef,
+    style: {
+      textAlign: inputAlign
+    },
+    type: inputType(type),
+    maxLength: maxlength,
+    placeholder: placeholder || locale.placeholder,
+    disabled: disabled,
+    readOnly: readonly,
+    value: inputValue,
+    autoFocus: autofocus,
+    onBlur: function onBlur(e) {
+      _onBlur(e);
     },
-    className: inputBem('clear')
-  }, active && inputValue.length > 0 ? React__default.createElement(Icon, {
-    name: "close-little",
-    size: "12px"
-  }) : null) : null);
+    onFocus: function onFocus(e) {
+      _onFocus(e);
+    },
+    onInput: function onInput(e) {
+      _onInput(e);
+    }
+  }), clearable && !readonly && active && inputValue.length > 0 ? React__default.createElement(Icon, {
+    className: "nut-input-clear",
+    name: clearIcon,
+    size: clearSize,
+    click: function click(e) {
+      handleClear(e);
+    }
+  }) : null, rightIcon && rightIcon.length > 0 ? React__default.createElement("div", {
+    className: "nut-input-right-icon",
+    onClick: function onClick(e) {
+      onClickRightIcon(e);
+    }
+  }, React__default.createElement(Icon, {
+    name: rightIcon,
+    size: rightIconSize
+  })) : null, slotButton ? React__default.createElement("div", {
+    className: "nut-input-button"
+  }, slotButton) : null), showWordLimit && maxlength ? React__default.createElement("div", {
+    className: "nut-input-word-limit"
+  }, React__default.createElement("span", {
+    className: "nut-input-word-num"
+  }, inputValue ? inputValue.length : 0), "/", maxlength) : null, errorMessage ? React__default.createElement("div", {
+    className: "nut-input-error-message",
+    style: {
+      textAlign: errorMessageAlign
+    }
+  }, errorMessage) : null)));
 };
 
 Input.defaultProps = defaultProps;

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

@@ -1,2 +1,2 @@
-require('../../Icon/style')
+
 require('../../../packages/navbar/navbar.scss')

package/dist/esm/NavBar.js

@@ -5,61 +5,118 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 from 'react';
+import classNames from 'classnames';
 import Icon from './Icon.js';
 import { c as cn } from './bem-893ad28d.js';
 import '@bem-react/classname';
 var defaultProps = {
   title: '',
   desc: '',
-  leftShow: false,
-  icon: '',
+  leftShow: true,
   titIcon: '',
-  className: ''
+  className: '',
+  leftText: '',
+  fixed: false,
+  safeAreaInsetTop: false,
+  border: false,
+  placeholder: false,
+  zIndex: 10,
+  style: {}
 };
 
 var NavBar = function NavBar(props) {
+  var _classNames;
+
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
       desc = _defaultProps$props.desc,
-      icon = _defaultProps$props.icon,
       title = _defaultProps$props.title,
       titIcon = _defaultProps$props.titIcon,
       leftShow = _defaultProps$props.leftShow,
       className = _defaultProps$props.className,
       style = _defaultProps$props.style,
+      leftText = _defaultProps$props.leftText,
+      fixed = _defaultProps$props.fixed,
+      safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop,
+      border = _defaultProps$props.border,
+      placeholder = _defaultProps$props.placeholder,
+      zIndex = _defaultProps$props.zIndex,
       onClickTitle = _defaultProps$props.onClickTitle,
       onClickIcon = _defaultProps$props.onClickIcon,
       onClickBack = _defaultProps$props.onClickBack,
-      onClickClear = _defaultProps$props.onClickClear;
+      onClickRight = _defaultProps$props.onClickRight;
 
   var b = cn('navbar');
-  return React__default.createElement("div", {
-    className: "nut-navbar ".concat(className),
-    style: style
-  }, leftShow && React__default.createElement("i", {
-    className: ['nut-icon', 'nutui-iconfont', "".concat(b('back'))].join(' '),
-    onClick: function onClick(e) {
-      return onClickBack(e);
-    }
-  }), React__default.createElement("div", {
-    className: "".concat(b('title')),
-    onClick: function onClick(e) {
-      return onClickTitle(e);
-    }
-  }, title, titIcon && React__default.createElement(Icon, {
-    name: titIcon
-  })), React__default.createElement("div", {
-    className: "".concat(b('desc')),
-    onClick: function onClick(e) {
-      return onClickClear(e);
-    }
-  }, desc), icon && React__default.createElement("div", {
-    className: "".concat(b('icon')),
-    onClick: function onClick(e) {
-      return onClickIcon(e);
+  var children = Array.isArray(props.children) ? props.children : [props.children];
+  var slot = children.reduce(function (slot, item) {
+    var data = slot;
+
+    if (item && item.props) {
+      data[item.props.slot] = item;
     }
-  }, React__default.createElement(Icon, {
-    name: icon
-  })));
+
+    return data;
+  }, {});
+
+  var styles = function styles() {
+    return _objectSpread(_objectSpread({}, style), {}, {
+      zIndex: zIndex
+    });
+  };
+
+  var renderLeft = function renderLeft() {
+    return React__default.createElement("div", {
+      className: "".concat(b('left')),
+      onClick: function onClick(e) {
+        return onClickBack(e);
+      }
+    }, leftShow && React__default.createElement(Icon, {
+      name: "left",
+      color: "#979797"
+    }), leftText && React__default.createElement("div", {
+      className: "".concat(b('text'))
+    }, leftText), slot.left);
+  };
+
+  var renderContent = function renderContent() {
+    return React__default.createElement("div", {
+      className: "".concat(b('title'))
+    }, title && React__default.createElement("div", {
+      className: "title",
+      onClick: function onClick(e) {
+        return onClickTitle(e);
+      }
+    }, title), titIcon && React__default.createElement("div", {
+      onClick: function onClick(e) {
+        return onClickIcon(e);
+      }
+    }, React__default.createElement(Icon, {
+      name: titIcon
+    })), slot.content);
+  };
+
+  var renderRight = function renderRight() {
+    return React__default.createElement("div", {
+      className: "".concat(b('right')),
+      onClick: function onClick(e) {
+        return onClickRight(e);
+      }
+    }, desc && React__default.createElement("div", {
+      className: "".concat(b('text'))
+    }, desc), slot.right);
+  };
+
+  var renderWrapper = function renderWrapper() {
+    return React__default.createElement("div", {
+      className: cls,
+      style: styles()
+    }, renderLeft(), renderContent(), renderRight());
+  };
+
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-navbar--border", border), _defineProperty(_classNames, "nut-navbar--fixed", fixed), _defineProperty(_classNames, "nut-navbar--safe-area-inset-top", safeAreaInsetTop), _classNames));
+  var cls = classNames(b(''), classes, className);
+  return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", {
+    className: "".concat(b(''), "--placeholder")
+  }, renderWrapper()) : renderWrapper());
 };
 
 NavBar.defaultProps = defaultProps;

package/dist/esm/Step.js

@@ -46,11 +46,28 @@ var Step = function Step(props) {
   var handleClickStep = function handleClickStep() {
     var _parent$propSteps;
 
-    (_parent$propSteps = parent.propSteps) === null || _parent$propSteps === void 0 ? void 0 : _parent$propSteps.clickStep(activeIndex);
+    if ((_parent$propSteps = parent.propSteps) !== null && _parent$propSteps !== void 0 && _parent$propSteps.clickStep) {
+      var _parent$propSteps2;
+
+      (_parent$propSteps2 = parent.propSteps) === null || _parent$propSteps2 === void 0 ? void 0 : _parent$propSteps2.clickStep(activeIndex);
+    }
   };
 
   var b = cn('step');
   var classes = classNames(_defineProperty({}, "".concat(b(''), "-").concat(getCurrentStatus()), true), className, b(''));
+
+  var renderIconClass = function renderIconClass() {
+    if (!dot && icon) {
+      return 'nut-step-icon is-icon';
+    }
+
+    if (!dot && !icon) {
+      return 'nut-step-icon is-text';
+    }
+
+    return 'nut-step-icon';
+  };
+
   return React__default.createElement("div", _objectSpread(_objectSpread({
     className: classes
   }, restProps), {}, {
@@ -60,13 +77,13 @@ var Step = function Step(props) {
   }, React__default.createElement("div", {
     className: "nut-step-line"
   }), React__default.createElement("div", {
-    className: "nut-step-icon ".concat(!dot ? icon ? 'is-icon' : 'is-text' : '')
+    className: renderIconClass()
   }, icon ? React__default.createElement(Icon, {
     className: "nut-step-icon-inner",
     color: iconColor,
     name: icon,
     size: size
-  }) : dot ? React__default.createElement("span", null) : React__default.createElement("span", {
+  }) : !dot && React__default.createElement("span", {
     className: "nut-step-inner"
   }, activeIndex))), React__default.createElement("div", {
     className: "nut-step-main"

package/dist/esm/TabPane.js

@@ -19,12 +19,13 @@ var TabPane = function TabPane(props) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
       children = _defaultProps$props.children,
       paneKey = _defaultProps$props.paneKey,
-      activeKey = _defaultProps$props.activeKey;
+      activeKey = _defaultProps$props.activeKey,
+      autoHeightClassName = _defaultProps$props.autoHeightClassName;
 
   var b = cn('tabpane');
   var classes = classNames({
     active: paneKey === activeKey
-  }, b(''));
+  }, b(''), autoHeightClassName);
   return React__default.createElement("div", {
     className: classes
   }, children);