@dtjoy/dt-design 1.0.2 → 1.0.4

package/esm/blockHeader/index.js

@@ -12,7 +12,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 React, { useState } from 'react';
-import { QuestionOutlined, UpOutlined } from '@dtinsight/react-icons';
+import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
 import classNames from 'classnames';
@@ -92,8 +92,8 @@ var BlockHeader = function BlockHeader(props) {
   }, title), tooltipProps !== null && tooltipProps !== void 0 && tooltipProps.title ? /*#__PURE__*/React.createElement("div", {
     className: "title__tooltip"
   }, /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltipProps, {
-    className: classNames(tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className, 'anticon')
-  }), /*#__PURE__*/React.createElement(QuestionOutlined, null))) : null, description ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className)
+  }), /*#__PURE__*/React.createElement(QuestionCircleOutlined, null))) : null, description ? /*#__PURE__*/React.createElement("div", {
     className: "title__description"
   }, description) : null), addonAfter && /*#__PURE__*/React.createElement("div", {
     className: "title__addon-after"
@@ -102,7 +102,7 @@ var BlockHeader = function BlockHeader(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "collapse__text"
   }, currentExpand ? '收起' : '展开'), /*#__PURE__*/React.createElement(UpOutlined, {
-    className: classNames('collapse__icon', 'anticon', {
+    className: classNames('collapse__icon', {
       'collapse__icon--up': currentExpand,
       'collapse__icon--down': !currentExpand
     })

package/esm/blockHeader/style/index.less

@@ -85,7 +85,7 @@
             &__tooltip {
                 display: flex;
                 margin-right: 4px;
-                font-size: 16px;
+                font-size: 14px;
                 color: #b1b4c5;
                 cursor: pointer;
             }

package/esm/collapsible/index.js

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { globalConfig } from 'antd/es/config-provider';
 import classNames from 'classnames';
-import { isEqual, pick } from 'lodash';
+import { isEqual, pick } from 'lodash-es';
 import "./style";
 var Collapsible = /*#__PURE__*/function (_React$Component) {
   _inherits(Collapsible, _React$Component);

package/esm/flex/index.js

@@ -16,7 +16,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 from 'react';
 import { ConfigContext, globalConfig } from 'antd/es/config-provider';
-import { clsx } from 'clsx';
+import clsx from 'classnames';
 import { omit } from 'lodash-es';
 import "./style";
 import { isPresetSize } from "../_util/gapSize";

package/esm/flex/utils.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-import { clsx } from 'clsx';
+import clsx from 'classnames';
 export var flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
 export var justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
 export var alignItemsValues = ['center', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'baseline', 'normal', 'stretch'];

package/esm/formList/index.d.ts

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import { type FormListFieldData, type TableProps } from 'antd';
+import type { FormItemProps, FormListProps, RuleObject, RuleRender } from 'antd/lib/form';
+import type { ColumnType as TableColumnType } from 'antd/lib/table';
+import './style';
+declare type NotNullRowSelection = NonNullable<TableProps<any>['rowSelection']>;
+/**
+ * Override NamePath parameters type
+ */
+declare type OverrideParameters = (string | number)[];
+declare type RcFormInstance = Parameters<RuleRender>[0];
+declare type RawPanelRender = NonNullable<TableProps<any>['footer']>;
+/**
+ * Override PanelRender type
+ */
+declare type PanelRenderFunc = (...args: Parameters<FormListProps['children']>) => ReturnType<RawPanelRender>;
+/**
+ * Form.Table 组件类型
+ */
+export interface IFormTableProps
+/**
+ * Support all FormListProps except children for which is re-defined in this component
+ * and prefixCls for which is not expected to be supported
+ */
+ extends Pick<FormListProps, 'name' | 'rules' | 'initialValue'>, 
+/**
+ * Support all TableProps except
+ * - re-define columns and re-defined rowSelection
+ * - and pagination which is expect to be not supported in Form.Table
+ * - and className which is renamed to tableClassName
+ * - and rowKey, dataSource for which are defined and not allowed to be modified
+ * - and footer, title, summary for which are re-defined to pass form's operation
+ */
+Omit<TableProps<any>, 'columns' | 'rowSelection' | 'pagination' | 'className' | 'rowKey' | 'dataSource' | 'footer' | 'title' | 'summary'> {
+    /**
+     * 表格列的配置描述
+     */
+    columns?: ColumnType[] | ((...args: Parameters<FormListProps['children']>) => ColumnType[]);
+    /**
+     * Table 的 className
+     */
+    tableClassName?: TableProps<any>['className'];
+    /**
+     * 表格行是否可选择
+     */
+    rowSelection?: Omit<NotNullRowSelection, 'getCheckboxProps'> & {
+        getCheckboxProps?: (field: FormListFieldData) => ReturnType<NonNullable<NotNullRowSelection['getCheckboxProps']>>;
+    };
+    title?: PanelRenderFunc;
+    footer?: PanelRenderFunc;
+    summary?: PanelRenderFunc;
+}
+export interface ColumnType
+/**
+ * Support all FormItemProps, and re-defined `rules` and `dependencies`
+ */
+ extends Omit<FormItemProps, 'rules' | 'dependencies' | 'prefixCls' | 'children'>, 
+/**
+ * Support all TableColumnType, and re-defined `render`
+ */
+Omit<TableColumnType<FormListFieldData>, 'render'> {
+    /**
+     * 设置依赖字段, 支持通过回调函数获取当前字段名
+     */
+    dependencies?: ((namePath: OverrideParameters) => FormItemProps['dependencies']) | FormItemProps['dependencies'];
+    /**
+     * 校验规则，设置字段的校验逻辑，支持通过回调函数获取当前字段名
+     */
+    rules?: (RuleObject | ((form: RcFormInstance, namePath: OverrideParameters) => RuleObject))[];
+    /**
+     * 渲染函数
+     * @param formInstance 只有在设置了 `dependencies` 的情况下才有该参数
+     */
+    render?: (fieldData: FormListFieldData, namePath: OverrideParameters, formInstance?: RcFormInstance) => ReactNode;
+}
+export default function InternalTable({ name, rules, initialValue, ...tableProps }: IFormTableProps): React.JSX.Element;
+export {};

package/esm/formList/index.js

@@ -0,0 +1,141 @@
+var _excluded = ["name", "rules", "initialValue"],
+  _excluded2 = ["tableClassName", "columns", "title", "footer", "summary"],
+  _excluded3 = ["noStyle", "style", "className", "id", "hasFeedback", "validateStatus", "required", "hidden", "initialValue", "messageVariables", "tooltip", "dependencies", "rules", "validateFirst", "validateTrigger", "valuePropName", "render"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _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 _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, { useMemo } from 'react';
+import { Utils } from '@dtinsight/dt-utils';
+import { Form, Table } from 'antd';
+import { globalConfig } from 'antd/es/config-provider';
+import classnames from 'classnames';
+import "./style";
+
+/**
+ * Override NamePath parameters type
+ */
+
+/**
+ * Override PanelRender type
+ */
+
+/**
+ * Form.Table 组件类型
+ */
+
+export default function InternalTable(_ref) {
+  var name = _ref.name,
+    rules = _ref.rules,
+    initialValue = _ref.initialValue,
+    tableProps = _objectWithoutProperties(_ref, _excluded);
+  var tableClassName = tableProps.tableClassName,
+    rawColumns = tableProps.columns,
+    title = tableProps.title,
+    footer = tableProps.footer,
+    summary = tableProps.summary,
+    restProps = _objectWithoutProperties(tableProps, _excluded2);
+  var prefixCls = globalConfig().getPrefixCls('form-list');
+  var formInstance = Form.useFormInstance();
+  var convertRawToTableCol = function convertRawToTableCol(raw) {
+    if (!(raw !== null && raw !== void 0 && raw.length)) return [];
+    return raw.map(function (_ref2) {
+      var noStyle = _ref2.noStyle,
+        style = _ref2.style,
+        className = _ref2.className,
+        id = _ref2.id,
+        hasFeedback = _ref2.hasFeedback,
+        validateStatus = _ref2.validateStatus,
+        required = _ref2.required,
+        hidden = _ref2.hidden,
+        initialValue = _ref2.initialValue,
+        messageVariables = _ref2.messageVariables,
+        tooltip = _ref2.tooltip,
+        dependencies = _ref2.dependencies,
+        rawRules = _ref2.rules,
+        validateFirst = _ref2.validateFirst,
+        validateTrigger = _ref2.validateTrigger,
+        valuePropName = _ref2.valuePropName,
+        _render = _ref2.render,
+        cols = _objectWithoutProperties(_ref2, _excluded3);
+      var formItemProps = {
+        noStyle: noStyle,
+        style: style,
+        className: className,
+        id: id,
+        hasFeedback: hasFeedback,
+        validateStatus: validateStatus,
+        required: required,
+        hidden: hidden,
+        initialValue: initialValue,
+        messageVariables: messageVariables,
+        validateFirst: validateFirst,
+        validateTrigger: validateTrigger,
+        tooltip: tooltip,
+        valuePropName: valuePropName
+      };
+      var isRequired = required || (rawRules === null || rawRules === void 0 ? void 0 : rawRules.some(function (rule) {
+        return _typeof(rule) === 'object' && rule.required;
+      }));
+      return _objectSpread(_objectSpread({}, cols), {}, {
+        title: /*#__PURE__*/React.createElement(React.Fragment, null, isRequired && /*#__PURE__*/React.createElement("span", {
+          className: "dtc-form__table__column--required"
+        }), cols.title),
+        render: function render(_, fieldData) {
+          var currentNamePath = [fieldData.name, cols.dataIndex].filter(Utils.checkExist).flat();
+          var rules = rawRules === null || rawRules === void 0 ? void 0 : rawRules.map(function (rule) {
+            return typeof rule === 'function' ? function (form) {
+              return rule(form, currentNamePath);
+            } : rule;
+          });
+          if (dependencies) {
+            return /*#__PURE__*/React.createElement(Form.Item, {
+              noStyle: true,
+              dependencies: typeof dependencies === 'function' ? dependencies(currentNamePath) : dependencies
+            }, function (formInstance) {
+              return /*#__PURE__*/React.createElement(Form.Item, _extends({
+                name: currentNamePath,
+                rules: rules
+              }, formItemProps), _render === null || _render === void 0 ? void 0 : _render(fieldData, currentNamePath, formInstance));
+            });
+          }
+          return /*#__PURE__*/React.createElement(Form.Item, _extends({
+            name: currentNamePath,
+            rules: rules
+          }, formItemProps), _render === null || _render === void 0 ? void 0 : _render(fieldData, currentNamePath, formInstance));
+        }
+      });
+    });
+  };
+  var columns = useMemo(function () {
+    if (typeof rawColumns === 'function') return rawColumns;
+    return convertRawToTableCol(rawColumns);
+  }, [rawColumns]);
+  return /*#__PURE__*/React.createElement(Form.List, {
+    name: name,
+    rules: rules,
+    initialValue: initialValue
+  }, function (fields, ope, meta) {
+    return /*#__PURE__*/React.createElement(Table, _extends({
+      className: classnames(prefixCls, tableClassName),
+      rowKey: "key",
+      dataSource: fields,
+      pagination: false,
+      columns: typeof columns === 'function' ? convertRawToTableCol(columns(fields, ope, meta)) : columns,
+      footer: footer ? function () {
+        return footer(fields, ope, meta);
+      } : undefined,
+      title: title ? function () {
+        return title(fields, ope, meta);
+      } : undefined,
+      summary: summary ? function () {
+        return summary(fields, ope, meta);
+      } : undefined
+    }, restProps));
+  });
+}

package/esm/formList/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/esm/formList/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";

package/esm/formList/style/index.less

@@ -0,0 +1,45 @@
+@import '../../style/themes/index.less';
+
+@form-list-prefix-cls: ~'@{ant-prefix}-form-list';
+
+.@{form-list-prefix-cls} {
+  height: 100%;
+
+  &__column {
+    &--required {
+      &::before {
+        content: "*";
+        display: inline-block;
+        margin-inline-end: 4px;
+        font-size: 14px;
+        line-height: 1;
+        color: @error-color;
+      }
+
+      vertical-align: -0.1em;
+    }
+  }
+
+  .ant-table,
+  .ant-table-container {
+    height: 100%;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+
+  table colgroup > col.ant-table-selection-col {
+    width: 48px;
+  }
+
+  .ant-table-thead > tr > th.ant-table-selection-column {
+    padding: 0 16px;
+  }
+
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    padding: 0 16px;
+  }
+}
+
+

package/esm/index.d.ts

@@ -1,12 +1,14 @@
-import '@dtinsight/react-icons/dist/index.css';
 export { default as BlockHeader } from './blockHeader';
 export type { ButtonProps } from './button';
 export { default as Button } from './button';
+export { default as Collapsible } from './collapsible';
+export { default as CollapsibleActionItems } from './collapsibleActionItems';
 export { default as Flex } from './flex';
 export type { FlexProps } from './flex/interface';
-export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as FormList } from './formList';
+export * from './formList';
+export { default as OverflowList } from './overflowList';
 export { default as Resize } from './resize';
 export { default as Splitter } from './splitter';
 export * from './splitter';
-export { default as Collapsible } from './collapsible';
 export { default as StatusTag } from './statusTag';

package/esm/index.js

@@ -1,53 +1,12 @@
-import '@dtinsight/react-icons/dist/index.css';
 export { default as BlockHeader } from "./blockHeader";
 export { default as Button } from "./button";
-export { default as Flex } from "./flex";
-// export { default as Catalogue } from './catalogue';
-// export { default as Chat } from './chat';
+export { default as Collapsible } from "./collapsible";
 export { default as CollapsibleActionItems } from "./collapsibleActionItems";
-// export { default as ConfigProvider } from './configProvider';
-// export { default as ContentLayout } from './contentLayout';
-// export { default as ContextMenu } from './contextMenu';
-// export { default as Copy } from './copy';
-// export { default as Descriptions } from './descriptions';
-// export { default as Drawer } from './drawer';
-// export { default as Dropdown } from './dropdown';
-// export { default as EllipsisText } from './ellipsisText';
-// export { default as Empty } from './empty';
-// export { default as ErrorBoundary } from './errorBoundary';
-// export { default as LoadError } from './errorBoundary/loadError';
-// export { default as FilterRules } from './filterRules';
-// export { default as Flex } from './flex';
-// export type { FlexProps } from './flex/interface';
-// export { default as Float } from './float';
-// export { default as Form } from './form';
-// export { default as Fullscreen } from './fullscreen';
-// export { default as GlobalLoading } from './globalLoading';
-// export { default as Image } from './image';
-// export { default as Input } from './input';
-// export { default as KeyEventListener } from './keyEventListener';
-// export { default as enUS } from './locale/en-US';
-// export { default as useLocale } from './locale/useLocale';
-// export { default as zhCN } from './locale/zh-CN';
-// export { default as MarkdownRender } from './markdownRender';
-// export { default as Modal } from './modal/modal';
-// export { default as NotFound } from './notFound';
-// export { default as ProgressBar } from './progressBar';
-// export { default as ProgressLine } from './progressLine';
+export { default as Flex } from "./flex";
+export { default as FormList } from "./formList";
+export * from "./formList";
+export { default as OverflowList } from "./overflowList";
 export { default as Resize } from "./resize";
 export { default as Splitter } from "./splitter";
 export * from "./splitter";
-// export { default as SpreadSheet } from './spreadSheet';
-export { default as Collapsible } from "./collapsible";
-export { default as StatusTag } from "./statusTag";
-// export { default as Table } from './table';
-// export { default as TinyTag } from './tinyTag';
-// export { default as useCookieListener } from './useCookieListener';
-// export { default as useDebounce } from './useDebounce';
-// export { default as useIntersectionObserver } from './useIntersectionObserver';
-// export { default as useList } from './useList';
-// export { default as useMeasure } from './useMeasure';
-// export { default as useMergeOption } from './useMergeOption';
-// export { default as useModal } from './useModal';
-// export { default as useTyping } from './useTyping';
-// export { default as useWindowSwitchListener } from './useWindowSwitchListener';
+export { default as StatusTag } from "./statusTag";

package/esm/overflowList/index.d.ts

@@ -0,0 +1,39 @@
+import React, { Component, ReactElement, ReactNode } from 'react';
+import './style';
+export declare type OverflowItem<T = Record<string, any>> = T;
+export interface OverflowListProps<T = Record<string, any>> {
+    items: OverflowItem<T>[];
+    visibleItemRenderer: (item: OverflowItem<T>, index: number) => ReactElement;
+    overflowRenderer: (overflowItems: OverflowItem<T>[]) => ReactNode | ReactNode[];
+    className?: string;
+    style?: React.CSSProperties;
+    renderMode?: 'collapse' | 'scroll';
+    collapseFrom?: 'start' | 'end';
+    minVisibleItems?: number;
+    onOverflow?: (overflowItems: OverflowItem<T>[]) => void;
+}
+interface OverflowListState {
+    visibleCount: number;
+    isMeasuring: boolean;
+}
+declare class OverflowList<T extends object> extends Component<OverflowListProps<T>, OverflowListState> {
+    static defaultProps: {
+        items: never[];
+        collapseFrom: string;
+        minVisibleItems: number;
+        renderMode: string;
+    };
+    static displayName: string;
+    private containerRef;
+    private overflowRef;
+    private itemRefs;
+    private prefixCls;
+    constructor(props: OverflowListProps<T>);
+    componentDidMount(): void;
+    componentUpdate(prevProps: OverflowListProps<T>): void;
+    private measureAndAdjust;
+    private getOverflowItems;
+    renderCollapse(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default OverflowList;

package/esm/overflowList/index.js

@@ -0,0 +1,165 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+import React, { Component, createRef } from 'react';
+import { globalConfig } from 'antd/es/config-provider';
+import classNames from 'classnames';
+import "./style";
+import ReactResizeObserver from "../resizeObserver";
+var OverflowList = /*#__PURE__*/function (_Component) {
+  _inherits(OverflowList, _Component);
+  var _super = _createSuper(OverflowList);
+  function OverflowList(props) {
+    var _this;
+    _classCallCheck(this, OverflowList);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/createRef());
+    _defineProperty(_assertThisInitialized(_this), "overflowRef", /*#__PURE__*/createRef());
+    _defineProperty(_assertThisInitialized(_this), "itemRefs", new Map());
+    _defineProperty(_assertThisInitialized(_this), "prefixCls", 'overflow-list');
+    _defineProperty(_assertThisInitialized(_this), "measureAndAdjust", function () {
+      var _this$overflowRef$cur, _this$overflowRef$cur2;
+      var container = _this.containerRef.current;
+      if (!container || _this.props.renderMode !== 'collapse') return;
+      var _this$props = _this.props,
+        items = _this$props.items,
+        minVisibleItems = _this$props.minVisibleItems,
+        collapseFrom = _this$props.collapseFrom,
+        onOverflow = _this$props.onOverflow;
+      var containerWidth = container.offsetWidth;
+      var overflowWidth = (_this$overflowRef$cur = (_this$overflowRef$cur2 = _this.overflowRef.current) === null || _this$overflowRef$cur2 === void 0 ? void 0 : _this$overflowRef$cur2.offsetWidth) !== null && _this$overflowRef$cur !== void 0 ? _this$overflowRef$cur : 0;
+      var totalWidth = 0;
+      var newVisibleCount = 0;
+      for (var i = 0; i < items.length; i++) {
+        var _this$itemRefs$get$ge, _this$itemRefs$get;
+        var _index = collapseFrom === 'end' ? i : items.length - 1 - i;
+        var itemWidth = (_this$itemRefs$get$ge = (_this$itemRefs$get = _this.itemRefs.get(_index)) === null || _this$itemRefs$get === void 0 ? void 0 : _this$itemRefs$get.getBoundingClientRect().width) !== null && _this$itemRefs$get$ge !== void 0 ? _this$itemRefs$get$ge : 0;
+        var isLast = i === items.length - 1;
+        var limit = isLast ? containerWidth : containerWidth - overflowWidth;
+        if (totalWidth + itemWidth <= limit || newVisibleCount < (minVisibleItems || 0)) {
+          totalWidth += itemWidth;
+          newVisibleCount++;
+        } else {
+          break;
+        }
+      }
+      _this.setState({
+        visibleCount: newVisibleCount,
+        isMeasuring: false
+      }, function () {
+        if (onOverflow) {
+          onOverflow(_this.getOverflowItems(newVisibleCount));
+        }
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "getOverflowItems", function (count) {
+      var _this$props2 = _this.props,
+        items = _this$props2.items,
+        collapseFrom = _this$props2.collapseFrom;
+      return collapseFrom === 'end' ? items.slice(count) : items.slice(0, items.length - count);
+    });
+    _this.prefixCls = globalConfig().getPrefixCls(_this.prefixCls);
+    _this.state = {
+      visibleCount: props.items.length,
+      isMeasuring: props.renderMode === 'collapse'
+    };
+    return _this;
+  }
+  _createClass(OverflowList, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.renderMode === 'collapse') {
+        this.measureAndAdjust();
+      }
+    }
+  }, {
+    key: "componentUpdate",
+    value: function componentUpdate(prevProps) {
+      if (prevProps.items !== this.props.items || prevProps.renderMode !== this.props.renderMode) {
+        this.setState({
+          isMeasuring: true,
+          visibleCount: this.props.items.length
+        }, this.measureAndAdjust);
+      }
+    }
+  }, {
+    key: "renderCollapse",
+    value: function renderCollapse() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        items = _this$props3.items,
+        visibleItemRenderer = _this$props3.visibleItemRenderer,
+        overflowRenderer = _this$props3.overflowRenderer,
+        collapseFrom = _this$props3.collapseFrom,
+        style = _this$props3.style,
+        className = _this$props3.className;
+      var _this$state = this.state,
+        visibleCount = _this$state.visibleCount,
+        isMeasuring = _this$state.isMeasuring;
+      var overflowItems = this.getOverflowItems(visibleCount);
+      var hasOverflow = overflowItems.length > 0;
+      var containerStyle = _objectSpread({
+        maxWidth: '100%',
+        visibility: 'visible'
+      }, style);
+      var renderItems = function renderItems() {
+        return items.map(function (item, i) {
+          var isVisible = isMeasuring || (collapseFrom === 'end' ? i < visibleCount : i >= items.length - visibleCount);
+          if (!isVisible) return null;
+          return /*#__PURE__*/React.createElement("div", {
+            key: i,
+            ref: function ref(el) {
+              if (el) _this2.itemRefs.set(i, el);else _this2.itemRefs.delete(i);
+            },
+            className: "".concat(_this2.prefixCls, "-item")
+          }, visibleItemRenderer(item, i));
+        });
+      };
+      var overflowNode = (hasOverflow || isMeasuring) && /*#__PURE__*/React.createElement("div", {
+        ref: this.overflowRef,
+        className: "".concat(this.prefixCls, "-overflow")
+      }, overflowRenderer(isMeasuring ? items : overflowItems));
+      return /*#__PURE__*/React.createElement(ReactResizeObserver, {
+        onResize: function onResize() {
+          return _this2.setState({
+            isMeasuring: true
+          }, _this2.measureAndAdjust);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: this.containerRef,
+        className: classNames(this.prefixCls, className),
+        style: containerStyle
+      }, collapseFrom === 'start' && overflowNode, renderItems(), collapseFrom === 'end' && overflowNode));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.renderCollapse();
+    }
+  }]);
+  return OverflowList;
+}(Component);
+_defineProperty(OverflowList, "defaultProps", {
+  items: [],
+  collapseFrom: 'end',
+  minVisibleItems: 0,
+  renderMode: 'collapse'
+});
+_defineProperty(OverflowList, "displayName", void 0);
+if (process.env.NODE_ENV === 'development') {
+  OverflowList.displayName = 'OverflowList';
+}
+export default OverflowList;

package/esm/overflowList/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/esm/overflowList/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";