@ant-design/pro-components 2.8.9 → 3.0.0-beta.1

package/es/form/BaseForm/EditOrReadOnlyContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const EditOrReadOnlyContext: React.Context<{
+    mode: 'edit' | 'read' | 'update';
+}>;

package/es/form/BaseForm/EditOrReadOnlyContext.js

@@ -0,0 +1,8 @@
+// src/form/BaseForm/EditOrReadOnlyContext.ts
+import React from "react";
+var EditOrReadOnlyContext = React.createContext({
+  mode: "edit"
+});
+export {
+  EditOrReadOnlyContext
+};

package/es/form/BaseForm/LightWrapper/index.d.ts

@@ -0,0 +1,34 @@
+import type { TooltipPlacement } from 'antd/lib/tooltip';
+import React from 'react';
+import type { LightFilterFooterRender } from '../../typing';
+export type SizeType = 'small' | 'middle' | 'large' | undefined;
+export type LightWrapperProps = {
+    label?: React.ReactNode;
+    disabled?: boolean;
+    placeholder?: React.ReactNode;
+    size?: SizeType;
+    value?: any;
+    onChange?: (value?: any) => void;
+    onBlur?: (value?: any) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    children?: React.ReactNode;
+    valuePropName?: string;
+    customLightMode?: boolean;
+    light?: boolean;
+    /**
+     * @name 自定义label的值
+     *
+     * @example <caption>自定义数组的转化</caption>
+     * labelFormatter={(value) =>value.join('-')} }
+     */
+    labelFormatter?: (value: any) => React.ReactNode;
+    variant?: 'outlined' | 'filled' | 'borderless';
+    otherFieldProps?: any;
+    valueType?: string;
+    allowClear?: boolean;
+    footerRender?: LightFilterFooterRender;
+    placement?: TooltipPlacement;
+};
+declare const LightWrapper: React.ForwardRefRenderFunction<any, LightWrapperProps>;
+export { LightWrapper };

package/es/form/BaseForm/LightWrapper/index.js

@@ -0,0 +1,168 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/form/BaseForm/LightWrapper/index.tsx
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useMemo, useState } from "react";
+import {
+  dateArrayFormatter,
+  dateFormatterMap,
+  FieldLabel,
+  FilterDropdown,
+  useMountMergeState
+} from "../../../utils";
+import { useStyle } from "./style";
+var LightWrapper = (props) => {
+  const _a = props, {
+    label,
+    size,
+    disabled,
+    onChange: propsOnChange,
+    className,
+    style,
+    children,
+    valuePropName,
+    placeholder,
+    labelFormatter,
+    variant,
+    footerRender,
+    allowClear,
+    otherFieldProps,
+    valueType,
+    placement
+  } = _a, rest = __objRest(_a, [
+    "label",
+    "size",
+    "disabled",
+    "onChange",
+    "className",
+    "style",
+    "children",
+    "valuePropName",
+    "placeholder",
+    "labelFormatter",
+    "variant",
+    "footerRender",
+    "allowClear",
+    "otherFieldProps",
+    "valueType",
+    "placement"
+  ]);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("pro-field-light-wrapper");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const [tempValue, setTempValue] = useState(
+    props[valuePropName]
+  );
+  const [open, setOpen] = useMountMergeState(false);
+  const onChange = (...restParams) => {
+    var _a2;
+    (_a2 = otherFieldProps == null ? void 0 : otherFieldProps.onChange) == null ? void 0 : _a2.call(otherFieldProps, ...restParams);
+    propsOnChange == null ? void 0 : propsOnChange(...restParams);
+  };
+  const labelValue = props[valuePropName];
+  const labelValueText = useMemo(() => {
+    var _a2;
+    if (!labelValue)
+      return labelValue;
+    if (((_a2 = valueType == null ? void 0 : valueType.toLowerCase()) == null ? void 0 : _a2.endsWith("range")) && valueType !== "digitRange" && !labelFormatter) {
+      return dateArrayFormatter(
+        labelValue,
+        dateFormatterMap[valueType] || "YYYY-MM-DD"
+      );
+    }
+    if (Array.isArray(labelValue))
+      return labelValue.map((item) => {
+        if (typeof item === "object" && item.label && item.value) {
+          return item.label;
+        }
+        return item;
+      });
+    return labelValue;
+  }, [labelValue, valueType, labelFormatter]);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      FilterDropdown,
+      {
+        disabled,
+        open,
+        onOpenChange: setOpen,
+        placement,
+        label: /* @__PURE__ */ React.createElement(
+          FieldLabel,
+          {
+            ellipsis: true,
+            size,
+            onClear: () => {
+              onChange == null ? void 0 : onChange();
+              setTempValue(null);
+            },
+            variant,
+            style,
+            className,
+            label,
+            placeholder,
+            value: labelValueText,
+            disabled,
+            formatter: labelFormatter,
+            allowClear
+          }
+        ),
+        footer: {
+          onClear: () => setTempValue(null),
+          onConfirm: () => {
+            onChange == null ? void 0 : onChange(tempValue);
+            setOpen(false);
+          }
+        },
+        footerRender
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${prefixCls}-container`, hashId, className),
+          style
+        },
+        React.cloneElement(children, __spreadValues(__spreadProps(__spreadValues({}, rest), {
+          [valuePropName]: tempValue,
+          onChange: (e) => {
+            setTempValue((e == null ? void 0 : e.target) ? e.target.value : e);
+          }
+        }), children.props))
+      )
+    )
+  );
+};
+export {
+  LightWrapper
+};

package/es/form/BaseForm/LightWrapper/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface ProToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/es/form/BaseForm/LightWrapper/style.js

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/form/BaseForm/LightWrapper/style.ts
+import { useStyle as useAntdStyle } from "../../../provider";
+var genProStyle = (token) => {
+  return {
+    [`${token.componentCls}-collapse-label`]: {
+      paddingInline: 1,
+      paddingBlock: 1
+    },
+    [`${token.componentCls}-container`]: {
+      [`${token.antCls}-form-item`]: {
+        marginBlockEnd: 0
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("LightWrapper", (token) => {
+    const proToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProStyle(proToken)];
+  });
+}
+export {
+  useStyle
+};

package/es/form/BaseForm/Submitter/index.d.ts

@@ -0,0 +1,37 @@
+import type { ButtonProps } from 'antd';
+import React from 'react';
+/** @name 用于配置操作栏 */
+export type SearchConfig = {
+    /** @name 重置按钮的文本 */
+    resetText?: React.ReactNode;
+    /** @name 提交按钮的文本 */
+    submitText?: React.ReactNode;
+};
+export type SubmitterProps<T = Record<string, any>> = {
+    /** @name 提交方法 */
+    onSubmit?: (value?: T) => void;
+    /** @name 重置方法 */
+    onReset?: (value?: T) => void;
+    /** @name 搜索的配置，一般用来配置文本 */
+    searchConfig?: SearchConfig;
+    /** @name 提交按钮的 props */
+    submitButtonProps?: false | (ButtonProps & {
+        preventDefault?: boolean;
+    });
+    /** @name 重置按钮的 props */
+    resetButtonProps?: false | (ButtonProps & {
+        preventDefault?: boolean;
+    });
+    /** @name 自定义操作的渲染 */
+    render?: ((props: SubmitterProps & T & {
+        submit: () => void;
+        reset: () => void;
+    }, dom: JSX.Element[]) => React.ReactNode[] | React.ReactNode | false) | false;
+};
+/**
+ * FormFooter 的组件，可以自动进行一些配置
+ *
+ * @param props
+ */
+declare const Submitter: React.FC<SubmitterProps>;
+export default Submitter;

package/es/form/BaseForm/Submitter/index.js

@@ -0,0 +1,124 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/form/BaseForm/Submitter/index.tsx
+import { Button, Form } from "antd";
+import omit from "rc-util/lib/omit";
+import React from "react";
+import { proTheme, useIntl } from "../../../provider";
+var Submitter = (props) => {
+  const intl = useIntl();
+  const form = Form.useFormInstance();
+  if (props.render === false) {
+    return null;
+  }
+  const {
+    onSubmit,
+    render,
+    onReset,
+    searchConfig = {},
+    submitButtonProps,
+    resetButtonProps
+  } = props;
+  const { token } = proTheme.useToken();
+  const submit = () => {
+    form.submit();
+    onSubmit == null ? void 0 : onSubmit();
+  };
+  const reset = () => {
+    form.resetFields();
+    onReset == null ? void 0 : onReset();
+  };
+  const {
+    submitText = intl.getMessage("tableForm.submit", "提交"),
+    resetText = intl.getMessage("tableForm.reset", "重置")
+  } = searchConfig;
+  const dom = [];
+  if (resetButtonProps !== false) {
+    dom.push(
+      /* @__PURE__ */ React.createElement(
+        Button,
+        __spreadProps(__spreadValues({}, omit(resetButtonProps != null ? resetButtonProps : {}, ["preventDefault"])), {
+          key: "rest",
+          onClick: (e) => {
+            var _a;
+            if (!(resetButtonProps == null ? void 0 : resetButtonProps.preventDefault))
+              reset();
+            (_a = resetButtonProps == null ? void 0 : resetButtonProps.onClick) == null ? void 0 : _a.call(
+              resetButtonProps,
+              e
+            );
+          }
+        }),
+        resetText
+      )
+    );
+  }
+  if (submitButtonProps !== false) {
+    dom.push(
+      /* @__PURE__ */ React.createElement(
+        Button,
+        __spreadProps(__spreadValues({
+          type: "primary"
+        }, omit(submitButtonProps || {}, ["preventDefault"])), {
+          key: "submit",
+          onClick: (e) => {
+            var _a;
+            if (!(submitButtonProps == null ? void 0 : submitButtonProps.preventDefault))
+              submit();
+            (_a = submitButtonProps == null ? void 0 : submitButtonProps.onClick) == null ? void 0 : _a.call(
+              submitButtonProps,
+              e
+            );
+          }
+        }),
+        submitText
+      )
+    );
+  }
+  const renderDom = render ? render(__spreadProps(__spreadValues({}, props), { form, submit, reset }), dom) : dom;
+  if (!renderDom) {
+    return null;
+  }
+  if (Array.isArray(renderDom)) {
+    if ((renderDom == null ? void 0 : renderDom.length) < 1) {
+      return null;
+    }
+    if ((renderDom == null ? void 0 : renderDom.length) === 1) {
+      return renderDom[0];
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: token.marginXS,
+          alignItems: "center"
+        }
+      },
+      renderDom
+    );
+  }
+  return renderDom;
+};
+var Submitter_default = Submitter;
+export {
+  Submitter_default as default
+};

package/es/form/BaseForm/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../components/FormItem/warpField';
+export * from './BaseForm';
+export * from './LightWrapper';

package/es/form/BaseForm/index.js

@@ -0,0 +1,4 @@
+// src/form/BaseForm/index.ts
+export * from "../components/FormItem/warpField";
+export * from "./BaseForm";
+export * from "./LightWrapper";

package/es/form/FieldContext.d.ts

@@ -0,0 +1,27 @@
+import type { FormItemProps } from 'antd';
+import type { NamePath } from 'antd/lib/form/interface';
+import React from 'react';
+import type { ProFieldProps, ProFieldValueType, SearchTransformKeyFn } from '../utils';
+import type { CommonFormProps } from './BaseForm';
+import type { FieldProps, ProFormGroupProps } from './typing';
+export type FiledContextProps = {
+    fieldProps?: FieldProps<unknown>;
+    proFieldProps?: ProFieldProps;
+    formItemProps?: FormItemProps;
+    groupProps?: ProFormGroupProps;
+    setFieldValueType?: (name: NamePath, obj: {
+        valueType?: ProFieldValueType;
+        dateFormat?: string;
+        /** 数据转化的地方 */
+        transform?: SearchTransformKeyFn;
+    }) => void;
+    /** Form 组件的类型 */
+    formComponentType?: string;
+    /** 获取表单实例计数器 */
+    formKey?: string;
+    /** 表单的 getPopupContainer 控制 */
+    getPopupContainer?: (e: HTMLElement) => ParentNode;
+} & Pick<CommonFormProps, 'formRef' | 'grid'>;
+declare const FieldContext: React.Context<FiledContextProps>;
+export { FieldContext };
+export default FieldContext;

package/es/form/FieldContext.js

@@ -0,0 +1,8 @@
+// src/form/FieldContext.tsx
+import React from "react";
+var FieldContext = React.createContext({});
+var FieldContext_default = FieldContext;
+export {
+  FieldContext,
+  FieldContext_default as default
+};

package/es/form/components/Captcha/index.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonProps, InputProps } from 'antd';
+import type { NamePath } from 'antd/lib/form/interface';
+import React from 'react';
+import type { ProFormFieldItemProps } from '../../typing';
+export type ProFormCaptchaProps = ProFormFieldItemProps<InputProps> & {
+    /** @name 倒计时的秒数 */
+    countDown?: number;
+    /** 手机号的 name */
+    phoneName?: NamePath;
+    /** @name 获取验证码的方法 */
+    onGetCaptcha: (mobile: string) => Promise<void>;
+    /** @name 计时回调 */
+    onTiming?: (count: number) => void;
+    /** @name 渲染按钮的文字 */
+    captchaTextRender?: (timing: boolean, count: number) => React.ReactNode;
+    /** @name 获取按钮验证码的props */
+    captchaProps?: ButtonProps;
+    value?: any;
+    onChange?: any;
+};
+export type CaptFieldRef = {
+    startTiming: () => never;
+    endTiming: () => never;
+};
+declare const ProFormCaptcha: React.FC<ProFormCaptchaProps>;
+export default ProFormCaptcha;

package/es/form/components/Captcha/index.js

@@ -0,0 +1,175 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/form/components/Captcha/index.tsx
+import { Button, Form, Input } from "antd";
+import React, { useEffect, useImperativeHandle, useState } from "react";
+import { warpField } from "../FormItem/warpField";
+var BaseProFormCaptcha = React.forwardRef(
+  (props, ref) => {
+    const form = Form.useFormInstance();
+    const [count, setCount] = useState(props.countDown || 60);
+    const [timing, setTiming] = useState(false);
+    const [loading, setLoading] = useState();
+    const _a = props, {
+      rules,
+      name,
+      phoneName,
+      fieldProps,
+      onTiming,
+      captchaTextRender = (paramsTiming, paramsCount) => {
+        return paramsTiming ? `${paramsCount} 秒后重新获取` : "获取验证码";
+      },
+      captchaProps
+    } = _a, restProps = __objRest(_a, [
+      "rules",
+      "name",
+      "phoneName",
+      "fieldProps",
+      "onTiming",
+      "captchaTextRender",
+      "captchaProps"
+    ]);
+    const onGetCaptcha = (mobile) => __async(void 0, null, function* () {
+      try {
+        setLoading(true);
+        yield restProps.onGetCaptcha(mobile);
+        setLoading(false);
+        setTiming(true);
+      } catch (error) {
+        setTiming(false);
+        setLoading(false);
+        console.log(error);
+      }
+    });
+    useImperativeHandle(ref, () => ({
+      startTiming: () => setTiming(true),
+      endTiming: () => setTiming(false)
+    }));
+    useEffect(() => {
+      let interval = 0;
+      const { countDown } = props;
+      if (timing) {
+        interval = setInterval(() => {
+          setCount((preSecond) => {
+            if (preSecond <= 1) {
+              setTiming(false);
+              clearInterval(interval);
+              return countDown || 60;
+            }
+            return preSecond - 1;
+          });
+        }, 1e3);
+      }
+      return () => clearInterval(interval);
+    }, [timing]);
+    useEffect(() => {
+      if (onTiming) {
+        onTiming(count);
+      }
+    }, [count, onTiming]);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: __spreadProps(__spreadValues({}, fieldProps == null ? void 0 : fieldProps.style), {
+          display: "flex",
+          alignItems: "center"
+        }),
+        ref
+      },
+      /* @__PURE__ */ React.createElement(
+        Input,
+        __spreadProps(__spreadValues({}, fieldProps), {
+          style: __spreadValues({
+            flex: 1,
+            transition: "width .3s",
+            marginRight: 8
+          }, fieldProps == null ? void 0 : fieldProps.style)
+        })
+      ),
+      /* @__PURE__ */ React.createElement(
+        Button,
+        __spreadProps(__spreadValues({
+          style: {
+            display: "block"
+          },
+          disabled: timing,
+          loading
+        }, captchaProps), {
+          onClick: () => __async(void 0, null, function* () {
+            try {
+              if (phoneName) {
+                yield form.validateFields([phoneName].flat(1));
+                const mobile = form.getFieldValue(
+                  [phoneName].flat(1)
+                );
+                yield onGetCaptcha(mobile);
+              } else {
+                yield onGetCaptcha("");
+              }
+            } catch (error) {
+              console.log(error);
+            }
+          })
+        }),
+        captchaTextRender(timing, count)
+      )
+    );
+  }
+);
+var ProFormCaptcha = warpField(
+  BaseProFormCaptcha
+);
+var Captcha_default = ProFormCaptcha;
+export {
+  Captcha_default as default
+};