@ant-design/pro-components 3.1.12-0 → 3.1.13-0

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

@@ -6,20 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _antd = require("antd");
-var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../../utils");
+var _fieldMode = require("../../internal/fieldMode");
 var _Select = require("../Select");
+var _FieldCheckboxEdit = require("./FieldCheckboxEdit");
+var _FieldCheckboxRead = require("./FieldCheckboxRead");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 多选组件
- *
- * @param layout
- * @param formItemRender
- * @param mode
- * @param render
- * @param rest
- * @param ref
  */
 const FieldCheckbox = ({
   layout = 'horizontal',
@@ -34,7 +29,6 @@ const FieldCheckbox = ({
   const layoutClassName = getPrefixCls('pro-field-checkbox');
   const status = _antd.Form.Item?.useStatus?.();
   const [loading, options, fetchData] = (0, _Select.useFieldFetchData)(rest);
-  // css
   const {
     wrapSSR,
     hashId
@@ -52,15 +46,12 @@ const FieldCheckbox = ({
           }
         },
         '&-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
@@ -69,9 +60,6 @@ const FieldCheckbox = ({
       }
     };
   });
-  const {
-    token
-  } = _antd.theme.useToken?.();
   const checkBoxRef = (0, _react.useRef)();
   (0, _react.useImperativeHandle)(ref, () => ({
     ...(checkBoxRef.current || {}),
@@ -82,56 +70,36 @@ const FieldCheckbox = ({
       size: "small"
     });
   }
-  if (mode === 'read') {
-    const optionsValueEnum = options?.length ? options?.reduce((pre, cur) => {
-      return {
-        ...pre,
-        [cur.value ?? '']: cur.label
-      };
-    }, {}) : undefined;
-    const dom = (0, _utils.proFieldParsingText)(rest.text, (0, _utils.objectToMap)(rest.valueEnum || optionsValueEnum));
-    if (render) {
-      return render(rest.text, {
-        mode,
-        ...rest.fieldProps
-      }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: dom
-      })) ?? null;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        gap: token.marginSM
-      },
-      children: dom
+  const optionsValueEnum = options?.length ? options?.reduce((pre, cur) => {
+    return {
+      ...pre,
+      [cur.value ?? '']: cur.label
+    };
+  }, {}) : undefined;
+  if ((0, _fieldMode.isProFieldReadMode)(mode)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldCheckboxRead.FieldCheckboxRead, {
+      layout: layout,
+      formItemRender: formItemRender,
+      mode: mode,
+      render: render,
+      optionsValueEnum: optionsValueEnum,
+      ...rest
     });
   }
-  if (mode === 'edit') {
-    const {
-      fieldNames: _fieldNames,
-      variant,
-      ...restFieldProps
-    } = rest.fieldProps || {};
-    const dom = wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Checkbox.Group, {
-      ...restFieldProps,
-      variant: variant,
-      className: (0, _clsx.clsx)(rest.fieldProps?.className, hashId, `${layoutClassName}-${layout}`, {
-        [`${layoutClassName}-error`]: status?.status === 'error',
-        [`${layoutClassName}-warning`]: status?.status === 'warning'
-      }),
-      options: options
-    }));
-    if (formItemRender) {
-      return formItemRender(rest.text, {
-        mode,
-        ...rest.fieldProps,
-        options,
-        loading
-      }, dom) ?? null;
-    }
-    return dom;
+  if ((0, _fieldMode.isProFieldEditOnlyMode)(mode)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldCheckboxEdit.FieldCheckboxEdit, {
+      layout: layout,
+      formItemRender: formItemRender,
+      mode: mode,
+      render: render,
+      options: options,
+      loading: loading,
+      layoutClassName: layoutClassName,
+      wrapSSR: wrapSSR,
+      hashId: hashId,
+      status: status,
+      ...rest
+    });
   }
   return null;
 };

package/lib/field/components/Checkbox/types.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxGroupProps } from 'antd/lib/checkbox';
+import type { FieldSelectProps } from '../Select';
+export type GroupProps = {
+    layout?: 'horizontal' | 'vertical';
+    options?: CheckboxGroupProps['options'];
+} & FieldSelectProps;

package/lib/field/components/Checkbox/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/field/components/Code/FieldCodeEdit.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type FieldCodeEditProps = Parameters<ProFieldFC<{
+    text: string;
+    language?: 'json' | 'text';
+}>>[0] & {
+    code: string;
+};
+export declare function FieldCodeEdit(props: FieldCodeEditProps, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/lib/field/components/Code/FieldCodeEdit.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldCodeEdit = FieldCodeEdit;
+var _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldCodeEdit(props, ref) {
+  const {
+    code,
+    mode,
+    formItemRender,
+    fieldProps
+  } = props;
+  const fp = {
+    ...(fieldProps || {}),
+    value: code
+  };
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.TextArea, {
+    rows: 5,
+    ...fp,
+    ref: ref
+  });
+  if (formItemRender) {
+    return formItemRender(code, {
+      mode,
+      ...fp,
+      ref
+    }, dom) ?? null;
+  }
+  return dom;
+}

package/lib/field/components/Code/FieldCodeRead.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ProFieldFC } from '../../types';
+type FieldCodeReadProps = Parameters<ProFieldFC<{
+    text: string;
+    language?: 'json' | 'text';
+}>>[0] & {
+    code: string;
+    token: {
+        colorTextSecondary: string;
+        fontFamilyCode: string;
+    };
+};
+export declare function FieldCodeRead(props: FieldCodeReadProps, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/lib/field/components/Code/FieldCodeRead.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldCodeRead = FieldCodeRead;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldCodeRead(props, ref) {
+  const {
+    code,
+    mode,
+    render,
+    fieldProps,
+    token
+  } = props;
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+    ref: ref,
+    ...fieldProps,
+    style: {
+      padding: 16,
+      overflow: 'auto',
+      fontSize: '85%',
+      lineHeight: 1.45,
+      color: token.colorTextSecondary,
+      fontFamily: token.fontFamilyCode,
+      backgroundColor: 'rgba(150, 150, 150, 0.1)',
+      borderRadius: 3,
+      width: 'min-content',
+      ...fieldProps?.style
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+      children: code
+    })
+  });
+  if (render) {
+    return render(code, {
+      mode,
+      ...fieldProps,
+      ref
+    }, dom);
+  }
+  return dom;
+}

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

@@ -5,85 +5,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
 var _provider = require("../../../provider");
-var _jsxRuntime = require("react/jsx-runtime");
-const languageFormat = (text, language) => {
-  if (typeof text !== 'string') {
-    return text;
-  }
-  try {
-    if (language === 'json') {
-      return JSON.stringify(JSON.parse(text), null, 2);
-    }
-  } catch (error) {
-    // console.log(error)
-  }
-  return text;
-};
-
+var _fieldMode = require("../../internal/fieldMode");
+var _FieldCodeEdit = require("./FieldCodeEdit");
+var _FieldCodeRead = require("./FieldCodeRead");
+var _utils = require("./utils");
 /**
  * 代码片段组件 这个组件为了显示简单的配置，复杂的请使用更加重型的组件
- *
- * @param
  */
 const FieldCode = ({
   text,
   mode,
-  render,
   language = 'text',
-  formItemRender,
-  fieldProps
+  ...rest
 }, ref) => {
-  const code = languageFormat(text, language);
+  const code = (0, _utils.languageFormat)(text, language);
   const {
     token
   } = _provider.proTheme.useToken();
-  if (mode === 'read') {
-    const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
-      ref: ref,
-      ...fieldProps,
-      style: {
-        padding: 16,
-        overflow: 'auto',
-        fontSize: '85%',
-        lineHeight: 1.45,
-        color: token.colorTextSecondary,
-        fontFamily: token.fontFamilyCode,
-        backgroundColor: 'rgba(150, 150, 150, 0.1)',
-        borderRadius: 3,
-        width: 'min-content',
-        ...fieldProps.style
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        children: code
-      })
-    });
-    if (render) {
-      return render(code, {
-        mode,
-        ...fieldProps,
-        ref
-      }, dom);
-    }
-    return dom;
+  if ((0, _fieldMode.isProFieldReadMode)(mode)) {
+    return (0, _FieldCodeRead.FieldCodeRead)({
+      text,
+      mode,
+      language,
+      ...rest,
+      code,
+      token
+    }, ref);
   }
-  if (mode === 'edit' || mode === 'update') {
-    fieldProps.value = code;
-    const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.TextArea, {
-      rows: 5,
-      ...fieldProps,
-      ref: ref
-    });
-    if (formItemRender) {
-      return formItemRender(code, {
-        mode,
-        ...fieldProps,
-        ref
-      }, dom) ?? null;
-    }
-    return dom;
+  if ((0, _fieldMode.isProFieldEditOrUpdateMode)(mode)) {
+    return (0, _FieldCodeEdit.FieldCodeEdit)({
+      text,
+      mode,
+      language,
+      ...rest,
+      code
+    }, ref);
   }
   return null;
 };

package/lib/field/components/Code/utils.d.ts

@@ -0,0 +1 @@
+export declare function languageFormat(text: string, language: string): string;

package/lib/field/components/Code/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.languageFormat = languageFormat;
+function languageFormat(text, language) {
+  if (typeof text !== 'string') {
+    return text;
+  }
+  try {
+    if (language === 'json') {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    }
+  } catch {
+    // ignore parse errors; show raw text
+  }
+  return text;
+}

package/lib/field/components/ColorPicker/FieldColorPickerEdit.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ColorPickerProps } from 'antd';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+    mode?: 'read' | 'edit' | 'update';
+} & Partial<Omit<ColorPickerProps, 'value' | 'mode'>>>>[0];
+export declare function FieldColorPickerEdit(props: Props, ref: any): import("react").JSX.Element;
+export {};

package/lib/field/components/ColorPicker/FieldColorPickerEdit.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldColorPickerEdit = FieldColorPickerEdit;
+var _antd = require("antd");
+var _clsx = require("clsx");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_PRESETS = {
+  label: 'Recommended',
+  colors: ['#F5222D', '#FA8C16', '#FADB14', '#8BBB11', '#52C41A', '#13A8A8', '#1677FF', '#2F54EB', '#722ED1', '#EB2F96', '#F5222D4D', '#FA8C164D', '#FADB144D', '#8BBB114D', '#52C41A4D', '#13A8A84D', '#1677FF4D', '#2F54EB4D', '#722ED14D', '#EB2F964D']
+};
+function FieldColorPickerEdit(props, ref) {
+  const {
+    text,
+    mode: type,
+    formItemRender,
+    fieldProps
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-field-color-picker');
+  const style = {
+    display: 'table-cell',
+    ...fieldProps.style
+  };
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ColorPicker, {
+    ref: ref,
+    presets: [DEFAULT_PRESETS],
+    ...fieldProps,
+    style: style,
+    className: (0, _clsx.clsx)({
+      [prefixCls]: true
+    })
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode: type,
+      ...fieldProps,
+      style
+    }, dom);
+  }
+  return dom;
+}

package/lib/field/components/ColorPicker/FieldColorPickerRead.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ColorPickerProps } from 'antd';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string;
+    mode?: 'read' | 'edit' | 'update';
+} & Partial<Omit<ColorPickerProps, 'value' | 'mode'>>>>[0];
+export declare function FieldColorPickerRead(props: Props): import("react").JSX.Element;
+export {};

package/lib/field/components/ColorPicker/FieldColorPickerRead.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldColorPickerRead = FieldColorPickerRead;
+var _antd = require("antd");
+var _clsx = require("clsx");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldColorPickerRead(props) {
+  const {
+    text,
+    mode: type,
+    render,
+    fieldProps
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-field-color-picker');
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ColorPicker, {
+    value: text,
+    className: (0, _clsx.clsx)({
+      [prefixCls]: true
+    }),
+    open: false
+  });
+  if (render) {
+    return render(text, {
+      mode: type,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}

package/lib/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;

package/lib/field/components/ColorPicker/index.js

@@ -1,78 +1,27 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _antd = require("antd");
-var _clsx = require("clsx");
-var _react = _interopRequireWildcard(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
-const DEFAULT_PRESETS = {
-  label: 'Recommended',
-  colors: ['#F5222D', '#FA8C16', '#FADB14', '#8BBB11', '#52C41A', '#13A8A8', '#1677FF', '#2F54EB', '#722ED1', '#EB2F96', '#F5222D4D', '#FA8C164D', '#FADB144D', '#8BBB114D', '#52C41A4D', '#13A8A84D', '#1677FF4D', '#2F54EB4D', '#722ED14D', '#EB2F964D']
-};
-
+var _react = _interopRequireDefault(require("react"));
+var _fieldMode = require("../../internal/fieldMode");
+var _FieldColorPickerEdit = require("./FieldColorPickerEdit");
+var _FieldColorPickerRead = require("./FieldColorPickerRead");
 /**
  * 颜色组件
  * Antd > 5.5.0 的版本 使用 antd 的 ColorPicker
- * @param FieldColorPicker {
- *     text: number;
- *     moneySymbol?: string; }
  */
-const FieldColorPicker = ({
-  text,
-  mode: type,
-  render,
-  formItemRender,
-  fieldProps
-}, ref) => {
+const FieldColorPicker = (props, ref) => {
   const {
-    getPrefixCls
-  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('pro-field-color-picker');
-  if (type === 'read') {
-    const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ColorPicker, {
-      value: text,
-      className: (0, _clsx.clsx)({
-        [prefixCls]: true
-      })
-      // 设置无法 open
-      ,
-      open: false
-    });
-    if (render) {
-      return render(text, {
-        mode: type,
-        ...fieldProps
-      }, dom);
-    }
-    return dom;
+    mode: type
+  } = props;
+  if ((0, _fieldMode.isProFieldReadMode)(type)) {
+    return (0, _FieldColorPickerRead.FieldColorPickerRead)(props);
   }
-  if (type === 'edit' || type === 'update') {
-    // 解决 默认的 width 100% 问题
-    const style = {
-      display: 'table-cell',
-      ...fieldProps.style
-    };
-    const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ColorPicker, {
-      ref: ref,
-      presets: [DEFAULT_PRESETS],
-      ...fieldProps,
-      style: style,
-      className: (0, _clsx.clsx)({
-        [prefixCls]: true
-      })
-    });
-    if (formItemRender) {
-      return formItemRender(text, {
-        mode: type,
-        ...fieldProps,
-        style
-      }, dom);
-    }
-    return dom;
+  if ((0, _fieldMode.isProFieldEditOrUpdateMode)(type)) {
+    return (0, _FieldColorPickerEdit.FieldColorPickerEdit)(props, ref);
   }
   return null;
 };

package/lib/field/components/DatePicker/FieldDatePickerEdit.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { IntlType } from '../../../provider';
+import type { ProFieldFC } from '../../types';
+type Props = Parameters<ProFieldFC<{
+    text: string | number;
+    format?: string;
+    showTime?: boolean;
+    variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+    picker?: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year';
+}>>[0] & {
+    format: string;
+    intl: IntlType;
+};
+export declare function FieldDatePickerEdit(props: Props, ref: React.Ref<unknown>): React.JSX.Element;
+export {};

package/lib/field/components/DatePicker/FieldDatePickerEdit.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldDatePickerEdit = FieldDatePickerEdit;
+var _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function FieldDatePickerEdit(props, ref) {
+  const {
+    text,
+    mode,
+    format,
+    formItemRender,
+    showTime,
+    fieldProps,
+    picker,
+    variant,
+    intl
+  } = props;
+  const {
+    disabled: _disabled,
+    value,
+    placeholder = intl.getMessage('tableForm.selectPlaceholder', '请选择')
+  } = fieldProps;
+  const dayValue = (0, _utils.parseValueToDay)(value);
+  const dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker, {
+    picker: picker,
+    showTime: showTime,
+    format: format,
+    placeholder: placeholder,
+    ref: ref,
+    ...fieldProps,
+    variant: variant ?? fieldProps?.variant,
+    value: dayValue
+  });
+  if (formItemRender) {
+    return formItemRender(text, {
+      mode,
+      ...fieldProps
+    }, dom);
+  }
+  return dom;
+}