@ant-design/pro-components 2.8.10 → 3.0.0-beta.1

package/es/table/components/Alert/index.d.ts

@@ -0,0 +1,18 @@
+import React, { Key } from 'react';
+import type { IntlType } from '../../../provider';
+export type AlertRenderType<T> = ((props: {
+    intl: IntlType;
+    selectedRowKeys: (number | string | Key)[];
+    selectedRows: T[];
+    onCleanSelected: () => void;
+}) => React.ReactNode) | false;
+export type TableAlertProps<T> = {
+    selectedRowKeys: (number | string | Key)[];
+    selectedRows: T[];
+    alwaysShowAlert?: boolean;
+    alertInfoRender?: AlertRenderType<T>;
+    onCleanSelected: () => void;
+    alertOptionRender?: AlertRenderType<T>;
+};
+declare function TableAlert<T>({ selectedRowKeys, onCleanSelected, alwaysShowAlert, selectedRows, alertInfoRender, alertOptionRender, }: TableAlertProps<T>): React.JSX.Element | null;
+export default TableAlert;

package/es/table/components/Alert/index.js

@@ -0,0 +1,49 @@
+// src/table/components/Alert/index.tsx
+import { ConfigProvider, Space } from "antd";
+import React, { useContext } from "react";
+import { useIntl } from "../../../provider";
+import { useStyle } from "./style";
+var defaultAlertOptionRender = (props) => {
+  const { intl, onCleanSelected } = props;
+  return [
+    /* @__PURE__ */ React.createElement("a", { onClick: onCleanSelected, key: "0" }, intl.getMessage("alert.clear", "清空"))
+  ];
+};
+function TableAlert({
+  selectedRowKeys = [],
+  onCleanSelected,
+  alwaysShowAlert,
+  selectedRows,
+  alertInfoRender = ({ intl }) => /* @__PURE__ */ React.createElement(Space, null, intl.getMessage("alert.selected", "已选择"), selectedRowKeys.length, intl.getMessage("alert.item", "项"), "  "),
+  alertOptionRender = defaultAlertOptionRender
+}) {
+  const intl = useIntl();
+  const option = alertOptionRender && alertOptionRender({
+    onCleanSelected,
+    selectedRowKeys,
+    selectedRows,
+    intl
+  });
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls("pro-table-alert");
+  const { wrapSSR, hashId } = useStyle(className);
+  if (alertInfoRender === false) {
+    return null;
+  }
+  const dom = alertInfoRender({
+    intl,
+    selectedRowKeys,
+    selectedRows,
+    onCleanSelected
+  });
+  if (dom === false || selectedRowKeys.length < 1 && !alwaysShowAlert) {
+    return null;
+  }
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement("div", { className: `${className} ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${className}-container ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${className}-info ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${className}-info-content ${hashId}`.trim() }, dom), option ? /* @__PURE__ */ React.createElement("div", { className: `${className}-info-option ${hashId}`.trim() }, option) : null)))
+  );
+}
+var Alert_default = TableAlert;
+export {
+  Alert_default as default
+};

package/es/table/components/Alert/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface ProToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/es/table/components/Alert/style.js

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/table/components/Alert/style.ts
+import { setAlpha, useStyle as useAntdStyle } from "../../../provider";
+var genProStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      marginBlockEnd: 16,
+      backgroundColor: setAlpha(token.colorTextBase, 0.02),
+      borderRadius: token.borderRadius,
+      border: "none",
+      "&-container": {
+        paddingBlock: token.paddingSM,
+        paddingInline: token.paddingLG
+      },
+      "&-info": {
+        display: "flex",
+        alignItems: "center",
+        transition: "all 0.3s",
+        color: token.colorTextTertiary,
+        "&-content": {
+          flex: 1
+        },
+        "&-option": {
+          minWidth: 48,
+          paddingInlineStart: 16
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ProTableAlert", (token) => {
+    const proToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProStyle(proToken)];
+  });
+}
+export {
+  useStyle
+};

package/es/table/components/ColumnSetting/index.d.ts

@@ -0,0 +1,8 @@
+import { type TableColumnType } from 'antd';
+import React from 'react';
+import type { SettingOptionType } from '../ToolBar';
+type ColumnSettingProps<T = any> = SettingOptionType & {
+    columns: TableColumnType<T>[];
+};
+declare function ColumnSetting<T>(props: ColumnSettingProps<T>): React.JSX.Element;
+export default ColumnSetting;

package/es/table/components/ColumnSetting/index.js

@@ -0,0 +1,453 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/table/components/ColumnSetting/index.tsx
+import {
+  SettingOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignMiddleOutlined,
+  VerticalAlignTopOutlined
+} from "@ant-design/icons";
+import {
+  Checkbox,
+  ConfigProvider,
+  Popover,
+  Space,
+  Tooltip,
+  Tree,
+  Typography
+} from "antd";
+import classNames from "classnames";
+import omit from "rc-util/lib/omit";
+import React, { useContext, useEffect, useMemo, useRef } from "react";
+import { ProProvider, useIntl } from "../../../provider";
+import { runFunction, useRefFunction } from "../../../utils";
+import { TableContext } from "../../Store/Provide";
+import { genColumnKey } from "../../utils/index";
+import { useStyle } from "./style";
+var ToolTipIcon = ({ title, show, children, columnKey, fixed }) => {
+  const { columnsMap, setColumnsMap } = useContext(TableContext);
+  if (!show) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const config = columnsMap[columnKey] || {};
+        const columnKeyMap = __spreadProps(__spreadValues({}, columnsMap), {
+          [columnKey]: __spreadProps(__spreadValues({}, config), { fixed })
+        });
+        setColumnsMap(columnKeyMap);
+      }
+    },
+    children
+  ));
+};
+var CheckboxListItem = ({ columnKey, isLeaf, title, className, fixed, showListItemOption }) => {
+  const intl = useIntl();
+  const { hashId } = useContext(ProProvider);
+  const dom = /* @__PURE__ */ React.createElement("span", { className: `${className}-list-item-option ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
+    ToolTipIcon,
+    {
+      columnKey,
+      fixed: "left",
+      title: intl.getMessage("tableToolBar.leftPin", "固定在列首"),
+      show: fixed !== "left"
+    },
+    /* @__PURE__ */ React.createElement(VerticalAlignTopOutlined, null)
+  ), /* @__PURE__ */ React.createElement(
+    ToolTipIcon,
+    {
+      columnKey,
+      fixed: void 0,
+      title: intl.getMessage("tableToolBar.noPin", "不固定"),
+      show: !!fixed
+    },
+    /* @__PURE__ */ React.createElement(VerticalAlignMiddleOutlined, null)
+  ), /* @__PURE__ */ React.createElement(
+    ToolTipIcon,
+    {
+      columnKey,
+      fixed: "right",
+      title: intl.getMessage("tableToolBar.rightPin", "固定在列尾"),
+      show: fixed !== "right"
+    },
+    /* @__PURE__ */ React.createElement(VerticalAlignBottomOutlined, null)
+  ));
+  return /* @__PURE__ */ React.createElement("span", { className: `${className}-list-item ${hashId}`.trim(), key: columnKey }, /* @__PURE__ */ React.createElement("div", { className: `${className}-list-item-title ${hashId}`.trim() }, title), showListItemOption && !isLeaf ? dom : null);
+};
+var CheckboxList = ({
+  list,
+  draggable,
+  checkable,
+  showListItemOption,
+  className,
+  showTitle = true,
+  title: listTitle,
+  listHeight = 280
+}) => {
+  var _a, _b, _e;
+  const { hashId } = useContext(ProProvider);
+  const { columnsMap, setColumnsMap, sortKeyColumns, setSortKeyColumns } = useContext(TableContext);
+  const show = list && list.length > 0;
+  const treeDataConfig = useMemo(() => {
+    if (!show)
+      return {};
+    const checkedKeys = [];
+    const treeMap = /* @__PURE__ */ new Map();
+    const loopData = (data, parentConfig) => data.map((_a2) => {
+      var _b2 = _a2, { key, dataIndex, children } = _b2, rest = __objRest(_b2, ["key", "dataIndex", "children"]);
+      var _a3, _b3;
+      const columnKey = genColumnKey(
+        key,
+        [parentConfig == null ? void 0 : parentConfig.columnKey, rest.index].filter(Boolean).join("-")
+      );
+      const config = columnsMap[columnKey || "null"] || { show: true };
+      if (config.show !== false && !children) {
+        checkedKeys.push(columnKey);
+      }
+      const item = __spreadProps(__spreadValues({
+        key: columnKey
+      }, omit(rest, ["className"])), {
+        selectable: false,
+        disabled: config.disable === true,
+        disableCheckbox: typeof config.disable === "boolean" ? config.disable : (_a3 = config.disable) == null ? void 0 : _a3.checkbox,
+        isLeaf: parentConfig ? true : void 0
+      });
+      if (children) {
+        item.children = loopData(children, __spreadProps(__spreadValues({}, config), {
+          columnKey
+        }));
+        if ((_b3 = item.children) == null ? void 0 : _b3.every(
+          (childrenItem) => checkedKeys == null ? void 0 : checkedKeys.includes(childrenItem.key)
+        )) {
+          checkedKeys.push(columnKey);
+        }
+      }
+      treeMap.set(key, item);
+      return item;
+    });
+    return { list: loopData(list), keys: checkedKeys, map: treeMap };
+  }, [columnsMap, list, show]);
+  const move = useRefFunction(
+    (id, targetId, dropPosition) => {
+      const newMap = __spreadValues({}, columnsMap);
+      const newColumns = [...sortKeyColumns];
+      const findIndex = newColumns.findIndex((columnKey) => columnKey === id);
+      const targetIndex = newColumns.findIndex(
+        (columnKey) => columnKey === targetId
+      );
+      const isDownWard = dropPosition >= findIndex;
+      if (findIndex < 0)
+        return;
+      const targetItem = newColumns[findIndex];
+      newColumns.splice(findIndex, 1);
+      if (dropPosition === 0) {
+        newColumns.unshift(targetItem);
+      } else {
+        newColumns.splice(
+          isDownWard ? targetIndex : targetIndex + 1,
+          0,
+          targetItem
+        );
+      }
+      newColumns.forEach((key, order) => {
+        newMap[key] = __spreadProps(__spreadValues({}, newMap[key] || {}), { order });
+      });
+      setColumnsMap(newMap);
+      setSortKeyColumns(newColumns);
+    }
+  );
+  const onCheckTree = useRefFunction((e) => {
+    const newColumnMap = __spreadValues({}, columnsMap);
+    const loopSetShow = (key) => {
+      var _a2, _b2, _c, _d;
+      const newSetting = __spreadValues({}, newColumnMap[key]);
+      newSetting.show = e.checked;
+      if ((_b2 = (_a2 = treeDataConfig.map) == null ? void 0 : _a2.get(key)) == null ? void 0 : _b2.children) {
+        (_d = (_c = treeDataConfig.map.get(key)) == null ? void 0 : _c.children) == null ? void 0 : _d.forEach((item) => loopSetShow(item.key));
+      }
+      newColumnMap[key] = newSetting;
+    };
+    loopSetShow(e.node.key);
+    setColumnsMap(__spreadValues({}, newColumnMap));
+  });
+  if (!show) {
+    return null;
+  }
+  const listDom = /* @__PURE__ */ React.createElement(
+    Tree,
+    {
+      itemHeight: 24,
+      draggable: draggable && !!((_a = treeDataConfig.list) == null ? void 0 : _a.length) && ((_b = treeDataConfig.list) == null ? void 0 : _b.length) > 1,
+      checkable,
+      onDrop: (info) => {
+        const dropKey = info.node.key;
+        const dragKey = info.dragNode.key;
+        const { dropPosition, dropToGap } = info;
+        const position = dropPosition === -1 || !dropToGap ? dropPosition + 1 : dropPosition;
+        move(dragKey, dropKey, position);
+      },
+      blockNode: true,
+      onCheck: (_, e) => onCheckTree(e),
+      checkedKeys: treeDataConfig.keys,
+      showLine: false,
+      titleRender: (_node) => {
+        const node = __spreadProps(__spreadValues({}, _node), { children: void 0 });
+        if (!node.title)
+          return null;
+        const normalizedTitle = runFunction(node.title, node);
+        const wrappedTitle = /* @__PURE__ */ React.createElement(
+          Typography.Text,
+          {
+            style: { width: 80 },
+            ellipsis: { tooltip: normalizedTitle }
+          },
+          normalizedTitle
+        );
+        return /* @__PURE__ */ React.createElement(
+          CheckboxListItem,
+          __spreadProps(__spreadValues({
+            className
+          }, omit(node, ["key"])), {
+            showListItemOption,
+            title: wrappedTitle,
+            columnKey: node.key
+          })
+        );
+      },
+      height: listHeight,
+      treeData: (_e = treeDataConfig.list) == null ? void 0 : _e.map(
+        (_c) => {
+          var _d = _c, {
+            disabled
+          } = _d, config = __objRest(_d, [
+            "disabled"
+          ]);
+          return config;
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, showTitle && /* @__PURE__ */ React.createElement("span", { className: `${className}-list-title ${hashId}`.trim() }, listTitle), listDom);
+};
+var GroupCheckboxList = ({
+  localColumns,
+  className,
+  draggable,
+  checkable,
+  showListItemOption,
+  listsHeight
+}) => {
+  const { hashId } = useContext(ProProvider);
+  const rightList = [];
+  const leftList = [];
+  const list = [];
+  const intl = useIntl();
+  localColumns.forEach((item) => {
+    if (item.hideInSetting) {
+      return;
+    }
+    const { fixed } = item;
+    if (fixed === "left") {
+      leftList.push(item);
+      return;
+    }
+    if (fixed === "right") {
+      rightList.push(item);
+      return;
+    }
+    list.push(item);
+  });
+  const showRight = rightList && rightList.length > 0;
+  const showLeft = leftList && leftList.length > 0;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(`${className}-list`, hashId, {
+        [`${className}-list-group`]: showRight || showLeft
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      CheckboxList,
+      {
+        title: intl.getMessage("tableToolBar.leftFixedTitle", "固定在左侧"),
+        list: leftList,
+        draggable,
+        checkable,
+        showListItemOption,
+        className,
+        listHeight: listsHeight
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      CheckboxList,
+      {
+        list,
+        draggable,
+        checkable,
+        showListItemOption,
+        title: intl.getMessage("tableToolBar.noFixedTitle", "不固定"),
+        showTitle: showLeft || showRight,
+        className,
+        listHeight: listsHeight
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      CheckboxList,
+      {
+        title: intl.getMessage("tableToolBar.rightFixedTitle", "固定在右侧"),
+        list: rightList,
+        draggable,
+        checkable,
+        showListItemOption,
+        className,
+        listHeight: listsHeight
+      }
+    )
+  );
+};
+function ColumnSetting(props) {
+  var _a, _b, _c, _d;
+  const columnRef = useRef(null);
+  const counter = useContext(TableContext);
+  const localColumns = props.columns;
+  const { checkedReset = true } = props;
+  const { columnsMap, setColumnsMap, clearPersistenceStorage } = counter;
+  useEffect(() => {
+    var _a2, _b2, _c2, _d2;
+    if ((_b2 = (_a2 = counter.propsRef.current) == null ? void 0 : _a2.columnsState) == null ? void 0 : _b2.value) {
+      columnRef.current = JSON.parse(
+        JSON.stringify(((_d2 = (_c2 = counter.propsRef.current) == null ? void 0 : _c2.columnsState) == null ? void 0 : _d2.value) || {})
+      );
+    }
+  }, []);
+  const setAllSelectAction = useRefFunction((show = true) => {
+    const columnKeyMap = {};
+    const loopColumns = (columns) => {
+      columns.forEach(({ key, fixed, index, children, disable }) => {
+        var _a2, _b2;
+        const columnKey = genColumnKey(key, index);
+        if (columnKey) {
+          columnKeyMap[columnKey] = {
+            // 子节点 disable 时，不修改节点显示状态
+            show: disable ? (_a2 = columnsMap[columnKey]) == null ? void 0 : _a2.show : show,
+            fixed,
+            disable,
+            order: (_b2 = columnsMap[columnKey]) == null ? void 0 : _b2.order
+          };
+        }
+        if (children) {
+          loopColumns(children);
+        }
+      });
+    };
+    loopColumns(localColumns);
+    setColumnsMap(columnKeyMap);
+  });
+  const checkedAll = useRefFunction((e) => {
+    if (e.target.checked) {
+      setAllSelectAction();
+    } else {
+      setAllSelectAction(false);
+    }
+  });
+  const clearClick = useRefFunction(() => {
+    var _a2, _b2;
+    clearPersistenceStorage == null ? void 0 : clearPersistenceStorage();
+    setColumnsMap(
+      ((_b2 = (_a2 = counter.propsRef.current) == null ? void 0 : _a2.columnsState) == null ? void 0 : _b2.defaultValue) || columnRef.current || counter.defaultColumnKeyMap
+    );
+  });
+  const unCheckedKeys = Object.values(columnsMap).filter(
+    (value) => !value || value.show === false
+  );
+  const indeterminate = unCheckedKeys.length > 0 && unCheckedKeys.length !== localColumns.length;
+  const intl = useIntl();
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls("pro-table-column-setting");
+  const { wrapSSR, hashId } = useStyle(className);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        arrow: false,
+        title: /* @__PURE__ */ React.createElement("div", { className: `${className}-title ${hashId}`.trim() }, props.checkable === false ? /* @__PURE__ */ React.createElement("div", null) : /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            indeterminate,
+            checked: unCheckedKeys.length === 0 && unCheckedKeys.length !== localColumns.length,
+            onChange: (e) => {
+              checkedAll(e);
+            }
+          },
+          intl.getMessage("tableToolBar.columnDisplay", "列展示")
+        ), checkedReset ? /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            onClick: clearClick,
+            className: `${className}-action-rest-button ${hashId}`.trim()
+          },
+          intl.getMessage("tableToolBar.reset", "重置")
+        ) : null, (props == null ? void 0 : props.extra) ? /* @__PURE__ */ React.createElement(Space, { size: 12, align: "center" }, props.extra) : null),
+        overlayClassName: `${className}-overlay ${hashId}`.trim(),
+        trigger: "click",
+        placement: "bottomRight",
+        content: /* @__PURE__ */ React.createElement(
+          GroupCheckboxList,
+          {
+            checkable: (_a = props.checkable) != null ? _a : true,
+            draggable: (_b = props.draggable) != null ? _b : true,
+            showListItemOption: (_c = props.showListItemOption) != null ? _c : true,
+            className,
+            localColumns,
+            listsHeight: props.listsHeight
+          }
+        )
+      },
+      props.children || /* @__PURE__ */ React.createElement(
+        Tooltip,
+        {
+          title: intl.getMessage("tableToolBar.columnSetting", "列设置")
+        },
+        (_d = props.settingIcon) != null ? _d : /* @__PURE__ */ React.createElement(SettingOutlined, null)
+      )
+    )
+  );
+}
+var ColumnSetting_default = ColumnSetting;
+export {
+  ColumnSetting_default as default
+};

package/es/table/components/ColumnSetting/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface ProToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};