yootd 0.2.22 → 0.2.23

package/dist/tabs/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["size", "capsule", "className", "items", "onChange", "activeKey", "destroyInactiveTabPane", "isTabMargin"];
+var _excluded = ["size", "capsule", "className", "items", "onChange", "activeKey", "defaultActiveKey", "destroyInactiveTabPane", "isTabMargin"];
 import { Tabs as AntTabs, Radio } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useBem } from "../hooks/useBem";
@@ -14,16 +14,18 @@ export var TabsComponent = function TabsComponent(_ref) {
     items = _ref.items,
     _onChange = _ref.onChange,
     activeKey = _ref.activeKey,
+    defaultActiveKey = _ref.defaultActiveKey,
     _ref$destroyInactiveT = _ref.destroyInactiveTabPane,
     destroyInactiveTabPane = _ref$destroyInactiveT === void 0 ? false : _ref$destroyInactiveT,
     _ref$isTabMargin = _ref.isTabMargin,
     isTabMargin = _ref$isTabMargin === void 0 ? true : _ref$isTabMargin,
     rest = _objectWithoutProperties(_ref, _excluded);
   var mb = useBem('tabs');
-  var _useState = useState(),
+  // const [key, setKey] = useState<string>();
+  var _useState = useState(activeKey !== null && activeKey !== void 0 ? activeKey : defaultActiveKey),
     _useState2 = _slicedToArray(_useState, 2),
-    key = _useState2[0],
-    setKey = _useState2[1];
+    capsuleKey = _useState2[0],
+    setCapsuleKey = _useState2[1];
   var _useState3 = useState(new Set()),
     _useState4 = _slicedToArray(_useState3, 2),
     renderKey = _useState4[0],
@@ -40,22 +42,28 @@ export var TabsComponent = function TabsComponent(_ref) {
       // 默认为小尺寸
       _className = "".concat(mb.b('large'));
   }
+  console.log("capsuleKey", capsuleKey);
+
   // 给key设置默认值
   useEffect(function () {
-    if (activeKey != null) {
-      setKey(activeKey);
-      setRenderKey(function (pre) {
-        return pre.add(activeKey);
+    if (capsuleKey != null) {
+      setRenderKey(function (prev) {
+        var newSet = new Set(prev);
+        newSet.add(capsuleKey);
+        return newSet;
       });
     } else {
-      var _items$0$key, _items$;
-      setKey((_items$0$key = items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.key) !== null && _items$0$key !== void 0 ? _items$0$key : '1');
-      setRenderKey(function (pre) {
-        var _items$0$key2, _items$2;
-        return pre.add((_items$0$key2 = items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.key) !== null && _items$0$key2 !== void 0 ? _items$0$key2 : '1');
+      setRenderKey(function (prev) {
+        var _items$;
+        var newSet = new Set(prev);
+        var firstKey = items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.key;
+        if (firstKey != null) {
+          newSet.add(firstKey);
+        }
+        return newSet;
       });
     }
-  }, [activeKey]);
+  }, [capsuleKey, items]);
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(mb)
   }, capsule ? /*#__PURE__*/React.createElement("div", {
@@ -65,22 +73,30 @@ export var TabsComponent = function TabsComponent(_ref) {
     style: {
       paddingBottom: isTabMargin ? 16 : 0
     }
-  }, /*#__PURE__*/React.createElement(Radio.Group, {
-    value: key,
+  }, /*#__PURE__*/React.createElement(Radio.Group, _extends({}, activeKey != null ? {
+    value: activeKey
+  } : {}, defaultActiveKey != null ? {
+    defaultValue: defaultActiveKey
+  } : {}, {
     onChange: function onChange(e) {
-      setKey(e.target.value);
       setRenderKey(function (pre) {
         return pre.add(e.target.value);
       });
+      if (activeKey == null) {
+        setCapsuleKey(e.target.value);
+      }
       _onChange === null || _onChange === void 0 || _onChange(e.target.value);
-    }
-  }, items === null || items === void 0 ? void 0 : items.map(function (item) {
-    return /*#__PURE__*/React.createElement(Radio.Button, {
-      key: item.key,
-      value: item.key
-    }, item.label);
+    },
+    block: true,
+    optionType: "button",
+    options: items === null || items === void 0 ? void 0 : items.map(function (item) {
+      return {
+        value: item.key,
+        label: item.label
+      };
+    })
   }))), destroyInactiveTabPane ? /*#__PURE__*/React.createElement("div", null, items === null || items === void 0 || (_items$find = items.find(function (item) {
-    return item.key === key;
+    return item.key === capsuleKey;
   })) === null || _items$find === void 0 ? void 0 : _items$find.children) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(mb.b('capsule').e('value'))
   }, items === null || items === void 0 || (_items$filter = items.filter(function (item) {
@@ -89,17 +105,17 @@ export var TabsComponent = function TabsComponent(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       key: item.key,
       style: {
-        display: key === item.key ? 'block' : 'none'
+        display: capsuleKey === item.key ? 'block' : 'none'
       }
     }, item.children);
   }))) : /*#__PURE__*/React.createElement(AntTabs, _extends({
-    activeKey: key,
+    activeKey: activeKey,
+    defaultActiveKey: defaultActiveKey,
     size: size,
     items: items,
     className: "".concat(className !== null && className !== void 0 ? className : '', " ").concat(_className, " ").concat(isTabMargin ? '' : mb.b('istabmargin'), " "),
     destroyInactiveTabPane: destroyInactiveTabPane,
     onChange: function onChange(e) {
-      setKey(e);
       _onChange === null || _onChange === void 0 || _onChange(e);
     }
   }, rest)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yootd",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "description": "基于 Antd 二次开发的组件库",
   "license": "MIT",
   "module": "dist/index.js",