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

package/es/utils/useEditableMap/index.d.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+import type { ActionTypeText, RecordKey, RowEditableConfig } from '../useEditableArray';
+export type AddLineOptions = {
+    position?: 'top' | 'bottom';
+    recordKey?: React.Key;
+};
+/**
+ * 一个方便的hooks 用于维护编辑的状态
+ *
+ * @param props
+ */
+export declare function useEditableMap<RecordType>(props: RowEditableConfig<RecordType> & {
+    dataSource: RecordType;
+    childrenColumnName?: string;
+    setDataSource: (dataSource: RecordType) => void;
+}): {
+    editableKeys: React.Key[];
+    setEditableRowKeys: (updater: React.Key[] | ((origin: React.Key[]) => React.Key[]), ignoreDestroy?: boolean | undefined) => void;
+    isEditable: (recordKey: RecordKey) => boolean;
+    actionRender: (key: RecordKey, config?: ActionTypeText<RecordType>) => React.ReactNode[] | (import("react/jsx-runtime").JSX.Element | undefined)[];
+    startEditable: (recordKey: RecordKey, recordValue?: any) => boolean;
+    cancelEditable: (recordKey: RecordKey) => boolean;
+};
+export type UseEditableMapType = typeof useEditableMap;
+export type UseEditableMapUtilType = ReturnType<UseEditableMapType>;

package/es/utils/useEditableMap/index.js

@@ -0,0 +1,198 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+/* eslint-disable react-hooks/exhaustive-deps */import { message } from 'antd';
+import { get, useMergedState } from 'rc-util';
+import { useCallback, useMemo, useRef } from 'react';
+import { useIntl } from "../../provider";
+import { defaultActionRender, recordKeyToString } from "../useEditableArray";
+
+/**
+ * 显示警告信息
+ * @param messageStr
+ */
+var warning = function warning(messageStr) {
+  return message.warning(messageStr);
+};
+/**
+ * 使用map 来删除数据，性能一般 但是准确率比较高
+ *
+ * @param params
+ * @param action
+ */
+function editableRowByKey(_ref) {
+  var data = _ref.data,
+    row = _ref.row;
+  return _objectSpread(_objectSpread({}, data), row);
+}
+/**
+ * 一个方便的hooks 用于维护编辑的状态
+ *
+ * @param props
+ */
+export function useEditableMap(props) {
+  /**
+   * 点击开始编辑之前的保存数据用的
+   */
+  var preEditRowRef = useRef(null);
+  var editableType = props.type || 'single';
+
+  // Internationalization
+  var intl = useIntl();
+  var _useMergedState = useMergedState([], {
+      value: props.editableKeys,
+      onChange: props.onChange ? function (keys) {
+        var _props$onChange;
+        props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props,
+        // 计算编辑的key
+        keys, props.dataSource);
+      } : undefined
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    editableKeys = _useMergedState2[0],
+    setEditableRowKeys = _useMergedState2[1];
+  /** 一个用来标志的set 提供了方便的 api 来去重什么的 */
+  var editableKeysSet = useMemo(function () {
+    var keys = editableType === 'single' ? editableKeys === null || editableKeys === void 0 ? void 0 : editableKeys.slice(0, 1) : editableKeys;
+    return new Set(keys);
+  }, [(editableKeys || []).join(','), editableType]);
+
+  /** 这行是不是编辑状态 */
+  var isEditable = useCallback(function (recordKey) {
+    if (editableKeys !== null && editableKeys !== void 0 && editableKeys.includes(recordKeyToString(recordKey))) return true;
+    return false;
+  }, [(editableKeys || []).join(',')]);
+
+  /**
+   * 进入编辑状态
+   *
+   * @param recordKey
+   */
+  var startEditable = function startEditable(recordKey, recordValue) {
+    var _ref2;
+    // 如果是单行的话，不允许多行编辑
+    if (editableKeysSet.size > 0 && editableType === 'single') {
+      warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
+      return false;
+    }
+    preEditRowRef.current = (_ref2 = recordValue !== null && recordValue !== void 0 ? recordValue : get(props.dataSource, Array.isArray(recordKey) ? recordKey : [recordKey])) !== null && _ref2 !== void 0 ? _ref2 : null;
+    editableKeysSet.add(recordKeyToString(recordKey));
+    setEditableRowKeys(Array.from(editableKeysSet));
+    return true;
+  };
+
+  /**
+   * 退出编辑状态
+   *
+   * @param recordKey
+   */
+  var cancelEditable = function cancelEditable(recordKey) {
+    // 防止多次渲染
+    editableKeysSet.delete(recordKeyToString(recordKey));
+    setEditableRowKeys(Array.from(editableKeysSet));
+    return true;
+  };
+  var onCancel = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(recordKey, editRow, originRow, newLine) {
+      var _props$onCancel;
+      var success;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return props === null || props === void 0 || (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props, recordKey, editRow, originRow, newLine);
+          case 2:
+            success = _context.sent;
+            if (!(success === false)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return", false);
+          case 5:
+            return _context.abrupt("return", true);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onCancel(_x, _x2, _x3, _x4) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var onSave = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(recordKey, editRow, originRow) {
+      var _props$onSave;
+      var success, actionProps;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return props === null || props === void 0 || (_props$onSave = props.onSave) === null || _props$onSave === void 0 ? void 0 : _props$onSave.call(props, recordKey, editRow, originRow);
+          case 2:
+            success = _context2.sent;
+            if (!(success === false)) {
+              _context2.next = 5;
+              break;
+            }
+            return _context2.abrupt("return", false);
+          case 5:
+            _context2.next = 7;
+            return cancelEditable(recordKey);
+          case 7:
+            actionProps = {
+              data: props.dataSource,
+              row: editRow,
+              key: recordKey,
+              childrenColumnName: props.childrenColumnName || 'children'
+            };
+            props.setDataSource(editableRowByKey(actionProps));
+            return _context2.abrupt("return", true);
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onSave(_x5, _x6, _x7) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var saveText = intl.getMessage('editableTable.action.save', '保存');
+  var deleteText = intl.getMessage('editableTable.action.delete', '删除');
+  var cancelText = intl.getMessage('editableTable.action.cancel', '取消');
+  var actionRender = useCallback(function (key, config) {
+    var renderConfig = _objectSpread({
+      recordKey: key,
+      cancelEditable: cancelEditable,
+      onCancel: onCancel,
+      onSave: onSave,
+      editableKeys: editableKeys,
+      setEditableRowKeys: setEditableRowKeys,
+      saveText: saveText,
+      cancelText: cancelText,
+      preEditRowRef: preEditRowRef,
+      deleteText: deleteText,
+      deletePopconfirmMessage: "".concat(intl.getMessage('deleteThisLine', '删除此项'), "?"),
+      editorType: 'Map'
+    }, config);
+    var renderResult = defaultActionRender(props.dataSource, renderConfig);
+    if (props.actionRender) {
+      return props.actionRender(props.dataSource, renderConfig, {
+        save: renderResult.save,
+        delete: renderResult.delete,
+        cancel: renderResult.cancel
+      });
+    }
+    return [renderResult.save, renderResult.delete, renderResult.cancel];
+  }, [editableKeys && editableKeys.join(','), props.dataSource]);
+  return {
+    editableKeys: editableKeys,
+    setEditableRowKeys: setEditableRowKeys,
+    isEditable: isEditable,
+    actionRender: actionRender,
+    startEditable: startEditable,
+    cancelEditable: cancelEditable
+  };
+}

package/es/utils/useMediaQuery/index.d.ts

@@ -0,0 +1,40 @@
+export declare const MediaQueryEnum: {
+    xs: {
+        maxWidth: number;
+        matchMedia: string;
+    };
+    sm: {
+        minWidth: number;
+        maxWidth: number;
+        matchMedia: string;
+    };
+    md: {
+        minWidth: number;
+        maxWidth: number;
+        matchMedia: string;
+    };
+    lg: {
+        minWidth: number;
+        maxWidth: number;
+        matchMedia: string;
+    };
+    xl: {
+        minWidth: number;
+        maxWidth: number;
+        matchMedia: string;
+    };
+    xxl: {
+        minWidth: number;
+        matchMedia: string;
+    };
+};
+export type MediaQueryKey = keyof typeof MediaQueryEnum;
+/**
+ * loop query screen className
+ * Array.find will throw a error
+ * `Rendered more hooks than during the previous render.`
+ * So should use Array.forEach
+ */
+export declare const getScreenClassName: () => "xxl" | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
+declare const useBreakpoint: () => "xxl" | "xl" | "lg" | "md" | "sm" | "xs" | undefined;
+export { useBreakpoint };

package/es/utils/useMediaQuery/index.js

@@ -0,0 +1,100 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import useMediaQuery from "./query";
+export var MediaQueryEnum = {
+  xs: {
+    maxWidth: 575,
+    matchMedia: '(max-width: 575px)'
+  },
+  sm: {
+    minWidth: 576,
+    maxWidth: 767,
+    matchMedia: '(min-width: 576px) and (max-width: 767px)'
+  },
+  md: {
+    minWidth: 768,
+    maxWidth: 991,
+    matchMedia: '(min-width: 768px) and (max-width: 991px)'
+  },
+  lg: {
+    minWidth: 992,
+    maxWidth: 1199,
+    matchMedia: '(min-width: 992px) and (max-width: 1199px)'
+  },
+  xl: {
+    minWidth: 1200,
+    maxWidth: 1599,
+    matchMedia: '(min-width: 1200px) and (max-width: 1599px)'
+  },
+  xxl: {
+    minWidth: 1600,
+    matchMedia: '(min-width: 1600px)'
+  }
+};
+/**
+ * loop query screen className
+ * Array.find will throw a error
+ * `Rendered more hooks than during the previous render.`
+ * So should use Array.forEach
+ */
+export var getScreenClassName = function getScreenClassName() {
+  var queryKey = undefined;
+  // support ssr
+  if (typeof window === 'undefined') {
+    return queryKey;
+  }
+  var mediaQueryKey = Object.keys(MediaQueryEnum).find(function (key) {
+    var matchMedia = MediaQueryEnum[key].matchMedia;
+    if (window.matchMedia(matchMedia).matches) {
+      return true;
+    }
+    return false;
+  });
+  queryKey = mediaQueryKey;
+  return queryKey;
+};
+var useBreakpoint = function useBreakpoint() {
+  var isMd = useMediaQuery(MediaQueryEnum.md.matchMedia);
+  var isLg = useMediaQuery(MediaQueryEnum.lg.matchMedia);
+  var isXxl = useMediaQuery(MediaQueryEnum.xxl.matchMedia);
+  var isXl = useMediaQuery(MediaQueryEnum.xl.matchMedia);
+  var isSm = useMediaQuery(MediaQueryEnum.sm.matchMedia);
+  var isXs = useMediaQuery(MediaQueryEnum.xs.matchMedia);
+  var _useState = useState(getScreenClassName()),
+    _useState2 = _slicedToArray(_useState, 2),
+    colSpan = _useState2[0],
+    setColSpan = _useState2[1];
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'TEST') {
+      setColSpan(process.env.USE_MEDIA || 'md');
+      return;
+    }
+    if (isXxl) {
+      setColSpan('xxl');
+      return;
+    }
+    if (isXl) {
+      setColSpan('xl');
+      return;
+    }
+    if (isLg) {
+      setColSpan('lg');
+      return;
+    }
+    if (isMd) {
+      setColSpan('md');
+      return;
+    }
+    if (isSm) {
+      setColSpan('sm');
+      return;
+    }
+    if (isXs) {
+      setColSpan('xs');
+      return;
+    }
+    setColSpan('md');
+  }, [isMd, isLg, isXxl, isXl, isSm, isXs]);
+  return colSpan;
+};
+export { useBreakpoint };

package/es/utils/useMediaQuery/query.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(mediaQuery: string): boolean;

package/es/utils/useMediaQuery/query.js

@@ -0,0 +1,25 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLayoutEffect, useState } from 'react';
+export default function useMediaQuery(mediaQuery) {
+  var isSsr = typeof window === 'undefined';
+  var _useState = useState(function () {
+      return isSsr ? false : window.matchMedia(mediaQuery).matches;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  useLayoutEffect(function () {
+    if (isSsr) {
+      return;
+    }
+    var mediaQueryList = window.matchMedia(mediaQuery);
+    var listener = function listener(e) {
+      return setMatches(e.matches);
+    };
+    mediaQueryList.addListener(listener);
+    return function () {
+      return mediaQueryList.removeListener(listener);
+    };
+  }, [mediaQuery]);
+  return matches;
+}

package/es/utils/useMountMergeState/index.d.ts

@@ -0,0 +1,2 @@
+import { useMergedState } from 'rc-util';
+export { useMergedState as useMountMergeState };

package/es/utils/useMountMergeState/index.js

@@ -0,0 +1,2 @@
+import { useMergedState } from 'rc-util';
+export { useMergedState as useMountMergeState };

package/es/version.d.ts

@@ -1,13 +1,3 @@
 export declare const version: {
-    "@ant-design/pro-card": string;
-    "@ant-design/pro-components": string;
-    "@ant-design/pro-descriptions": string;
-    "@ant-design/pro-field": string;
-    "@ant-design/pro-form": string;
-    "@ant-design/pro-layout": string;
-    "@ant-design/pro-list": string;
-    "@ant-design/pro-provider": string;
-    "@ant-design/pro-skeleton": string;
-    "@ant-design/pro-table": string;
-    "@ant-design/pro-utils": string;
+    '@ant-design/pro-components': string;
 };

package/es/version.js

@@ -1,13 +1,3 @@
 export var version = {
-  "@ant-design/pro-card": "2.9.9",
-  "@ant-design/pro-components": "2.8.9",
-  "@ant-design/pro-descriptions": "2.6.9",
-  "@ant-design/pro-field": "3.0.6",
-  "@ant-design/pro-form": "2.31.9",
-  "@ant-design/pro-layout": "7.22.6",
-  "@ant-design/pro-list": "2.6.9",
-  "@ant-design/pro-provider": "2.16.1",
-  "@ant-design/pro-skeleton": "2.2.1",
-  "@ant-design/pro-table": "3.20.1",
-  "@ant-design/pro-utils": "2.17.2"
+  '@ant-design/pro-components': '3.0.0'
 };

package/lib/card/ProCard.d.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import Divider from './components/Divider';
+import type { CardProps, CardType } from './typing';
+export type ProCardProps = CardProps;
+export type ProCardType = CardType & {
+    isProCard: boolean;
+    Divider: typeof Divider;
+    Group: typeof Group;
+};
+declare const Group: (props: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+declare const ProCard: ProCardType;
+export default ProCard;

package/lib/card/ProCard.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _Card = _interopRequireDefault(require("./components/Card"));
+var _Divider = _interopRequireDefault(require("./components/Divider"));
+var _jsxRuntime = require("react/jsx-runtime");
+var Group = function Group(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, (0, _objectSpread2.default)({
+    bodyStyle: {
+      padding: 0
+    }
+  }, props));
+};
+
+// 当前不对底层 Card 做封装，仅挂载子组件，直接导出
+var ProCard = _Card.default;
+ProCard.isProCard = true;
+ProCard.Divider = _Divider.default;
+ProCard.Group = Group;
+var _default = exports.default = ProCard;

package/lib/card/components/Actions/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type ProCardActionsProps = {
+    /**
+     * 自定义前缀
+     *
+     * @ignore
+     */
+    prefixCls?: string;
+    /** 操作按钮 */
+    actions?: React.ReactNode[] | React.ReactNode;
+};
+declare const ProCardActions: React.FC<ProCardActionsProps>;
+export default ProCardActions;

package/lib/card/components/Actions/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+var ProCardActions = function ProCardActions(props) {
+  var actions = props.actions,
+    prefixCls = props.prefixCls;
+  var _useStyle = (0, _style.default)(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  if (Array.isArray(actions) && actions !== null && actions !== void 0 && actions.length) {
+    return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-actions"), hashId),
+      children: actions.map(function (action, index) {
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line react/no-array-index-key
+          (0, _jsxRuntime.jsx)("li", {
+            style: {
+              width: "".concat(100 / actions.length, "%"),
+              padding: 0,
+              margin: 0
+            },
+            className: (0, _classnames.default)("".concat(prefixCls, "-actions-item"), hashId),
+            children: action
+          }, "action-".concat(index))
+        );
+      })
+    }));
+  }
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-actions"), hashId),
+    children: actions
+  }));
+};
+var _default = exports.default = ProCardActions;

package/lib/card/components/Actions/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/lib/card/components/Actions/style.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useStyle;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _provider = require("../../../provider");
+var genActionsStyle = function genActionsStyle(token) {
+  var componentCls = token.componentCls,
+    antCls = token.antCls;
+  return (0, _defineProperty2.default)({}, "".concat(componentCls, "-actions"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    marginBlock: 0,
+    marginInline: 0,
+    paddingBlock: 0,
+    paddingInline: 0,
+    listStyle: 'none',
+    display: 'flex',
+    gap: token.marginXS,
+    background: token.colorBgContainer,
+    borderBlockStart: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit),
+    minHeight: 42
+  }, "& > *", {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    display: 'flex',
+    cursor: 'pointer',
+    color: token.colorTextSecondary,
+    transition: 'color 0.3s',
+    '&:hover': {
+      color: token.colorPrimaryHover
+    }
+  }), "& > li > div", {
+    flex: 1,
+    width: '100%',
+    marginBlock: token.marginSM,
+    marginInline: 0,
+    color: token.colorTextSecondary,
+    textAlign: 'center',
+    a: {
+      color: token.colorTextSecondary,
+      transition: 'color 0.3s',
+      '&:hover': {
+        color: token.colorPrimaryHover
+      }
+    },
+    div: (0, _defineProperty2.default)((0, _defineProperty2.default)({
+      position: 'relative',
+      display: 'block',
+      minWidth: 32,
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight,
+      cursor: 'pointer',
+      '&:hover': {
+        color: token.colorPrimaryHover,
+        transition: 'color 0.3s'
+      }
+    }, "a:not(".concat(antCls, "-btn),\n            > .anticon"), {
+      display: 'inline-block',
+      width: '100%',
+      color: token.colorTextSecondary,
+      lineHeight: '22px',
+      transition: 'color 0.3s',
+      '&:hover': {
+        color: token.colorPrimaryHover
+      }
+    }), '.anticon', {
+      fontSize: token.cardActionIconSize,
+      lineHeight: '22px'
+    }),
+    '&:not(:last-child)': {
+      borderInlineEnd: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
+    }
+  }));
+};
+function useStyle(prefixCls) {
+  return (0, _provider.useStyle)('ProCardActions', function (token) {
+    var proCardActionsToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
+      componentCls: ".".concat(prefixCls),
+      cardActionIconSize: 16
+    });
+    return [genActionsStyle(proCardActionsToken)];
+  });
+}

package/lib/card/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CardProps } from '../../typing';
+declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<unknown>>;
+export default Card;