@sooloer/pages 0.0.1

package/dist/search-condition/demo/removeable.js

@@ -0,0 +1,39 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ProSearchCondition } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState([{
+      label: '发票号码',
+      key: 'invoiceNo',
+      value: '00000000',
+      closable: false
+    }, {
+      label: '发票代码',
+      key: 'invoiceCode',
+      value: '111222222'
+    }, {
+      label: '发票类型',
+      key: 'invoiceType',
+      value: '纸普'
+    }]),
+    _useState2 = _slicedToArray(_useState, 2),
+    tagSource = _useState2[0],
+    setTagSource = _useState2[1];
+  var handleChange = function handleChange(tags, deleteKeys) {
+    console.log(tags, deleteKeys);
+    setTagSource(_toConsumableArray(tags));
+  };
+  return /*#__PURE__*/React.createElement(ProSearchCondition, {
+    onChange: handleChange,
+    tags: tagSource
+  });
+});

package/dist/search-condition/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.less';
+import type { ProSearchConditionProps } from './typing';
+declare const ProSearchCondition: React.FC<ProSearchConditionProps>;
+export default ProSearchCondition;

package/dist/search-condition/index.js

@@ -0,0 +1,226 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { CloseOutlined, DownOutlined } from '@ant-design/icons';
+import { Button, Col, Row, Space, Tag } from 'antd';
+import classnames from 'classnames';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import AutoSize from 'react-virtualized-auto-sizer';
+import "./index.less";
+var theme = {
+  primary_color: '#1677ff',
+  primary_bg_color: 'rgba(24, 144, 255, 0.1)'
+};
+// 默认展示行数
+var ROWS = 1;
+var ProSearchCondition = function ProSearchCondition(props) {
+  var onChange = props.onChange,
+    _props$tags = props.tags,
+    tags = _props$tags === void 0 ? [] : _props$tags,
+    maxRows = props.maxRows;
+  var nodeRef = useRef(null);
+  var containerRef = useRef(null);
+  var nodeWrapperRef = useRef(null);
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    tagLine = _useState2[0],
+    setTagLine = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  // const [isLeftClear, setIsLeftClear] = useState<boolean>(false);
+  var _useState5 = useState('100%'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tagMaxWidth = _useState6[0],
+    setTagMaxWidth = _useState6[1];
+  // 不可关闭tag 展示在前面
+  var _useMemo = useMemo(function () {
+      return {
+        sortTags: [].concat(_toConsumableArray(tags.filter(function (_ref) {
+          var _ref$closable = _ref.closable,
+            closable = _ref$closable === void 0 ? true : _ref$closable;
+          return !closable;
+        })), _toConsumableArray(tags.filter(function (_ref2) {
+          var _ref2$closable = _ref2.closable,
+            closable = _ref2$closable === void 0 ? true : _ref2$closable;
+          return closable;
+        }))),
+        hasClosableTag: tags.some(function (_ref3) {
+          var _ref3$closable = _ref3.closable,
+            closable = _ref3$closable === void 0 ? true : _ref3$closable;
+          return closable;
+        })
+      };
+    }, [tags]),
+    sortTags = _useMemo.sortTags,
+    hasClosableTag = _useMemo.hasClosableTag;
+  var hidden = useMemo(function () {
+    return !(isExpanded && tagLine > ROWS);
+  }, [isExpanded, tagLine]);
+
+  // 单个 tag 关闭
+  var handleClose = function handleClose(key) {
+    onChange === null || onChange === void 0 || onChange(sortTags.filter(function (item) {
+      return item.key !== key;
+    }), [key]);
+  };
+
+  // 批量关闭
+  var handleCloseAll = function handleCloseAll() {
+    var fixedTags = sortTags.filter(function (_ref4) {
+      var _ref4$closable = _ref4.closable,
+        closable = _ref4$closable === void 0 ? true : _ref4$closable;
+      return !closable;
+    });
+    var closeTags = sortTags.filter(function (_ref5) {
+      var _ref5$closable = _ref5.closable,
+        closable = _ref5$closable === void 0 ? true : _ref5$closable;
+      return closable;
+    });
+    setIsExpanded(false);
+    onChange === null || onChange === void 0 || onChange(fixedTags, _toConsumableArray((closeTags || []).map(function (item) {
+      return item.key;
+    })));
+  };
+  var tagRender = function tagRender(item) {
+    var label = item.label,
+      _item$key = item.key,
+      key = _item$key === void 0 ? '' : _item$key,
+      _item$closable = item.closable,
+      closable = _item$closable === void 0 ? true : _item$closable,
+      value = item.value,
+      render = item.render;
+    var str = value;
+    if (typeof value !== 'string' && ! /*#__PURE__*/React.isValidElement(value)) {
+      str = '';
+      console.error("".concat(label, "[").concat(key, "]: value\u503C\u4E0D\u5408\u6CD5\uFF01"));
+    }
+    return /*#__PURE__*/React.createElement(Col, {
+      flex: "none",
+      key: item.key,
+      className: "sooloer-search-conditions-item"
+    }, /*#__PURE__*/React.createElement(Tag, {
+      closable: closable,
+      color: theme.primary_bg_color,
+      className: "sooloer-search-conditions-tag",
+      onClose: function onClose() {
+        return handleClose(key);
+      },
+      closeIcon: /*#__PURE__*/React.createElement(CloseOutlined, {
+        style: {
+          color: theme.primary_color,
+          display: 'flex'
+        }
+      }),
+      style: {
+        maxWidth: tagMaxWidth,
+        color: theme.primary_color
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sooloer-search-conditions-tag__inner"
+    }, render !== null && render !== void 0 ? render : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement("span", null, str)))));
+  };
+  var handleMore = function handleMore() {
+    setIsExpanded(function (store) {
+      if (store && containerRef.current) {
+        // @ts-ignore
+        containerRef.current.scrollTop = 0;
+      }
+      return !store;
+    });
+  };
+  var resize = function resize() {
+    if (nodeWrapperRef !== null && nodeWrapperRef !== void 0 && nodeWrapperRef.current) {
+      var _nodeWrapperRef$curre = nodeWrapperRef === null || nodeWrapperRef === void 0 ? void 0 : nodeWrapperRef.current,
+        _nodeWrapperRef$curre2 = _nodeWrapperRef$curre.clientHeight,
+        clientHeight = _nodeWrapperRef$curre2 === void 0 ? 0 : _nodeWrapperRef$curre2;
+      // const { clientWidth: width } = nodeRef?.current || { clientWidth: 0 };
+      var _ref6 = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || {
+          clientWidth: 0
+        },
+        clientWidth = _ref6.clientWidth;
+      setTagLine(Math.ceil(clientHeight / 32));
+      // setIsLeftClear(clientWidth - width - 100 >= 50);
+      // .sooloer-search-conditions-item 有 margin-right: 8px
+      setTagMaxWidth("".concat(clientWidth - 100 - 8, "px"));
+    }
+  };
+  useEffect(function () {
+    resize();
+  }, [tags]);
+  if (tags.length < 1) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sooloer-search-conditions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames('sooloer-search-conditions-container', {
+      'is-scroll': !hidden && maxRows
+    }),
+    ref: containerRef,
+    style: {
+      height: hidden ? "".concat(ROWS * 32, "px") : "".concat((maxRows !== null && maxRows !== void 0 ? maxRows : tagLine) * 32, "px")
+    }
+  }, /*#__PURE__*/React.createElement(AutoSize, {
+    onResize: resize
+  }, function (props) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: _objectSpread(_objectSpread({}, props), {}, {
+        height: 0,
+        visibility: 'hidden'
+      })
+    });
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: nodeWrapperRef,
+    style: {
+      display: 'inline-flex'
+    }
+  }, /*#__PURE__*/React.createElement(Row, {
+    ref: nodeRef,
+    style: {
+      display: 'inline-flex',
+      verticalAlign: 'middle'
+    }
+  }, sortTags.map(function (item) {
+    return tagRender(item);
+  })), tagLine === 1 && hasClosableTag && /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    className: "sooloer-search-conditions-link",
+    onClick: handleCloseAll
+  }, "\u6E05\u7A7A\u6761\u4EF6"))), /*#__PURE__*/React.createElement("div", {
+    className: "sooloer-search-conditions-action",
+    style: {
+      zIndex: hidden ? 0 : 1,
+      color: theme === null || theme === void 0 ? void 0 : theme.primary_color
+    }
+  }, /*#__PURE__*/React.createElement(Space, {
+    size: 8
+  }, tagLine !== 1 && hasClosableTag && /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    className: "sooloer-search-conditions-link",
+    onClick: handleCloseAll
+  }, "\u6E05\u7A7A\u6761\u4EF6"), tagLine > ROWS && /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    className: classnames('sooloer-search-conditions-link'),
+    onClick: handleMore
+  }, isExpanded ? '收起' : '展开', /*#__PURE__*/React.createElement("span", {
+    className: classnames('sooloer-search-conditions-icon', {
+      'is-expanded': isExpanded
+    })
+  }, /*#__PURE__*/React.createElement(DownOutlined, null))))));
+};
+export default ProSearchCondition;

package/dist/search-condition/index.less

@@ -0,0 +1,65 @@
+.sooloer-search-conditions {
+  position: relative;
+  &-container {
+    padding: 0 100px 0 0;
+    overflow: hidden;
+    background-color: #fff;
+    transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
+    &.is-scroll {
+      overflow-y: auto;
+    }
+  }
+  &-action {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
+  }
+  &-item {
+    margin: 4px 8px 4px 0;
+  }
+  &-tag {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 24px;
+    margin-right: 0;
+    line-height: 24px;
+    border-color: transparent;
+    label {
+      color: #666;
+      &::after {
+        position: relative;
+        margin: 0 4px 0 2px;
+        content: ':';
+      }
+    }
+    span {
+      font-size: 12px;
+      opacity: 0.85;
+      &:hover {
+        opacity: 1;
+      }
+    }
+    &__inner {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  &-link {
+    padding-right: 0;
+    padding-left: 0;
+    font-size: 12px;
+  }
+  &-icon {
+    margin-left: 4px;
+    .anticon {
+      transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
+    }
+    &.is-expanded {
+      .anticon {
+        transform: translateY(-1px) rotate(180deg);
+      }
+    }
+  }
+}

package/dist/search-condition/typing.d.ts

@@ -0,0 +1,39 @@
+import type React from 'react';
+export type ProSearchConditionItemProps = {
+    /**
+     * @description 标签文本
+     */
+    label?: string;
+    /**
+     * @description 标签字段
+     */
+    key?: string;
+    /**
+     * @description 标签是否可关闭
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * @description 标签值
+     */
+    value?: string | React.ReactNode;
+    /**
+     * @description 自定义渲染
+     */
+    render?: React.ReactNode;
+};
+export interface ProSearchConditionProps {
+    /**
+     * @description 最多展示行数，超出滚动条
+     */
+    maxRows?: number;
+    /**
+     * @description 标签集合
+     * @default []
+     */
+    tags?: ProSearchConditionItemProps[];
+    /**
+     * @description 标签关闭时触发回调事件
+     */
+    onChange?: (newTags: ProSearchConditionItemProps[], deleteKeys: string[]) => void;
+}

package/dist/search-condition/typing.js

@@ -0,0 +1 @@
+export {};

package/dist/tab/demo/basic.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/tab/demo/basic.js

@@ -0,0 +1,36 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ProTabs } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState('1'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var handleChange = function handleChange(activeKey) {
+    console.log(activeKey);
+    setActiveKey(activeKey);
+  };
+  return /*#__PURE__*/React.createElement(ProTabs, {
+    activeKey: activeKey,
+    onChange: handleChange,
+    tabs: [{
+      key: '1',
+      tab: 'Tab 1',
+      authcode: '11111'
+    }, {
+      key: '2',
+      tab: 'Tab 2'
+    }, {
+      key: '3',
+      tab: 'Tab 3'
+    }, {
+      key: '4',
+      tab: 'Tab 4'
+    }]
+  });
+});

package/dist/tab/demo/count.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/tab/demo/count.js

@@ -0,0 +1,63 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ProTabs } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState('1'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var handleChange = function handleChange(activeKey) {
+    console.log(activeKey);
+    setActiveKey(activeKey);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTabs, {
+    activeKey: activeKey,
+    onChange: handleChange,
+    tabs: [{
+      key: '1',
+      tab: 'Tab 1',
+      count: 9,
+      authcode: '9999'
+    }, {
+      key: '2',
+      tab: 'Tab 2',
+      count: 99
+    }, {
+      key: '3',
+      tab: 'Tab 3',
+      count: 999
+    }, {
+      key: '4',
+      tab: 'Tab 4',
+      count: 1000
+    }]
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '24px'
+    }
+  }), /*#__PURE__*/React.createElement(ProTabs, {
+    activeKey: activeKey,
+    onChange: handleChange,
+    tabs: [{
+      key: '1',
+      tab: 'Tab 1'
+    }, {
+      key: '2',
+      tab: 'Tab 2',
+      count: 99
+    }, {
+      key: '3',
+      tab: 'Tab 3',
+      count: 999
+    }, {
+      key: '4',
+      tab: 'Tab 4',
+      count: 1000
+    }]
+  }));
+});

package/dist/tab/demo/extra.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/tab/demo/extra.js

@@ -0,0 +1,70 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ProTabs } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState('1'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var handleChange = function handleChange(activeKey) {
+    console.log(activeKey);
+    setActiveKey(activeKey);
+  };
+  var buttonSource = [{
+    buttonProps: {
+      onClick: function onClick() {
+        console.log('上传');
+      }
+    },
+    fixed: true,
+    text: '上传'
+  }, {
+    buttonProps: {
+      type: 'primary',
+      onClick: function onClick() {
+        console.log('修改');
+      }
+    },
+    fixed: true,
+    text: '修改'
+  }, {
+    buttonProps: {
+      type: 'primary',
+      danger: true,
+      onClick: function onClick() {
+        console.log('删除');
+      }
+    },
+    fixed: true,
+    text: '删除'
+  }];
+  return /*#__PURE__*/React.createElement(ProTabs, {
+    activeKey: activeKey,
+    onChange: handleChange,
+    toolbars: {
+      buttons: [].concat(buttonSource)
+    },
+    tabs: [{
+      key: '1',
+      tab: 'Tab 1',
+      count: 9
+    }, {
+      key: '2',
+      tab: 'Tab 2',
+      count: 99
+    }, {
+      key: '3',
+      tab: 'Tab 3',
+      count: 999
+    }, {
+      key: '4',
+      tab: 'Tab 4',
+      count: 1000
+    }]
+  });
+});

package/dist/tab/demo/icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/tab/demo/icon.js

@@ -0,0 +1,36 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
+import { ProTabs } from "../..";
+import React, { useState } from 'react';
+export default (function () {
+  var _useState = useState('1'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var handleChange = function handleChange(activeKey) {
+    console.log(activeKey);
+    setActiveKey(activeKey);
+  };
+  return /*#__PURE__*/React.createElement(ProTabs, {
+    activeKey: activeKey,
+    onChange: handleChange,
+    tabs: [{
+      key: '1',
+      tab: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AppleOutlined, null), "Tab 1")
+    }, {
+      key: '2',
+      tab: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AndroidOutlined, null), "Tab 2")
+    }, {
+      key: '3',
+      tab: 'Tab 3'
+    }, {
+      key: '4',
+      tab: 'Tab 4'
+    }]
+  });
+});

package/dist/tab/demo/overflowCount.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;