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

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

@@ -0,0 +1,118 @@
+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/ColumnSetting/style.ts
+import { useStyle as useAntdStyle } from "../../../provider";
+var genProStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      width: "auto",
+      "&-title": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: "32px"
+      },
+      "&-overlay": {
+        [`${token.antCls}-popover-inner-content`]: {
+          width: "200px",
+          paddingBlock: 0,
+          paddingInline: 0,
+          paddingBlockEnd: 8
+        },
+        [`${token.antCls}-tree-node-content-wrapper:hover`]: {
+          backgroundColor: "transparent"
+        },
+        [`${token.antCls}-tree-draggable-icon`]: { cursor: "grab" },
+        [`${token.antCls}-tree-treenode`]: {
+          alignItems: "center",
+          "&:hover": {
+            [`${token.componentCls}-list-item-option`]: {
+              display: "block"
+            }
+          },
+          [`${token.antCls}-tree-checkbox`]: {
+            marginInlineEnd: "4px"
+          },
+          [`${token.antCls}-tree-title`]: {
+            width: "100%"
+          }
+        }
+      }
+    },
+    [`${token.componentCls}-action-rest-button`]: {
+      color: token.colorPrimary
+    },
+    [`${token.componentCls}-list`]: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      paddingBlockStart: 8,
+      [`&${token.componentCls}-list-group`]: {
+        paddingBlockStart: 0
+      },
+      "&-title": {
+        marginBlockStart: "6px",
+        marginBlockEnd: "6px",
+        paddingInlineStart: "24px",
+        color: token.colorTextSecondary,
+        fontSize: "12px"
+      },
+      "&-item": {
+        display: "flex",
+        alignItems: "center",
+        maxHeight: 24,
+        justifyContent: "space-between",
+        "&-title": {
+          flex: 1,
+          maxWidth: 80,
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          wordBreak: "break-all",
+          whiteSpace: "nowrap"
+        },
+        "&-option": {
+          display: "none",
+          float: "right",
+          cursor: "pointer",
+          "> span": {
+            "> span.anticon": {
+              color: token.colorPrimary
+            }
+          },
+          "> span + span": {
+            marginInlineStart: 4
+          }
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ColumnSetting", (token) => {
+    const proToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProStyle(proToken)];
+  });
+}
+export {
+  useStyle
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ParamsType } from '../../../provider';
+import type { ProTableProps } from '../../typing';
+export type DragTableProps<T, U> = {
+    /** @name 拖动排序列key值 如配置此参数，则会在该 key 对应的行显示拖拽排序把手，允许拖拽排序 */
+    dragSortKey?: string;
+    /** @name 渲染自定义拖动排序把手的函数 如配置了 dragSortKey 但未配置此参数，则使用默认把手图标 */
+    dragSortHandlerRender?: (rowData: T, idx: number) => React.ReactNode;
+    /** @name 拖动排序完成回调 */
+    onDragSortEnd?: (beforeIndex: number, afterIndex: number, newDataSource: T[]) => Promise<void> | void;
+} & ProTableProps<T, U>;
+declare function DragSortTable<T extends Record<string, any>, U extends ParamsType = ParamsType, ValueType = 'text'>(props: DragTableProps<T, U>): React.JSX.Element;
+export default DragSortTable;

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

@@ -0,0 +1,146 @@
+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;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/table/components/DragSortTable/index.tsx
+import { HolderOutlined } from "@ant-design/icons";
+import { ConfigProvider } from "antd";
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import React, { useContext, useMemo } from "react";
+import ProTable from "../../Table";
+import { useDragSort } from "../../utils/useDragSort";
+import { useStyle } from "./style";
+function DragSortTable(props) {
+  var _b;
+  const _a = props, {
+    rowKey,
+    dragSortKey,
+    dragSortHandlerRender,
+    onDragSortEnd,
+    onDataSourceChange,
+    defaultData,
+    dataSource: originDataSource,
+    onLoad
+  } = _a, otherProps = __objRest(_a, [
+    "rowKey",
+    "dragSortKey",
+    "dragSortHandlerRender",
+    "onDragSortEnd",
+    "onDataSourceChange",
+    "defaultData",
+    "dataSource",
+    "onLoad"
+  ]);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const [dataSource, setDataSource] = useMergedState(
+    () => defaultData || [],
+    {
+      value: originDataSource,
+      onChange: onDataSourceChange
+    }
+  );
+  const { wrapSSR, hashId } = useStyle(getPrefixCls("pro-table-drag"));
+  const DragHandle = useMemo(() => {
+    return (dragHandleProps) => {
+      const _a2 = dragHandleProps, { rowData, index, className } = _a2, rest = __objRest(_a2, ["rowData", "index", "className"]);
+      const defaultDom = /* @__PURE__ */ React.createElement(
+        HolderOutlined,
+        __spreadProps(__spreadValues({}, rest), {
+          className: `${getPrefixCls("pro-table-drag-icon")} ${className || ""} ${hashId || ""}`.trim()
+        })
+      );
+      const handel = dragSortHandlerRender ? dragSortHandlerRender(
+        dragHandleProps == null ? void 0 : dragHandleProps.rowData,
+        dragHandleProps == null ? void 0 : dragHandleProps.index
+      ) : defaultDom;
+      return /* @__PURE__ */ React.createElement("div", __spreadValues({}, rest), handel);
+    };
+  }, [getPrefixCls]);
+  const { components, DndContext } = useDragSort({
+    dataSource: dataSource == null ? void 0 : dataSource.slice(),
+    dragSortKey,
+    onDragSortEnd,
+    components: props.components,
+    rowKey,
+    DragHandle
+  });
+  const wrapOnload = (ds) => __async(this, null, function* () {
+    setDataSource(ds);
+    return onLoad == null ? void 0 : onLoad(ds);
+  });
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      ProTable,
+      __spreadProps(__spreadValues({}, otherProps), {
+        columns: (_b = otherProps.columns) == null ? void 0 : _b.map((item) => {
+          if (item.dataIndex == dragSortKey || item.key === dragSortKey) {
+            if (!item.render) {
+              item.render = () => null;
+            }
+          }
+          return item;
+        }),
+        onLoad: wrapOnload,
+        rowKey,
+        tableViewRender: (_, defaultDom) => {
+          return /* @__PURE__ */ React.createElement(DndContext, null, defaultDom);
+        },
+        dataSource,
+        components,
+        onDataSourceChange
+      })
+    )
+  );
+}
+var DragSortTable_default = DragSortTable;
+export {
+  DragSortTable_default as default
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface ProListToken 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/DragSortTable/style.js

@@ -0,0 +1,51 @@
+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/DragSortTable/style.ts
+import { useStyle as useAntdStyle } from "../../../provider";
+var genProListStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      "&-icon": {
+        marginInlineEnd: 8,
+        color: token.colorTextSecondary,
+        cursor: "grab !important",
+        padding: 4,
+        fontSize: 12,
+        borderRadius: token.borderRadius,
+        "&:hover": {
+          color: token.colorText,
+          backgroundColor: token.colorInfoBg
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("DragSortTable", (token) => {
+    const proListToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProListStyle(proListToken)];
+  });
+}
+export {
+  useStyle
+};

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

@@ -0,0 +1,24 @@
+import type { MenuItemProps } from 'antd';
+import React from 'react';
+interface MenuItems extends MenuItemProps {
+    name: React.ReactNode;
+    key: string;
+    title?: string;
+}
+export type DropdownProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    menus?: MenuItems[];
+    onSelect?: (key: string) => void;
+    children?: React.ReactNode;
+};
+/**
+ * 一个简单的下拉菜单
+ *
+ * @param param0
+ */
+declare const DropdownButton: React.FC<DropdownProps>;
+declare const TableDropdown: React.FC<DropdownProps> & {
+    Button: typeof DropdownButton;
+};
+export default TableDropdown;

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

@@ -0,0 +1,91 @@
+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/Dropdown/index.tsx
+import { DownOutlined, EllipsisOutlined } from "@ant-design/icons";
+import { Button, ConfigProvider, Dropdown } from "antd";
+import classnames from "classnames";
+import React, { useContext } from "react";
+var DropdownButton = ({
+  children,
+  menus,
+  onSelect,
+  className,
+  style
+}) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const tempClassName = getPrefixCls("pro-table-dropdown");
+  return /* @__PURE__ */ React.createElement(
+    Dropdown,
+    {
+      menu: {
+        onClick: (params) => onSelect && onSelect(params.key),
+        items: menus == null ? void 0 : menus.map((item) => ({
+          label: item.name,
+          key: item.key
+        }))
+      },
+      className: classnames(tempClassName, className)
+    },
+    /* @__PURE__ */ React.createElement(Button, { style }, children, " ", /* @__PURE__ */ React.createElement(DownOutlined, null))
+  );
+};
+var TableDropdown = ({ className: propsClassName, style, onSelect, menus = [], children }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls("pro-table-dropdown");
+  return /* @__PURE__ */ React.createElement(
+    Dropdown,
+    {
+      menu: {
+        onClick: (params) => {
+          onSelect == null ? void 0 : onSelect(params.key);
+        },
+        items: menus.map((_a) => {
+          var _b = _a, { key, name } = _b, rest = __objRest(_b, ["key", "name"]);
+          return __spreadProps(__spreadValues({
+            key
+          }, rest), {
+            title: rest.title,
+            label: name
+          });
+        })
+      },
+      className: classnames(className, propsClassName)
+    },
+    /* @__PURE__ */ React.createElement("a", { style }, children || /* @__PURE__ */ React.createElement(EllipsisOutlined, null))
+  );
+};
+TableDropdown.Button = DropdownButton;
+var Dropdown_default = TableDropdown;
+export {
+  Dropdown_default as default
+};

package/es/table/components/EditableTable/CellEditorTable.d.ts

@@ -0,0 +1,3 @@
+import { ParamsType } from '../../../provider';
+import { EditableProTableProps } from './index';
+export declare function CellEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;

package/es/table/components/EditableTable/CellEditorTable.js

@@ -0,0 +1,74 @@
+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/EditableTable/CellEditorTable.tsx
+import React from "react";
+import EditableProTable from "./index";
+function CellEditorTable(props) {
+  var _a;
+  const [editableKeys, setEditableRowKeys] = React.useState([]);
+  const [dataIndex, setDataIndex] = React.useState([]);
+  const rowKey = props.rowKey || "id";
+  const getRowKey = React.useMemo(() => {
+    if (typeof rowKey === "function") {
+      return rowKey;
+    }
+    return (record, index) => {
+      var _a2;
+      if (index === -1) {
+        return record == null ? void 0 : record[rowKey];
+      }
+      if (props.name) {
+        return index == null ? void 0 : index.toString();
+      }
+      return (_a2 = record == null ? void 0 : record[rowKey]) != null ? _a2 : index == null ? void 0 : index.toString();
+    };
+  }, [props.name, rowKey]);
+  return /* @__PURE__ */ React.createElement(
+    EditableProTable,
+    __spreadProps(__spreadValues({
+      bordered: true,
+      pagination: false
+    }, props), {
+      editable: __spreadValues({
+        editableKeys
+      }, props.editable),
+      columns: ((_a = props == null ? void 0 : props.columns) == null ? void 0 : _a.map((item) => {
+        return __spreadProps(__spreadValues({}, item), {
+          editable: dataIndex.flat(1).join(".") === [item.dataIndex || item.key].flat(1).join(".") ? void 0 : false,
+          onCell: (record, rowIndex) => {
+            return {
+              onDoubleClick: () => {
+                setEditableRowKeys([getRowKey(record, rowIndex)]);
+                setDataIndex([item.dataIndex || item.key]);
+              },
+              onBlur: () => {
+                setEditableRowKeys([]);
+              }
+            };
+          }
+        });
+      })) || []
+    })
+  );
+}
+export {
+  CellEditorTable
+};

package/es/table/components/EditableTable/RowEditorTable.d.ts

@@ -0,0 +1,3 @@
+import { ParamsType } from '../../../provider';
+import { EditableProTableProps } from './index';
+export declare function RowEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;

package/es/table/components/EditableTable/RowEditorTable.js

@@ -0,0 +1,71 @@
+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/EditableTable/RowEditorTable.tsx
+import React from "react";
+import EditableProTable from "./index";
+function RowEditorTable(props) {
+  var _a;
+  const [editableKeys, setEditableRowKeys] = React.useState([]);
+  const rowKey = props.rowKey || "id";
+  const getRowKey = React.useMemo(() => {
+    if (typeof rowKey === "function") {
+      return rowKey;
+    }
+    return (record, index) => {
+      var _a2;
+      if (index === -1) {
+        return record == null ? void 0 : record[rowKey];
+      }
+      if (props.name) {
+        return index == null ? void 0 : index.toString();
+      }
+      return (_a2 = record == null ? void 0 : record[rowKey]) != null ? _a2 : index == null ? void 0 : index.toString();
+    };
+  }, [props.name, rowKey]);
+  return /* @__PURE__ */ React.createElement(
+    EditableProTable,
+    __spreadProps(__spreadValues({
+      bordered: true,
+      pagination: false
+    }, props), {
+      editable: __spreadValues({
+        editableKeys
+      }, props.editable),
+      columns: ((_a = props == null ? void 0 : props.columns) == null ? void 0 : _a.map((item) => {
+        return __spreadProps(__spreadValues({}, item), {
+          onCell: (record, rowIndex) => {
+            return {
+              onDoubleClick: () => {
+                setEditableRowKeys([getRowKey(record, rowIndex)]);
+              },
+              onBlur: () => {
+                setEditableRowKeys([]);
+              }
+            };
+          }
+        });
+      })) || []
+    })
+  );
+}
+export {
+  RowEditorTable
+};