@hw-component/form 0.0.1 → 0.0.2-bate

package/src/components/Form/FormItem/Helper.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { HItemProps } from "@/components/Form/modal";
+import type { FormInstance } from "antd";
+import { Typography, Row } from "antd";
+import { useFormContext } from "../Context";
+
+interface HelperProps {
+  helper?: HItemProps["helper"];
+}
+
+const Index: React.FC<HelperProps> = ({ helper }) => {
+  const { form } = useFormContext();
+  if (!helper) {
+    return null;
+  }
+  if (typeof helper === "function") {
+    return (
+      <Typography.Text type={"secondary"}>
+        {helper(form as FormInstance)}
+      </Typography.Text>
+    );
+  }
+  return <Typography.Text type={"secondary"}>{helper}</Typography.Text>;
+};
+
+export default Index;

package/src/components/Form/FormItem/RegularFormItem.tsx

@@ -0,0 +1,7 @@
+import BasicItem from "./BasicItem";
+import type { FormItemWithRender } from "../modal";
+
+export default (props: FormItemWithRender) => {
+  const { type, colon } = props;
+  return <BasicItem {...props} colon={type === "submit" ? false : colon} />;
+};

package/src/components/Form/FormItem/UpFormItem.tsx

@@ -0,0 +1,20 @@
+import { Form } from "antd";
+import type { FormItemWithRender } from "../modal";
+import BasicItem from "./BasicItem";
+import { useShouldUpdate } from "./hooks";
+const { Item } = Form;
+export default ({
+  shouldUpdate,
+  dependencies,
+  hide,
+  ...props
+}: FormItemWithRender) => {
+  const resultShouldUpdate = useShouldUpdate({ shouldUpdate, hide });
+  return (
+    <Item shouldUpdate={resultShouldUpdate} dependencies={dependencies}>
+      {() => {
+        return <BasicItem hide={hide} {...props} />;
+      }}
+    </Item>
+  );
+};

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

@@ -0,0 +1,44 @@
+import UpFormItem from "./UpFormItem";
+import RegularFormItem from "./RegularFormItem";
+import { useMemo } from "react";
+import type {
+  FormItemWithRender,
+  HFormInstance,
+} from "@/components/Form/modal";
+import type { HItemProps } from "@/components/Form/modal";
+
+export const useFormItemDomControl = ({
+  shouldUpdate,
+  hide,
+  dependencies,
+}: FormItemWithRender) => {
+  return useMemo(() => {
+    if (shouldUpdate || typeof hide === "function" || dependencies) {
+      return UpFormItem;
+    }
+    return RegularFormItem;
+  }, [shouldUpdate, hide]);
+}; //更新或者不更新组件
+
+interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
+  form: HFormInstance;
+}
+export const useShouldUpdate = ({
+  hide,
+  shouldUpdate,
+}: Omit<HItemProps, "name">) => {
+  if (typeof hide === "function" && !shouldUpdate) {
+    return true;
+  }
+  return shouldUpdate;
+};
+
+export const useHide = ({ hide, form }: UseHideUpItemModal) => {
+  if (hide === true) {
+    return true;
+  }
+  if (typeof hide === "function") {
+    return hide(form);
+  }
+  return !!hide;
+};

package/src/components/Form/FormItem/index.tsx

@@ -0,0 +1,8 @@
+import { useFormItemDomControl } from "./hooks";
+import React from "react";
+import type { FormItemWithRender } from "../modal";
+
+export default (props: FormItemWithRender) => {
+  const Component = useFormItemDomControl(props);
+  return <Component {...props} />;
+};

package/src/components/Form/HFormConnect.tsx

@@ -0,0 +1,49 @@
+import { useFormContext } from "./Context";
+import type { HFormItemProps } from "@/components/Form/modal";
+import React, { useEffect } from "react";
+import type { ConnectConfigModal } from "@/components/Form/modal";
+import type { addFormatItemModal } from "@/components/Form/modal";
+import type { ConnectResultProps } from "@/components/Form/modal";
+
+const formatMaker = (
+  itemProps: HFormItemProps,
+  formats?: addFormatItemModal
+) => {
+  if (!formats) {
+    return formats;
+  }
+  const { inputValue, outputValue } = formats;
+  return {
+    inputValue: (value) => {
+      return inputValue(itemProps, value);
+    },
+    outputValue: (value) => {
+      return outputValue(itemProps, value);
+    },
+  };
+};
+
+export default (
+  Component: React.FunctionComponent | React.ComponentClass,
+  config: ConnectConfigModal = {}
+) => {
+  const { format = {} } = config;
+  return (props: HFormItemProps) => {
+    const { name } = props;
+
+    const { form, valueType = "float" } = useFormContext();
+
+    useEffect(() => {
+      form?.addFormat(name, formatMaker(props, format[valueType]));
+    }, [valueType, props]);
+
+    const addFormat = (aFormat: Record<string, addFormatItemModal>) => {
+      form?.addFormat(name, formatMaker(props, aFormat[valueType]));
+    };
+
+    return React.createElement<ConnectResultProps>(Component, {
+      ...props,
+      addFormat,
+    });
+  };
+};

package/src/components/Form/InitSet.tsx

@@ -0,0 +1,12 @@
+import { useFormContext } from "./Context";
+import { useEffect } from "react";
+interface InitSetProps {
+  initValues?: Record<string, any>;
+}
+export default ({ initValues }: InitSetProps) => {
+  const { form } = useFormContext();
+  useEffect(() => {
+    form.initValues(initValues);
+  }, []);
+  return <></>;
+};

package/src/components/Form/Label.tsx

@@ -0,0 +1,50 @@
+import type { HoverModal } from "./modal";
+import React from "react";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
+import { useClassName } from "../hooks";
+
+interface IProps {
+  labelWidth?: number;
+  hover?: string | HoverModal;
+  colon?: boolean;
+  required?: boolean;
+}
+const useHover = ({ hover }: IProps) => {
+  if (!hover || typeof hover === "string") {
+    return {
+      text: hover,
+      icon: <QuestionCircleOutlined />,
+    };
+  }
+  return hover;
+};
+const Index: React.FC<IProps> = ({
+  labelWidth,
+  children,
+  colon,
+  required,
+  hover,
+}) => {
+  const { text, icon } = useHover({ hover });
+  const array = [
+    colon ? "hw-form-item-colon" : "",
+    required ? "hw-form-item-required" : "",
+  ];
+
+  const className = useClassName(array);
+  return (
+    <div style={{ width: labelWidth }} className={className}>
+      {children}
+      {text && (
+        <span style={{ marginLeft: 4 }}>
+          <Tooltip placement="top" title={text}>
+            {icon}
+          </Tooltip>
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Index;

package/src/components/Form/config.ts

@@ -0,0 +1,40 @@
+import HSelect from "../Select";
+import HInput from "../Input";
+import HInputNumber from "../Input/InputNumber";
+import HSelectInput from "../Input/SelectInput";
+import HButtonInput from "../Input/ButtonInput";
+import HCheckboxGroup from "../CheckboxGroup";
+import HCheckBox from "../CheckboxGroup/CheckBox";
+import HRadioGroup from "../RadioGroup";
+import HSwitch from "../Switch";
+import HDatePicker from "../TDPicker";
+import HRangePicker from "../TDPicker/RangePicker";
+import HTimePicker from "../TDPicker/TimePicker";
+import HUpload from "../Upload";
+import HUrlUpload from "../Upload/UrlUpload";
+import HSubmit from "../Submit";
+import FormConfigProvider from "../Form/Context/FormConfigProvider";
+
+export const placeholderConfig = {
+  inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
+  selectType: ["select", "datePicker", "timePicker"],
+};
+
+export default {
+  select: HSelect,
+  inputNumber: HInputNumber,
+  selectInput: HSelectInput,
+  buttonInput: HButtonInput,
+  checkboxGroup: HCheckboxGroup,
+  checkBox: HCheckBox,
+  radioGroup: HRadioGroup,
+  switch: HSwitch,
+  datePicker: HDatePicker,
+  rangePicker: HRangePicker,
+  timePicker: HTimePicker,
+  input: HInput,
+  upload: HUpload,
+  urlUpload: HUrlUpload,
+  submit: HSubmit,
+  formConfigProvider: FormConfigProvider,
+};

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

@@ -0,0 +1,42 @@
+import { useRequest } from "ahooks";
+import type { HFormProps } from "@/components/Form/modal";
+import useHForm from "./useHForm";
+import type { HFormInstance } from "@/components/Form/modal";
+export const useCurrentForm = (form?: HFormInstance) => {
+  const selfForm = useHForm();
+  return form || selfForm;
+};
+type ParamsModal = Omit<HFormProps, "configData">;
+
+export const useSub = ({ request, onFinish, form }: ParamsModal) => {
+  return useRequest(
+    async (value) => {
+      const subVal = form?.outputValues(value);
+      if (request) {
+        await request(subVal);
+      }
+      onFinish?.(subVal);
+    },
+    { manual: true }
+  );
+}; //提交
+
+export const useInit = ({ infoRequest, initialValues = {} }: ParamsModal) => {
+  const {
+    run: infoRun,
+    loading: infoLoading,
+    error: infoErr,
+    data: infoData,
+  } = useRequest(async () => {
+    if (infoRequest) {
+      return infoRequest();
+    }
+    return initialValues;
+  });
+  return {
+    infoRun,
+    infoLoading,
+    infoErr,
+    infoData,
+  };
+}; //初始化

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

@@ -0,0 +1,89 @@
+import { useMemo } from "react";
+import { Form } from "antd";
+import type { FormatItemModal, HFormInstance } from "../modal";
+
+export default () => {
+  const [form] = Form.useForm();
+  return useMemo<HFormInstance>(() => {
+    const formatSourceData: Record<string, FormatItemModal> = {};
+    let dispatchSourceData: Record<string, VoidFunction[]> = {};
+    return {
+      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(key) {
+        const items = dispatchSourceData[key];
+        if (!items) {
+          return;
+        }
+        items.forEach((fn) => {
+          fn();
+        });
+      },
+      addDispatchListener(key, fn) {
+        const items = dispatchSourceData[key];
+        if (!items) {
+          dispatchSourceData[key] = [fn];
+          return;
+        }
+        items.push(fn);
+        dispatchSourceData[key] = items;
+      },
+      removeDispatchListener(key) {
+        if (!key) {
+          dispatchSourceData = {};
+          return;
+        }
+        Reflect.deleteProperty(dispatchSourceData, key);
+      },
+      initValues(value = {}) {
+        const newValue = this.formatValues(value);
+        form.setFieldsValue(newValue);
+      },
+      outputValues(value) {
+        return this.formatValues(value, "outputValue");
+      },
+      ...form,
+      setFieldsValue(values) {
+        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,100 @@
+import { useMemo } from "react";
+import type {
+  FormItemWithRender,
+  HFormItemProps,
+  HFormProps,
+  HItemProps,
+} from "@/components/Form/modal";
+import FormConfig, { placeholderConfig } from "../config";
+import type { Rule } from "rc-field-form/lib/interface";
+import type { FormInstance } from "antd";
+
+const mathRequired = (configItem: HFormItemProps, form: FormInstance) => {
+  const { required, placeholder, rules, type = "input" } = configItem;
+  let resultRequired = false;
+  const dom = FormConfig[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) {
+      return {
+        ...eachItem,
+        required: itemRequired,
+        message: !!dom?.requiredErrMsg
+          ? dom.requiredErrMsg(configItem)
+          : placeholder,
+      };
+    }
+    return eachItem;
+  });
+  return {
+    required: typeof required === "boolean" ? required : resultRequired,
+    rules: resultRules as Rule[],
+  };
+}; //是否必填
+const matchDefaultPlaceholder = (props: HFormItemProps) => {
+  const { label, placeholder, type = "input" } = props;
+  const dom = FormConfig[type];
+  if (placeholder) {
+    return placeholder;
+  }
+  if (dom?.placeholder) {
+    return dom.placeholder(props);
+  }
+  if (placeholderConfig.inputType.indexOf(type) !== -1) {
+    return `请输入${label}`;
+  }
+  return `请选择${label}`;
+}; //自动构建
+const defaultRenderMaker = (props: HFormItemProps) => {
+  const { render, type = "input", itemProps = {}, ...componentProps } = props;
+  const dom = FormConfig[type];
+  return (form: FormInstance) => {
+    const Component = !!dom?.Component ? dom.Component : dom;
+    const node = Component && (
+      <Component {...componentProps} {...itemProps} form={form} />
+    );
+    if (render) {
+      return render(props, node, form);
+    }
+    return node;
+  };
+};
+
+const defaultPlaceholderPropsMaker = (props: HFormItemProps) => {
+  const placeholder = matchDefaultPlaceholder(props);
+  return {
+    ...props,
+    placeholder,
+    render: defaultRenderMaker({ ...props, placeholder }),
+  };
+}; //组装参数
+const itemControl = (
+  item: HItemProps,
+  form: FormInstance
+): FormItemWithRender => {
+  const { render, ...defaultProps } = defaultPlaceholderPropsMaker(item);
+  const { rules, required } = mathRequired(defaultProps, form);
+  return {
+    ...defaultProps,
+    required,
+    rules,
+    render,
+  };
+};
+type InitConfigModal = Required<Pick<HFormProps, "configData" | "form">>;
+
+export default ({ configData, form }: InitConfigModal) => {
+  return useMemo(() => {
+    return configData.map((item) => {
+      return itemControl(item, form);
+    });
+  }, [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 8px 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,61 @@
+import { Form } from "antd";
+import type { HFormProps } from "./modal";
+import Item from "./FormItem";
+import { useCurrentForm, useInit, useSub } from "./hooks";
+import { FormContext } from "./Context";
+import PageHandler from "../PageHandler";
+import useInitConfigData from "./hooks/useInitConfigData";
+import InitSet from "./InitSet";
+export default ({
+  configData,
+  labelWidth,
+  form,
+  request,
+  onFinish,
+  infoRequest,
+  valueType = "float",
+  initialValues,
+  ...props
+}: HFormProps) => {
+  const hForm = useCurrentForm(form);
+  const newConfigData = useInitConfigData({
+    configData,
+    form: hForm,
+  });
+  const { run, loading } = useSub({
+    request,
+    onFinish,
+    valueType,
+    form: hForm,
+  });
+
+  const { infoRun, infoLoading, infoErr, infoData } = useInit({
+    infoRequest,
+    initialValues,
+  });
+
+  return (
+    <PageHandler
+      loading={infoLoading}
+      error={infoErr}
+      data={infoData}
+      reload={infoRun}
+    >
+      <FormContext.Provider value={{ loading, form: hForm, valueType }}>
+        <Form form={hForm} onFinish={run} {...props}>
+          {newConfigData.map((itemData, index) => {
+            const { labelWidth: itemLabelWidth } = itemData;
+            return (
+              <Item
+                {...itemData}
+                key={index}
+                labelWidth={itemLabelWidth || labelWidth}
+              />
+            );
+          })}
+        </Form>
+        <InitSet initValues={infoData} />
+      </FormContext.Provider>
+    </PageHandler>
+  );
+};