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

package/es/field/components/Cascader/index.d.ts

@@ -11,7 +11,7 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     options?: (string | number | import("antd").CheckboxOptionType<any>)[] | undefined;
     radioType?: "button" | "radio" | undefined;
     placeholder?: string | undefined;
-    variant?: "filled" | "outlined" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
 } & {
     text: string;
     valueEnum?: import("src/utils/typing").ProFieldValueEnumType | undefined;
@@ -19,9 +19,8 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "filled" | "outlined" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
     id?: string | undefined;
-    children?: React.ReactNode;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Cascader/index.js

@@ -1,10 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["radioType", "placeholder", "formItemRender", "mode", "render", "label", "light", "variant"];
 import { LoadingOutlined } from '@ant-design/icons';
 import { Cascader, ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useIntl } from "../../../provider";
 import { FieldLabel, objectToMap, proFieldParsingText } from "../../../utils";
@@ -17,131 +13,116 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param param0
  * @param ref
  */
-var FieldCascader = function FieldCascader(_ref, ref) {
-  var _rest$fieldProps2;
-  var radioType = _ref.radioType,
-    placeholder = _ref.placeholder,
-    formItemRender = _ref.formItemRender,
-    mode = _ref.mode,
-    render = _ref.render,
-    label = _ref.label,
-    light = _ref.light,
-    variant = _ref.variant,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var layoutClassName = getPrefixCls('pro-field-cascader');
-  var _useFieldFetchData = useFieldFetchData(rest),
-    _useFieldFetchData2 = _slicedToArray(_useFieldFetchData, 3),
-    loading = _useFieldFetchData2[0],
-    options = _useFieldFetchData2[1],
-    _fetchData = _useFieldFetchData2[2];
-  var intl = useIntl();
-  var cascaderRef = useRef();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  useImperativeHandle(ref, function () {
-    return _objectSpread(_objectSpread({}, cascaderRef.current || {}), {}, {
-      fetchData: function fetchData(keyWord) {
-        return _fetchData(keyWord);
-      }
-    });
-  }, [_fetchData]);
-  var optionsValueEnum = useMemo(function () {
-    var _rest$fieldProps;
+const FieldCascader = ({
+  radioType,
+  placeholder,
+  formItemRender,
+  mode,
+  render,
+  label,
+  light,
+  variant,
+  ...rest
+}, ref) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const layoutClassName = getPrefixCls('pro-field-cascader');
+  const [loading, options, fetchData] = useFieldFetchData(rest);
+  const intl = useIntl();
+  const cascaderRef = useRef();
+  const [open, setOpen] = useState(false);
+  useImperativeHandle(ref, () => ({
+    ...(cascaderRef.current || {}),
+    fetchData: keyWord => fetchData(keyWord)
+  }), [fetchData]);
+  const optionsValueEnum = useMemo(() => {
     if (mode !== 'read') return;
     /**
      * Support cascader fieldNames
      *
      * @see https://ant.design/components/cascader-cn/#header
      */
-    var _ref2 = ((_rest$fieldProps = rest.fieldProps) === null || _rest$fieldProps === void 0 ? void 0 : _rest$fieldProps.fieldNames) || {},
-      _ref2$value = _ref2.value,
-      valuePropsName = _ref2$value === void 0 ? 'value' : _ref2$value,
-      _ref2$label = _ref2.label,
-      labelPropsName = _ref2$label === void 0 ? 'label' : _ref2$label,
-      _ref2$children = _ref2.children,
-      childrenPropsName = _ref2$children === void 0 ? 'children' : _ref2$children;
-    var valuesMap = new Map();
-    var traverseOptions = function traverseOptions(_options) {
-      if (!(_options !== null && _options !== void 0 && _options.length)) {
+    const {
+      value: valuePropsName = 'value',
+      label: labelPropsName = 'label',
+      children: childrenPropsName = 'children'
+    } = rest.fieldProps?.fieldNames || {};
+    const valuesMap = new Map();
+    const traverseOptions = _options => {
+      if (!_options?.length) {
         return valuesMap;
       }
-      var length = _options.length;
-      var i = 0;
+      const length = _options.length;
+      let i = 0;
       while (i < length) {
-        var cur = _options[i++];
+        const cur = _options[i++];
         valuesMap.set(cur[valuePropsName], cur[labelPropsName]);
         traverseOptions(cur[childrenPropsName]);
       }
       return valuesMap;
     };
     return traverseOptions(options);
-  }, [mode, options, (_rest$fieldProps2 = rest.fieldProps) === null || _rest$fieldProps2 === void 0 ? void 0 : _rest$fieldProps2.fieldNames]);
+  }, [mode, options, rest.fieldProps?.fieldNames]);
   if (mode === 'read') {
-    var dom = /*#__PURE__*/_jsx(_Fragment, {
+    const dom = /*#__PURE__*/_jsx(_Fragment, {
       children: proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum))
     });
     if (render) {
-      var _render;
-      return (_render = render(rest.text, _objectSpread({
-        mode: mode
-      }, rest.fieldProps), dom)) !== null && _render !== void 0 ? _render : null;
+      return render(rest.text, {
+        mode,
+        ...rest.fieldProps
+      }, dom) ?? null;
     }
     return dom;
   }
   if (mode === 'edit') {
-    var _rest$fieldProps3, _rest$fieldProps5;
-    var _dom = /*#__PURE__*/_jsx(Cascader, _objectSpread(_objectSpread({
-      variant: !light ? 'outlined' : 'borderless',
+    let dom = /*#__PURE__*/_jsx(Cascader, {
+      variant: !light ? variant : 'borderless',
       ref: cascaderRef,
       open: open,
       suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : undefined,
       placeholder: placeholder || intl.getMessage('tableForm.selectPlaceholder', '请选择'),
-      allowClear: ((_rest$fieldProps3 = rest.fieldProps) === null || _rest$fieldProps3 === void 0 ? void 0 : _rest$fieldProps3.allowClear) !== false
-    }, rest.fieldProps), {}, {
-      onOpenChange: function onOpenChange(isOpen) {
-        var _rest$fieldProps4, _rest$fieldProps4$onO;
-        rest === null || rest === void 0 || (_rest$fieldProps4 = rest.fieldProps) === null || _rest$fieldProps4 === void 0 || (_rest$fieldProps4$onO = _rest$fieldProps4.onOpenChange) === null || _rest$fieldProps4$onO === void 0 || _rest$fieldProps4$onO.call(_rest$fieldProps4, isOpen);
+      allowClear: rest.fieldProps?.allowClear !== false,
+      ...rest.fieldProps,
+      onOpenChange: isOpen => {
+        rest?.fieldProps?.onOpenChange?.(isOpen);
         setOpen(isOpen);
       },
-      className: classNames((_rest$fieldProps5 = rest.fieldProps) === null || _rest$fieldProps5 === void 0 ? void 0 : _rest$fieldProps5.className, layoutClassName),
+      className: clsx(rest.fieldProps?.className, layoutClassName),
       options: options
-    }));
+    });
     if (formItemRender) {
-      var _formItemRender;
-      _dom = (_formItemRender = formItemRender(rest.text, _objectSpread(_objectSpread({
-        mode: mode
-      }, rest.fieldProps), {}, {
-        options: options,
-        loading: loading
-      }), _dom)) !== null && _formItemRender !== void 0 ? _formItemRender : null;
+      dom = formItemRender(rest.text, {
+        mode,
+        ...rest.fieldProps,
+        options,
+        loading
+      }, dom) ?? null;
     }
     if (light) {
-      var _rest$fieldProps6 = rest.fieldProps,
-        disabled = _rest$fieldProps6.disabled,
-        value = _rest$fieldProps6.value;
-      var notEmpty = !!value && (value === null || value === void 0 ? void 0 : value.length) !== 0;
+      const {
+        disabled,
+        value
+      } = rest.fieldProps;
+      const notEmpty = !!value && value?.length !== 0;
       return /*#__PURE__*/_jsx(FieldLabel, {
         label: label,
         disabled: disabled,
         variant: variant,
-        value: notEmpty || open ? _dom : null,
+        value: notEmpty || open ? dom : null,
         style: notEmpty ? {
           paddingInlineEnd: 0
         } : undefined,
         allowClear: false,
         downIcon: notEmpty || open ? false : undefined,
-        onClick: function onClick() {
-          var _rest$fieldProps7, _rest$fieldProps7$onO;
+        onClick: () => {
           setOpen(true);
-          rest === null || rest === void 0 || (_rest$fieldProps7 = rest.fieldProps) === null || _rest$fieldProps7 === void 0 || (_rest$fieldProps7$onO = _rest$fieldProps7.onOpenChange) === null || _rest$fieldProps7$onO === void 0 || _rest$fieldProps7$onO.call(_rest$fieldProps7, true);
+          rest?.fieldProps?.onOpenChange?.(true);
         }
       });
     }
-    return _dom;
+    return dom;
   }
   return null;
 };

package/es/field/components/Checkbox/index.d.ts

@@ -6,7 +6,7 @@ export type GroupProps = {
     options?: CheckboxGroupProps['options'];
 } & FieldSelectProps;
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
-    layout?: "vertical" | "horizontal" | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
     options?: (string | number | import("antd/lib/checkbox").CheckboxOptionType<any>)[] | undefined;
 } & {
     text: string;
@@ -15,9 +15,8 @@ declare const _default: React.ForwardRefExoticComponent<import("src/provider").B
     request?: import("src/utils/typing").ProFieldRequestData | undefined;
     params?: any;
     fieldProps?: any;
-    variant?: "filled" | "outlined" | "borderless" | undefined;
+    variant?: "outlined" | "borderless" | "filled" | undefined;
     id?: string | undefined;
-    children?: React.ReactNode;
     defaultKeyWords?: string | undefined;
 } & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Checkbox/index.js

@@ -1,11 +1,5 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["layout", "formItemRender", "mode", "render"],
-  _excluded2 = ["fieldNames"];
 import { Checkbox, ConfigProvider, Form, Spin, theme } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useImperativeHandle, useRef } from 'react';
 import { objectToMap, proFieldParsingText, useStyle } from "../../../utils";
 import { useFieldFetchData } from "../Select";
@@ -17,26 +11,26 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
  * @param param0
  * @param ref
  */
-var FieldCheckbox = function FieldCheckbox(_ref, ref) {
-  var _Form$Item, _Form$Item$useStatus, _theme$useToken2;
-  var _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
-    formItemRender = _ref.formItemRender,
-    mode = _ref.mode,
-    render = _ref.render,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var layoutClassName = getPrefixCls('pro-field-checkbox');
-  var status = (_Form$Item = Form.Item) === null || _Form$Item === void 0 || (_Form$Item$useStatus = _Form$Item.useStatus) === null || _Form$Item$useStatus === void 0 ? void 0 : _Form$Item$useStatus.call(_Form$Item);
-  var _useFieldFetchData = useFieldFetchData(rest),
-    _useFieldFetchData2 = _slicedToArray(_useFieldFetchData, 3),
-    loading = _useFieldFetchData2[0],
-    options = _useFieldFetchData2[1],
-    _fetchData = _useFieldFetchData2[2];
+const FieldCheckbox = ({
+  layout = 'horizontal',
+  formItemRender,
+  mode,
+  render,
+  ...rest
+}, ref) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const layoutClassName = getPrefixCls('pro-field-checkbox');
+  const status = Form.Item?.useStatus?.();
+  const [loading, options, fetchData] = useFieldFetchData(rest);
   // css
-  var _useStyle = useStyle('Checkbox', function (token) {
-      return _defineProperty({}, ".".concat(layoutClassName), {
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle('Checkbox', token => {
+    return {
+      [`.${layoutClassName}`]: {
         '&-error': {
           span: {
             color: token.colorError
@@ -47,46 +41,52 @@ var FieldCheckbox = function FieldCheckbox(_ref, ref) {
             color: token.colorWarning
           }
         },
-        '&-vertical': _defineProperty(_defineProperty(_defineProperty({}, "&".concat(token.antCls, "-checkbox-group"), {
-          display: 'inline-block'
-        }), "".concat(token.antCls, "-checkbox-wrapper+").concat(token.antCls, "-checkbox-wrapper"), {
-          'margin-inline-start': '0  !important'
-        }), "".concat(token.antCls, "-checkbox-group-item"), {
-          display: 'flex',
-          marginInlineEnd: 0
-        })
-      });
-    }),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var _theme$useToken = (_theme$useToken2 = theme.useToken) === null || _theme$useToken2 === void 0 ? void 0 : _theme$useToken2.call(theme),
-    token = _theme$useToken.token;
-  var checkBoxRef = useRef();
-  useImperativeHandle(ref, function () {
-    return _objectSpread(_objectSpread({}, checkBoxRef.current || {}), {}, {
-      fetchData: function fetchData(keyWord) {
-        return _fetchData(keyWord);
+        '&-vertical': {
+          //ant design 5
+          [`&${token.antCls}-checkbox-group`]: {
+            display: 'inline-block'
+          },
+          //ant design 5
+          [`${token.antCls}-checkbox-wrapper+${token.antCls}-checkbox-wrapper`]: {
+            'margin-inline-start': '0  !important'
+          },
+          //ant design 4
+          [`${token.antCls}-checkbox-group-item`]: {
+            display: 'flex',
+            marginInlineEnd: 0
+          }
+        }
       }
-    });
-  }, [_fetchData]);
+    };
+  });
+  const {
+    token
+  } = theme.useToken?.();
+  const checkBoxRef = useRef();
+  useImperativeHandle(ref, () => ({
+    ...(checkBoxRef.current || {}),
+    fetchData: keyWord => fetchData(keyWord)
+  }), [fetchData]);
   if (loading) {
     return /*#__PURE__*/_jsx(Spin, {
       size: "small"
     });
   }
   if (mode === 'read') {
-    var optionsValueEnum = options !== null && options !== void 0 && options.length ? options === null || options === void 0 ? void 0 : options.reduce(function (pre, cur) {
-      var _ref3;
-      return _objectSpread(_objectSpread({}, pre), {}, _defineProperty({}, (_ref3 = cur.value) !== null && _ref3 !== void 0 ? _ref3 : '', cur.label));
+    const optionsValueEnum = options?.length ? options?.reduce((pre, cur) => {
+      return {
+        ...pre,
+        [cur.value ?? '']: cur.label
+      };
     }, {}) : undefined;
-    var dom = proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum));
+    const dom = proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum));
     if (render) {
-      var _render;
-      return (_render = render(rest.text, _objectSpread({
-        mode: mode
-      }, rest.fieldProps), /*#__PURE__*/_jsx(_Fragment, {
+      return render(rest.text, {
+        mode,
+        ...rest.fieldProps
+      }, /*#__PURE__*/_jsx(_Fragment, {
         children: dom
-      }))) !== null && _render !== void 0 ? _render : null;
+      })) ?? null;
     }
     return /*#__PURE__*/_jsx("div", {
       style: {
@@ -99,27 +99,30 @@ var FieldCheckbox = function FieldCheckbox(_ref, ref) {
     });
   }
   if (mode === 'edit') {
-    var _rest$fieldProps;
-    var _ref4 = rest.fieldProps || {},
-      fieldNames = _ref4.fieldNames,
-      restFieldProps = _objectWithoutProperties(_ref4, _excluded2);
-    var _dom = wrapSSR(
+    const {
+      fieldNames,
+      ...restFieldProps
+    } = rest.fieldProps || {};
+    const dom = wrapSSR(
     /*#__PURE__*/
     //@ts-ignore
-    _jsx(Checkbox.Group, _objectSpread(_objectSpread({}, restFieldProps), {}, {
-      className: classNames((_rest$fieldProps = rest.fieldProps) === null || _rest$fieldProps === void 0 ? void 0 : _rest$fieldProps.className, hashId, "".concat(layoutClassName, "-").concat(layout), _defineProperty(_defineProperty({}, "".concat(layoutClassName, "-error"), (status === null || status === void 0 ? void 0 : status.status) === 'error'), "".concat(layoutClassName, "-warning"), (status === null || status === void 0 ? void 0 : status.status) === 'warning')),
+    _jsx(Checkbox.Group, {
+      ...restFieldProps,
+      className: clsx(rest.fieldProps?.className, hashId, `${layoutClassName}-${layout}`, {
+        [`${layoutClassName}-error`]: status?.status === 'error',
+        [`${layoutClassName}-warning`]: status?.status === 'warning'
+      }),
       options: options
-    })));
+    }));
     if (formItemRender) {
-      var _formItemRender;
-      return (_formItemRender = formItemRender(rest.text, _objectSpread(_objectSpread({
-        mode: mode
-      }, rest.fieldProps), {}, {
-        options: options,
-        loading: loading
-      }), _dom)) !== null && _formItemRender !== void 0 ? _formItemRender : null;
+      return formItemRender(rest.text, {
+        mode,
+        ...rest.fieldProps,
+        options,
+        loading
+      }, dom) ?? null;
     }
-    return _dom;
+    return dom;
   }
   return null;
 };

package/es/field/components/Code/index.js

@@ -1,9 +1,8 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Input } from 'antd';
 import React from 'react';
 import { proTheme } from "../../../provider";
 import { jsx as _jsx } from "react/jsx-runtime";
-var languageFormat = function languageFormat(text, language) {
+const languageFormat = (text, language) => {
   if (typeof text !== 'string') {
     return text;
   }
@@ -22,23 +21,24 @@ var languageFormat = function languageFormat(text, language) {
  *
  * @param
  */
-var FieldCode = function FieldCode(_ref, ref) {
-  var text = _ref.text,
-    mode = _ref.mode,
-    render = _ref.render,
-    _ref$language = _ref.language,
-    language = _ref$language === void 0 ? 'text' : _ref$language,
-    formItemRender = _ref.formItemRender,
-    plain = _ref.plain,
-    fieldProps = _ref.fieldProps;
-  var code = languageFormat(text, language);
-  var _proTheme$useToken = proTheme.useToken(),
-    token = _proTheme$useToken.token;
+const FieldCode = ({
+  text,
+  mode,
+  render,
+  language = 'text',
+  formItemRender,
+  plain,
+  fieldProps
+}, ref) => {
+  const code = languageFormat(text, language);
+  const {
+    token
+  } = proTheme.useToken();
   if (mode === 'read') {
-    var dom = /*#__PURE__*/_jsx("pre", _objectSpread(_objectSpread({
-      ref: ref
-    }, fieldProps), {}, {
-      style: _objectSpread({
+    const dom = /*#__PURE__*/_jsx("pre", {
+      ref: ref,
+      ...fieldProps,
+      style: {
         padding: 16,
         overflow: 'auto',
         fontSize: '85%',
@@ -47,42 +47,43 @@ var FieldCode = function FieldCode(_ref, ref) {
         fontFamily: token.fontFamilyCode,
         backgroundColor: 'rgba(150, 150, 150, 0.1)',
         borderRadius: 3,
-        width: 'min-content'
-      }, fieldProps.style),
+        width: 'min-content',
+        ...fieldProps.style
+      },
       children: /*#__PURE__*/_jsx("code", {
         children: code
       })
-    }));
+    });
     if (render) {
-      return render(code, _objectSpread(_objectSpread({
-        mode: mode
-      }, fieldProps), {}, {
-        ref: ref
-      }), dom);
+      return render(code, {
+        mode,
+        ...fieldProps,
+        ref
+      }, dom);
     }
     return dom;
   }
   if (mode === 'edit' || mode === 'update') {
     fieldProps.value = code;
-    var _dom = /*#__PURE__*/_jsx(Input.TextArea, _objectSpread(_objectSpread({
-      rows: 5
-    }, fieldProps), {}, {
+    let dom = /*#__PURE__*/_jsx(Input.TextArea, {
+      rows: 5,
+      ...fieldProps,
       ref: ref
-    }));
+    });
     if (plain) {
-      _dom = /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, fieldProps), {}, {
+      dom = /*#__PURE__*/_jsx(Input, {
+        ...fieldProps,
         ref: ref
-      }));
+      });
     }
     if (formItemRender) {
-      var _formItemRender;
-      return (_formItemRender = formItemRender(code, _objectSpread(_objectSpread({
-        mode: mode
-      }, fieldProps), {}, {
-        ref: ref
-      }), _dom)) !== null && _formItemRender !== void 0 ? _formItemRender : null;
+      return formItemRender(code, {
+        mode,
+        ...fieldProps,
+        ref
+      }, dom) ?? null;
     }
-    return _dom;
+    return dom;
   }
   return null;
 };

package/es/field/components/ColorPicker/index.d.ts

@@ -2,6 +2,6 @@ import type { ColorPickerProps } from 'antd';
 import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
     text: string;
-    mode?: "update" | "read" | "edit" | undefined;
+    mode?: "read" | "edit" | "update" | undefined;
 } & Partial<Omit<ColorPickerProps, "value" | "mode">> & React.RefAttributes<any>>;
 export default _default;