@hw-component/form 0.0.4 → 0.0.5-beta-v2

package/src/components/Form/hooks/useHForm.ts

@@ -0,0 +1,164 @@
+import { useMemo } from "react";
+import { Form } from "antd";
+import type { FormatItemModal, HFormInstance } from "../modal";
+import type { argsFn } from "../modal";
+
+interface DispatchItemData {
+  keysFn: Record<string, argsFn>;
+  defaultFn: argsFn[];
+}
+
+export default () => {
+  const [form] = Form.useForm();
+  return useMemo<HFormInstance>(() => {
+    const formatSourceData: Record<string, FormatItemModal> = {};
+    let dispatchSourceData: Record<string, DispatchItemData> = {};
+    const initDispatch: Record<string, argsFn> = {};
+    let cacheValues: Record<string, any> = {};
+    let isLoading = false;
+
+    const norAddItemDispatch = (name, manual, fn) => {
+      if (manual === false && name) {
+        initDispatch[name] = fn;
+      }
+      if (!name) {
+        return {
+          keysFn: {},
+          defaultFn: [fn],
+        };
+      }
+      return {
+        keysFn: {
+          [name]: fn,
+        },
+        defaultFn: [],
+      };
+    };
+    return {
+      reload: (params) => {
+        return Promise.resolve(params);
+      },
+      initValues() {
+        let newValue = {};
+        if (cacheValues) {
+          newValue = this.formatValues(cacheValues);
+          form.setFieldsValue(newValue);
+        }
+        const initKeys = Object.keys(initDispatch);
+        initKeys.forEach((key) => {
+          initDispatch[key]({ changedValues: newValue, oldValues: newValue });
+        });
+        isLoading = true;
+      },
+      addFormat(name: string, format?: FormatItemModal) {
+        if (!format) {
+          return;
+        }
+        const { inputValue, outputValue } = format;
+        formatSourceData[name] = {
+          inputValue,
+          outputValue,
+        };
+      }, //注册转化方法
+      formatValues(value = {}, formatKey = "inputValue") {
+        const valKeys = Object.keys(value).length;
+        if (!valKeys) {
+          return {};
+        }
+        let newValue = { ...value };
+        const keys = Object.keys(formatSourceData);
+        keys.forEach((key) => {
+          const format = formatSourceData[key]?.[formatKey];
+          if (!format) {
+            return;
+          }
+          const resultValue = format(value);
+          Reflect.deleteProperty(newValue, key);
+          newValue = {
+            ...newValue,
+            ...resultValue,
+          };
+        });
+        return newValue;
+      }, //转化方法
+      dispatch(action, ...args) {
+        const { key, name } = action;
+        const items = dispatchSourceData[key];
+        if (!items) {
+          return;
+        }
+        const { keysFn, defaultFn } = items;
+        if (name) {
+          return keysFn[name]?.(...args);
+        }
+        const fnArrays = Object.keys(keysFn).map((itemKey) => {
+          return keysFn[itemKey];
+        }); //不存在name就合并
+        [...fnArrays, ...defaultFn].forEach((fn) => {
+          fn(...args);
+        });
+      },
+      addDispatchListener(action, fn) {
+        const { key, name, dispatch = {} } = action;
+        const { manual } = dispatch;
+        const items = dispatchSourceData[key];
+        if (!items) {
+          dispatchSourceData[key] = norAddItemDispatch(name, manual, fn);
+          return;
+        }
+        const { keysFn, defaultFn } = items;
+        if (name) {
+          keysFn[name] = fn;
+        } else {
+          defaultFn.push(fn);
+        }
+        if (manual === false && name) {
+          initDispatch[name] = fn;
+        }
+        dispatchSourceData[key] = {
+          keysFn,
+          defaultFn,
+        };
+      },
+      removeDispatchListener(action) {
+        if (!action) {
+          dispatchSourceData = {};
+          return;
+        }
+        const { key, name } = action;
+        const items = dispatchSourceData[key];
+        if (!items) {
+          return;
+        }
+        if (name) {
+          const { keysFn } = items;
+          Reflect.deleteProperty(keysFn, name);
+          items.keysFn = keysFn;
+          dispatchSourceData[key] = items;
+          return;
+        }
+        Reflect.deleteProperty(dispatchSourceData, key);
+      },
+      outputValues(value) {
+        return this.formatValues(value, "outputValue");
+      },
+      ...form,
+      setFieldsValue(values) {
+        if (!isLoading) {
+          cacheValues = values;
+          return;
+        }
+        const newValue = this.formatValues(values);
+        form.setFieldsValue(newValue);
+      },
+      validateFields(nameList) {
+        return new Promise((resolve) => {
+          form.validateFields(nameList).then((value) => {
+            const result = this.formatValues(value, "outputValue");
+            return resolve(result);
+          });
+        });
+      },
+    };
+  }, []);
+};

package/src/components/Form/hooks/useInitConfigData.tsx

@@ -0,0 +1,194 @@
+import React, { useMemo } from "react";
+import type {
+  HFormItemProps,
+  HFormProps,
+  HItemProps,
+  DefaultComponentModal,
+} from "../modal";
+import { placeholderConfig } from "../config";
+import type { Rule } from "rc-field-form/lib/interface";
+import type { FormInstance } from "antd";
+import { useDefaultComponents } from "../hooks";
+import type { ConfigComponentModal } from "../modal";
+import type { DispatchSourceDataModal } from "../modal";
+import type { DispatchModal } from "../modal";
+
+const mathRequired = (
+  configItem: HFormItemProps,
+  form: FormInstance,
+  defaultComponents: DefaultComponentModal
+) => {
+  const { required, placeholder, rules, type = "input" } = configItem;
+  let resultRequired = false;
+  const dom = defaultComponents[type];
+  const resultRules = rules?.map((item) => {
+    let eachItem = item;
+    if (typeof item === "function") {
+      eachItem = item(form);
+    }
+
+    const { required: itemRequired, message } = eachItem as any;
+    if (itemRequired) {
+      resultRequired = itemRequired;
+    }
+    if (itemRequired && !message) {
+      let msg = placeholder;
+      const itemDom = dom as ConfigComponentModal;
+      if (itemDom?.requiredErrMsg) {
+        msg = itemDom.requiredErrMsg(configItem);
+      }
+      return {
+        ...eachItem,
+        required: itemRequired,
+        message: msg,
+      };
+    }
+    return eachItem;
+  });
+  return {
+    required: typeof required === "boolean" ? required : resultRequired,
+    rules: resultRules as Rule[],
+  };
+}; //是否必填
+const matchDefaultPlaceholder = (
+  props: HFormItemProps,
+  defaultComponents: DefaultComponentModal
+) => {
+  const { label, placeholder, type = "input" } = props;
+  const dom = defaultComponents[type];
+  if (placeholder) {
+    return placeholder;
+  }
+  const itemDom = dom as ConfigComponentModal;
+  if (itemDom?.placeholder) {
+    return itemDom.placeholder(props);
+  }
+  if (placeholderConfig.inputType.indexOf(type) !== -1) {
+    return `请输入${label}`;
+  }
+  return `请选择${label}`;
+}; //自动构建
+
+const defaultPlaceholderPropsMaker = (
+  props: HFormItemProps,
+  defaultComponents: DefaultComponentModal
+) => {
+  const placeholder = matchDefaultPlaceholder(props, defaultComponents);
+  return {
+    ...props,
+    placeholder,
+  };
+}; //组装参数
+const itemControl = (
+  item: HItemProps,
+  form: FormInstance,
+  defaultComponents: DefaultComponentModal
+): HFormItemProps => {
+  const { render, ...defaultProps } = defaultPlaceholderPropsMaker(
+    item,
+    defaultComponents
+  );
+  const { rules, required } = mathRequired(
+    defaultProps,
+    form,
+    defaultComponents
+  );
+  return {
+    ...defaultProps,
+    required,
+    rules,
+    render,
+  };
+};
+const itemDispatchProvider = (
+  name: string,
+  config: Required<DispatchModal<string>>,
+  dispatchSourceData: DispatchSourceDataModal
+) => {
+  const { dependencies, fnKey, reset } = config;
+  const itemDispatch = dispatchSourceData[dependencies as string];
+  if (!itemDispatch) {
+    return {
+      [dependencies]: {
+        [name]: {
+          fnKey,
+          reset,
+        },
+      },
+    };
+  }
+  const itemNameDispatch = {
+    [name]: {
+      fnKey,
+      reset,
+    },
+  };
+  return {
+    [dependencies]: {
+      ...itemDispatch,
+      ...itemNameDispatch,
+    },
+  };
+};
+const dispatchProvider = (
+  item: HItemProps,
+  dispatchSourceData: DispatchSourceDataModal
+) => {
+  const { name = "", dispatch = {}, dependencies = "allDependencies" } = item;
+  const {
+    fnKey,
+    dependencies: dispatchDependencies = dependencies as string | string[],
+    manual = true,
+    reset = true,
+  } = dispatch;
+  if (!fnKey) {
+    return {};
+  }
+  if (Array.isArray(dispatchDependencies)) {
+    let allDispatch: DispatchSourceDataModal = {
+      ...dispatchSourceData,
+    };
+    dispatchDependencies.forEach((key) => {
+      const itemDispatch = itemDispatchProvider(
+        name,
+        { dependencies: key, fnKey, manual, reset },
+        dispatchSourceData
+      );
+      allDispatch = {
+        ...allDispatch,
+        ...itemDispatch,
+      };
+    });
+    return allDispatch;
+  }
+  const itemDispatch = itemDispatchProvider(
+    name,
+    { dependencies: dispatchDependencies, fnKey, manual, reset },
+    dispatchSourceData
+  );
+  return {
+    ...dispatchSourceData,
+    ...itemDispatch,
+  };
+};
+type InitConfigModal = Required<Pick<HFormProps, "configData" | "form">>;
+
+export default ({ configData, form }: InitConfigModal) => {
+  const defaultComponents = useDefaultComponents();
+  return useMemo(() => {
+    const newConfigData: HItemProps[] = [];
+    let dispatchSourceData: DispatchSourceDataModal = {};
+    configData.forEach((item) => {
+      const itemDispatch = dispatchProvider(item, dispatchSourceData);
+      dispatchSourceData = {
+        ...dispatchSourceData,
+        ...itemDispatch,
+      };
+      newConfigData.push(itemControl(item, form, defaultComponents));
+    });
+    return {
+      newConfigData,
+      dispatchSourceData,
+    };
+  }, [configData]);
+};

package/src/components/Form/index.less

@@ -0,0 +1,22 @@
+@import "../styles/local.less";
+.@{ant-prefix}-hw-form-item-colon:after {
+  position: relative;
+  top: -0.5px;
+  margin: 0 0 0 2px;
+  content: ":";
+}
+.@{ant-prefix}-hw-form-item-required:before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #ff4d4f;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: "*";
+}
+
+.@{ant-prefix}-hw-form-base-item {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+}

package/src/components/Form/index.tsx

@@ -0,0 +1,85 @@
+import { Form } from "antd";
+import type { HFormProps, HItemProps } from "./modal";
+import Item from "./FormItem";
+import { useCurrentForm, useInfoReq, useValuesChange } from "./hooks";
+import { FormContext } from "./Context";
+import PageHandler from "../PageHandler";
+import useInitConfigData from "./hooks/useInitConfigData";
+import { useEffect } from "react";
+import InitSet from "./InitSet";
+
+export default ({
+  configData,
+  labelWidth,
+  form,
+  request,
+  onFinish,
+  infoRequest,
+  valueType = "float",
+  initialValues,
+  params = {},
+  onValuesChange,
+  ...props
+}: HFormProps) => {
+  const hForm = useCurrentForm(form);
+  const { newConfigData, dispatchSourceData } = useInitConfigData({
+    configData,
+    form: hForm,
+  });
+  const { subControl, infoControl } = useInfoReq({
+    initialValues,
+    request,
+    onFinish,
+    valueType,
+    form: hForm,
+    infoRequest,
+    params,
+  });
+  const valuesChange = useValuesChange({
+    onValuesChange,
+    dispatch: dispatchSourceData,
+    form: hForm,
+  });
+  const { run, loading } = subControl;
+  const {
+    run: infoRun,
+    loading: infoLoading,
+    error: infoErr,
+    data: infoData,
+  } = infoControl;
+
+  useEffect(() => {
+    return () => {
+      hForm.removeDispatchListener();
+    };
+  }, []);
+  return (
+    <PageHandler
+      loading={infoLoading}
+      error={infoErr}
+      data={infoData}
+      reload={infoRun}
+    >
+      <FormContext.Provider value={{ loading, form: hForm, valueType }}>
+        <Form
+          form={hForm}
+          onFinish={run}
+          onValuesChange={valuesChange}
+          {...props}
+        >
+          {newConfigData.map((itemData: HItemProps, index) => {
+            const { labelWidth: itemLabelWidth } = itemData;
+            return (
+              <Item
+                {...itemData}
+                key={index}
+                labelWidth={itemLabelWidth || labelWidth}
+              />
+            );
+          })}
+          <InitSet />
+        </Form>
+      </FormContext.Provider>
+    </PageHandler>
+  );
+};

package/src/components/Form/modal.ts

@@ -0,0 +1,179 @@
+import type { FormInstance, FormItemProps, FormProps } from "antd";
+import type { HCheckboxProps } from "../CheckboxGroup/modal";
+import type React from "react";
+import type {
+  HButtonProps,
+  HInputProps,
+  HSelectInputProps,
+} from "../Input/modal";
+import type { HRadioGroupProps } from "../RadioGroup";
+import type { HSelectProps } from "../Select/modal";
+import type { ButtonProps } from "antd/es";
+import type { HSwitchProps } from "../Switch";
+import type {
+  HDatePickerProps,
+  HRangePickerProps,
+  HTimePickerProps,
+} from "../TDPicker/modal";
+import type { TextAreaProps } from "antd/es/input";
+import type { IUpLoadProps } from "../Upload/modal";
+import type { SelectProps } from "antd";
+import type { RangePickerProps } from "antd/es/date-picker";
+import type {
+  PromiseFnResult,
+  ValueCheckMapModal,
+  ValueSwitchMapModal,
+  DateRangePickerValueMapModal,
+} from "../modal";
+import type { ForwardedRef } from "react";
+import type { DataFnProvider } from "../modal";
+
+type RenderFun = (
+  props: HItemProps,
+  node: React.ReactNode,
+  form: FormInstance
+) => React.ReactNode;
+type ItemPropsType =
+  | HCheckboxProps
+  | HInputProps
+  | HSelectInputProps
+  | HButtonProps
+  | HRadioGroupProps
+  | HSelectProps
+  | ButtonProps
+  | HSwitchProps
+  | HDatePickerProps
+  | HRangePickerProps
+  | HTimePickerProps
+  | TextAreaProps
+  | IUpLoadProps;
+
+export interface HoverModal {
+  text?: string;
+  icon?: React.ReactNode;
+}
+type HelperModal = (form: HFormInstance) => React.ReactNode | string;
+
+export type HideModal = (form: HFormInstance) => boolean;
+
+export type AddDispatchListenerFn = (action: ActionModal, fn: argsFn) => void;
+export type DispatchSourceDataModal = Record<
+  string,
+  Record<string, DispatchModal>
+>;
+export interface DispatchModal<T = string | string[]> {
+  fnKey?: string;
+  dependencies?: T;
+  manual?: boolean;
+  reset?: boolean;
+}
+export interface HItemProps extends Omit<FormItemProps, "name"> {
+  type?: string;
+  itemProps?: ItemPropsType;
+  render?: RenderFun;
+  helper?: HelperModal | string;
+  hover?: string | HoverModal;
+  // formItems?: HItemProps[]; 保留感觉没必要
+  labelWidth?: number;
+  hide?: boolean | HideModal;
+  placeholder?: string | string[];
+  // formatKeys?: string[];
+  name?: string;
+  dispatch?: DispatchModal;
+}
+
+export interface HFormProps<T = any, R = any>
+  extends Omit<FormProps, "form" | "onFinish"> {
+  configData: HItemProps[];
+  labelWidth?: number;
+  request?: (values: T, params?: any) => Promise<R>;
+  infoRequest?: PromiseFnResult;
+  valueType?: string;
+  form?: HFormInstance;
+  params?: any;
+  onFinish?: (values: T, params?: any) => void;
+}
+export interface HFormItemProps extends HItemProps {
+  required?: boolean;
+  value?: any;
+  onChange?: (val: any, item: any) => void;
+}
+export type argsFn = (...args: any[]) => void;
+export interface FormContextProps {
+  loading?: boolean;
+  form: HFormInstance;
+  valueType?: string;
+}
+interface ConfigUploadProps {
+  exFiles?: string[];
+  maxSize?: number;
+  request?: PromiseFnResult;
+}
+export type ComponentModal =
+  | React.FunctionComponent<any>
+  | React.ComponentClass<any>
+  | React.ForwardRefExoticComponent<any>;
+
+export interface ConfigComponentModal {
+  Component: ComponentModal;
+  placeholder?: DataFnProvider<HItemProps>;
+  requiredErrMsg?: DataFnProvider<HItemProps>;
+}
+export type DefaultComponentItemModal = ComponentModal | ConfigComponentModal;
+export type DefaultComponentModal = Record<string, DefaultComponentItemModal>;
+export interface IFormConfigContextProps {
+  fieldNames?: SelectProps["fieldNames"];
+  valueCheckMap?: ValueCheckMapModal;
+  valueSwitchMap?: ValueSwitchMapModal;
+  valueRangePickerValueMap?: DateRangePickerValueMapModal;
+  dateRanges?: RangePickerProps["ranges"];
+  uploadProps?: ConfigUploadProps;
+  defaultComponent?: DefaultComponentModal;
+}
+interface ActionModal {
+  key: string;
+  name?: string;
+  dispatch?: DispatchModal;
+}
+export interface HFormInstance extends FormInstance {
+  addFormat: (name: string, formats?: FormatItemModal) => void;
+  initValues: VoidFunction;
+  formatValues: (
+    values?: Record<string, any>,
+    formatKey?: string
+  ) => Record<string, any>;
+  dispatch: (action: ActionModal, ...args: any[]) => void;
+  outputValues: (values?: Record<string, any>) => Record<string, any>;
+  addDispatchListener: AddDispatchListenerFn;
+  removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
+  reload: PromiseFnResult;
+}
+
+export interface ConnectConfigModal {
+  format?: Record<string, addFormatItemModal>;
+}
+
+type ValueFormat = (value: Record<string, any>) => Record<string, any>;
+
+export interface FormatItemModal {
+  inputValue: ValueFormat;
+  outputValue: ValueFormat;
+}
+
+type AddValueFormat = (
+  item: HFormItemProps,
+  value: Record<string, any>
+) => Record<string, any>;
+
+export interface addFormatItemModal {
+  inputValue: AddValueFormat;
+  outputValue: AddValueFormat;
+}
+
+export interface ConnectResultProps extends HFormItemProps {
+  addFormat?: (format: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: (key: string, fn: argsFn) => void;
+  ref?: ForwardedRef<any>;
+  value?: any;
+  onChange?: (value: any, item?: any) => void;
+}

package/src/components/Input/ButtonInput.tsx

@@ -1,9 +1,9 @@
 import { Input, Button } from "antd";
-import type { HButtonPropsProps } from "./modal";
 import React from "react";
 import { useRequest } from "ahooks";
+import type { HButtonInputProps } from "./modal";
 
-const Index: React.FC<HButtonPropsProps> = ({
+const Index: React.FC<HButtonInputProps> = ({
   buttonProps = {},
   value,
   onChange,
@@ -21,18 +21,24 @@ const Index: React.FC<HButtonPropsProps> = ({
   const change = (e) => {
     onChange?.(e.target.value);
   };
-  const click = async (e) => {
+  const click = async () => {
     let result = value;
     if (request) {
       result = await run(value);
     }
-    onClick?.(result, e);
+    onClick?.(result, onChange);
   };
 
   return (
     <Input.Group compact style={{ display: "flex" }}>
       <Input {...props} style={{ flex: 1 }} value={value} onChange={change} />
-      <Button {...oProps} type={type} onClick={click} loading={loading}>
+      <Button
+        {...oProps}
+        type={type}
+        onClick={click}
+        loading={loading}
+        style={{ marginLeft: 4 }}
+      >
         {children}
       </Button>
     </Input.Group>

package/src/components/Input/ColorInput/Picker.tsx

@@ -0,0 +1,18 @@
+import { SketchPicker } from "react-color";
+import type { HInputProps } from "@/components/Input/modal";
+import { presetColors } from "./data";
+import { useClassName } from "../../hooks";
+
+export default ({ value, onChange }: HInputProps) => {
+  const classname = useClassName("hw-color-input-picker");
+  return (
+    <SketchPicker
+      width={"250px"}
+      styles={{}}
+      presetColors={presetColors}
+      color={value}
+      onChangeComplete={onChange}
+      className={classname}
+    />
+  );
+};