@hw-component/form 0.0.9-beta-v20 → 0.0.9-beta-v21

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

@@ -1,182 +0,0 @@
-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;
-    let initSaveValue = {};
-    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);
-          initSaveValue = newValue;
-          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) {
-        const val = value || form.getFieldsValue();
-        return this.formatValues(val, "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);
-          });
-        });
-      },
-      resetFieldsInitValue: () => {
-        const oldValue = form.getFieldsValue();
-        const keys = Object.keys(oldValue);
-        const newVale = {};
-        keys.forEach((key) => {
-          newVale[key] = undefined;
-        });
-        form.setFieldsValue({
-          ...newVale,
-          ...initSaveValue,
-        });
-      },
-      clear: () => {
-        form.resetFields();
-        isLoading = false;
-      },
-    };
-  }, []);
-};

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

@@ -1,194 +0,0 @@
-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

@@ -1,54 +0,0 @@
-@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;
-}
-.@{ant-prefix}-hw-form-base-item-top-left {
-  .@{ant-prefix}-form-item-label > label {
-    height: auto;
-  }
-  .@{ant-prefix}-hw-form-item-colon {
-    text-align: left;
-  }
-}
-.@{ant-prefix}-hw-form-base-item-top-right {
-  .@{ant-prefix}-form-item-label > label {
-    height: auto;
-  }
-  .@{ant-prefix}-hw-form-item-colon {
-    text-align: right;
-  }
-}
-.@{ant-prefix}-hw-form-base-item-top {
-  .@{ant-prefix}-form-item-label > label {
-    height: auto;
-  }
-}
-.@{ant-prefix}-hw-form-base-item-right {
-  .@{ant-prefix}-hw-form-item-colon {
-    text-align: right;
-  }
-}
-
-.@{ant-prefix}-hw-form-base-item-left {
-  .@{ant-prefix}-hw-form-item-colon {
-    text-align: left;
-  }
-}

package/src/components/Form/index.tsx

@@ -1,113 +0,0 @@
-import { Form, Row } 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";
-import {ItemPropsType} from "./modal";
-
-export default ({
-  configData,
-  labelWidth,
-  form,
-  request,
-  onFinish,
-  infoRequest,
-  valueType = "float",
-  initialValues,
-  params = {},
-  onValuesChange,
-  itemSpan,
-  hideLabel: formHideLabel = false,
-  gutter,
-  submitLoading,
-  labelAlign: formLabelAlign,
-                  formItemStyle,
-    itemProps:formItemProps={},
-  ...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: submitLoading || loading, form: hForm, valueType }}
-      >
-        <Form
-          form={hForm}
-          onFinish={run}
-          onValuesChange={valuesChange}
-          {...props}
-        >
-          <Row gutter={gutter}>
-            {newConfigData.map((itemData: HItemProps, index) => {
-              const {
-                labelWidth: itemLabelWidth,
-                hideLabel = formHideLabel,
-                labelAlign = formLabelAlign,
-                name,
-                  style=formItemStyle,
-                  itemProps={},
-              } = itemData;
-              const defaultItemProps={
-                 ...formItemProps,
-                 ...itemProps
-              }
-              return (
-                <Item
-                  {...itemData}
-                  labelAlign={labelAlign}
-                  key={name||index}
-                  style={style}
-                  itemProps={(defaultItemProps as ItemPropsType)}
-                  hideLabel={hideLabel}
-                  itemSpan={itemSpan}
-                  labelWidth={itemLabelWidth || labelWidth}
-                />
-              );
-            })}
-          </Row>
-          <InitSet />
-        </Form>
-      </FormContext.Provider>
-    </PageHandler>
-  );
-};