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

package/dist/esm/Picker.js

@@ -1,8 +1,8 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["visible", "title", "listData", "defaultValueData", "onConfirm", "onClose", "onCloseUpdate", "onChange", "className", "style", "threeDimensional", "swipeDuration"];
+var _excluded = ["visible", "title", "options", "defaultValue", "className", "style", "threeDimensional", "duration", "onConfirm", "onClose", "afterClose", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -25,13 +25,14 @@ function _objectSpread(target) {
   return target;
 }
 import React__default, { useState, useRef, useEffect, useImperativeHandle } from "react";
+import classNames from "classnames";
 import Popup from "./Popup.js";
 import { u as useTouch } from "./use-touch.js";
 import { useConfig } from "./ConfigProvider.js";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
-  var _props$keyIndex = props.keyIndex, keyIndex = _props$keyIndex === void 0 ? 0 : _props$keyIndex, defaultValue = props.defaultValue, _props$listData = props.listData, listData = _props$listData === void 0 ? [] : _props$listData, _props$threeDimension = props.threeDimensional, threeDimensional = _props$threeDimension === void 0 ? true : _props$threeDimension, _props$swipeDuration = props.swipeDuration, swipeDuration = _props$swipeDuration === void 0 ? 1e3 : _props$swipeDuration, chooseItem = props.chooseItem;
+import { u as usePropsValue } from "./use-props-value.js";
+import { C as ComponentDefaults } from "./typings.js";
+var InternalPickerPanel = function InternalPickerPanel2(props, ref) {
+  var _props$keyIndex = props.keyIndex, keyIndex = _props$keyIndex === void 0 ? 0 : _props$keyIndex, defaultValue = props.defaultValue, _props$options = props.options, options = _props$options === void 0 ? [] : _props$options, _props$threeDimension = props.threeDimensional, threeDimensional = _props$threeDimension === void 0 ? true : _props$threeDimension, _props$duration = props.duration, duration = _props$duration === void 0 ? 1e3 : _props$duration, chooseItem = props.chooseItem;
   var touch = useTouch();
   var DEFAULT_DURATION = 200;
   var INERTIA_TIME = 300;
@@ -43,9 +44,8 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
   var rotation = 20;
   var moving = useRef(false);
   var timer;
-  useRef(null);
   var rollerRef = useRef(null);
-  var pickerSlotRef = useRef(null);
+  var PickerPanelRef = useRef(null);
   var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), startTime = _useState8[0], setStartTime = _useState8[1];
   var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), startY = _useState10[0], setStartY = _useState10[1];
   var transformY = useRef(0);
@@ -75,8 +75,8 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
       if (updateMove > 0) {
         updateMove = 0;
       }
-      if (updateMove < -(listData.length - 1) * lineSpacing) {
-        updateMove = -(listData.length - 1) * lineSpacing;
+      if (updateMove < -(options.length - 1) * lineSpacing) {
+        updateMove = -(options.length - 1) * lineSpacing;
       }
       var endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
       var deg = "".concat((Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation, "deg");
@@ -85,7 +85,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
     } else {
       var _deg = 0;
       var currentDeg = (-updateMove / lineSpacing + 1) * rotation;
-      var maxDeg = (listData.length + 1) * rotation;
+      var maxDeg = (options.length + 1) * rotation;
       var minDeg = 0;
       _deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
       if (minDeg < _deg && _deg < maxDeg) {
@@ -95,7 +95,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
     }
   };
   var setChooseValue = function setChooseValue2(move) {
-    chooseItem && chooseItem(listData === null || listData === void 0 ? void 0 : listData[Math.round(-move / lineSpacing)], keyIndex);
+    chooseItem && chooseItem(options === null || options === void 0 ? void 0 : options[Math.round(-move / lineSpacing)], keyIndex);
   };
   var touchStart = function touchStart2(event) {
     touch.start(event);
@@ -119,7 +119,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
     var moveTime = Date.now() - startTime;
     if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
       var distance = momentum(move, moveTime);
-      setMove(distance, "end", +swipeDuration);
+      setMove(distance, "end", +duration);
     } else {
       setMove(move, "end");
     }
@@ -127,9 +127,9 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
       touch.reset();
     }, 0);
   };
-  var momentum = function momentum2(distance, duration) {
+  var momentum = function momentum2(distance, duration2) {
     var nDistance = distance;
-    var speed = Math.abs(nDistance / duration);
+    var speed = Math.abs(nDistance / duration2);
     nDistance = speed / 3e-3 * (nDistance < 0 ? -1 : 1);
     return nDistance;
   };
@@ -137,7 +137,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
     var value = val || defaultValue;
     var index = -1;
     if (value) {
-      listData.some(function(item, idx) {
+      options.some(function(item, idx) {
         if (item.value === value) {
           index = idx;
           return true;
@@ -145,7 +145,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
         return false;
       });
     } else {
-      listData.forEach(function(item, i) {
+      options.forEach(function(item, i) {
         if (item.value === defaultValue) {
           index = i;
         }
@@ -188,7 +188,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
     return function() {
       clearTimeout(timer);
     };
-  }, [listData]);
+  }, [options]);
   useImperativeHandle(ref, function() {
     return {
       stopMomentum,
@@ -197,7 +197,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
   });
   return React__default.createElement("div", {
     className: "nut-picker-list",
-    ref: pickerSlotRef,
+    ref: PickerPanelRef,
     onTouchStart: touchStart,
     onTouchMove: touchMove,
     onTouchEnd: touchEnd
@@ -206,7 +206,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
     ref: rollerRef,
     style: threeDimensional ? touchRollerStyle() : touchTileStyle(),
     onTransitionEnd: stopMomentum
-  }, threeDimensional && listData.map(function(item, index) {
+  }, threeDimensional && options.map(function(item, index) {
     return React__default.createElement("div", {
       className: "nut-picker-roller-item ".concat(isHidden(index + 1) && "nut-picker-roller-item-hidden"),
       style: {
@@ -214,7 +214,7 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
       },
       key: item.value ? item.value : index
     }, React__default.createElement(React__default.Fragment, null, item.text ? item.text : item));
-  }), !threeDimensional && listData.map(function(item, index) {
+  }), !threeDimensional && options.map(function(item, index) {
     return React__default.createElement("div", {
       className: "nut-picker-roller-item-title",
       key: item.value ? item.value : index
@@ -225,8 +225,8 @@ var InternalPickerSlot = function InternalPickerSlot2(props, ref) {
     className: "nut-picker-indicator"
   }));
 };
-var PickerSlot = React__default.forwardRef(InternalPickerSlot);
-var PickerSlot$1 = PickerSlot;
+var PickerPanel = React__default.forwardRef(InternalPickerPanel);
+var PickerPanel$1 = PickerPanel;
 function useRefs() {
   var refs = React__default.useRef([]);
   var setRefs = React__default.useCallback(function(index) {
@@ -240,173 +240,188 @@ function useRefs() {
   }, []);
   return [refs.current, setRefs, reset];
 }
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  visible: false,
+  title: "",
+  options: [],
+  value: [],
+  defaultValue: [],
+  threeDimensional: true,
+  duration: 1e3
+});
 var InternalPicker = function InternalPicker2(props, ref) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var visible = props.visible, title = props.title, _props$listData2 = props.listData, listData = _props$listData2 === void 0 ? [] : _props$listData2, defaultValueData = props.defaultValueData, onConfirm = props.onConfirm, onClose = props.onClose, onCloseUpdate = props.onCloseUpdate, onChange = props.onChange, className = props.className, style = props.style, threeDimensional = props.threeDimensional, swipeDuration = props.swipeDuration, rest = _objectWithoutProperties(props, _excluded);
-  var _useState13 = useState([]), _useState14 = _slicedToArray(_useState13, 2), chooseValueData = _useState14[0], setchooseValueData = _useState14[1];
-  var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), columnIndex = _useState16[0], setcolumnIndex = _useState16[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), visible = _defaultProps$props.visible, title = _defaultProps$props.title, _defaultProps$props$o = _defaultProps$props.options, options = _defaultProps$props$o === void 0 ? [] : _defaultProps$props$o, _defaultProps$props$d = _defaultProps$props.defaultValue, defaultValue = _defaultProps$props$d === void 0 ? [] : _defaultProps$props$d, className = _defaultProps$props.className, style = _defaultProps$props.style, threeDimensional = _defaultProps$props.threeDimensional, duration = _defaultProps$props.duration, onConfirm = _defaultProps$props.onConfirm, onClose = _defaultProps$props.onClose, afterClose = _defaultProps$props.afterClose, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-picker";
+  var classes = classNames(classPrefix, className);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: _toConsumableArray(defaultValue),
+    finalValue: _toConsumableArray(defaultValue),
+    onChange: function onChange2(val) {
+      var _props$onConfirm;
+      (_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 ? void 0 : _props$onConfirm.call(props, setSelectedOptions(), val);
+    }
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectedValue = _usePropsValue2[0], setSelectedValue = _usePropsValue2[1];
+  var _useState13 = useState(0), _useState14 = _slicedToArray(_useState13, 2), columnIndex = _useState14[0], setColumnIndex = _useState14[1];
   var pickerRef = useRef(null);
   var _useRefs = useRefs(), _useRefs2 = _slicedToArray(_useRefs, 2), refs = _useRefs2[0], setRefs = _useRefs2[1];
-  var _useState17 = useState([]), _useState18 = _slicedToArray(_useState17, 2), columnsList = _useState18[0], setColumnsList = _useState18[1];
-  var b = cn("picker");
+  var _useState15 = useState([]), _useState16 = _slicedToArray(_useState15, 2), columnsList = _useState16[0], setColumnsList = _useState16[1];
   var isConfirmEvent = useRef(false);
-  useEffect(function() {
-    if (defaultValueData && defaultValueData.length !== 0 && defaultValueData.toString() !== chooseValueData.toString()) {
-      var data = _toConsumableArray(defaultValueData);
-      setchooseValueData(data);
-      setColumnsList(normalListData());
+  var formatCascade = function formatCascade2(columns, values) {
+    var formatted = [];
+    var columnOptions = {
+      text: "",
+      value: "",
+      children: columns
+    };
+    var columnIndex2 = 0;
+    var _loop = function _loop2() {
+      var options2 = columnOptions.children;
+      var value = values[columnIndex2];
+      var index = options2.findIndex(function(columnItem) {
+        return columnItem.value === value;
+      });
+      if (index === -1)
+        index = 0;
+      columnOptions = columnOptions.children[index];
+      columnIndex2++;
+      formatted.push(options2);
+    };
+    while (columnOptions && columnOptions.children) {
+      _loop();
     }
-  }, [defaultValueData]);
-  useEffect(function() {
-    onChange && onChange(columnIndex, chooseValueData, selectedOptions());
-    if (isConfirmEvent.current) {
-      isConfirmEvent.current = false;
-      onConfirm && onConfirm(chooseValueData, selectedOptions());
+    return formatted;
+  };
+  var columnsType = function columnsType2() {
+    var firstColumn = options[0];
+    if (firstColumn) {
+      if (Array.isArray(firstColumn)) {
+        return "multiple";
+      }
+      if ("children" in firstColumn) {
+        return "cascade";
+      }
     }
-  }, [chooseValueData]);
-  useEffect(function() {
-    init();
-  }, [listData]);
-  var closeActionSheet = function closeActionSheet2() {
-    onClose && onClose(chooseValueData, selectedOptions());
-    onCloseUpdate && onCloseUpdate(chooseValueData, selectedOptions(), pickerRef);
+    return "single";
   };
-  var confirm = function confirm2() {
-    var movings = false;
-    refs.forEach(function(_ref) {
-      if (_ref.moving)
-        movings = true;
-      _ref.stopMomentum();
+  var normalListData = function normalListData2() {
+    var type = columnsType();
+    switch (type) {
+      case "multiple":
+        return options;
+      case "cascade":
+        return formatCascade(options, selectedValue);
+      default:
+        return [options];
+    }
+  };
+  var init = function init2() {
+    var normalData = normalListData();
+    setColumnsList(normalData);
+    var data = [];
+    normalData.length > 0 && normalData.map(function(item) {
+      item[0] && data.push(item[0].value);
+      return item;
     });
-    if (movings) {
-      isConfirmEvent.current = true;
-    } else {
-      onConfirm && onConfirm(chooseValueData, selectedOptions());
+    if (!defaultValue.length && selectedValue.length === 0) {
+      setSelectedValue([].concat(data));
     }
-    onClose && onClose(chooseValueData, selectedOptions());
-    setTimeout(function() {
-      isConfirmEvent.current = false;
-    }, 0);
   };
-  var selectedOptions = function selectedOptions2() {
-    var optins = [];
-    columnsList.map(function(column, index) {
-      var currOptions = [];
-      currOptions = column.filter(function(item) {
-        return item.value === chooseValueData[index];
+  useEffect(function() {
+    if (!visible) {
+      return;
+    }
+    init();
+  }, [options, visible]);
+  var setSelectedOptions = function setSelectedOptions2() {
+    var options2 = [];
+    var currOptions = [];
+    columnsList.forEach(function(columnOptions, index) {
+      currOptions = columnOptions.filter(function(item) {
+        return item.value === selectedValue[index];
       });
       if (currOptions[0]) {
-        optins.push(currOptions[0]);
+        options2.push(currOptions[0]);
       } else {
-        column[0] && optins.push(column[0]);
+        columnOptions[0] && options2.push(columnOptions[0]);
       }
-      return column;
     });
-    return optins;
+    return options2;
   };
-  var _chooseItem = function chooseItem(option, columnIndex2) {
-    if (option && Object.keys(option).length) {
-      if (chooseValueData[columnIndex2] !== option.value) {
+  useEffect(function() {
+    if (!visible) {
+      return;
+    }
+    onChange && onChange(setSelectedOptions(), selectedValue, columnIndex);
+    if (isConfirmEvent.current) {
+      isConfirmEvent.current = false;
+      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+    }
+  }, [selectedValue, columnsList, visible]);
+  var _chooseItem = function chooseItem(columnOptions, columnIndex2) {
+    if (columnOptions && Object.keys(columnOptions).length) {
+      if (selectedValue[columnIndex2] !== columnOptions.value) {
         if (columnsType() === "cascade") {
-          chooseValueData[columnIndex2] = option.value ? option.value : "";
-          setchooseValueData(_toConsumableArray(chooseValueData));
-          var index = columnIndex2;
-          var cursor = option;
-          while (cursor && cursor.children && cursor.children[0]) {
-            chooseValueData[index + 1] = cursor.children[0].value;
-            setchooseValueData(_toConsumableArray(chooseValueData));
-            index++;
-            var cc = cursor.children[0];
-            cursor = cc;
+          var _columnOptions2, _columnOptions2$child;
+          selectedValue[columnIndex2] = columnOptions.value || "";
+          setSelectedValue(_toConsumableArray(selectedValue));
+          while ((_columnOptions = columnOptions) !== null && _columnOptions !== void 0 && (_columnOptions$childr = _columnOptions.children) !== null && _columnOptions$childr !== void 0 && _columnOptions$childr[0]) {
+            var _columnOptions, _columnOptions$childr;
+            selectedValue[columnIndex2 + 1] = columnOptions.children[0].value;
+            setSelectedValue(_toConsumableArray(selectedValue));
+            columnIndex2++;
+            columnOptions = columnOptions.children[0];
           }
-          if (cursor && cursor.children) {
-            chooseValueData[index + 1] = "";
-            setchooseValueData(_toConsumableArray(chooseValueData));
+          if ((_columnOptions2 = columnOptions) !== null && _columnOptions2 !== void 0 && (_columnOptions2$child = _columnOptions2.children) !== null && _columnOptions2$child !== void 0 && _columnOptions2$child.length) {
+            selectedValue[columnIndex2 + 1] = "";
+            setSelectedValue(_toConsumableArray(selectedValue));
           }
           setColumnsList(normalListData());
         } else {
-          setchooseValueData(function(data) {
+          setSelectedValue(function(data) {
             var cdata = _toConsumableArray(data);
-            cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(option, "value") ? option.value : "";
+            cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
             return cdata;
           });
         }
-        setcolumnIndex(columnIndex2);
-      }
-    }
-  };
-  var normalListData = function normalListData2() {
-    var type = columnsType();
-    switch (type) {
-      case "multiple":
-        return listData;
-      case "cascade":
-        return formatCascade(listData, chooseValueData);
-      default:
-        return [listData];
-    }
-  };
-  var columnsType = function columnsType2() {
-    var firstColumn = listData[0];
-    if (firstColumn) {
-      if (Array.isArray(firstColumn)) {
-        return "multiple";
+        setColumnIndex(columnIndex2);
       }
-      if ("children" in firstColumn) {
-        return "cascade";
-      }
-    }
-    return "single";
-  };
-  var formatCascade = function formatCascade2(columns, defaultValues) {
-    var formatted = [];
-    var cursor = {
-      text: "",
-      value: "",
-      children: columns
-    };
-    var columnIndex2 = 0;
-    var _loop = function _loop2() {
-      var options = cursor.children;
-      var value = defaultValues[columnIndex2];
-      var index = options.findIndex(function(columnItem) {
-        return columnItem.value === value;
-      });
-      if (index === -1)
-        index = 0;
-      cursor = cursor.children[index];
-      columnIndex2++;
-      formatted.push(options);
-    };
-    while (cursor && cursor.children) {
-      _loop();
     }
-    return formatted;
   };
-  var init = function init2() {
-    var data = [];
-    var normalData = normalListData();
-    setColumnsList(normalData);
-    normalData.length > 0 && normalData.map(function(item) {
-      item[0] && data.push(item[0].value);
-      return item;
+  var confirm = function confirm2() {
+    var movings = false;
+    refs.forEach(function(ref2) {
+      if (ref2.moving)
+        movings = true;
+      ref2.stopMomentum();
     });
-    if (!defaultValueData && chooseValueData.length === 0) {
-      setchooseValueData([].concat(data));
+    if (movings) {
+      isConfirmEvent.current = true;
+    } else {
+      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+      closePicker();
     }
+    setTimeout(function() {
+      isConfirmEvent.current = false;
+    }, 0);
+  };
+  var closePicker = function closePicker2() {
+    onClose && onClose(setSelectedOptions(), selectedValue);
+    afterClose && afterClose(setSelectedOptions(), selectedValue, pickerRef);
   };
-  var renderToolbar = function renderToolbar2() {
+  var renderTitleBar = function renderTitleBar2() {
     return React__default.createElement("div", {
-      className: b("control")
+      className: "".concat(classPrefix, "__control")
     }, React__default.createElement("span", {
-      className: b("cancel-btn"),
+      className: "".concat(classPrefix, "__cancel-btn"),
       onClick: function onClick() {
-        return closeActionSheet();
+        return closePicker();
       }
     }, locale.cancel), React__default.createElement("div", {
-      className: b("title")
+      className: "".concat(classPrefix, "__title")
     }, title || ""), React__default.createElement("span", {
-      className: b("confirm-btn"),
+      className: "".concat(classPrefix, "__confirm-btn"),
       onClick: confirm
     }, locale.confirm));
   };
@@ -414,24 +429,24 @@ var InternalPicker = function InternalPicker2(props, ref) {
     visible,
     position: "bottom",
     onClose: function onClose2() {
-      closeActionSheet();
+      closePicker();
     }
   }, React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className || ""),
+    className: classes,
     style
-  }, rest), renderToolbar(), React__default.createElement("div", {
-    className: b("panel"),
+  }, rest), renderTitleBar(), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__panel"),
     ref: pickerRef
   }, columnsList === null || columnsList === void 0 ? void 0 : columnsList.map(function(item, index) {
-    return React__default.createElement(PickerSlot$1, {
+    return React__default.createElement(PickerPanel$1, {
       ref: setRefs(index),
-      defaultValue: chooseValueData === null || chooseValueData === void 0 ? void 0 : chooseValueData[index],
-      listData: item,
+      defaultValue: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[index],
+      options: item,
       threeDimensional,
       chooseItem: function chooseItem(value, index2) {
         return _chooseItem(value, index2);
       },
-      swipeDuration,
+      duration,
       key: index,
       keyIndex: index
     });

package/dist/esm/Skeleton.js

@@ -77,7 +77,7 @@ var Skeleton = function Skeleton2(props) {
     className: "nut-skeleton-content"
   }, avatar && React__default.createElement(Avatar, {
     className: avatarClass,
-    bgColor: "rgb(239, 239, 239)",
+    background: "rgb(239, 239, 239)",
     shape: avatarShape,
     style: getStyle()
   }), row === 1 && React__default.createElement("div", {

package/dist/esm/Swipe.js

@@ -21,7 +21,7 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { forwardRef, useRef, useState, useMemo, useCallback, useImperativeHandle, useEffect } from "react";
+import React__default, { forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect } from "react";
 import classNames from "classnames";
 import { c as cn } from "./bem.js";
 import { u as useTouch } from "./use-touch.js";
@@ -36,9 +36,7 @@ function preventDefault(event, isStopPropagation) {
   }
 }
 var defaultProps = {
-  name: "",
-  leftWidth: 0,
-  rightWidth: 0
+  name: ""
 };
 var Swipe = forwardRef(function(props, instanceRef) {
   var swipeBem = cn("swipe");
@@ -60,12 +58,8 @@ var Swipe = forwardRef(function(props, instanceRef) {
     transform: "translate3d(".concat(state.offset, "px, 0, 0)"),
     transitionDuration: state.dragging ? "0s" : ".6s"
   };
-  var leftWidth = useMemo(function() {
-    return props.leftWidth ? props.leftWidth : actionWidth.left;
-  }, [props.leftWidth, actionWidth.left]);
-  var rightWidth = useMemo(function() {
-    return props.rightWidth ? props.rightWidth : actionWidth.right;
-  }, [props.rightWidth, actionWidth.right]);
+  var leftWidth = actionWidth.left;
+  var rightWidth = actionWidth.right;
   var _onTouchStart = function onTouchStart(event) {
     if (!props.disabled) {
       startOffset.current = state.offset;

package/dist/esm/TabPane.js

@@ -1,6 +1,42 @@
-import { T as TabPane } from "./tabpane2.js";
-import "react";
-import "classnames";
+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 from "react";
+import classNames from "classnames";
+var defaultProps = {
+  title: "",
+  value: "",
+  disabled: false
+};
+var TabPane = function TabPane2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, autoHeightClassName = _defaultProps$props.autoHeightClassName, className = _defaultProps$props.className, disabled = _defaultProps$props.disabled;
+  var classPrefix = "nut-tabpane";
+  var classes = classNames({
+    active: !disabled && props.active
+  }, classPrefix, autoHeightClassName, className);
+  return children ? React__default.createElement("div", {
+    className: classes
+  }, !disabled && children) : null;
+};
 export {
   TabPane as default
 };

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

@@ -1,2 +1,2 @@
-
+import '../../TabbarItem/style'
 import '../../../packages/tabbar/tabbar.scss'