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

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

@@ -0,0 +1,27 @@
+import type { RadioGroupProps } from 'antd';
+import React from 'react';
+import type { FieldSelectProps } from '../Select';
+export type GroupProps = {
+    options?: RadioGroupProps['options'];
+    radioType?: 'button' | 'radio';
+    placeholder?: string;
+    variant?: 'outlined' | 'borderless' | 'filled';
+} & FieldSelectProps;
+declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
+    options?: (string | number | import("antd").CheckboxOptionType<any>)[] | undefined;
+    radioType?: "button" | "radio" | undefined;
+    placeholder?: string | undefined;
+    variant?: "filled" | "outlined" | "borderless" | undefined;
+} & {
+    text: string;
+    valueEnum?: import("src/utils/typing").ProFieldValueEnumType | undefined;
+    debounceTime?: number | undefined;
+    request?: import("src/utils/typing").ProFieldRequestData | undefined;
+    params?: any;
+    fieldProps?: any;
+    variant?: "filled" | "outlined" | "borderless" | undefined;
+    id?: string | undefined;
+    children?: React.ReactNode;
+    defaultKeyWords?: string | undefined;
+} & import("../../PureProField").ProFieldLightProps & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("../../../provider");
+var _utils = require("../../../utils");
+var _Select = require("../Select");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["radioType", "placeholder", "formItemRender", "mode", "render", "label", "light", "variant"];
+/**
+ * 级联选择组件
+ *
+ * @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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var layoutClassName = getPrefixCls('pro-field-cascader');
+  var _useFieldFetchData = (0, _Select.useFieldFetchData)(rest),
+    _useFieldFetchData2 = (0, _slicedToArray2.default)(_useFieldFetchData, 3),
+    loading = _useFieldFetchData2[0],
+    options = _useFieldFetchData2[1],
+    _fetchData = _useFieldFetchData2[2];
+  var intl = (0, _provider.useIntl)();
+  var cascaderRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  (0, _react.useImperativeHandle)(ref, function () {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, cascaderRef.current || {}), {}, {
+      fetchData: function fetchData(keyWord) {
+        return _fetchData(keyWord);
+      }
+    });
+  }, [_fetchData]);
+  var optionsValueEnum = (0, _react.useMemo)(function () {
+    var _rest$fieldProps;
+    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)) {
+        return valuesMap;
+      }
+      var length = _options.length;
+      var i = 0;
+      while (i < length) {
+        var 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]);
+  if (mode === 'read') {
+    var dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _utils.proFieldParsingText)(rest.text, (0, _utils.objectToMap)(rest.valueEnum || optionsValueEnum))
+    });
+    if (render) {
+      var _render;
+      return (_render = render(rest.text, (0, _objectSpread2.default)({
+        mode: mode
+      }, rest.fieldProps), dom)) !== null && _render !== void 0 ? _render : null;
+    }
+    return dom;
+  }
+  if (mode === 'edit') {
+    var _rest$fieldProps3, _rest$fieldProps5;
+    var _dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Cascader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      variant: !light ? 'outlined' : 'borderless',
+      ref: cascaderRef,
+      open: open,
+      suffixIcon: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.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);
+        setOpen(isOpen);
+      },
+      className: (0, _classnames.default)((_rest$fieldProps5 = rest.fieldProps) === null || _rest$fieldProps5 === void 0 ? void 0 : _rest$fieldProps5.className, layoutClassName),
+      options: options
+    }));
+    if (formItemRender) {
+      var _formItemRender;
+      _dom = (_formItemRender = formItemRender(rest.text, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        mode: mode
+      }, rest.fieldProps), {}, {
+        options: options,
+        loading: loading
+      }), _dom)) !== null && _formItemRender !== void 0 ? _formItemRender : 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;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FieldLabel, {
+        label: label,
+        disabled: disabled,
+        variant: variant,
+        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;
+          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);
+        }
+      });
+    }
+    return _dom;
+  }
+  return null;
+};
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(FieldCascader);

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

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

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

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../../utils");
+var _Select = require("../Select");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["layout", "formItemRender", "mode", "render"],
+  _excluded2 = ["fieldNames"];
+/**
+ * 多选组件
+ *
+ * @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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var layoutClassName = getPrefixCls('pro-field-checkbox');
+  var status = (_Form$Item = _antd.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 = (0, _Select.useFieldFetchData)(rest),
+    _useFieldFetchData2 = (0, _slicedToArray2.default)(_useFieldFetchData, 3),
+    loading = _useFieldFetchData2[0],
+    options = _useFieldFetchData2[1],
+    _fetchData = _useFieldFetchData2[2];
+  // css
+  var _useStyle = (0, _utils.useStyle)('Checkbox', function (token) {
+      return (0, _defineProperty2.default)({}, ".".concat(layoutClassName), {
+        '&-error': {
+          span: {
+            color: token.colorError
+          }
+        },
+        '&-warning': {
+          span: {
+            color: token.colorWarning
+          }
+        },
+        '&-vertical': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&".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 = _antd.theme.useToken) === null || _theme$useToken2 === void 0 ? void 0 : _theme$useToken2.call(_antd.theme),
+    token = _theme$useToken.token;
+  var checkBoxRef = (0, _react.useRef)();
+  (0, _react.useImperativeHandle)(ref, function () {
+    return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, checkBoxRef.current || {}), {}, {
+      fetchData: function fetchData(keyWord) {
+        return _fetchData(keyWord);
+      }
+    });
+  }, [_fetchData]);
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.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 (0, _objectSpread3.default)((0, _objectSpread3.default)({}, pre), {}, (0, _defineProperty2.default)({}, (_ref3 = cur.value) !== null && _ref3 !== void 0 ? _ref3 : '', cur.label));
+    }, {}) : undefined;
+    var dom = (0, _utils.proFieldParsingText)(rest.text, (0, _utils.objectToMap)(rest.valueEnum || optionsValueEnum));
+    if (render) {
+      var _render;
+      return (_render = render(rest.text, (0, _objectSpread3.default)({
+        mode: mode
+      }, rest.fieldProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: dom
+      }))) !== null && _render !== void 0 ? _render : null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: token.marginSM
+      },
+      children: dom
+    });
+  }
+  if (mode === 'edit') {
+    var _rest$fieldProps;
+    var _ref4 = rest.fieldProps || {},
+      fieldNames = _ref4.fieldNames,
+      restFieldProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+    var _dom = wrapSSR(
+    /*#__PURE__*/
+    //@ts-ignore
+    (0, _jsxRuntime.jsx)(_antd.Checkbox.Group, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, restFieldProps), {}, {
+      className: (0, _classnames.default)((_rest$fieldProps = rest.fieldProps) === null || _rest$fieldProps === void 0 ? void 0 : _rest$fieldProps.className, hashId, "".concat(layoutClassName, "-").concat(layout), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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')),
+      options: options
+    })));
+    if (formItemRender) {
+      var _formItemRender;
+      return (_formItemRender = formItemRender(rest.text, (0, _objectSpread3.default)((0, _objectSpread3.default)({
+        mode: mode
+      }, rest.fieldProps), {}, {
+        options: options,
+        loading: loading
+      }), _dom)) !== null && _formItemRender !== void 0 ? _formItemRender : null;
+    }
+    return _dom;
+  }
+  return null;
+};
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(FieldCheckbox);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
+    text: string;
+    language?: "text" | "json" | undefined;
+} & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,96 @@
+"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 _antd = require("antd");
+var _react = _interopRequireDefault(require("react"));
+var _provider = require("../../../provider");
+var _jsxRuntime = require("react/jsx-runtime");
+var languageFormat = function 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;
+};
+
+/**
+ * 代码片段组件 这个组件为了显示简单的配置，复杂的请使用更加重型的组件
+ *
+ * @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 = _provider.proTheme.useToken(),
+    token = _proTheme$useToken.token;
+  if (mode === 'read') {
+    var dom = /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      ref: ref
+    }, fieldProps), {}, {
+      style: (0, _objectSpread2.default)({
+        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, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        mode: mode
+      }, fieldProps), {}, {
+        ref: ref
+      }), dom);
+    }
+    return dom;
+  }
+  if (mode === 'edit' || mode === 'update') {
+    fieldProps.value = code;
+    var _dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.TextArea, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      rows: 5
+    }, fieldProps), {}, {
+      ref: ref
+    }));
+    if (plain) {
+      _dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fieldProps), {}, {
+        ref: ref
+      }));
+    }
+    if (formItemRender) {
+      var _formItemRender;
+      return (_formItemRender = formItemRender(code, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        mode: mode
+      }, fieldProps), {}, {
+        ref: ref
+      }), _dom)) !== null && _formItemRender !== void 0 ? _formItemRender : null;
+    }
+    return _dom;
+  }
+  return null;
+};
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(FieldCode);

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

@@ -0,0 +1,7 @@
+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?: "read" | "edit" | "update" | undefined;
+} & Partial<Omit<ColorPickerProps, "mode" | "value">> & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,74 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var 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']
+};
+
+/**
+ * 颜色组件
+ * Antd > 5.5.0 的版本 使用 antd 的 ColorPicker
+ * @param FieldColorPicker {
+ *     text: number;
+ *     moneySymbol?: string; }
+ */
+var FieldColorPicker = function FieldColorPicker(_ref, ref) {
+  var text = _ref.text,
+    type = _ref.mode,
+    render = _ref.render,
+    formItemRender = _ref.formItemRender,
+    fieldProps = _ref.fieldProps;
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('pro-field-color-picker');
+  if (type === 'read') {
+    var dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ColorPicker, {
+      value: text,
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, prefixCls, true))
+      // 设置无法 open
+      ,
+      open: false
+    });
+    if (render) {
+      return render(text, (0, _objectSpread2.default)({
+        mode: type
+      }, fieldProps), dom);
+    }
+    return dom;
+  }
+  if (type === 'edit' || type === 'update') {
+    // 解决 默认的 width 100% 问题
+    var style = (0, _objectSpread2.default)({
+      display: 'table-cell'
+    }, fieldProps.style);
+    var _dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ColorPicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      ref: ref,
+      presets: [DEFAULT_PRESETS]
+    }, fieldProps), {}, {
+      style: style,
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, prefixCls, true))
+    }));
+    if (formItemRender) {
+      return formItemRender(text, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        mode: type
+      }, fieldProps), {}, {
+        style: style
+      }), _dom);
+    }
+    return _dom;
+  }
+  return null;
+};
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(FieldColorPicker);

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ProFieldLightProps } from '../../PureProField';
+declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
+    text: string | number;
+    format?: string | undefined;
+    showTime?: boolean | undefined;
+    variant?: "filled" | "outlined" | "borderless" | undefined;
+    picker?: "date" | "time" | "week" | "month" | "quarter" | "year" | undefined;
+} & ProFieldLightProps & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,126 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _antd = require("antd");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _weekOfYear = _interopRequireDefault(require("dayjs/plugin/weekOfYear"));
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("../../../provider");
+var _utils = require("../../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+_dayjs.default.extend(_weekOfYear.default);
+var formatDate = function formatDate(text, format) {
+  if (!text) return '-';
+  if (typeof format === 'function') {
+    return format((0, _dayjs.default)(text));
+  } else {
+    return (0, _dayjs.default)(text).format((Array.isArray(format) ? format[0] : format) || 'YYYY-MM-DD');
+  }
+};
+
+/**
+ * 日期选择组件
+ *
+ * @param
+ */
+var FieldDatePicker = function FieldDatePicker(_ref, ref) {
+  var text = _ref.text,
+    mode = _ref.mode,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? 'YYYY-MM-DD' : _ref$format,
+    label = _ref.label,
+    light = _ref.light,
+    render = _ref.render,
+    formItemRender = _ref.formItemRender,
+    plain = _ref.plain,
+    showTime = _ref.showTime,
+    fieldProps = _ref.fieldProps,
+    picker = _ref.picker,
+    variant = _ref.variant,
+    lightLabel = _ref.lightLabel;
+  var intl = (0, _provider.useIntl)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  if (mode === 'read') {
+    var dom = formatDate(text, fieldProps.format || format);
+    if (render) {
+      return render(text, (0, _objectSpread2.default)({
+        mode: mode
+      }, fieldProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: dom
+      }));
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: dom
+    });
+  }
+  if (mode === 'edit' || mode === 'update') {
+    var _dom;
+    var disabled = fieldProps.disabled,
+      value = fieldProps.value,
+      _fieldProps$placehold = fieldProps.placeholder,
+      placeholder = _fieldProps$placehold === void 0 ? intl.getMessage('tableForm.selectPlaceholder', '请选择') : _fieldProps$placehold;
+    var dayValue = (0, _utils.parseValueToDay)(value);
+    if (light) {
+      _dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.FieldLabel, {
+        label: label,
+        onClick: function onClick() {
+          var _fieldProps$onOpenCha;
+          fieldProps === null || fieldProps === void 0 || (_fieldProps$onOpenCha = fieldProps.onOpenChange) === null || _fieldProps$onOpenCha === void 0 || _fieldProps$onOpenCha.call(fieldProps, true);
+          setOpen(true);
+        },
+        style: dayValue ? {
+          paddingInlineEnd: 0
+        } : undefined,
+        disabled: disabled,
+        value: dayValue || open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          picker: picker,
+          showTime: showTime,
+          format: format,
+          ref: ref
+        }, fieldProps), {}, {
+          value: dayValue,
+          onOpenChange: function onOpenChange(isOpen) {
+            var _fieldProps$onOpenCha2;
+            setOpen(isOpen);
+            fieldProps === null || fieldProps === void 0 || (_fieldProps$onOpenCha2 = fieldProps.onOpenChange) === null || _fieldProps$onOpenCha2 === void 0 || _fieldProps$onOpenCha2.call(fieldProps, isOpen);
+          },
+          variant: "borderless",
+          open: open
+        })) : undefined,
+        allowClear: false,
+        downIcon: dayValue || open ? false : undefined,
+        variant: variant,
+        ref: lightLabel
+      });
+    } else {
+      _dom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        picker: picker,
+        showTime: showTime,
+        format: format,
+        placeholder: placeholder,
+        variant: plain === undefined ? 'outlined' : plain ? 'borderless' : 'outlined',
+        ref: ref
+      }, fieldProps), {}, {
+        value: dayValue
+      }));
+    }
+    if (formItemRender) {
+      return formItemRender(text, (0, _objectSpread2.default)({
+        mode: mode
+      }, fieldProps), _dom);
+    }
+    return _dom;
+  }
+  return null;
+};
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(FieldDatePicker);

package/lib/field/components/Digit/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type FieldDigitProps = {
+    text: number;
+    placeholder?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & FieldDigitProps & React.RefAttributes<any>>;
+export default _default;