@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/esm/tabbaritem2.js

@@ -0,0 +1,61 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "style", "title", "icon", "active", "activeColor", "inactiveColor", "index", "handleClick"];
+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";
+import { C as ComponentDefaults } from "./typings.js";
+import { B as Badge } from "./badge2.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  title: "",
+  icon: null,
+  active: false,
+  index: 0,
+  handleClick: function handleClick(idx) {
+  }
+});
+var TabbarItem = function TabbarItem2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, title = _defaultProps$props.title, icon = _defaultProps$props.icon, active = _defaultProps$props.active, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, index = _defaultProps$props.index, handleClick2 = _defaultProps$props.handleClick, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-tabbar-item";
+  var tabbarItemClass = classNames(className, classPrefix, _defineProperty({}, "".concat(classPrefix, "-active"), active));
+  var boxPrefix = "".concat(classPrefix, "__icon-box");
+  var titleClass = classNames(boxPrefix, "".concat(boxPrefix, "-nav"), _defineProperty({}, "".concat(boxPrefix, "-large"), !icon));
+  return React__default.createElement("div", {
+    className: tabbarItemClass,
+    style: _objectSpread({
+      color: active ? activeColor : inactiveColor
+    }, style),
+    onClick: function onClick() {
+      return handleClick2(index);
+    }
+  }, icon ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Badge, _objectSpread({}, rest), React__default.createElement("div", {
+    className: boxPrefix
+  }, icon)), React__default.createElement("div", {
+    className: titleClass
+  }, title)) : React__default.createElement(Badge, _objectSpread({}, rest), React__default.createElement("div", {
+    className: titleClass
+  }, title)));
+};
+export {
+  TabbarItem as T
+};

package/dist/esm/tabs2.js

@@ -1,9 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["value", "color", "tabStyle", "background", "direction", "type", "titleScroll", "ellipsis", "animatedTime", "titleGutter", "size", "leftAlign", "titleNode", "children", "onClick", "onChange", "className", "autoHeight"];
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["activeColor", "tabStyle", "direction", "activeType", "duration", "align", "title", "children", "onClick", "onChange", "className", "autoHeight"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -28,138 +26,171 @@ function _objectSpread(target) {
 import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { JoySmile } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
 import { C as ComponentDefaults } from "./typings.js";
 import TabPane from "./TabPane.js";
-var Title = /* @__PURE__ */ _createClass(
-  // eslint-disable-next-line no-useless-constructor
-  function Title2() {
-    _classCallCheck(this, Title2);
-    _defineProperty(this, "title", "");
-    _defineProperty(this, "paneKey", "");
-    _defineProperty(this, "disabled", false);
-    _defineProperty(this, "index", 0);
-  }
-);
+import { r as requestAniFrame } from "./raf.js";
+import { u as usePropsValue } from "./use-props-value.js";
+function useForceUpdate() {
+  var _React__default$useSt = React__default.useState(), _React__default$useSt2 = _slicedToArray(_React__default$useSt, 2), updateState = _React__default$useSt2[1];
+  return React__default.useCallback(function() {
+    return updateState({});
+  }, []);
+}
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   tabStyle: {},
-  value: 0,
-  color: "",
-  background: "",
+  activeColor: "",
   direction: "horizontal",
-  type: "line",
-  titleScroll: false,
-  ellipsis: true,
-  animatedTime: 300,
-  titleGutter: 0,
-  size: "normal",
-  leftAlign: false,
+  activeType: "line",
+  duration: 300,
   autoHeight: false
 });
-var pxCheck = function pxCheck2(value) {
-  return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
-};
+var classPrefix = "nut-tabs";
 var Tabs = function Tabs2(props) {
   var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), value = _defaultProps$props.value, color = _defaultProps$props.color, tabStyle = _defaultProps$props.tabStyle, background = _defaultProps$props.background, direction = _defaultProps$props.direction, type = _defaultProps$props.type, titleScroll = _defaultProps$props.titleScroll, ellipsis = _defaultProps$props.ellipsis, animatedTime = _defaultProps$props.animatedTime, titleGutter = _defaultProps$props.titleGutter, size = _defaultProps$props.size, leftAlign = _defaultProps$props.leftAlign, titleNode = _defaultProps$props.titleNode, children = _defaultProps$props.children, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange, className = _defaultProps$props.className, autoHeight = _defaultProps$props.autoHeight, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState({
-    index: 0
-  }), _useState2 = _slicedToArray(_useState, 2), currentItem = _useState2[0], setCurrentItem = _useState2[1];
-  var titles = useRef([]);
-  useEffect(function() {
-    var currentIndex = 0;
-    titles.current = [];
-    React__default.Children.forEach(children, function(child, idx) {
-      if (!React__default.isValidElement(child)) {
-        return null;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), activeColor = _defaultProps$props.activeColor, tabStyle = _defaultProps$props.tabStyle, direction = _defaultProps$props.direction, activeType = _defaultProps$props.activeType, duration = _defaultProps$props.duration, align = _defaultProps$props.align, title = _defaultProps$props.title, children = _defaultProps$props.children, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange, className = _defaultProps$props.className, autoHeight = _defaultProps$props.autoHeight, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: 0,
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
+  var _useState = useState({}), _useState2 = _slicedToArray(_useState, 2), contentStyle = _useState2[0], setContentStyle = _useState2[1];
+  var titleItemsRef = useRef([]);
+  var navRef = useRef(null);
+  var scrollDirection = function scrollDirection2(nav, to, duration2, direction2) {
+    var count = 0;
+    var from = direction2 === "horizontal" ? nav.scrollLeft : nav.scrollTop;
+    var frames = duration2 === 0 ? 1 : Math.round(duration2 * 1e3 / 16);
+    function animate() {
+      if (direction2 === "horizontal") {
+        nav.scrollLeft += (to - from) / frames;
+      } else {
+        nav.scrollTop += (to - from) / frames;
       }
-      var title = new Title();
-      var childProps = child === null || child === void 0 ? void 0 : child.props;
-      if (childProps !== null && childProps !== void 0 && childProps.title || childProps !== null && childProps !== void 0 && childProps.paneKey) {
-        title.title = childProps === null || childProps === void 0 ? void 0 : childProps.title;
-        title.paneKey = (childProps === null || childProps === void 0 ? void 0 : childProps.paneKey) || idx;
-        title.disabled = childProps === null || childProps === void 0 ? void 0 : childProps.disabled;
-        title.index = idx;
-        if (title.paneKey === value) {
-          currentIndex = idx;
+      if (++count < frames) {
+        requestAniFrame(animate);
+      }
+    }
+    animate();
+  };
+  var scrollIntoView = function scrollIntoView2(index, immediate) {
+    var nav = navRef.current;
+    var titleItem = titleItemsRef.current;
+    if (!nav || !titleItem || !titleItem[index]) {
+      return;
+    }
+    var title2 = titleItem[index];
+    var to = 0;
+    if (props.direction === "vertical") {
+      var runTop = title2.offsetTop - nav.offsetTop + 10;
+      to = runTop - (nav.offsetHeight - title2.offsetHeight) / 2;
+    } else {
+      to = title2.offsetLeft - (nav.offsetWidth - title2.offsetWidth) / 2;
+    }
+    scrollDirection(nav, to, immediate ? 0 : 0.3, props.direction);
+  };
+  var getTitles = function getTitles2() {
+    var titles2 = [];
+    React__default.Children.forEach(children, function(child, idx) {
+      if (React__default.isValidElement(child)) {
+        var props2 = child === null || child === void 0 ? void 0 : child.props;
+        if (props2 !== null && props2 !== void 0 && props2.title || props2 !== null && props2 !== void 0 && props2.value) {
+          titles2.push({
+            title: props2.title,
+            value: props2.value || idx,
+            disabled: props2.disabled
+          });
         }
       }
-      titles.current.push(title);
     });
-    setCurrentItem(titles.current[currentIndex]);
-  }, [children]);
-  var b = cn("tabs");
-  var classes = classNames(direction, b(""), className);
-  var classesTitle = classNames((_classNames = {}, _defineProperty(_classNames, type, type), _defineProperty(_classNames, "scrollable", titleScroll), _defineProperty(_classNames, size, size), _classNames), "".concat(b(""), "__titles"));
-  var titleStyle = {
-    marginLeft: pxCheck(titleGutter),
-    marginRight: pxCheck(titleGutter)
+    return titles2;
   };
+  var titles = useRef(getTitles());
+  var forceUpdate = useForceUpdate();
+  useEffect(function() {
+    titles.current = getTitles();
+    var current = "";
+    titles.current.forEach(function(title2) {
+      if (title2.value == value) {
+        current = value;
+      }
+    });
+    if (current !== "" && current !== value) {
+      setValue(current);
+    } else {
+      forceUpdate();
+    }
+  }, [children]);
+  var classes = classNames(classPrefix, "".concat(classPrefix, "--").concat(direction), className);
+  var classesTitle = classNames("".concat(classPrefix, "__titles"), (_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "__titles--").concat(activeType), activeType), _defineProperty(_classNames, "".concat(classPrefix, "__titles--scrollable"), true), _defineProperty(_classNames, "".concat(classPrefix, "__titles--").concat(align), align), _classNames));
   var tabsActiveStyle = {
-    color: type === "smile" ? color : "",
-    background: type === "line" ? color : ""
+    color: activeType === "smile" ? activeColor : "",
+    background: activeType === "line" ? activeColor : ""
   };
-  var index = titles.current.findIndex(function(t) {
-    return t.paneKey === value;
-  });
-  var contentStyle = {
-    transform: direction === "horizontal" ? "translate3d(-".concat(index * 100, "%, 0, 0)") : "translate3d( 0,-".concat(index * 100, "%, 0)"),
-    transitionDuration: "".concat(animatedTime, "ms")
-  };
-  var tabChange = function tabChange2(item, index2) {
-    onClick && onClick(item);
+  useEffect(function() {
+    var index = titles.current.findIndex(function(t) {
+      return t.value == value;
+    });
+    setContentStyle({
+      transform: direction === "horizontal" ? "translate3d(-".concat(index * 100, "%, 0, 0)") : "translate3d( 0,-".concat(index * 100, "%, 0)"),
+      transitionDuration: "".concat(duration, "ms")
+    });
+    setTimeout(function() {
+      scrollIntoView(index);
+    });
+  }, [value]);
+  var tabChange = function tabChange2(item) {
+    onClick && onClick(item.value);
     if (item.disabled) {
       return;
     }
-    setCurrentItem(item);
-    onChange && onChange(item);
+    setValue(item.value);
   };
   return React__default.createElement("div", _objectSpread({
     className: classes
   }, rest), React__default.createElement("div", {
     className: classesTitle,
-    style: _objectSpread(_objectSpread({}, tabStyle), {}, {
-      background
-    })
-  }, !!titleNode && typeof titleNode === "function" ? titleNode() : titles.current.map(function(item, index2) {
+    style: _objectSpread({}, tabStyle),
+    ref: navRef
+  }, !!title && typeof title === "function" ? title() : titles.current.map(function(item) {
+    var _classNames2;
     return React__default.createElement("div", {
-      style: titleStyle,
-      onClick: function onClick2(e) {
-        return tabChange(item);
+      onClick: function onClick2() {
+        tabChange(item);
       },
-      className: classNames({
-        active: !item.disabled && String(item.paneKey) === String(value),
-        disabled: item.disabled,
-        "nut-tabs__titles-item-left-align": leftAlign
-      }, "".concat(b(""), "__titles-item")),
-      key: item.paneKey
-    }, type === "line" && React__default.createElement("div", {
-      className: "".concat(b(""), "__titles-item__line"),
+      className: classNames("".concat(classPrefix, "__titles-item"), (_classNames2 = {}, _defineProperty(_classNames2, "nut-tabs__titles-item--active", !item.disabled && String(item.value) === String(value)), _defineProperty(_classNames2, "nut-tabs__titles-item--disabled", item.disabled), _defineProperty(_classNames2, "nut-tabs__titles-item--".concat(align), align), _classNames2)),
+      ref: function ref(_ref) {
+        return titleItemsRef.current.push(_ref);
+      },
+      key: item.value
+    }, activeType === "line" && React__default.createElement("div", {
+      className: "".concat(classPrefix, "__titles-item__line"),
       style: tabsActiveStyle
-    }), type === "smile" && React__default.createElement("div", {
-      className: "".concat(b(""), "__titles-item__smile"),
+    }), activeType === "smile" && React__default.createElement("div", {
+      className: "".concat(classPrefix, "__titles-item__smile"),
       style: tabsActiveStyle
     }, React__default.createElement(JoySmile, {
-      color
+      color: activeColor,
+      width: 40,
+      height: 20
     })), React__default.createElement("div", {
       className: classNames({
-        ellipsis: ellipsis && !titleScroll && direction === "horizontal"
-      }, "".concat(b(""), "__titles-item__text"))
+        ellipsis: true
+      }, "".concat(classPrefix, "__titles-item__text"))
     }, item.title));
   })), React__default.createElement("div", {
-    className: "".concat(b(""), "__content__wrap")
+    className: "".concat(classPrefix, "__content__wrap")
   }, React__default.createElement("div", {
-    className: "".concat(b(""), "__content"),
+    className: "".concat(classPrefix, "__content"),
     style: contentStyle
   }, React__default.Children.map(children, function(child, idx) {
-    var _child$props;
     if (!React__default.isValidElement(child)) {
       return null;
     }
     var childProps = _objectSpread(_objectSpread({}, child.props), {}, {
-      activeKey: value
+      active: value === child.props.value
     });
-    if (String(value) !== String(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.paneKey) || idx) && autoHeight) {
+    if (String(value) !== String(child.props.value || idx) && autoHeight) {
       childProps = _objectSpread(_objectSpread({}, childProps), {}, {
         autoHeightClassName: "inactive"
       });

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.0 Wed Apr 19 2023 21:30:04 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.0 Wed Apr 19 2023 21:30:04 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.0 Wed Apr 19 2023 21:30:04 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.0 Wed Apr 19 2023 21:30:04 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.0 Wed Apr 19 2023 21:30:04 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.0 Wed Apr 19 2023 21:30:04 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */