@nutui/nutui-react 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/esm/Input.js

@@ -1,7 +1,7 @@
 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", "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"];
+var _excluded = ["type", "name", "placeholder", "align", "disabled", "readOnly", "maxLength", "clearable", "clearIcon", "formatTrigger", "autoFocus", "style", "className", "onChange", "onFocus", "onClear", "formatter", "onClick", "confirmType", "defaultValue", "value"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,10 +23,11 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from "react";
+import React__default, { forwardRef, useRef, useState, useImperativeHandle, useCallback } from "react";
 import { MaskClose } from "@nutui/icons-react";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
 function trimExtraChar(value, _char, regExp) {
   var index = value.indexOf(_char);
   if (index === -1) {
@@ -56,253 +57,146 @@ function formatNumber(value) {
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   type: "text",
   name: "",
-  defaultValue: "",
   placeholder: "",
-  label: "",
-  labelClass: "",
-  labelWidth: "80",
-  labelAlign: "left",
-  colon: false,
-  inputAlign: "left",
-  center: false,
+  confirmType: "done",
+  align: "left",
   required: false,
   disabled: false,
-  readonly: false,
-  error: false,
-  maxlength: "9999",
-  leftIcon: null,
-  rightIcon: null,
+  readOnly: false,
+  maxLength: 9999,
   clearable: false,
   clearIcon: null,
-  clearSize: "14",
-  border: true,
   formatTrigger: "onChange",
-  rules: [],
-  rows: null,
-  errorMessage: "",
-  errorMessageAlign: "",
-  showWordLimit: false,
-  autofocus: false,
-  slotButton: null,
-  slotInput: null
+  autoFocus: false
 });
 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 getModelValue2() {
-    return String(inputValue !== null && inputValue !== void 0 ? inputValue : "");
-  };
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), type = _defaultProps$props.type, name = _defaultProps$props.name, placeholder = _defaultProps$props.placeholder, align = _defaultProps$props.align, disabled = _defaultProps$props.disabled, readOnly = _defaultProps$props.readOnly, maxLength = _defaultProps$props.maxLength, clearable = _defaultProps$props.clearable, clearIcon = _defaultProps$props.clearIcon, formatTrigger = _defaultProps$props.formatTrigger, autoFocus = _defaultProps$props.autoFocus, style = _defaultProps$props.style, className = _defaultProps$props.className, onChange = _defaultProps$props.onChange, onFocus = _defaultProps$props.onFocus, onClear = _defaultProps$props.onClear, formatter = _defaultProps$props.formatter, _onClick = _defaultProps$props.onClick, confirmType = _defaultProps$props.confirmType, defaultValue = _defaultProps$props.defaultValue, _value = _defaultProps$props.value, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: "",
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
   var inputRef = useRef(null);
-  useEffect(function() {
-    setClasses(inputClass);
-    SetInputValue(defaultValue);
-  }, [defaultValue]);
-  useEffect(function() {
-    if (inputValue) {
-      updateValue(getModelValue());
-      resetValidation();
-    }
-  }, [inputValue]);
+  var composingRef = useRef(false);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), active = _useState2[0], setActive = _useState2[1];
   useImperativeHandle(ref, function() {
-    return inputRef.current;
+    return {
+      clear: function clear() {
+        setValue("");
+      },
+      focus: function focus() {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      },
+      get nativeElement() {
+        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(" ");
-  }, [disabled, required, error, border, slotButton, rightIcon, center]);
-  useEffect(function() {
-    setClasses(inputClass);
-  }, [disabled, required, error, border, slotButton, rightIcon, center]);
-  var updateValue = function updateValue2(value) {
-    var _inputRef$current;
+    var classPrefix = "nut-input";
+    return [classPrefix, "".concat(disabled ? "".concat(classPrefix, "-disabled") : "")].filter(Boolean).join(" ");
+  }, [disabled]);
+  var updateValue = function updateValue2(value2) {
     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") {
-      val = formatNumber(val, false, false);
-    }
+    var val = value2;
     if (type === "number") {
-      val = formatNumber(val, true, true);
+      val = formatNumber(val, false, true);
     }
-    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, "");
+    if (type === "digit") {
+      val = formatNumber(val, true, true);
     }
     if (formatter && trigger === formatTrigger) {
       val = formatter(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;
+    setValue(val);
+    var eventHandler = props[trigger];
+    if (eventHandler && typeof eventHandler === "function") {
+      eventHandler(val);
     }
-    SetInputValue(val);
   };
   var handleFocus = function handleFocus2(event) {
     var val = event.target.value;
-    SetActive(true);
-    onFocus && onFocus(val, event);
+    onFocus && onFocus(val);
+    setActive(true);
   };
-  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");
-    onChange && onChange(val, event);
+  var handleInput = function handleInput2(value2) {
+    updateValue(value2, "onChange");
   };
   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");
-    onBlur && onBlur(val, event);
-  };
-  var handleClickInput = function handleClickInput2(event) {
-    onClickInput && onClickInput(event);
-  };
-  var handleClickLeftIcon = function handleClickLeftIcon2(event) {
-    onClickLeftIcon && onClickLeftIcon(event);
-  };
-  var handleClickRightIcon = function handleClickRightIcon2(event) {
-    onClickRightIcon && onClickRightIcon(event);
-  };
-  var resetValidation = function resetValidation2() {
+    setActive(false);
   };
   var inputType = function inputType2(type2) {
-    if (type2 === "number") {
+    if (type2 === "digit") {
       return "text";
     }
-    if (type2 === "digit") {
+    if (type2 === "number") {
       return "tel";
     }
     return type2;
   };
-  var handleClear = function handleClear2(event) {
-    updateValue("");
-    onClear && onClear("", event);
-  };
-  return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: "".concat(classes, "  ").concat(className || ""),
-    style
-  }, rest), {}, {
+  return React__default.createElement("div", {
+    className: "".concat(inputClass(), "  ").concat(className || ""),
+    style,
     onClick: function onClick(e) {
       _onClick && _onClick(e);
     }
-  }), slotInput ? React__default.createElement(React__default.Fragment, null, label ? 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 ? ":" : "")) : 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, React__default.isValidElement(leftIcon) ? React__default.createElement("div", {
-    className: "nut-input-left-icon",
-    onClick: function onClick(e) {
-      handleClickLeftIcon(e);
-    }
-  }, leftIcon) : null, label ? 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 ? ":" : "")) : null, React__default.createElement("div", {
-    className: "nut-input-value"
-  }, React__default.createElement("div", {
-    className: "nut-input-main-con"
-  }, React__default.createElement("div", {
-    className: "nut-input-inner",
-    onClick: function onClick(e) {
-      handleClickInput(e);
-    }
-  }, type === "textarea" ? React__default.createElement("textarea", {
+  }, React__default.createElement("input", _objectSpread(_objectSpread({}, rest), {}, {
     name,
-    className: "input-text",
+    className: "nut-input-native",
     ref: inputRef,
     style: {
-      textAlign: inputAlign,
-      height: "".concat(Number(rows) * 24, "px")
+      textAlign: align
     },
-    maxLength: maxlength,
-    placeholder: inputPlaceholder,
+    type: inputType(type),
+    maxLength,
+    placeholder: placeholder || locale.placeholder,
     disabled,
-    readOnly: readonly,
-    value: inputValue,
-    autoFocus: autofocus,
-    onBlur: function onBlur2(e) {
+    readOnly,
+    value,
+    autoFocus,
+    enterKeyHint: confirmType,
+    onBlur: function onBlur(e) {
       handleBlur(e);
     },
     onFocus: function onFocus2(e) {
       handleFocus(e);
     },
-    onInput: function onInput(e) {
-      handleInput(e);
-    }
-  }) : React__default.createElement("input", {
-    name,
-    className: "input-text",
-    ref: inputRef,
-    style: {
-      textAlign: inputAlign
-    },
-    type: inputType(type),
-    maxLength: maxlength,
-    placeholder: inputPlaceholder,
-    disabled,
-    readOnly: readonly,
-    value: inputValue,
-    autoFocus: autofocus,
-    onBlur: function onBlur2(e) {
-      handleBlur(e);
+    onChange: function onChange2(e) {
+      handleInput(e.currentTarget.value);
     },
-    onFocus: function onFocus2(e) {
-      handleFocus(e);
+    onCompositionStart: function onCompositionStart(e) {
+      var _props$onCompositionS;
+      composingRef.current = true;
+      (_props$onCompositionS = props.onCompositionStart) === null || _props$onCompositionS === void 0 ? void 0 : _props$onCompositionS.call(props, e);
     },
-    onInput: function onInput(e) {
-      handleInput(e);
+    onCompositionEnd: function onCompositionEnd(e) {
+      var _props$onCompositionE;
+      composingRef.current = false;
+      (_props$onCompositionE = props.onCompositionEnd) === null || _props$onCompositionE === void 0 ? void 0 : _props$onCompositionE.call(props, e);
     }
-  }), clearable && !readonly && active && inputValue.length > 0 ? React__default.createElement("span", {
-    className: "nut-input-clear-wrap",
-    onClick: function onClick(e) {
-      return handleClear(e);
+  })), clearable && !readOnly && active && value.length > 0 ? React__default.createElement("span", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    },
+    onClick: function onClick() {
+      if (!disabled) {
+        setValue("");
+        onClear && onClear("");
+      }
     }
   }, 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);
-    }
-  }, rightIcon) : 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) : React__default.createElement("div", null))));
+  })) : null);
 });
 Input.defaultProps = defaultProps;
 Input.displayName = "NutInput";

package/dist/esm/Popup.js

@@ -45,8 +45,6 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   },
   onClose: function onClose() {
   },
-  onClick: function onClick(e) {
-  },
   onClickOverlay: function onClickOverlay(e) {
     return true;
   },
@@ -57,7 +55,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
 var _zIndex = 1e3;
 var Popup = function Popup2(props) {
   var _classNames, _classNames2;
-  var children = props.children, visible = props.visible, overlay = props.overlay, closeOnOverlayClick = props.closeOnOverlayClick, overlayStyle = props.overlayStyle, overlayClassName = props.overlayClassName, zIndex = props.zIndex, lockScroll = props.lockScroll, duration = props.duration, closeable = props.closeable, closeIconPosition = props.closeIconPosition, closeIcon = props.closeIcon, style = props.style, transition = props.transition, round = props.round, position = props.position, className = props.className, destroyOnClose = props.destroyOnClose, portal = props.portal, onOpen2 = props.onOpen, onClose2 = props.onClose, onClickOverlay2 = props.onClickOverlay, onClickCloseIcon2 = props.onClickCloseIcon, afterShow = props.afterShow, afterClose = props.afterClose, onClick2 = props.onClick;
+  var children = props.children, visible = props.visible, overlay = props.overlay, closeOnOverlayClick = props.closeOnOverlayClick, overlayStyle = props.overlayStyle, overlayClassName = props.overlayClassName, zIndex = props.zIndex, lockScroll = props.lockScroll, duration = props.duration, closeable = props.closeable, closeIconPosition = props.closeIconPosition, closeIcon = props.closeIcon, style = props.style, transition = props.transition, round = props.round, position = props.position, className = props.className, destroyOnClose = props.destroyOnClose, portal = props.portal, onOpen2 = props.onOpen, onClose2 = props.onClose, onClickOverlay2 = props.onClickOverlay, onClickCloseIcon2 = props.onClickCloseIcon, afterShow = props.afterShow, afterClose = props.afterClose, onClick = props.onClick;
   var _useState = useState(zIndex || _zIndex), _useState2 = _slicedToArray(_useState, 2), index = _useState2[0], setIndex = _useState2[1];
   var _useState3 = useState(visible), _useState4 = _slicedToArray(_useState3, 2), innerVisible = _useState4[0], setInnerVisible = _useState4[1];
   var _useState5 = useState(true), _useState6 = _slicedToArray(_useState5, 2), showChildren = _useState6[0], setShowChildren = _useState6[1];
@@ -101,7 +99,7 @@ var Popup = function Popup2(props) {
     }
   };
   var onHandleClick = function onHandleClick2(e) {
-    onClick2 && onClick2(e);
+    onClick && onClick(e);
   };
   var onHandleClickCloseIcon = function onHandleClickCloseIcon2(e) {
     var closed = onClickCloseIcon2 && onClickCloseIcon2(e);

package/dist/esm/Switch.js

@@ -21,58 +21,44 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
+import React__default from "react";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
+import { u as usePropsValue } from "./use-props-value.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  isAsync: false,
-  checked: false,
-  disable: false,
-  activeColor: "",
-  inactiveColor: "",
+  disabled: false,
   activeText: "",
-  inactiveText: "",
-  className: ""
+  inactiveText: ""
 });
 var Switch = function Switch2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), isAsync = _defaultProps$props.isAsync, checked = _defaultProps$props.checked, disable = _defaultProps$props.disable, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, activeText = _defaultProps$props.activeText, inactiveText = _defaultProps$props.inactiveText, onChange = _defaultProps$props.onChange, className = _defaultProps$props.className, style = _defaultProps$props.style;
-  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), value = _useState2[0], setValue = _useState2[1];
-  var b = cn("switch");
-  useEffect(function() {
-    setValue(checked);
-  }, [checked]);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), checked = _defaultProps$props.checked, defaultChecked = _defaultProps$props.defaultChecked, disabled = _defaultProps$props.disabled, activeText = _defaultProps$props.activeText, inactiveText = _defaultProps$props.inactiveText, className = _defaultProps$props.className, style = _defaultProps$props.style, onChange = _defaultProps$props.onChange;
+  var classPrefix = "nut-switch";
+  var _usePropsValue = usePropsValue({
+    value: checked,
+    defaultValue: defaultChecked
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
   var classes = function classes2() {
-    return "".concat(b(), " ").concat(value ? "switch-open" : "switch-close", " ").concat(disable ? "".concat(b(), "-disable") : "", " ", "".concat(b(), "-base"), " ").concat(className);
-  };
-  var styles = function styles2() {
-    var myStyle = _objectSpread({
-      backgroundColor: value ? activeColor : inactiveColor
-    }, style || {});
-    return myStyle;
+    return "".concat(classPrefix, " ").concat(value ? "switch-open" : "switch-close", " ").concat(disabled ? "".concat(classPrefix, "-disabled") : "", " ", "".concat(classPrefix, "-base"), " ").concat(className);
   };
   var _onClick = function onClick(event) {
-    if (disable)
+    if (disabled)
       return;
-    if (!isAsync) {
-      setValue(!value);
-    }
     onChange && onChange(!value, event);
+    setValue(!value);
   };
   return React__default.createElement("div", {
     className: classes(),
     onClick: function onClick(e) {
       return _onClick(e);
     },
-    style: styles()
+    style
   }, React__default.createElement("div", {
     className: "switch-button"
   }, !value && React__default.createElement("div", {
     className: "close-line"
   }), activeText && React__default.createElement(React__default.Fragment, null, value ? React__default.createElement("div", {
-    className: "".concat(b("label"), " open")
+    className: "".concat(classPrefix, "__label open")
   }, activeText) : React__default.createElement("div", {
-    className: "".concat(b("label"), " close")
+    className: "".concat(classPrefix, "__label close")
   }, inactiveText))));
 };
 Switch.defaultProps = defaultProps;

package/dist/esm/TabPane.js

@@ -1,8 +1,6 @@
 import { T as TabPane } from "./tabpane2.js";
 import "react";
 import "classnames";
-import "./bem.js";
-import "@bem-react/classname";
 export {
   TabPane as default
 };

package/dist/esm/Tabbar.js

@@ -21,38 +21,35 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var defaultProps = {
-  visible: 0,
-  bottom: false,
-  size: 20,
-  unactiveColor: "",
+import React__default from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+import { T as TabbarItem } from "./tabbaritem2.js";
+import "./badge2.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  defaultValue: 0,
+  fixed: false,
+  inactiveColor: "",
   activeColor: "",
-  safeAreaInsetBottom: false,
-  className: "",
-  style: {},
-  onSwitch: function onSwitch(child, activeVisible) {
+  safeArea: false,
+  onSwitch: function onSwitch(value) {
   }
-};
+});
 var Tabbar = function Tabbar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, visible = _defaultProps$props.visible, activeVisible = _defaultProps$props.activeVisible, bottom = _defaultProps$props.bottom, size = _defaultProps$props.size, activeColor = _defaultProps$props.activeColor, unactiveColor = _defaultProps$props.unactiveColor, safeAreaInsetBottom = _defaultProps$props.safeAreaInsetBottom, className = _defaultProps$props.className, style = _defaultProps$props.style, onSwitch2 = _defaultProps$props.onSwitch;
-  var b = cn("tabbar");
-  var _useState = useState(activeVisible || visible), _useState2 = _slicedToArray(_useState, 2), selectIndex = _useState2[0], setSelectIndex = _useState2[1];
-  var _handleClick = function handleClick(idx) {
-    if (!("activeVisible" in props)) {
-      setSelectIndex(idx);
-    }
-  };
-  useEffect(function() {
-    if (activeVisible !== void 0) {
-      setSelectIndex(activeVisible);
-    }
-  }, [activeVisible]);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, fixed = _defaultProps$props.fixed, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, safeArea = _defaultProps$props.safeArea, className = _defaultProps$props.className, style = _defaultProps$props.style, onSwitch2 = _defaultProps$props.onSwitch;
+  var classPrefix = "nut-tabbar";
+  var _usePropsValue = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: onSwitch2
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectIndex = _usePropsValue2[0], setSelectIndex = _usePropsValue2[1];
   return React__default.createElement("div", {
-    className: ["".concat(b()), bottom ? "".concat(b("bottom")) : "", safeAreaInsetBottom ? "".concat(b("bottom"), " ").concat(b("safebottom")) : "", className].join(" "),
+    className: classNames(classPrefix, className, _defineProperty({}, "".concat(classPrefix, "__fixed"), fixed)),
     style
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__wrap")
   }, React__default.Children.map(children, function(child, idx) {
     if (!React__default.isValidElement(child)) {
       return null;
@@ -60,19 +57,18 @@ var Tabbar = function Tabbar2(props) {
     var childProps = _objectSpread(_objectSpread({}, child.props), {}, {
       active: idx === selectIndex,
       index: idx,
-      unactiveColor,
+      inactiveColor,
       activeColor,
-      size,
-      handleClick: function handleClick() {
-        _handleClick(idx);
-        onSwitch2(child, idx);
-      }
+      handleClick: setSelectIndex
     });
     return React__default.cloneElement(child, childProps);
+  })), (fixed || safeArea) && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__safe-area")
   }));
 };
 Tabbar.defaultProps = defaultProps;
 Tabbar.displayName = "NutTabbar";
+Tabbar.Item = TabbarItem;
 export {
   Tabbar as default
 };

package/dist/esm/TabbarItem.js

@@ -1,78 +1,8 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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, { useEffect } from "react";
-import { c as cn } from "./bem.js";
-import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  dot: false,
-  className: "",
-  tabTitle: "",
-  icon: null,
-  href: "",
-  num: "",
-  active: false,
-  activeColor: "",
-  unactiveColor: "",
-  index: 0,
-  handleClick: function handleClick(idx) {
-  }
-});
-var TabbarItem = function TabbarItem2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), dot = _defaultProps$props.dot, className = _defaultProps$props.className, style = _defaultProps$props.style, tabTitle = _defaultProps$props.tabTitle, icon = _defaultProps$props.icon, href = _defaultProps$props.href, num = _defaultProps$props.num, active = _defaultProps$props.active, activeColor = _defaultProps$props.activeColor, unactiveColor = _defaultProps$props.unactiveColor, index = _defaultProps$props.index, handleClick2 = _defaultProps$props.handleClick;
-  var b = cn("tabbar-item");
-  var bIcon = cn("tabbar-item__icon-box");
-  useEffect(function() {
-    if (active && href) {
-      window.location.href = href;
-    }
-  }, [active, href]);
-  return React__default.createElement("div", {
-    className: "".concat(b({
-      active
-    }), " ").concat(className),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      color: active ? activeColor : unactiveColor
-    }),
-    onClick: function onClick() {
-      handleClick2(index);
-    }
-  }, React__default.createElement("div", {
-    className: "".concat(bIcon())
-  }, !dot ? React__default.createElement(React__default.Fragment, null, num && num <= 99 && React__default.createElement("div", {
-    className: "".concat(bIcon("tips", [bIcon("num")]))
-  }, num), num && num >= 100 && React__default.createElement("div", {
-    className: "".concat(bIcon("tips", [bIcon("nums")]))
-  }, "99+")) : React__default.createElement("div", {
-    className: "".concat(bIcon("tips", [bIcon("dot")]))
-  }), icon || null), tabTitle && React__default.createElement("div", {
-    className: bIcon({
-      "nav-word": true
-    }, [bIcon({
-      "big-word": !icon
-    })])
-  }, tabTitle));
-};
+import { T as TabbarItem } from "./tabbaritem2.js";
+import "react";
+import "classnames";
+import "./typings.js";
+import "./badge2.js";
 export {
   TabbarItem as default
 };