@hzab/form-render 1.6.17 → 1.6.19

package/src/components/UserSelect/index.tsx

@@ -1,123 +1,123 @@
-import React, { useCallback, useMemo } from "react";
-import { Select as AntdSelect, Avatar, type AvatarProps } from "antd";
-import { useField, useFieldSchema } from "@formily/react";
-import { observer } from "@formily/reactive-react";
-import { SelectProps as AntdSelectProps } from "antd/lib/select";
-
-import styles from "./index.module.less";
-
-type AvatarSize = AvatarProps["size"];
-
-// 定义 Option 的数据结构
-interface CustomOptionData {
-  label: string;
-  value: string | number;
-  avatar?: string; // 头像 URL，可选
-  phone?: string; // 手机号
-  idCard?: string; // 身份证号
-  [key: string]: any; // 其他可能的扩展信息
-}
-
-// 扩展 Antd Select 组件的 Props，增加自定义 Option 的渲染
-interface UserSelectProps extends AntdSelectProps {
-  /**下拉列表数据 */
-  options: CustomOptionData[];
-
-  /**是否显示头像 */
-  isAvatar?: boolean;
-
-  /**头像大小 */
-  avatarSize: AvatarSize;
-
-  /**自定义展示key */
-  configKey?: {
-    phoneKey?: string;
-    idCardKey?: string;
-  };
-
-  /**自定义展示信息 */
-  InfoRender?: Function;
-}
-
-function getLightRandomColor() {
-  const h = Math.random() * 360;
-  const s = Math.random() * 20 + 70;
-  const l = Math.random() * 20 + 70;
-
-  return `hsl(${h}, ${s}%, ${l}%)`;
-}
-
-export const UserSelect: React.FC<UserSelectProps> = observer((props) => {
-  const field: any = useField();
-  const fieldSchema = useFieldSchema();
-  const schemaOptions = field.dataSource || fieldSchema["x-component-props"]?.options || [];
-  const { options, isAvatar, configKey, InfoRender, avatarSize = "default", ...resetProps } = props;
-
-  const mergeSchemaOptions = useMemo(() => {
-    return schemaOptions.map((item) => ({ ...item, avatarColor: getLightRandomColor() }));
-  }, [schemaOptions]);
-
-  const moreValue = useCallback((soucre: Record<string, any>, mainKey: string, secondaryKey?: string) => {
-    if (mainKey) return soucre[mainKey];
-
-    return soucre[secondaryKey];
-  }, []);
-  const filteredOptions = (inputValue, option) => {
-    return (option?.label ?? "").includes(inputValue);
-  };
-  return (
-    <AntdSelect
-      // defaultOpen
-      className={styles["user-select"]}
-      {...resetProps}
-      value={field.value}
-      onChange={field.setValue}
-      optionLabelProp="label"
-      filterOption={filteredOptions}
-      loading={field.loading}
-    >
-      {mergeSchemaOptions.map((option, index) => (
-        <AntdSelect.Option
-          label={option.label}
-          key={index}
-          value={option.value}
-          className={styles["user-select-option"]}
-        >
-          <>
-            {isAvatar && (
-              <span className={styles["user-select-option__avatar"]}>
-                {option.avatar ? (
-                  <Avatar src={option.avatar} size={avatarSize} />
-                ) : (
-                  <Avatar style={{ verticalAlign: "middle", backgroundColor: option.avatarColor }} size={avatarSize}>
-                    {option.label}
-                  </Avatar>
-                )}
-              </span>
-            )}
-            <div className={styles["option-info"]}>
-              {InfoRender ? (
-                <InfoRender {...option} />
-              ) : (
-                <>
-                  <div className={styles["option-info-name"]} key="tagLabel">
-                    <span className={styles["option-info-name__label"]}>{option.label} </span>
-                  </div>
-
-                  <span className={styles["option-info__idCard"]}>
-                    手机号：{moreValue(option, configKey?.phoneKey, "phone")}
-                  </span>
-                  <span className={styles["option-info__idCard"]}>
-                    身份证号：{moreValue(option, configKey?.idCardKey, "idCard")}
-                  </span>
-                </>
-              )}
-            </div>
-          </>
-        </AntdSelect.Option>
-      ))}
-    </AntdSelect>
-  );
-});
-
-export default UserSelect;
+import React, { useCallback, useMemo } from "react";
+import { Select as AntdSelect, Avatar, type AvatarProps } from "antd";
+import { useField, useFieldSchema } from "@formily/react";
+import { observer } from "@formily/reactive-react";
+import { SelectProps as AntdSelectProps } from "antd/lib/select";
+
+import styles from "./index.module.less";
+
+type AvatarSize = AvatarProps["size"];
+
+// 定义 Option 的数据结构
+interface CustomOptionData {
+  label: string;
+  value: string | number;
+  avatar?: string; // 头像 URL，可选
+  phone?: string; // 手机号
+  idCard?: string; // 身份证号
+  [key: string]: any; // 其他可能的扩展信息
+}
+
+// 扩展 Antd Select 组件的 Props，增加自定义 Option 的渲染
+interface UserSelectProps extends AntdSelectProps {
+  /**下拉列表数据 */
+  options: CustomOptionData[];
+
+  /**是否显示头像 */
+  isAvatar?: boolean;
+
+  /**头像大小 */
+  avatarSize: AvatarSize;
+
+  /**自定义展示key */
+  configKey?: {
+    phoneKey?: string;
+    idCardKey?: string;
+  };
+
+  /**自定义展示信息 */
+  InfoRender?: Function;
+}
+
+function getLightRandomColor() {
+  const h = Math.random() * 360;
+  const s = Math.random() * 20 + 70;
+  const l = Math.random() * 20 + 70;
+
+  return `hsl(${h}, ${s}%, ${l}%)`;
+}
+
+export const UserSelect: React.FC<UserSelectProps> = observer((props) => {
+  const field: any = useField();
+  const fieldSchema = useFieldSchema();
+  const schemaOptions = field.dataSource || fieldSchema["x-component-props"]?.options || [];
+  const { options, isAvatar, configKey, InfoRender, avatarSize = "default", ...resetProps } = props;
+
+  const mergeSchemaOptions = useMemo(() => {
+    return schemaOptions.map((item) => ({ ...item, avatarColor: getLightRandomColor() }));
+  }, [schemaOptions]);
+
+  const moreValue = useCallback((soucre: Record<string, any>, mainKey: string, secondaryKey?: string) => {
+    if (mainKey) return soucre[mainKey];
+
+    return soucre[secondaryKey];
+  }, []);
+  const filteredOptions = (inputValue, option) => {
+    return (option?.label ?? "").includes(inputValue);
+  };
+  return (
+    <AntdSelect
+      // defaultOpen
+      className={styles["user-select"]}
+      {...resetProps}
+      value={field.value}
+      onChange={field.setValue}
+      optionLabelProp="label"
+      filterOption={filteredOptions}
+      loading={field.loading}
+    >
+      {mergeSchemaOptions.map((option, index) => (
+        <AntdSelect.Option
+          label={option.label}
+          key={index}
+          value={option.value}
+          className={styles["user-select-option"]}
+        >
+          <>
+            {isAvatar && (
+              <span className={styles["user-select-option__avatar"]}>
+                {option.avatar ? (
+                  <Avatar src={option.avatar} size={avatarSize} />
+                ) : (
+                  <Avatar style={{ verticalAlign: "middle", backgroundColor: option.avatarColor }} size={avatarSize}>
+                    {option.label}
+                  </Avatar>
+                )}
+              </span>
+            )}
+            <div className={styles["option-info"]}>
+              {InfoRender ? (
+                <InfoRender {...option} />
+              ) : (
+                <>
+                  <div className={styles["option-info-name"]} key="tagLabel">
+                    <span className={styles["option-info-name__label"]}>{option.label} </span>
+                  </div>
+
+                  <span className={styles["option-info__idCard"]}>
+                    手机号：{moreValue(option, configKey?.phoneKey, "phone")}
+                  </span>
+                  <span className={styles["option-info__idCard"]}>
+                    身份证号：{moreValue(option, configKey?.idCardKey, "idCard")}
+                  </span>
+                </>
+              )}
+            </div>
+          </>
+        </AntdSelect.Option>
+      ))}
+    </AntdSelect>
+  );
+});
+
+export default UserSelect;

package/src/components/index.tsx

@@ -1,17 +1,17 @@
-import Text from "./Text";
-export * from "./ArrayCards";
-export * from "./ArrayTable";
-
-export * from "./Upload";
-
-export * from "./UserSelect";
-export * from "./PersonnelSelect"
-
-export * from "./TreeCheckbox";
-export * from "./DatePicker";
-
-export * from "./LocationPicker";
-export * from "./LocationListPicker";
-export * from "./RichEditor";
-
-export { Text };
+import Text from "./Text";
+export * from "./ArrayCards";
+export * from "./ArrayTable";
+
+export * from "./Upload";
+
+export * from "./UserSelect";
+export * from "./PersonnelSelect"
+
+export * from "./TreeCheckbox";
+export * from "./DatePicker";
+
+export * from "./LocationPicker";
+export * from "./LocationListPicker";
+export * from "./RichEditor";
+
+export { Text };

package/src/index.tsx

@@ -1,198 +1,198 @@
-import React, { useEffect, useMemo, useImperativeHandle, forwardRef, useCallback, useRef } from "react";
-import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
-import { createSchemaField } from "@formily/react";
-import {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  // Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-} from "c-formily-antd";
-import { Card, Slider, Rate } from "antd";
-
-// 自定义组件
-import * as customComponents from "./components/index";
-import { GlobalPropsContext } from "./common/global-props-context";
-import { bindOnChange } from "./common/schema-handler";
-
-import "./index.less";
-
-const antdComponents = {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  // Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-};
-
-const noop = () => {};
-
-const FormRender = forwardRef((props: any, parentRef) => {
-  /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
-  const schemaScopeRef = useRef<{ _$tempData: Object }>();
-  if (props.schemaScope && !schemaScopeRef.current) {
-    schemaScopeRef.current = props.schemaScope;
-  } else if (!schemaScopeRef.current) {
-    schemaScopeRef.current = { _$tempData: {} };
-  }
-  if (!schemaScopeRef.current?._$tempData) {
-    schemaScopeRef.current._$tempData = {};
-  }
-  const SchemaField = useCallback(
-    createSchemaField({
-      components: {
-        ArrayTable,
-        ArrayCards,
-        Space,
-        FormGrid,
-        FormLayout,
-        FormTab,
-        FormCollapse,
-        FormItem,
-        DatePicker,
-        Checkbox,
-        Cascader,
-        Editable,
-        Input,
-        NumberPicker,
-        Switch,
-        Password,
-        PreviewText,
-        Radio,
-        Reset,
-        Select,
-        Submit,
-        TimePicker,
-        Transfer,
-        TreeSelect,
-        // Upload,
-        Card,
-        Slider,
-        Rate,
-        ...customComponents,
-        ...props.components,
-      },
-      scope: schemaScopeRef.current,
-    }),
-    [],
-  );
-
-  const formRender = useMemo(
-    () =>
-      createForm({
-        initialValues: props.initialValues,
-        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
-        readOnly: props.readOnly,
-        disabled: props.disabled,
-        ...(props.formOptions || {}),
-        effects(...args) {
-          props.onFormValuesChange && onFormValuesChange(props.onFormValuesChange);
-          props.onFieldValueChange && onFieldValueChange("*", props.onFieldValueChange);
-          props.formOptions?.effects && props.formOptions?.effects(...args);
-        },
-      }),
-    [],
-  );
-
-  // 表单提交方法
-  const autoSubmit = (fromValue) => {
-    props.onSubmit(fromValue);
-  };
-  // 表单校验方法
-  const autoSubmitFailed = (messages) => {
-    props.onSubmitFailed(messages);
-  };
-
-  useImperativeHandle(parentRef, () => ({ formRender }));
-
-  useEffect(() => {
-    props.init && props.init(formRender);
-  }, []);
-
-  const footer = useMemo(() => {
-    const { Slots } = props;
-    if (typeof Slots === "function") {
-      return <Slots />;
-    }
-    if (typeof Slots?.footer === "function") {
-      return <Slots.footer />;
-    }
-  }, [props.Slots]);
-
-  const formLayoutProps = {
-    ...props.schema?.form,
-  };
-
-  const schema = useMemo(() => {
-    return bindOnChange(props.schema, {
-      schemaScope: schemaScopeRef.current,
-      onChange: props.onChange,
-      formRender,
-    });
-  }, []);
-
-  return (
-    <GlobalPropsContext.Provider value={props}>
-      <Form
-        className={`form-render ${props.className}`}
-        layout={props.layout}
-        form={formRender}
-        labelCol={props.schema.form.labelCol}
-        wrapperCol={props.schema.form.wrapperCol}
-        onAutoSubmit={autoSubmit}
-        onAutoSubmitFailed={autoSubmitFailed}
-      >
-        <FormLayout {...formLayoutProps}>
-          <SchemaField schema={schema}></SchemaField>
-          <div className="form-render-footer xxm">{footer}</div>
-        </FormLayout>
-      </Form>
-    </GlobalPropsContext.Provider>
-  );
-});
-
-export { customComponents, antdComponents };
-
-export default FormRender;
+import React, { useEffect, useMemo, useImperativeHandle, forwardRef, useCallback, useRef } from "react";
+import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
+import { createSchemaField } from "@formily/react";
+import {
+  Form,
+  FormItem,
+  DatePicker,
+  Checkbox,
+  Cascader,
+  Editable,
+  Input,
+  NumberPicker,
+  Switch,
+  Password,
+  PreviewText,
+  Radio,
+  Reset,
+  Select,
+  Space,
+  Submit,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  // Upload,
+  FormGrid,
+  FormLayout,
+  FormTab,
+  FormCollapse,
+  ArrayTable,
+  ArrayCards,
+} from "c-formily-antd";
+import { Card, Slider, Rate } from "antd";
+
+// 自定义组件
+import * as customComponents from "./components/index";
+import { GlobalPropsContext } from "./common/global-props-context";
+import { bindOnChange } from "./common/schema-handler";
+
+import "./index.less";
+
+const antdComponents = {
+  Form,
+  FormItem,
+  DatePicker,
+  Checkbox,
+  Cascader,
+  Editable,
+  Input,
+  NumberPicker,
+  Switch,
+  Password,
+  PreviewText,
+  Radio,
+  Reset,
+  Select,
+  Space,
+  Submit,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  // Upload,
+  FormGrid,
+  FormLayout,
+  FormTab,
+  FormCollapse,
+  ArrayTable,
+  ArrayCards,
+};
+
+const noop = () => {};
+
+const FormRender = forwardRef((props: any, parentRef) => {
+  /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
+  const schemaScopeRef = useRef<{ _$tempData: Object }>();
+  if (props.schemaScope && !schemaScopeRef.current) {
+    schemaScopeRef.current = props.schemaScope;
+  } else if (!schemaScopeRef.current) {
+    schemaScopeRef.current = { _$tempData: {} };
+  }
+  if (!schemaScopeRef.current?._$tempData) {
+    schemaScopeRef.current._$tempData = {};
+  }
+  const SchemaField = useCallback(
+    createSchemaField({
+      components: {
+        ArrayTable,
+        ArrayCards,
+        Space,
+        FormGrid,
+        FormLayout,
+        FormTab,
+        FormCollapse,
+        FormItem,
+        DatePicker,
+        Checkbox,
+        Cascader,
+        Editable,
+        Input,
+        NumberPicker,
+        Switch,
+        Password,
+        PreviewText,
+        Radio,
+        Reset,
+        Select,
+        Submit,
+        TimePicker,
+        Transfer,
+        TreeSelect,
+        // Upload,
+        Card,
+        Slider,
+        Rate,
+        ...customComponents,
+        ...props.components,
+      },
+      scope: schemaScopeRef.current,
+    }),
+    [],
+  );
+
+  const formRender = useMemo(
+    () =>
+      createForm({
+        initialValues: props.initialValues,
+        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        ...(props.formOptions || {}),
+        effects(...args) {
+          props.onFormValuesChange && onFormValuesChange(props.onFormValuesChange);
+          props.onFieldValueChange && onFieldValueChange("*", props.onFieldValueChange);
+          props.formOptions?.effects && props.formOptions?.effects(...args);
+        },
+      }),
+    [],
+  );
+
+  // 表单提交方法
+  const autoSubmit = (fromValue) => {
+    props.onSubmit(fromValue);
+  };
+  // 表单校验方法
+  const autoSubmitFailed = (messages) => {
+    props.onSubmitFailed(messages);
+  };
+
+  useImperativeHandle(parentRef, () => ({ formRender }));
+
+  useEffect(() => {
+    props.init && props.init(formRender);
+  }, []);
+
+  const footer = useMemo(() => {
+    const { Slots } = props;
+    if (typeof Slots === "function") {
+      return <Slots />;
+    }
+    if (typeof Slots?.footer === "function") {
+      return <Slots.footer />;
+    }
+  }, [props.Slots]);
+
+  const formLayoutProps = {
+    ...props.schema?.form,
+  };
+
+  const schema = useMemo(() => {
+    return bindOnChange(props.schema, {
+      schemaScope: schemaScopeRef.current,
+      onChange: props.onChange,
+      formRender,
+    });
+  }, []);
+
+  return (
+    <GlobalPropsContext.Provider value={props}>
+      <Form
+        className={`form-render ${props.className}`}
+        layout={props.layout}
+        form={formRender}
+        labelCol={props.schema.form.labelCol}
+        wrapperCol={props.schema.form.wrapperCol}
+        onAutoSubmit={autoSubmit}
+        onAutoSubmitFailed={autoSubmitFailed}
+      >
+        <FormLayout {...formLayoutProps}>
+          <SchemaField schema={schema}></SchemaField>
+          <div className="form-render-footer xxm">{footer}</div>
+        </FormLayout>
+      </Form>
+    </GlobalPropsContext.Provider>
+  );
+});
+
+export { customComponents, antdComponents };
+
+export default FormRender;