@ccs-ui/rc-pro 1.0.0

package/es/pro-table/index.less

@@ -0,0 +1,165 @@
+// table buttons
+.buttons {
+  button:not(:last-child)::after {
+    margin: 0 4px 0 6px;
+    color: #e8e8e8;
+    content: '|';
+  }
+}
+
+.ccs-pl {
+  // .ant-table-sticky-scroll {
+  //   display: none;
+  // }
+  .ant-pagination {
+    background-color: #fff;
+    margin: 0 !important;
+  }
+
+  &-icon {
+    color: rgb(0 0 0 / 75%);
+    font-size: 16;
+  }
+
+  &-table-content {
+    // margin: 10px;
+    // background: #fff;
+    position: relative;
+  }
+
+  &-title {
+    padding: 10px 16px;
+    color: rgb(0 0 0 / 85%);
+    font-weight: 500;
+    font-size: 16px;
+    background: #fff;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  &-form {
+    flex: 0 1 auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+
+    .ant-form-item {
+      flex-wrap: nowrap;
+      flex: 0 1 auto;
+    }
+
+    .ant-form-item .ant-form-item-label {
+      padding: 0;
+    }
+
+    label {
+      white-space: nowrap;
+    }
+
+    .ant-form-item-label {
+      flex: 0 0 auto !important;
+    }
+
+    .ant-form-item-control {
+      flex: 0 1 auto !important;
+    }
+
+    .ant-form-inline {
+      flex-wrap: nowrap;
+      align-items: flex-end;
+      justify-content: end;
+      overflow: hidden;
+    }
+  }
+
+  &-high-form {
+    background: #fff;
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%);
+
+    .ant-form-item {
+      margin-bottom: 10px !important;
+    }
+  }
+
+  .ant-form-item-control {
+    line-height: 0;
+  }
+
+  // .ant-form-item {
+  //   margin-bottom: 0;
+  // }
+
+  .ant-input-number {
+    width: 100%;
+  }
+
+  .ant-picker {
+    width: 100%;
+  }
+
+  .ant-drawer-right.ant-drawer-open {
+    width: 100%;
+    transition: none;
+  }
+
+  .ant-drawer.ant-drawer-open .ant-drawer-mask {
+    animation: none;
+  }
+
+  &-form-label {
+    .ant-col-24.ant-form-item-label {
+      padding: 0;
+    }
+  }
+
+  &-toolbar {
+    flex: 0 0 auto;
+  }
+
+  &-header {
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+
+    .ant-form-item-explain {
+      position: absolute;
+      bottom: -20px;
+      z-index: 101;
+      height: 0;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    &-buttons {
+      margin-left: 6px;
+      white-space: nowrap;
+    }
+  }
+
+  .ant-table-tbody > tr:nth-child(odd) {
+    td {
+      background: #e6f7ff;
+    }
+  }
+
+  .ant-table-tbody > tr.ant-table-row-selected > td {
+    background: #fff6e6;
+  }
+
+  .ant-table-tbody > tr.ant-table-row:hover > td {
+    background: #fafafa;
+  }
+}
+
+// modal drawer ccs-pl 中取消table content padding
+.ant-modal-body,
+.ant-drawer-body,
+.ccs-trigger-container,
+.ccs-pg-col {
+  .ccs-pl-table-content {
+    margin: 0;
+  }
+}

package/es/pro-table/search.js

@@ -0,0 +1,399 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { MoreOutlined, RedoOutlined, SettingOutlined, UpOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Col, Dropdown, Form, Row, Tooltip } from 'antd';
+import _debounce from 'lodash/debounce';
+import ResizeObserver from 'rc-resize-observer';
+import React, { cloneElement, useMemo, useRef, useState } from 'react';
+import { classPrefix } from '.';
+import { CcsFullScreenButton } from '..';
+/** 查找所有父级依赖 */
+var getShowDpends = function getShowDpends(items, item, depends) {
+  var showDepends = item.showDepends;
+  if (showDepends) {
+    var dependItems = items.filter(function (i) {
+      return showDepends.some(function (e) {
+        return e && e.name === i.name;
+      });
+    }) || [];
+    dependItems.forEach(function (dependItem) {
+      if (dependItem !== null && dependItem !== void 0 && dependItem.showDepends) {
+        dependItem.showDepends.forEach(function (e) {
+          return depends.push(e);
+        });
+        return getShowDpends(items, dependItem, depends);
+      }
+      return false;
+    });
+    return depends;
+  }
+  return depends;
+};
+/** 操作按钮、查询，重置、列筛选、 */
+function SearchComponent(_ref) {
+  var form = _ref.form,
+    toolbar = _ref.toolbar,
+    columns = _ref.columns,
+    hasMore = _ref.hasMore,
+    _ref$formItems = _ref.formItems,
+    formItems = _ref$formItems === void 0 ? [] : _ref$formItems,
+    formInitValues = _ref.formInitValues,
+    isInModalOrDrawer = _ref.isInModalOrDrawer,
+    event$ = _ref.event$,
+    onReset = _ref.onReset,
+    onSearch = _ref.onSearch;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dropdownVisible = _useState2[0],
+    setDropdownVisible = _useState2[1];
+  var _useState3 = useState(columns),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filterColumns = _useState4[0],
+    setFilterColumns = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isShowMore = _useState6[0],
+    setIsShowMore = _useState6[1];
+  var ref = useRef(null);
+  var _useState7 = useState(8),
+    _useState8 = _slicedToArray(_useState7, 2),
+    colSpan = _useState8[0],
+    setColSpan = _useState8[1];
+
+  // 处理form item 依赖
+  var allFormItems = useMemo(function () {
+    formItems.forEach(function (item) {
+      var depend = item.showDepends || [];
+      if (depend && depend.length > 0) {
+        getShowDpends(formItems, item, depend);
+      }
+    });
+    return formItems;
+  }, [formItems]);
+
+  // 获取全选初始状态
+  var getHalfCheckState = function getHalfCheckState() {
+    var cols = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : columns;
+    var col = cols === null || cols === void 0 ? void 0 : cols.filter(function (t) {
+      return t.dataIndex;
+    });
+    return (col === null || col === void 0 ? void 0 : col.every(function (c) {
+      return !c.hidden;
+    })) || (col === null || col === void 0 ? void 0 : col.every(function (c) {
+      return c.hidden;
+    }));
+  };
+  var _useState9 = useState(true),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isCheckAll = _useState10[0],
+    setIsCheckAll = _useState10[1];
+  var _useState11 = useState(getHalfCheckState),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isHalfCheck = _useState12[0],
+    setIsHalfCheck = _useState12[1];
+
+  // 列选中事件
+  var onCheckChange = function onCheckChange(checked, index) {
+    filterColumns[index].hidden = !checked;
+    setFilterColumns(_toConsumableArray(filterColumns));
+    var isHalf = getHalfCheckState(filterColumns);
+    if (isHalf !== isHalfCheck) {
+      setIsHalfCheck(isHalf);
+    }
+    if (isHalf) {
+      setIsCheckAll(checked);
+    }
+
+    // 计算隐藏的列key
+    var columnHiddenKeys = [];
+    filterColumns.forEach(function (t) {
+      if (t.hidden) columnHiddenKeys.push(t.dataIndex);
+    });
+
+    // 发布列改变通知
+    event$.emit({
+      key: 'columnFilter',
+      columnHiddenKeys: columnHiddenKeys
+    });
+  };
+
+  // 全选、取消全选
+  var onCheckAllChange = function onCheckAllChange(e) {
+    // 隐藏的列key
+    var columnHiddenKeys = [];
+    filterColumns.forEach(function (t) {
+      var s = t;
+      if (s.dataIndex) s.hidden = !e.target.checked;
+      if (s.hidden) columnHiddenKeys.push(t.dataIndex);
+    });
+    setFilterColumns(_toConsumableArray(filterColumns));
+    setIsCheckAll(e.target.checked);
+    setIsHalfCheck(true);
+
+    // 发布列改变通知
+    event$.emit({
+      key: 'columnFilter',
+      columnHiddenKeys: columnHiddenKeys
+    });
+  };
+
+  // 列过滤
+  var renderCheck = function renderCheck() {
+    var fc = [{
+      key: '1',
+      label: /*#__PURE__*/React.createElement(Checkbox, {
+        indeterminate: !isHalfCheck,
+        onChange: onCheckAllChange,
+        checked: isCheckAll
+      }, "\u5168\u9009")
+    }, {
+      key: '2',
+      type: 'divider'
+    }];
+    filterColumns.forEach(function (c, index) {
+      if (c.dataIndex) {
+        fc.push({
+          key: c.dataIndex,
+          label: /*#__PURE__*/React.createElement(Checkbox, {
+            checked: !c.hidden,
+            onChange: function onChange(e) {
+              return onCheckChange(e.target.checked, index);
+            }
+          }, c.title)
+        });
+      }
+    });
+    return fc;
+  };
+  var onFullScreen = function onFullScreen(full) {
+    event$.emit({
+      key: 'fullScreen',
+      full: full
+    });
+  };
+
+  // 操作按钮
+  var renderOperation = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-header-buttons")
+  }, hasMore && /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setIsShowMore(!isShowMore);
+    },
+    icon: isShowMore ? /*#__PURE__*/React.createElement(UpOutlined, {
+      className: "".concat(classPrefix, "-icon")
+    }) : /*#__PURE__*/React.createElement(MoreOutlined, {
+      className: "".concat(classPrefix, "-icon")
+    }),
+    type: "text",
+    style: {
+      width: 24
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u91CD\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onReset,
+    icon: /*#__PURE__*/React.createElement(RedoOutlined, {
+      className: "".concat(classPrefix, "-icon")
+    }),
+    type: "text",
+    style: {
+      width: 24
+    }
+  })), filterColumns && /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: renderCheck()
+    },
+    trigger: ['click'],
+    open: dropdownVisible,
+    onOpenChange: function onOpenChange(flag) {
+      return setDropdownVisible(flag);
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u5217\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(SettingOutlined, {
+      className: "".concat(classPrefix, "-icon")
+    }),
+    type: "text",
+    style: {
+      width: 24
+    }
+  }))), !isInModalOrDrawer && /*#__PURE__*/React.createElement(CcsFullScreenButton, {
+    onFullScreen: onFullScreen
+  }));
+
+  // render item 判断是否有依赖
+  var renderFormItem = function renderFormItem(items) {
+    if (!items) return [];
+    return items.map(function (item) {
+      return item.depends || item.showDepends ? /*#__PURE__*/React.createElement(Form.Item, {
+        noStyle: true,
+        key: item.name,
+        shouldUpdate: function shouldUpdate(l, n) {
+          var _item$depends, _item$showDepends;
+          return ((_item$depends = item.depends) === null || _item$depends === void 0 ? void 0 : _item$depends.some(function (i) {
+            return l[i] !== n[i];
+          })) || ((_item$showDepends = item.showDepends) === null || _item$showDepends === void 0 ? void 0 : _item$showDepends.some(function (i) {
+            return l[i.name] !== n[i.name];
+          })) || false;
+        }
+      }, function (_ref2) {
+        var _item$depends2;
+        var getFieldValue = _ref2.getFieldValue;
+        var dependParam = {};
+        (_item$depends2 = item.depends) === null || _item$depends2 === void 0 ? void 0 : _item$depends2.forEach(function (i) {
+          var value = getFieldValue(i);
+          dependParam[i] = value;
+        });
+        var isShow = true;
+        if (item.showDepends && item.showDepends.length > 0) {
+          var _item$showDepends2;
+          isShow = (_item$showDepends2 = item.showDepends) === null || _item$showDepends2 === void 0 ? void 0 : _item$showDepends2.every(function (i) {
+            return getFieldValue(i.name) === i.value;
+          });
+        }
+        return isShow ? /*#__PURE__*/React.createElement(Form.Item, {
+          name: "".concat(item.name),
+          label: item.label,
+          key: item.name,
+          rules: item.rules
+        }, /*#__PURE__*/cloneElement(item.value, dependParam)) : null;
+      }) : /*#__PURE__*/React.createElement(Form.Item, {
+        name: item.name,
+        label: item.label,
+        key: item.name,
+        rules: item.rules
+      }, item.value);
+    });
+  };
+
+  // 查询部分
+  var renderSearch = function renderSearch() {
+    if (!formItems.length) return /*#__PURE__*/React.createElement(Form.Item, null);
+    // 主条件
+    var mainItems = allFormItems.filter(function (f) {
+      return f.isMain;
+    });
+    var initFormItems = mainItems.length > 0 ? mainItems : [allFormItems[0]];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !isShowMore && renderFormItem(initFormItems), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: function onClick() {},
+      htmlType: "submit"
+    }, "\u67E5\u8BE2"));
+  };
+
+  // 重设尺寸,当组件位于弹框中，根据容器宽度决定显示尺寸
+  var resizeFn = _debounce(function (width) {
+    if (!ref.current) return;
+    if (width === 0) return;
+    if (width > 1000) {
+      if (colSpan !== 6) setColSpan(6);
+      return;
+    }
+    if (width < 300) {
+      if (colSpan !== 24) setColSpan(24);
+      return;
+    }
+    if (width < 500) {
+      if (colSpan !== 12) setColSpan(12);
+      return;
+    }
+    if (width < 1000) {
+      if (colSpan !== 8) setColSpan(8);
+    }
+  }, 500);
+  var onResize = function onResize(size) {
+    if (size.width === 0) return;
+    resizeFn(size.width);
+  };
+  var renderMoreForm = function renderMoreForm() {
+    return /*#__PURE__*/React.createElement(ResizeObserver, {
+      onResize: onResize
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-high-form"),
+      ref: ref,
+      style: {
+        maxHeight: isShowMore ? 500 : 0,
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement(Form, {
+      initialValues: formInitValues,
+      form: form,
+      onFinish: onSearch,
+      layout: "horizontal"
+    }, /*#__PURE__*/React.createElement(Row, {
+      gutter: 16
+    }, allFormItems.map(function (item) {
+      return item.depends || item.showDepends ? /*#__PURE__*/React.createElement(Form.Item, {
+        noStyle: true,
+        key: item.name,
+        shouldUpdate: function shouldUpdate(l, n) {
+          var _item$depends3, _item$showDepends3;
+          return ((_item$depends3 = item.depends) === null || _item$depends3 === void 0 ? void 0 : _item$depends3.some(function (i) {
+            return l[i] !== n[i];
+          })) || ((_item$showDepends3 = item.showDepends) === null || _item$showDepends3 === void 0 ? void 0 : _item$showDepends3.some(function (i) {
+            return l[i.name] !== n[i.name];
+          })) || false;
+        }
+      }, function (_ref3) {
+        var _item$depends4;
+        var getFieldValue = _ref3.getFieldValue;
+        var dependParam = {};
+        (_item$depends4 = item.depends) === null || _item$depends4 === void 0 ? void 0 : _item$depends4.forEach(function (i) {
+          var value = getFieldValue(i);
+          dependParam[i] = value;
+        });
+        var isShow = true;
+        if (item.showDepends && item.showDepends.length > 0) {
+          var _item$showDepends4;
+          isShow = (_item$showDepends4 = item.showDepends) === null || _item$showDepends4 === void 0 ? void 0 : _item$showDepends4.every(function (i) {
+            return getFieldValue(i.name) === i.value;
+          });
+        }
+        return isShow ? /*#__PURE__*/React.createElement(Col, {
+          span: colSpan
+        }, /*#__PURE__*/React.createElement(Form.Item, {
+          className: "".concat(classPrefix, "-form-label"),
+          label: item.label,
+          name: item.name,
+          rules: item.rules
+        }, /*#__PURE__*/cloneElement(item.value, dependParam))) : null;
+      }) : /*#__PURE__*/React.createElement(Col, {
+        span: colSpan,
+        key: item.name
+      }, /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-form-label"),
+        rules: item.rules,
+        label: item.label,
+        name: item.name
+      }, item.value));
+    })))));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 16,
+      background: '#fff'
+    }
+  }, hasMore && renderMoreForm(), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-header")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-toolbar")
+  }, toolbar), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-form")
+  }, /*#__PURE__*/React.createElement(Form, {
+    initialValues: formInitValues,
+    form: form,
+    onFinish: onSearch,
+    layout: "inline",
+    labelWrap: false
+  }, renderSearch()), renderOperation))));
+}
+export default SearchComponent;

package/es/pro-tabs/index.js

@@ -0,0 +1,77 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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), !0).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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useUpdateEffect } from 'ahooks';
+import React, { cloneElement, useState } from 'react';
+import { TabsContext } from "../context";
+import "./index.less";
+export default (function (_ref) {
+  var _children$items;
+  var children = _ref.children;
+  var _ref2 = (children === null || children === void 0 ? void 0 : children.props) || {},
+    _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    activeKey = _ref2.activeKey,
+    defaultActiveKey = _ref2.defaultActiveKey;
+  var _useState = useState({
+      activeKey: defaultActiveKey || (items[0] || {}).key,
+      items: items || [],
+      option: {}
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    tabsProps = _useState2[0],
+    setTabsProps = _useState2[1];
+
+  // items 发生改变
+  useUpdateEffect(function () {
+    setTabsProps(_objectSpread(_objectSpread({}, tabsProps), {}, {
+      items: items
+    }));
+  }, [children === null || children === void 0 ? void 0 : (_children$items = children.items) === null || _children$items === void 0 ? void 0 : _children$items.map(function (t) {
+    return t.key;
+  }).join(',')]);
+  var addOptions = {
+    items: tabsProps.items,
+    className: 'ccs-tabs'
+  };
+
+  // 未传入activeKey，添加控制方法
+  if (!activeKey) {
+    addOptions.activeKey = tabsProps.activeKey;
+    addOptions.onChange = function (key) {
+      setTabsProps(_objectSpread(_objectSpread({}, tabsProps), {}, {
+        activeKey: key
+      }));
+    };
+  }
+  return children ? /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: {
+      activeKey: tabsProps.activeKey,
+      items: tabsProps.items,
+      option: tabsProps.option,
+      onChange: function onChange(e) {
+        return setTabsProps(function (state) {
+          if (e.items) {
+            return _objectSpread(_objectSpread(_objectSpread({}, state), e), {}, {
+              items: _toConsumableArray(e.items || [])
+            });
+          }
+          return _objectSpread(_objectSpread({}, state), e);
+        });
+      }
+    }
+  }, /*#__PURE__*/cloneElement(children, addOptions)) : /*#__PURE__*/React.createElement(React.Fragment, null);
+});

package/es/pro-tabs/index.less

@@ -0,0 +1,5 @@
+.ccs-tabs > .ant-tabs-nav {
+  margin: 0;
+  padding-left: 16px;
+  background-color: #fff;
+}