@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/es/table/utils/useDragSort.js

@@ -1,8 +1,3 @@
-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';
@@ -11,7 +6,7 @@ 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({
+const SortableItemContextValue = /*#__PURE__*/createContext({
   handle: null
 });
 
@@ -22,33 +17,38 @@ var SortableItemContextValue = /*#__PURE__*/createContext({
  * @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({
+const SortableRow = props => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id: props.id
+  });
+  const style = {
     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);
+    transition,
+    ...props?.style
+  };
+  const {
+    DragHandle,
+    dragSortKey,
+    ...rest
+  } = props;
   if (dragSortKey) {
-    var doms = [];
-    React.Children.forEach(rest.children, function (child, index) {
+    const doms = [];
+    React.Children.forEach(rest.children, (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))
+            handle: /*#__PURE__*/_jsx(DragHandle, {
+              rowData: child?.props?.record,
+              index: child?.props?.index,
+              ...listeners,
+              ...attributes
+            })
           },
           children: child
         }, child.key || index));
@@ -56,28 +56,36 @@ var SortableRow = function SortableRow(props) {
       }
       doms.push(child);
     });
-    return /*#__PURE__*/_jsx("tr", _objectSpread(_objectSpread({}, rest), {}, {
+    return /*#__PURE__*/_jsx("tr", {
+      ...rest,
       ref: setNodeRef,
       style: style,
       children: doms
-    }));
+    });
   }
-  return /*#__PURE__*/_jsx("tr", _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
+  return /*#__PURE__*/_jsx("tr", {
+    ...rest,
     ref: setNodeRef,
-    style: style
-  }, attributes), listeners));
+    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;
+const SortableItemCell = /*#__PURE__*/React.memo(props => {
+  const {
+    dragSortKey,
+    ...rest
+  } = props;
+  const {
+    handle
+  } = useContext(SortableItemContextValue);
   if (handle) {
-    return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({}, rest), {}, {
+    return /*#__PURE__*/_jsx("td", {
+      ...rest,
       children: /*#__PURE__*/_jsxs("div", {
         style: {
           display: 'flex',
@@ -85,74 +93,73 @@ var SortableItemCell = /*#__PURE__*/React.memo(function (props) {
         },
         children: [handle, " ", rest.children]
       })
-    }));
+    });
   }
-  return /*#__PURE__*/_jsx("td", _objectSpread({}, rest));
+  return /*#__PURE__*/_jsx("td", {
+    ...rest
+  });
+});
+const SortContainer = p => /*#__PURE__*/_jsx("tbody", {
+  ...p
 });
-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 || []);
+  const {
+    dataSource = [],
+    onDragSortEnd,
+    DragHandle,
+    dragSortKey
+  } = props;
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(MouseSensor));
+  const handleDragEnd = useCallback(event => {
+    const {
+      active,
+      over
+    } = event;
+    if (over?.id?.toString() && active.id !== over?.id) {
+      const newData = arrayMove(dataSource || [], parseInt(active.id), parseInt(over.id));
+      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));
+  const DraggableContainer = useRefFunction(p => /*#__PURE__*/_jsx(SortableContext, {
+    items: dataSource.map((_, index) => index?.toString()),
+    strategy: verticalListSortingStrategy,
+    children: /*#__PURE__*/_jsx(SortContainer, {
+      ...p
+    })
+  }));
+  const DraggableBodyRow = useRefFunction(p => {
+    const {
+      ...restProps
+    } = 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({
+    const index = dataSource.findIndex(item => item[props.rowKey ?? 'index'] === restProps['data-row-key'])?.toString();
+    return /*#__PURE__*/_jsx(SortableRow, {
       id: index,
       dragSortKey: dragSortKey,
-      DragHandle: DragHandle
-    }, restProps), index);
+      DragHandle: DragHandle,
+      ...restProps
+    }, index);
   });
-  var components = props.components || {};
+  const components = props.components || {};
   if (dragSortKey) {
-    var _props$components;
-    components.body = _objectSpread({
+    components.body = {
       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
-      });
+      cell: SortableItemCell,
+      ...(props.components?.body || {})
     };
+  }
+  const memoDndContext = useMemo(() => contextProps => {
+    return /*#__PURE__*/_jsx(DndContext, {
+      modifiers: [restrictToVerticalAxis],
+      sensors: sensors,
+      collisionDetection: rectIntersection,
+      onDragEnd: handleDragEnd,
+      children: contextProps.children
+    });
   }, [handleDragEnd, sensors]);
   return {
     DndContext: memoDndContext,
-    components: components
+    components
   };
 }

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

@@ -0,0 +1,6 @@
+import type { PageInfo, UseFetchProps } from '../typing';
+/**
+ * 专门用于处理分页信息更新的 Hook
+ * 解决了 total 缺失导致的死循环问题
+ */
+export declare function usePageInfo(options: UseFetchProps): readonly [PageInfo, (changePageInfo: Partial<PageInfo>) => void];

package/es/table/utils/usePageInfo.js

@@ -0,0 +1,55 @@
+import { useControlledState } from '@rc-component/util';
+import { useCallback } from 'react';
+import { useRefFunction } from "../../utils";
+/**
+ * 组合用户的配置和默认值
+ *
+ * @param param0
+ */
+const mergeOptionAndPageInfo = ({
+  pageInfo
+}) => {
+  if (pageInfo) {
+    const {
+      current,
+      defaultCurrent,
+      pageSize,
+      defaultPageSize
+    } = pageInfo;
+    return {
+      current: current || defaultCurrent || 1,
+      total: 0,
+      pageSize: pageSize || defaultPageSize || 20
+    };
+  }
+  return {
+    current: 1,
+    total: 0,
+    pageSize: 20
+  };
+};
+
+/**
+ * 专门用于处理分页信息更新的 Hook
+ * 解决了 total 缺失导致的死循环问题
+ */
+export function usePageInfo(options) {
+  const [pageInfo, setPageInfoStateInner] = useControlledState(() => mergeOptionAndPageInfo(options), undefined);
+  const setPageInfoState = useCallback(updater => {
+    setPageInfoStateInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      options?.onPageInfoChange?.(next);
+      return next;
+    });
+  }, [options?.onPageInfoChange]);
+  const setPageInfo = useRefFunction(changePageInfo => {
+    const newPageInfo = {
+      ...pageInfo,
+      ...changePageInfo
+    };
+    if (newPageInfo.current !== pageInfo.current || newPageInfo.pageSize !== pageInfo.pageSize || newPageInfo.total !== pageInfo.total) {
+      setPageInfoState(newPageInfo);
+    }
+  });
+  return [pageInfo, setPageInfo];
+}

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

@@ -1,29 +1,33 @@
 import { Button, ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 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, {
+const DropdownFooter = props => {
+  const intl = useIntl();
+  const {
+    onClear,
+    onConfirm,
+    disabled,
+    footerRender
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-core-dropdown-footer');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const defaultFooter = [/*#__PURE__*/_jsx(Button, {
     style: {
       visibility: onClear ? 'visible' : 'hidden'
     },
     type: "link",
     size: "small",
     disabled: disabled,
-    onClick: function onClick(e) {
+    onClick: e => {
       if (onClear) {
         onClear(e);
       }
@@ -38,15 +42,13 @@ var DropdownFooter = function DropdownFooter(props) {
     disabled: disabled,
     children: intl.getMessage('form.lightFilter.confirm', '确认')
   }, "confirm")];
-  if (footerRender === false || (footerRender === null || footerRender === void 0 ? void 0 : footerRender(onConfirm, onClear)) === false) {
+  if (footerRender === false || footerRender?.(onConfirm, onClear) === false) {
     return null;
   }
-  var renderDom = (footerRender === null || footerRender === void 0 ? void 0 : footerRender(onConfirm, onClear)) || defaultFooter;
+  const renderDom = 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();
-    },
+    className: clsx(prefixCls, hashId),
+    onClick: e => e.target.getAttribute('data-type') !== 'confirm' && e.stopPropagation(),
     children: renderDom
   }));
 };

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

@@ -4,6 +4,6 @@ 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;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

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

@@ -1,21 +1,22 @@
-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)
-  });
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingBlock: 8,
+      paddingInlineStart: 8,
+      paddingInlineEnd: 8,
+      borderBlockStart: `1px solid ${token.colorSplit}`
+    }
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('DropdownFooter', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('DropdownFooter', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

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

@@ -1,56 +1,33 @@
-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;
+class ErrorBoundary extends React.Component {
+  state = {
+    hasError: false,
+    errorInfo: ''
+  };
+  static getDerivedStateFromError(error) {
+    console.warn('ErrorBoundary caught an error', error);
+    return {
+      hasError: true,
+      errorInfo: error.message
+    };
   }
-  _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
-      };
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    // 这里可以添加错误上报逻辑
+    console.warn('ErrorBoundary caught an error', error, errorInfo);
+  }
+  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 ErrorBoundary;
-}(React.Component);
+    return this.props.children;
+  }
+}
 export { ErrorBoundary };