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

package/es/table/utils/index.js

@@ -0,0 +1,242 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+/**
+ * 检查值是否存在 为了 避开 0 和 false
+ *
+ * @param value
+ */
+export var checkUndefinedOrNull = function checkUndefinedOrNull(value) {
+  return value !== undefined && value !== null;
+};
+
+/**
+ * 合并用户 props 和 预设的 props
+ *
+ * @param pagination
+ * @param action
+ * @param intl
+ */
+export function mergePagination(pagination, pageInfo, intl) {
+  var _pagination$current, _pagination$pageSize;
+  if (pagination === false) {
+    return false;
+  }
+  var total = pageInfo.total,
+    current = pageInfo.current,
+    pageSize = pageInfo.pageSize,
+    setPageInfo = pageInfo.setPageInfo;
+  var defaultPagination = _typeof(pagination) === 'object' ? pagination : {};
+  return _objectSpread(_objectSpread({
+    showTotal: function showTotal(all, range) {
+      return "".concat(intl.getMessage('pagination.total.range', '第'), " ").concat(range[0], "-").concat(range[1], " ").concat(intl.getMessage('pagination.total.total', '条/总共'), " ").concat(all, " ").concat(intl.getMessage('pagination.total.item', '条'));
+    },
+    total: total
+  }, defaultPagination), {}, {
+    current: pagination !== true && pagination ? (_pagination$current = pagination.current) !== null && _pagination$current !== void 0 ? _pagination$current : current : current,
+    pageSize: pagination !== true && pagination ? (_pagination$pageSize = pagination.pageSize) !== null && _pagination$pageSize !== void 0 ? _pagination$pageSize : pageSize : pageSize,
+    onChange: function onChange(page, newPageSize) {
+      var _ref = pagination,
+        onChange = _ref.onChange;
+      onChange === null || onChange === void 0 || onChange(page, newPageSize || 20);
+      // pageSize 改变之后就没必要切换页码
+      if (newPageSize !== pageSize || current !== page) {
+        setPageInfo({
+          pageSize: newPageSize,
+          current: page
+        });
+      }
+    }
+  });
+}
+
+/**
+ * 获取用户的 action 信息
+ *
+ * @param actionRef
+ * @param counter
+ * @param onCleanSelected
+ */
+export function useActionType(ref, action, props) {
+  /** 这里生成action的映射，保证 action 总是使用的最新 只需要渲染一次即可 */
+  var userAction = _objectSpread(_objectSpread({}, props.editableUtils), {}, {
+    pageInfo: action.pageInfo,
+    reload: function () {
+      var _reload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(resetPageIndex) {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!resetPageIndex) {
+                _context.next = 3;
+                break;
+              }
+              _context.next = 3;
+              return action.setPageInfo({
+                current: 1
+              });
+            case 3:
+              _context.next = 5;
+              return action === null || action === void 0 ? void 0 : action.reload();
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function reload(_x) {
+        return _reload.apply(this, arguments);
+      }
+      return reload;
+    }(),
+    reloadAndRest: function () {
+      var _reloadAndRest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              // reload 之后大概率会切换数据，清空一下选择。
+              props.onCleanSelected();
+              _context2.next = 3;
+              return action.setPageInfo({
+                current: 1
+              });
+            case 3:
+              _context2.next = 5;
+              return action === null || action === void 0 ? void 0 : action.reload();
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function reloadAndRest() {
+        return _reloadAndRest.apply(this, arguments);
+      }
+      return reloadAndRest;
+    }(),
+    reset: function () {
+      var _reset = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var _action$reset;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return props.resetAll();
+            case 2:
+              _context3.next = 4;
+              return action === null || action === void 0 || (_action$reset = action.reset) === null || _action$reset === void 0 ? void 0 : _action$reset.call(action);
+            case 4:
+              _context3.next = 6;
+              return action === null || action === void 0 ? void 0 : action.reload();
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      function reset() {
+        return _reset.apply(this, arguments);
+      }
+      return reset;
+    }(),
+    fullScreen: function fullScreen() {
+      return props.fullScreen();
+    },
+    clearSelected: function clearSelected() {
+      return props.onCleanSelected();
+    },
+    setPageInfo: function setPageInfo(rest) {
+      return action.setPageInfo(rest);
+    }
+  });
+  // eslint-disable-next-line no-param-reassign
+  ref.current = userAction;
+}
+/**
+ * 一个转化的 pipeline 列表
+ *
+ * @param data
+ * @param pipeline
+ */
+export function postDataPipeline(data, pipeline) {
+  if (pipeline.filter(function (item) {
+    return item;
+  }).length < 1) {
+    return data;
+  }
+  return pipeline.reduce(function (pre, postData) {
+    return postData(pre);
+  }, data);
+}
+export var isBordered = function isBordered(borderType, border) {
+  if (border === undefined) {
+    return false;
+  }
+  if (typeof border === 'boolean') {
+    return border;
+  }
+  return border[borderType];
+};
+export var isMergeCell = function isMergeCell(dom // 如果是合并单元格的，直接返回对象
+) {
+  var _dom$props;
+  return dom && _typeof(dom) === 'object' && (dom === null || dom === void 0 || (_dom$props = dom.props) === null || _dom$props === void 0 ? void 0 : _dom$props.colSpan);
+};
+
+/**
+ * 根据 key 和 dataIndex 生成唯一 id
+ *
+ * @param key 用户设置的 key
+ * @param dataIndex 在对象中的数据
+ * @param index 序列号，理论上唯一
+ */
+export var genColumnKey = function genColumnKey(key, index) {
+  if (key) {
+    return Array.isArray(key) ? key.join('-') : key.toString();
+  }
+  return "".concat(index);
+};
+
+/**
+ * 将 ProTable - column - dataIndex 转为字符串形式
+ *
+ * @param dataIndex Column 中的 dataIndex
+ */
+function parseDataIndex(dataIndex) {
+  if (Array.isArray(dataIndex)) {
+    return dataIndex.join(',');
+  }
+  return dataIndex === null || dataIndex === void 0 ? void 0 : dataIndex.toString();
+}
+
+/**
+ * 从 ProColumns 数组中取出默认的排序和筛选数据
+ *
+ * @param columns ProColumns
+ */
+export function parseDefaultColumnConfig(columns) {
+  var filter = {};
+  var sort = {};
+  columns.forEach(function (column) {
+    // 转换 dataIndex
+    var dataIndex = parseDataIndex(column.dataIndex);
+    if (!dataIndex) {
+      return;
+    }
+    // 当 column 启用 filters 功能时，取出默认的筛选值
+    if (column.filters) {
+      var defaultFilteredValue = column.defaultFilteredValue;
+      if (defaultFilteredValue !== undefined) {
+        filter[dataIndex] = column.defaultFilteredValue;
+      }
+    }
+    // 当 column 启用 sorter 功能时，取出默认的排序值
+    if (column.sorter && column.defaultSortOrder) {
+      sort[dataIndex] = column.defaultSortOrder;
+    }
+  });
+  return {
+    sort: sort,
+    filter: filter
+  };
+}

package/es/table/utils/useDragSort.d.ts

@@ -0,0 +1,14 @@
+import type { TableComponents } from 'rc-table/es/interface';
+import React from 'react';
+export interface UseDragSortOptions<T> {
+    dataSource?: T[];
+    onDragSortEnd?: (beforeIndex: number, afterIndex: number, newDataSource: T[]) => Promise<void> | void;
+    dragSortKey?: string;
+    components?: TableComponents<T>;
+    rowKey: any;
+    DragHandle: React.FC<any>;
+}
+export declare function useDragSort<T>(props: UseDragSortOptions<T>): {
+    DndContext: (contextProps: any) => import("react/jsx-runtime").JSX.Element;
+    components: TableComponents<T>;
+};

package/es/table/utils/useDragSort.js

@@ -0,0 +1,158 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["DragHandle", "dragSortKey"],
+  _excluded2 = ["dragSortKey"];
+import { DndContext, MouseSensor, PointerSensor, rectIntersection, useSensor, useSensors } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import { useRefFunction } from "../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SortableItemContextValue = /*#__PURE__*/createContext({
+  handle: null
+});
+
+/**
+ * 拖拽排序表格的行，
+ * 如果有 DragHandle 回给 dragSortKey 所在的行注入 provide 和 handle
+ * 如果没有整个行都支持拖拽
+ * @param props
+ * @returns
+ */
+var SortableRow = function SortableRow(props) {
+  var _useSortable = useSortable({
+      id: props.id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var style = _objectSpread({
+    transform: CSS.Transform.toString(transform),
+    transition: transition
+  }, props === null || props === void 0 ? void 0 : props.style);
+  var DragHandle = props.DragHandle,
+    dragSortKey = props.dragSortKey,
+    rest = _objectWithoutProperties(props, _excluded);
+  if (dragSortKey) {
+    var doms = [];
+    React.Children.forEach(rest.children, function (child, index) {
+      if (child.key === dragSortKey) {
+        var _child$props, _child$props2;
+        doms.push( /*#__PURE__*/_jsx(SortableItemContextValue.Provider, {
+          value: {
+            handle: /*#__PURE__*/_jsx(DragHandle, _objectSpread(_objectSpread({
+              rowData: child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.record,
+              index: child === null || child === void 0 || (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.index
+            }, listeners), attributes))
+          },
+          children: child
+        }, child.key || index));
+        return;
+      }
+      doms.push(child);
+    });
+    return /*#__PURE__*/_jsx("tr", _objectSpread(_objectSpread({}, rest), {}, {
+      ref: setNodeRef,
+      style: style,
+      children: doms
+    }));
+  }
+  return /*#__PURE__*/_jsx("tr", _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
+    ref: setNodeRef,
+    style: style
+  }, attributes), listeners));
+};
+
+/**
+ * 拖拽排序表格的 cell，用与判断要不要展示 handle
+ */
+var SortableItemCell = /*#__PURE__*/React.memo(function (props) {
+  var dragSortKey = props.dragSortKey,
+    rest = _objectWithoutProperties(props, _excluded2);
+  var _useContext = useContext(SortableItemContextValue),
+    handle = _useContext.handle;
+  if (handle) {
+    return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: [handle, " ", rest.children]
+      })
+    }));
+  }
+  return /*#__PURE__*/_jsx("td", _objectSpread({}, rest));
+});
+var SortContainer = function SortContainer(p) {
+  return /*#__PURE__*/_jsx("tbody", _objectSpread({}, p));
+};
+export function useDragSort(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    onDragSortEnd = props.onDragSortEnd,
+    DragHandle = props.DragHandle,
+    dragSortKey = props.dragSortKey;
+  var sensors = useSensors(useSensor(PointerSensor), useSensor(MouseSensor));
+  var handleDragEnd = useCallback(function (event) {
+    var _over$id;
+    var active = event.active,
+      over = event.over;
+    if (over !== null && over !== void 0 && (_over$id = over.id) !== null && _over$id !== void 0 && _over$id.toString() && active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+      var newData = arrayMove(dataSource || [], parseInt(active.id), parseInt(over.id));
+      onDragSortEnd === null || onDragSortEnd === void 0 || onDragSortEnd(parseInt(active.id), parseInt(over.id), newData || []);
+    }
+  }, [dataSource, onDragSortEnd]);
+  var DraggableContainer = useRefFunction(function (p) {
+    return /*#__PURE__*/_jsx(SortableContext, {
+      items: dataSource.map(function (_, index) {
+        return index === null || index === void 0 ? void 0 : index.toString();
+      }),
+      strategy: verticalListSortingStrategy,
+      children: /*#__PURE__*/_jsx(SortContainer, _objectSpread({}, p))
+    });
+  });
+  var DraggableBodyRow = useRefFunction(function (p) {
+    var _dataSource$findIndex;
+    var restProps = Object.assign({}, (_objectDestructuringEmpty(p), p));
+    // function findIndex base on Table rowKey props and should always be a right array index
+    var index = (_dataSource$findIndex = dataSource.findIndex(function (item) {
+      var _props$rowKey;
+      return item[(_props$rowKey = props.rowKey) !== null && _props$rowKey !== void 0 ? _props$rowKey : 'index'] === restProps['data-row-key'];
+    })) === null || _dataSource$findIndex === void 0 ? void 0 : _dataSource$findIndex.toString();
+    return /*#__PURE__*/_jsx(SortableRow, _objectSpread({
+      id: index,
+      dragSortKey: dragSortKey,
+      DragHandle: DragHandle
+    }, restProps), index);
+  });
+  var components = props.components || {};
+  if (dragSortKey) {
+    var _props$components;
+    components.body = _objectSpread({
+      wrapper: DraggableContainer,
+      row: DraggableBodyRow,
+      cell: SortableItemCell
+    }, ((_props$components = props.components) === null || _props$components === void 0 ? void 0 : _props$components.body) || {});
+  }
+  var memoDndContext = useMemo(function () {
+    return function (contextProps) {
+      return /*#__PURE__*/_jsx(DndContext, {
+        modifiers: [restrictToVerticalAxis],
+        sensors: sensors,
+        collisionDetection: rectIntersection,
+        onDragEnd: handleDragEnd,
+        children: contextProps.children
+      });
+    };
+  }, [handleDragEnd, sensors]);
+  return {
+    DndContext: memoDndContext,
+    components: components
+  };
+}

package/es/utils/components/DropdownFooter/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type LightFilterFooterRender = ((onConfirm?: (e?: React.MouseEvent) => void, onClear?: (e?: React.MouseEvent) => void) => JSX.Element | false) | false;
+type OnClick = (e?: React.MouseEvent) => void;
+export type DropdownFooterProps = {
+    onClear?: OnClick;
+    onConfirm?: OnClick;
+    disabled?: boolean;
+    footerRender?: LightFilterFooterRender;
+    children?: React.ReactNode;
+};
+declare const DropdownFooter: React.FC<DropdownFooterProps>;
+export { DropdownFooter };

package/es/utils/components/DropdownFooter/index.js

@@ -0,0 +1,53 @@
+import { Button, ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { useIntl } from "../../../provider";
+import { useStyle } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DropdownFooter = function DropdownFooter(props) {
+  var intl = useIntl();
+  var onClear = props.onClear,
+    onConfirm = props.onConfirm,
+    disabled = props.disabled,
+    footerRender = props.footerRender;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('pro-core-dropdown-footer');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var defaultFooter = [/*#__PURE__*/_jsx(Button, {
+    style: {
+      visibility: onClear ? 'visible' : 'hidden'
+    },
+    type: "link",
+    size: "small",
+    disabled: disabled,
+    onClick: function onClick(e) {
+      if (onClear) {
+        onClear(e);
+      }
+      e.stopPropagation();
+    },
+    children: intl.getMessage('form.lightFilter.clear', '清除')
+  }, "clear"), /*#__PURE__*/_jsx(Button, {
+    "data-type": "confirm",
+    type: "primary",
+    size: "small",
+    onClick: onConfirm,
+    disabled: disabled,
+    children: intl.getMessage('form.lightFilter.confirm', '确认')
+  }, "confirm")];
+  if (footerRender === false || (footerRender === null || footerRender === void 0 ? void 0 : footerRender(onConfirm, onClear)) === false) {
+    return null;
+  }
+  var renderDom = (footerRender === null || footerRender === void 0 ? void 0 : footerRender(onConfirm, onClear)) || defaultFooter;
+  return wrapSSR( /*#__PURE__*/_jsx("div", {
+    className: classNames(prefixCls, hashId),
+    onClick: function onClick(e) {
+      return e.target.getAttribute('data-type') !== 'confirm' && e.stopPropagation();
+    },
+    children: renderDom
+  }));
+};
+export { DropdownFooter };

package/es/utils/components/DropdownFooter/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/utils/components/DropdownFooter/style.js

@@ -0,0 +1,21 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useStyle as useAntdStyle } from "../../../provider";
+var genProStyle = function genProStyle(token) {
+  return _defineProperty({}, token.componentCls, {
+    display: 'flex',
+    justifyContent: 'space-between',
+    paddingBlock: 8,
+    paddingInlineStart: 8,
+    paddingInlineEnd: 8,
+    borderBlockStart: "1px solid ".concat(token.colorSplit)
+  });
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('DropdownFooter', function (token) {
+    var proToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genProStyle(proToken)];
+  });
+}

package/es/utils/components/ErrorBoundary/index.d.ts

@@ -0,0 +1,20 @@
+import type { ErrorInfo } from 'react';
+import React from 'react';
+declare class ErrorBoundary extends React.Component<{
+    children?: React.ReactNode;
+}, {
+    hasError: boolean;
+    errorInfo: string;
+}> {
+    state: {
+        hasError: boolean;
+        errorInfo: string;
+    };
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        errorInfo: string;
+    };
+    componentDidCatch(error: any, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export { ErrorBoundary };

package/es/utils/components/ErrorBoundary/index.js

@@ -0,0 +1,56 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Result } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+  var _super = _createSuper(ErrorBoundary);
+  function ErrorBoundary() {
+    var _this;
+    _classCallCheck(this, ErrorBoundary);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      hasError: false,
+      errorInfo: ''
+    });
+    return _this;
+  }
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // You can also log the error to an error reporting service
+      // 这里可以添加错误上报逻辑
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        // You can render any custom fallback UI
+        return /*#__PURE__*/_jsx(Result, {
+          status: "error",
+          title: "Something went wrong.",
+          extra: this.state.errorInfo
+        });
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true,
+        errorInfo: error.message
+      };
+    }
+  }]);
+  return ErrorBoundary;
+}(React.Component);
+export { ErrorBoundary };

package/es/utils/components/FieldLabel/index.d.ts

@@ -0,0 +1,24 @@
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import React from 'react';
+export type FieldLabelProps = {
+    label?: React.ReactNode;
+    value?: any;
+    disabled?: boolean;
+    onClear?: () => void;
+    size?: SizeType;
+    ellipsis?: boolean;
+    placeholder?: React.ReactNode;
+    className?: string;
+    formatter?: (value: any) => React.ReactNode;
+    style?: React.CSSProperties;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+    allowClear?: boolean;
+    downIcon?: React.ReactNode | false;
+    onClick?: () => void;
+    valueMaxLength?: number;
+    /**
+     * 点击标签的事件，用来唤醒 down menu 状态
+     */
+    onLabelClick?: () => void;
+};
+export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<any>>;