@lemon-fe/components 0.1.82 → 0.1.85

package/es/MainFramework/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import TabBar from './components/TabBar';
+import Menu from './components/Menu';
+import { PREFIX_CLS as prefixCls } from '../constants';
+import RefreshButton from './components/RefreshButton';
+export default function MainFramework(props) {
+  var tabs = props.tabs,
+      active = props.active,
+      children = props.children,
+      right = props.right,
+      menus = props.menus,
+      onTabClick = props.onTabClick,
+      onMenuClick = props.onMenuClick,
+      onTabClose = props.onTabClose,
+      onRefresh = props.onRefresh,
+      onCloseOther = props.onCloseOther,
+      onCloseAll = props.onCloseAll,
+      logo = props.logo,
+      title = props.title,
+      favorites = props.favorites,
+      onFavoritesChange = props.onFavoritesChange;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-main")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-left")
+  }, logo !== false && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-logo")
+  }, typeof logo === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: logo
+  }) : logo || /*#__PURE__*/React.createElement("svg", {
+    width: "15",
+    height: "22",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3.403 10.313c.194-.163.393-.324.6-.481 1.47-1.123 2.592-2.339 3.333-3.622a7.805 7.805 0 0 0 1.101-4.036L8.427.966C8.159.657 7.906.335 7.67 0c-.26.384-.544.752-.849 1.103a15.52 15.52 0 0 1-2.336 2.165C2.853 4.514 1.67 5.858.938 7.28c.563 1.06 1.391 2.073 2.461 3.027M3.602 12.008a17.318 17.318 0 0 1-.835-.711C1.782 10.4.99 9.44.402 8.437a8.004 8.004 0 0 0 .362 5.91c.677 1.448 1.812 2.814 3.375 4.053.502.398.981.828 1.434 1.288v-.264a8.913 8.913 0 0 1 .99-4.146c-.687-1.157-1.683-2.256-2.96-3.276M11.025 12.036c-1.482 1.092-2.611 2.27-3.355 3.51a7.355 7.355 0 0 0-1.107 3.91l.008 1.173c.272.298.528.61.764.933.263-.372.549-.73.856-1.07a15.398 15.398 0 0 1 2.346-2.098c2.984-2.196 4.486-4.693 4.463-7.42a7.134 7.134 0 0 0-.489-2.537c-.802 1.278-1.971 2.484-3.486 3.597M11.353 9.828c.186.156.371.317.553.485.945-.983 1.668-2.02 2.156-3.096-.675-1.429-1.765-2.778-3.239-4.01-.496-.411-.968-.856-1.414-1.332v.268a9.617 9.617 0 0 1-.972 4.298c.68 1.201 1.661 2.34 2.917 3.387"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-title")
+  }, title)), /*#__PURE__*/React.createElement(TabBar, {
+    tabs: tabs,
+    active: active,
+    onClick: onTabClick,
+    onClose: onTabClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-right")
+  }, /*#__PURE__*/React.createElement(RefreshButton, {
+    onRefresh: onRefresh,
+    onCloseAll: onCloseAll,
+    onCloseOther: onCloseOther
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-divider")
+  }), right)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body")
+  }, /*#__PURE__*/React.createElement(Menu, {
+    data: menus,
+    onClick: onMenuClick,
+    favorites: favorites,
+    onFavoritesChange: onFavoritesChange
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, children)));
+}

package/es/PageLoading/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const PageLoading: React.FC<{
+    tip?: string;
+}>;
+export default PageLoading;

package/es/PageLoading/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Spin } from 'antd';
+import { PREFIX_CLS } from '../constants';
+
+var PageLoading = function PageLoading(_ref) {
+  var tip = _ref.tip;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX_CLS, "-page-loading")
+  }, /*#__PURE__*/React.createElement(Spin, {
+    size: "large",
+    tip: tip
+  }));
+};
+
+export default PageLoading;

package/es/Popup/index.d.ts

@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+import type { ModalProps } from 'antd/lib/modal';
+export interface PopupProps<ValueType> extends ModalProps {
+    value?: ValueType;
+    onChange?: (value?: ValueType) => void;
+    /**
+     * @description  渲染函数，这个函数不是作为组件渲染的，偷懒可以直接传入组件，如果需要考虑优化参考demo的传入方式
+     */
+    component: (params: {
+        value?: ValueType;
+        onChange: (value: ValueType) => void;
+    }) => ReactElement | null;
+    formatLabel?: (value: ValueType) => string;
+    beforeOk?: (value: ValueType) => ValueType | PromiseLike<ValueType>;
+    children?: JSX.Element | ((props: {
+        value?: ValueType;
+    }) => JSX.Element);
+    allowClear?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    showLabel?: boolean;
+    placeholder?: string;
+    disabledTip?: string;
+    bordered?: boolean;
+    onClick?: () => void;
+    /**
+     * @description 清空后的值
+     */
+    emptyValue?: ValueType;
+}
+interface ValuedPopupProps<ValueType> extends Omit<PopupProps<ValueType>, 'onChange' | 'emptyValue'> {
+    onChange?: (value: ValueType) => void;
+    emptyValue: ValueType;
+}
+declare function Popup<ValueType>(props: ValuedPopupProps<ValueType>): JSX.Element;
+declare function Popup<ValueType>(props: PopupProps<ValueType>): JSX.Element;
+export default Popup;

package/es/Popup/index.js

@@ -0,0 +1,198 @@
+var _excluded = ["value", "onChange", "component", "children", "formatLabel", "disabled", "allowClear", "autoFocus", "showLabel", "beforeOk", "placeholder", "onClick", "disabledTip", "bordered", "emptyValue"];
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useState, cloneElement, useRef, isValidElement } from 'react';
+import { Modal, Input, message } from 'antd';
+import { CloseCircleFilled } from '@ant-design/icons';
+import { PREFIX_CLS } from '../constants';
+import SearchIcon from '../Icons/Search';
+
+function Popup(props) {
+  var valueProp = props.value,
+      onChange = props.onChange,
+      component = props.component,
+      children = props.children,
+      formatLabel = props.formatLabel,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$allowClear = props.allowClear,
+      allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+      autoFocus = props.autoFocus,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+      beforeOk = props.beforeOk,
+      placeholder = props.placeholder,
+      onClick = props.onClick,
+      disabledTip = props.disabledTip,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? true : _props$bordered,
+      emptyValue = props.emptyValue,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var prefixCls = "".concat(PREFIX_CLS, "-popup");
+
+  var _useState = useState(valueProp || emptyValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
+
+  var inputRef = useRef(null);
+
+  var handleCancel = function handleCancel() {
+    setVisible(false);
+  };
+
+  var handleOpen = function handleOpen() {
+    if (onClick) {
+      onClick();
+    }
+
+    if (disabled) {
+      if (disabledTip) {
+        message.warning(disabledTip);
+      }
+
+      return;
+    }
+
+    if (valueProp) {
+      setValue(valueProp);
+    }
+
+    setVisible(true);
+  };
+
+  var handleOk = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var res;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setVisible(false);
+
+              if (!onChange) {
+                _context.next = 10;
+                break;
+              }
+
+              if (!(beforeOk && value)) {
+                _context.next = 9;
+                break;
+              }
+
+              _context.next = 5;
+              return beforeOk(value);
+
+            case 5:
+              res = _context.sent;
+              onChange(res);
+              _context.next = 10;
+              break;
+
+            case 9:
+              onChange(value);
+
+            case 10:
+              if (inputRef.current) {
+                inputRef.current.focus();
+              }
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleOk() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var handleClear = function handleClear(e) {
+    e.stopPropagation();
+
+    if (onChange) {
+      onChange(emptyValue);
+    }
+  };
+
+  var label = valueProp ? formatLabel ? formatLabel(valueProp) : valueProp : undefined;
+  var trigger;
+
+  if (typeof children === 'function') {
+    trigger = children({
+      value: valueProp
+    });
+  } else if ( /*#__PURE__*/isValidElement(children)) {
+    trigger = showLabel ? /*#__PURE__*/cloneElement(children, undefined, label) : children;
+  } else {
+    trigger = /*#__PURE__*/React.createElement(Input, {
+      className: "".concat(prefixCls, "-input"),
+      value: label,
+      readOnly: true,
+      ref: inputRef,
+      disabled: disabled,
+      autoFocus: autoFocus,
+      placeholder: placeholder,
+      bordered: bordered,
+      suffix: /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && allowClear && label && /*#__PURE__*/React.createElement(CloseCircleFilled, {
+        className: "ant-input-clear-icon",
+        onClick: handleClear
+      }), /*#__PURE__*/React.createElement(SearchIcon, null))
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-wrapper"),
+    onClick: handleOpen
+  }, trigger), /*#__PURE__*/React.createElement(Modal, _objectSpread({
+    destroyOnClose: true,
+    visible: visible,
+    width: 994,
+    centered: true,
+    onCancel: handleCancel,
+    onOk: handleOk,
+    bodyStyle: {
+      height: '549px',
+      padding: 0
+    }
+  }, restProps), component({
+    value: value,
+    onChange: setValue
+  })));
+}
+
+export default Popup;

package/es/Portal/index.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+declare type ContentType = ReactNode | null;
+declare function PortalHost(props: {
+    children: ContentType;
+}): JSX.Element;
+declare function Portal(props: {
+    children?: ContentType;
+}): JSX.Element | null;
+declare namespace Portal {
+    var Host: typeof PortalHost;
+}
+export default Portal;

package/es/Portal/index.js

@@ -0,0 +1,72 @@
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { uniqueId } from 'lodash';
+var Slot = /*#__PURE__*/memo(function Content(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+});
+var Context = /*#__PURE__*/createContext(null);
+
+function PortalHost(props) {
+  var children = props.children;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      content = _useState2[0],
+      setContent = _useState2[1];
+
+  var portal = useMemo(function () {
+    return {
+      add: function add(key, node) {
+        setContent({
+          key: key,
+          node: node
+        });
+      },
+      clear: function clear(key) {
+        setContent(function (prev) {
+          if ((prev === null || prev === void 0 ? void 0 : prev.key) === key) {
+            return null;
+          }
+
+          return prev;
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: portal
+  }, /*#__PURE__*/React.createElement(Slot, null, content ? content.node : null), /*#__PURE__*/React.createElement(Slot, null, children));
+}
+
+function Portal(props) {
+  var _props$children = props.children,
+      children = _props$children === void 0 ? null : _props$children;
+  var portal = useContext(Context);
+  var key = useMemo(function () {
+    return uniqueId('portal-');
+  }, []);
+  useEffect(function () {
+    if (portal !== null) {
+      portal.add(key, children);
+      return function () {
+        portal.clear(key);
+      };
+    }
+  }, [portal, key, children]);
+  return portal ? null : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+Portal.Host = PortalHost;
+export default Portal;

package/es/Section/TabBar.d.ts

@@ -0,0 +1,12 @@
+import type { MouseEvent } from 'react';
+interface Props {
+    prefixCls: string;
+    tabs: {
+        title?: string;
+        key: string;
+    }[];
+    activeKey?: string;
+    onTabClick: (key: string, index: number, e: MouseEvent) => void;
+}
+export default function TabBar(props: Props): JSX.Element;
+export {};

package/es/Section/TabBar.js

@@ -0,0 +1,48 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+export default function TabBar(props) {
+  var prefixCls = props.prefixCls,
+      tabs = props.tabs,
+      onTabClick = props.onTabClick,
+      activeKey = props.activeKey;
+
+  var getKey = function getKey() {
+    return activeKey || (tabs.length > 0 ? tabs[0].key : undefined);
+  };
+
+  var _useState = useState(getKey()),
+      _useState2 = _slicedToArray(_useState, 2),
+      key = _useState2[0],
+      setKey = _useState2[1];
+
+  useEffect(function () {
+    setKey(getKey());
+  }, [activeKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-tab")
+  }, tabs.map(function (_, index) {
+    var tab = tabs[index];
+    return /*#__PURE__*/React.createElement("div", {
+      key: tab.key,
+      className: classNames("".concat(prefixCls, "-tab-item"), _defineProperty({}, "".concat(prefixCls, "-tab-item-active"), key === tab.key)),
+      onClick: function onClick(e) {
+        setKey(tab.key);
+        onTabClick(tab.key, index, e);
+      }
+    }, tab.title);
+  }));
+}

package/es/Section/index.d.ts

@@ -0,0 +1,54 @@
+import type { Key } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+import { TabsProps } from 'antd';
+interface Props extends Pick<TabsProps, 'activeKey' | 'onTabClick'> {
+    /**
+     * @description 标题
+     */
+    title?: string | ReactNode;
+    /**
+     * @description 内容
+     */
+    children?: ReactNode;
+    /**
+     * @description 容器样式
+     */
+    style?: CSSProperties;
+    /**
+     * @description 容器样式
+     */
+    className?: string;
+    /**
+     * @description 暂未实现
+     */
+    footer?: ReactNode;
+    /**
+     * @description 当内部有表头固定的表格时，可以考虑这个
+     */
+    type?: 'table';
+    /**
+     * @description tabs
+     */
+    tabs?: {
+        title?: string;
+        key: string;
+    }[];
+    /**
+     * @description body元素的样式
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * @description 标签切换事件
+     */
+    onTabChange?: (activeKey: Key, activeIndex: number) => void;
+    /**
+     * @description 操作栏，请与Actions组件结合使用并且带有标题，请不要在Tabs模式时使用
+     */
+    actions?: ReactNode;
+    /**
+     * @description 同 style flex属性， 为true时 flex = 1
+     */
+    flex?: boolean | number;
+}
+export default function Section(props: Props): JSX.Element;
+export {};

package/es/Section/index.js

@@ -0,0 +1,96 @@
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import classNames from 'classnames';
+import { Tabs } from 'antd';
+import { mapChildren } from '../utils';
+import { PREFIX_CLS } from '../constants';
+import TabBar from './TabBar';
+export default function Section(props) {
+  var _classNames;
+
+  var title = props.title,
+      children = props.children,
+      style = props.style,
+      className = props.className,
+      tabs = props.tabs,
+      type = props.type,
+      bodyStyle = props.bodyStyle,
+      onTabChange = props.onTabChange,
+      actions = props.actions,
+      flex = props.flex,
+      activeKey = props.activeKey,
+      _onTabClick = props.onTabClick;
+  var prefixCls = PREFIX_CLS + '-section';
+  var containerStyle = style;
+
+  if (flex) {
+    containerStyle = _objectSpread({
+      flex: typeof flex === 'number' ? flex : 1
+    }, containerStyle);
+  }
+
+  var hasActions = !!actions;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), !!type), _defineProperty(_classNames, "".concat(prefixCls, "-flex"), !!flex), _classNames), className),
+    style: containerStyle
+  }, title || hasActions ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-header")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, title), actions) : null, tabs !== undefined && tabs.length > 0 ? Array.isArray(children) && children.length > 1 ? /*#__PURE__*/React.createElement(Tabs, {
+    activeKey: activeKey,
+    onTabClick: _onTabClick,
+    renderTabBar: function renderTabBar(tabProps) {
+      var mKey = tabProps.activeKey,
+          mClick = tabProps.onTabClick;
+      return /*#__PURE__*/React.createElement(TabBar, {
+        activeKey: mKey,
+        tabs: tabs,
+        prefixCls: prefixCls,
+        onTabClick: function onTabClick(key, index, e) {
+          mClick(key, e);
+
+          if (key !== mKey) {
+            if (onTabChange) {
+              onTabChange(key, index);
+            }
+          }
+        }
+      });
+    }
+  }, mapChildren(children, function (child, index) {
+    var _tabs$index = tabs[index],
+        tab = _tabs$index.title,
+        key = _tabs$index.key;
+    return /*#__PURE__*/React.createElement(Tabs.TabPane, {
+      tab: tab,
+      key: key,
+      className: "".concat(prefixCls, "-body"),
+      style: bodyStyle
+    }, child);
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, {
+    activeKey: activeKey,
+    tabs: tabs,
+    prefixCls: prefixCls,
+    onTabClick: function onTabClick(key, index, e) {
+      if (_onTabClick) {
+        _onTabClick(key, e);
+      }
+
+      if (key !== activeKey && onTabChange) {
+        onTabChange(key, index);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body"),
+    style: bodyStyle
+  }, children)) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body"),
+    style: bodyStyle
+  }, children));
+}