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

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"];
+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,148 @@ 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";
 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;
+      }
+      if (++count < frames) {
+        requestAniFrame(animate);
       }
-      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;
+    }
+    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 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")
+    });
+    scrollIntoView(index);
+  }, [value]);
+  var tabChange = function tabChange2(item, index) {
+    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, index) {
+    var _classNames2;
     return React__default.createElement("div", {
-      style: titleStyle,
       onClick: function onClick2(e) {
-        return tabChange(item);
+        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.2 Wed Apr 26 2023 18:37:18 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.4 Fri May 05 2023 16:13:14 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.2 Wed Apr 26 2023 18:37:18 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.4 Fri May 05 2023 16:13:14 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.2 Wed Apr 26 2023 18:37:18 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.4 Fri May 05 2023 16:13:14 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.2 Wed Apr 26 2023 18:37:18 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.4 Fri May 05 2023 16:13:14 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.2 Wed Apr 26 2023 18:37:18 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.4 Fri May 05 2023 16:13:14 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.2 Wed Apr 26 2023 18:37:18 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.4 Fri May 05 2023 16:13:14 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */