@hw-component/form 0.0.1-bate

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>
+  );
+};

package/src/components/Form/modal.ts

@@ -0,0 +1,142 @@
+import type { FormInstance, FormItemProps, FormProps } from "antd";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import type React from "react";
+import type {
+  HButtonProps,
+  HInputProps,
+  HSelectInputProps,
+} from "@/components/Input/modal";
+import type { HRadioGroupProps } from "@/components/RadioGroup";
+import type { HSelectProps } from "@/components/Select/modal";
+import type { ButtonProps } from "antd/es";
+import type { HSwitchProps } from "@/components/Switch";
+import type {
+  HDatePickerProps,
+  HRangePickerProps,
+  HTimePickerProps,
+} from "@/components/TDPicker/modal";
+import type { TextAreaProps } from "antd/es/input";
+import type { IUpLoadProps } from "@/components/Upload/modal";
+import type { SelectProps } from "antd";
+import type { RangePickerProps } from "antd/es/date-picker";
+import type {
+  PromiseFnResult,
+  ValueCheckMapModal,
+  ValueSwitchMapModal,
+  DateRangePickerValueMapModal,
+} from "../modal";
+type RenderFun = (
+  props: HItemProps,
+  node: React.ReactNode,
+  form: FormInstance
+) => void;
+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 interface HItemProps extends Omit<FormItemProps, "name"> {
+  type?: string;
+  itemProps?: ItemPropsType;
+  render?: RenderFun;
+  helper?: HelperModal;
+  hover?: string | HoverModal;
+  // formItems?: HItemProps[]; 保留感觉没必要
+  labelWidth?: number;
+  hide?: boolean | HideModal;
+  placeholder?: string | string[];
+  formatKeys?: string[];
+  name: string;
+}
+
+export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"> {
+  configData: HItemProps[];
+  labelWidth?: number;
+  request?: PromiseFnResult<T, R>;
+  infoRequest?: () => Promise<T>;
+  valueType?: string;
+  form?: HFormInstance;
+}
+
+export interface HFormItemProps extends HItemProps {
+  required?: boolean;
+}
+export interface FormItemWithRender extends Omit<HFormItemProps, "render"> {
+  render: (form: HFormInstance) => React.ReactNode;
+}
+
+export interface FormContextProps {
+  loading?: boolean;
+  form: HFormInstance;
+  valueType?: string;
+}
+interface ConfigUploadProps {
+  exFiles?: string[];
+  maxSize?: number;
+  request?: PromiseFnResult;
+}
+
+export interface IFormConfigContextProps {
+  fieldNames?: SelectProps["fieldNames"];
+  valueCheckMap?: ValueCheckMapModal;
+  valueSwitchMap?: ValueSwitchMapModal;
+  valueRangePickerValueMap?: DateRangePickerValueMapModal;
+  dateRanges?: RangePickerProps["ranges"];
+  uploadProps?: ConfigUploadProps;
+}
+
+export interface HFormInstance extends FormInstance {
+  addFormat: (name: string, formats?: FormatItemModal) => void;
+  initValues: (values?: Record<string, any>) => void;
+  formatValues: (
+    values?: Record<string, any>,
+    formatKey?: string
+  ) => Record<string, any>;
+  dispatch: (key: string) => void;
+  outputValues: (values?: Record<string, any>) => Record<string, any>;
+  addDispatchListener: (key: string, fn: VoidFunction) => void;
+  removeDispatchListener: (key?: string) => void;
+}
+
+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 {
+  addFormat?: (format: Record<string, addFormatItemModal>) => void;
+}

package/src/components/Input/ButtonInput.tsx

@@ -0,0 +1,41 @@
+import { Input, Button } from "antd";
+import React from "react";
+import { useRequest } from "ahooks";
+import type { HButtonInputProps } from "./modal";
+
+const Index: React.FC<HButtonInputProps> = ({
+  buttonProps = {},
+  value,
+  onChange,
+  children,
+  request,
+  ...props
+}) => {
+  const { onClick, type = "primary", ...oProps } = buttonProps;
+  const { run, loading } = useRequest(
+    (val) => {
+      return request?.(val);
+    },
+    { manual: true }
+  );
+  const change = (e) => {
+    onChange?.(e.target.value);
+  };
+  const click = async (e) => {
+    let result = value;
+    if (request) {
+      result = await run(value);
+    }
+    onClick?.(result, e);
+  };
+
+  return (
+    <Input.Group compact style={{ display: "flex" }}>
+      <Input {...props} style={{ flex: 1 }} value={value} onChange={change} />
+      <Button {...oProps} type={type} onClick={click} loading={loading}>
+        {children}
+      </Button>
+    </Input.Group>
+  );
+};
+export default Index;

package/src/components/Input/InputNumber.tsx

@@ -0,0 +1,5 @@
+import type { InputNumberProps } from "antd";
+import { InputNumber } from "antd";
+export default ({ style = { width: "100%" }, ...props }: InputNumberProps) => {
+  return <InputNumber style={style} {...props} />;
+};

package/src/components/Input/SelectInput.tsx

@@ -0,0 +1,74 @@
+import { Input } from "antd";
+import type { HSelectInputProps } from "./modal";
+import HSelect from "../Select";
+import { defaultSelectStyle, defaultValueName } from "./defaultConfig";
+import HFormConnect from "../Form/HFormConnect";
+export enum SelectInputType {
+  input,
+  select,
+}
+export const Index = ({
+  selectProps = {},
+  value = {},
+  onChange,
+  valueName = defaultValueName,
+  addFormat,
+  ...props
+}: HSelectInputProps) => {
+  const { input = "", select = "" } = valueName;
+  const { [input]: inputVal, [select]: selectVal } = value;
+  const {
+    style = defaultSelectStyle,
+    placeholder = "请选择",
+    ...sProps
+  } = selectProps;
+  const change = (val, key) => {
+    const newVal = { ...value };
+    newVal[key] = val;
+    const type = key === input ? SelectInputType.input : SelectInputType.select;
+    onChange?.(newVal, type);
+  };
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name } = item;
+        const resultObj = {};
+        Object.values(valueName).forEach((key) => {
+          resultObj[key] = initValue[key];
+        });
+        return {
+          [name]: resultObj,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name } = item;
+        const { [name]: itemVal = {} } = outputValue;
+        const newItemVal = { [itemVal[select]]: itemVal[input] };
+        return {
+          ...newItemVal,
+        };
+      },
+    },
+  });
+  return (
+    <Input
+      value={inputVal}
+      onChange={(e) => {
+        change(e.target.value, input);
+      }}
+      addonBefore={
+        <HSelect
+          {...sProps}
+          style={style}
+          placeholder={placeholder}
+          value={selectVal}
+          onChange={(val) => {
+            change(val, select);
+          }}
+        />
+      }
+      {...props}
+    />
+  );
+};
+export default HFormConnect(Index);

package/src/components/Input/defaultConfig.ts

@@ -0,0 +1,8 @@
+export const defaultSelectStyle = {
+  width: 128,
+};
+
+export const defaultValueName = {
+  input: "input",
+  select: "select",
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,6 @@
+import { Input } from "antd";
+import type { HInputProps } from "./modal";
+
+export default ({ ...props }: HInputProps) => {
+  return <Input {...props} />;
+};

package/src/components/Input/modal.ts

@@ -0,0 +1,31 @@
+import type { ButtonProps, InputProps } from "antd";
+import type { HSelectProps } from "../Select/modal";
+import type { SelectInputType } from "./SelectInput";
+import type { PromiseFnResult } from "../modal";
+import type { addFormatItemModal } from "../Form/modal";
+
+export type HInputProps = InputProps;
+
+interface ValueNameModal {
+  input?: string;
+  select?: string;
+}
+
+export interface HSelectInputProps
+  extends Omit<HInputProps, "value" | "onChange"> {
+  selectProps?: HSelectProps;
+  value?: Record<string, any>;
+  onChange?: (value: Record<string, any>, type: SelectInputType) => void;
+  valueName?: ValueNameModal;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
+export interface HButtonProps extends Omit<ButtonProps, "onClick"> {
+  onClick: (
+    value: string | readonly string[] | number | undefined,
+    e: HTMLElement
+  ) => void;
+}
+export interface HButtonInputProps extends HInputProps {
+  buttonProps?: HButtonProps;
+  request?: PromiseFnResult;
+}

package/src/components/PageHandler/ErrorComponent.tsx

@@ -0,0 +1,20 @@
+import { Button, Row, Space, Typography } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import type { IHPageHandler } from "./modal";
+
+const { Text } = Typography;
+export default ({ error, reload }: IHPageHandler) => {
+  return (
+    <Row justify={"center"} align={"middle"} style={{ height: 125 }}>
+      <Space align={"center"} direction={"vertical"}>
+        <Text type={"danger"}>
+          <ExclamationCircleOutlined size={24} />
+        </Text>
+        <Text type={"danger"}>{error?.message}</Text>
+        <Button type="primary" size={"small"} onClick={reload}>
+          重新加载
+        </Button>
+      </Space>
+    </Row>
+  );
+};

package/src/components/PageHandler/LoadingComponent.tsx

@@ -0,0 +1,9 @@
+import { Row, Spin } from "antd";
+
+export default () => {
+  return (
+    <Row justify={"center"} align={"middle"} style={{ height: 125 }}>
+      <Spin size="large" />
+    </Row>
+  );
+};

package/src/components/PageHandler/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Loading from "./LoadingComponent";
+import ErrorComponent from "./ErrorComponent";
+import type { IHPageHandler } from "./modal";
+const Index: React.FC<IHPageHandler> = ({ error, data, reload, children }) => {
+  if (error) {
+    return <ErrorComponent error={error} reload={reload} />;
+  }
+  if (data) {
+    return <>{children}</>;
+  }
+  return <Loading />;
+};
+export default Index;

package/src/components/PageHandler/modal.ts

@@ -0,0 +1,6 @@
+export interface IHPageHandler<T = any> {
+  loading?: boolean;
+  error?: Error;
+  reload: VoidFunction;
+  data?: T;
+}

package/src/components/RadioGroup/index.tsx

@@ -0,0 +1,45 @@
+import { Radio } from "antd";
+import type { SelectProps, RadioGroupProps } from "antd/es";
+import { useMemo } from "react";
+import { useMatchConfigProps } from "../hooks";
+
+export interface HRadioGroupProps
+  extends Omit<RadioGroupProps, "onChange" | "options"> {
+  onChange?: (value: any) => void;
+  fieldNames?: SelectProps["fieldNames"];
+  options?: (Record<string, any> | string | number)[];
+}
+export default ({
+  value,
+  options,
+  onChange,
+  fieldNames: propsFieldNames,
+  ...props
+}: HRadioGroupProps) => {
+  const { fieldNames = {} } = useMatchConfigProps({
+    fieldNames: propsFieldNames,
+  });
+  const relOptions = useMemo(() => {
+    return options?.map((item) => {
+      const type = typeof item;
+      if (type === "string" || type === "number") {
+        return item;
+      }
+      const { label: labelKey = "", value: valueKey = "" } = fieldNames;
+      return {
+        label: item[labelKey],
+        value: item[valueKey],
+      };
+    });
+  }, [options, fieldNames]);
+  return (
+    <Radio.Group
+      options={relOptions as RadioGroupProps["options"]}
+      value={value}
+      onChange={(e) => {
+        onChange?.(e.target.value);
+      }}
+      {...props}
+    />
+  );
+};