@hw-component/form 0.0.1-bate

package/src/components/CheckboxGroup/hooks.ts

@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useState } from "react";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+
+const changValProvider = ({
+  value,
+  options,
+  valueMap = {},
+}: HCheckboxProps) => {
+  const newVal = { ...value };
+  const { checked, noChecked } = valueMap;
+  options?.forEach((item) => {
+    const { value: itemVal } = item;
+    if (newVal[itemVal] !== checked) {
+      newVal[itemVal] = noChecked;
+    }
+  });
+  return newVal;
+};
+
+export const useValueProvider = ({
+  value,
+  valueMap = {},
+  keyInValue = true,
+  onChange,
+  options,
+}: HCheckboxProps) => {
+  const [val, setVal] = useState<Record<any, any>>({});
+  const oldValueCheckMap = useMemo(() => {
+    return {
+      valueMap,
+    };
+  }, []); //存储老的map
+  useEffect(() => {
+    setVal((oldVal) => {
+      return changValProvider({
+        value: oldVal,
+        options,
+        valueMap: oldValueCheckMap.valueMap,
+      });
+    });
+  }, [options]); //初始化数据
+  useEffect(() => {
+    const { checked: oldChecked } = oldValueCheckMap.valueMap;
+    const { checked, noChecked } = valueMap;
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      const keys = Object.keys(newVal);
+      keys.forEach((key) => {
+        if (newVal[key] === oldChecked) {
+          newVal[key] = checked;
+          return;
+        }
+        newVal[key] = noChecked;
+      });
+      oldValueCheckMap.valueMap = valueMap;
+      return newVal;
+    });
+  }, [valueMap]);
+
+  useEffect(() => {
+    const { checked } = oldValueCheckMap.valueMap;
+    if (!value) {
+      return;
+    }
+    if (!Array.isArray(value)) {
+      setVal(value);
+      return;
+    }
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      value.forEach((itemVal) => {
+        newVal[itemVal] = checked;
+      });
+      return newVal;
+    });
+  }, [value]);
+
+  const change = (key: any, changeVal: any) => {
+    const { checked, noChecked } = valueMap;
+    const newVal = { ...val };
+    newVal[key] = noChecked;
+    if (changeVal === checked) {
+      newVal[key] = checked;
+    }
+    if (!onChange) {
+      setVal(newVal);
+      return;
+    }
+    if (keyInValue) {
+      onChange(newVal);
+      return;
+    }
+    const subVal = Object.keys(newVal).filter((valKey) => {
+      return newVal[valKey] === checked;
+    });
+    onChange(subVal);
+  };
+  return {
+    val,
+    change,
+  };
+};

package/src/components/CheckboxGroup/index.tsx

@@ -0,0 +1,79 @@
+import { Space } from "antd";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useValueProvider } from "./hooks";
+import Checkbox from "./CheckBox";
+import { useMatchConfigProps, useChangeOptions } from "../hooks";
+import HFormConnect from "../Form/HFormConnect";
+import React from "react";
+
+const Index = ({
+  options,
+  fieldNames,
+  onChange,
+  valueMap,
+  value,
+  disabled,
+  keyInValue = true,
+  addFormat,
+}: HCheckboxProps) => {
+  const { valueCheckMap: resultValueCheckMap, fieldNames: resultFieldNames } =
+    useMatchConfigProps({ fieldNames, valueCheckMap: valueMap }); //匹配全局
+  const checkOptions = useChangeOptions({
+    options,
+    fieldNames: resultFieldNames,
+  });
+  const { val, change } = useValueProvider({
+    options: checkOptions,
+    onChange,
+    valueMap: resultValueCheckMap,
+    keyInValue,
+    value,
+  });
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name } = item;
+        const keys = checkOptions?.map((optItem) => {
+          return optItem.value;
+        });
+        const resultObj = {};
+        keys?.forEach((key) => {
+          resultObj[key] = initValue[key];
+        });
+        return {
+          [name]: resultObj,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name } = item;
+        const { [name]: itemVal = {} } = outputValue;
+        return {
+          ...itemVal,
+        };
+      },
+    },
+  });
+  return (
+    <Space>
+      {checkOptions?.map((item) => {
+        const { label, value: itemVal } = item;
+        const checked = val[itemVal];
+        return (
+          <Checkbox
+            value={checked}
+            key={itemVal}
+            onChange={(changeVal) => {
+              change(itemVal, changeVal);
+            }}
+            valueMap={valueMap}
+            disabled={disabled}
+          >
+            {label}
+          </Checkbox>
+        );
+      })}
+    </Space>
+  );
+};
+
+export default HFormConnect(Index);

package/src/components/CheckboxGroup/modal.ts

@@ -0,0 +1,15 @@
+import type { CheckboxProps } from "antd/lib/checkbox/Checkbox";
+import type { SelectProps } from "antd";
+import type { addFormatItemModal } from "../Form/modal";
+import type { ValueCheckMapModal } from "../modal";
+
+export interface HCheckboxProps
+  extends Omit<CheckboxProps, "value" | "onChange"> {
+  options?: Record<string, any>[];
+  fieldNames?: SelectProps["fieldNames"];
+  valueMap?: ValueCheckMapModal;
+  keyInValue?: boolean;
+  value?: Record<string, any> | any[];
+  onChange?: (value: Record<string, any> | any[]) => void;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}

package/src/components/Form/Context/FormConfigProvider.tsx

@@ -0,0 +1,38 @@
+import { FormConfigContext } from "./index";
+import React, { useContext } from "react";
+import { baseConfig } from "../../config";
+import type { IFormConfigContextProps } from "../modal";
+
+export const useFormConfigContext = (key?: string) => {
+  const defaultProps = useContext(FormConfigContext);
+  if (!key) {
+    return Object.keys(defaultProps).length === 0
+      ? { ...baseConfig }
+      : defaultProps;
+  }
+  return defaultProps[key] || { ...baseConfig[key] };
+}; //获取配置
+const mergeProps = (props: IFormConfigContextProps) => {
+  const newProps = { ...baseConfig };
+  const keys = Object.keys(props);
+  keys.forEach((key) => {
+    const defaultItem = newProps[key];
+    if (!defaultItem) {
+      return;
+    }
+    newProps[key] = {
+      ...defaultItem,
+      ...props[key],
+    };
+  });
+  return newProps;
+};
+
+const Index: React.FC<IFormConfigContextProps> = ({ children, ...props }) => {
+  return (
+    <FormConfigContext.Provider value={mergeProps(props)}>
+      {children}
+    </FormConfigContext.Provider>
+  );
+};
+export default Index;

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

@@ -0,0 +1,14 @@
+import React, { useContext } from "react";
+import type {
+  IFormConfigContextProps,
+  FormContextProps,
+} from "@/components/Form/modal";
+
+export const FormContext = React.createContext<Partial<FormContextProps>>({});
+export const useFormContext = (): FormContextProps => {
+  return useContext(FormContext) as FormContextProps;
+};
+
+export const FormConfigContext = React.createContext<IFormConfigContextProps>(
+  {}
+);

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

@@ -0,0 +1,70 @@
+import Label from "../Label";
+import { Form, Space } from "antd";
+import React from "react";
+import Helper from "./Helper";
+import { useClassName } from "../../hooks";
+import { useHide } from "./hooks";
+import { useFormContext } from "../Context";
+import type { FormItemWithRender, HItemProps } from "../modal";
+
+interface ContentProps extends Omit<HItemProps, "name"> {
+  value?: any;
+  onChange?: (val: any) => void;
+}
+const Content: React.FC<ContentProps> = ({
+  children,
+  helper,
+  value,
+  onChange,
+}) => {
+  const className = useClassName("hw-form-base-item");
+  const relChild =
+    children && React.cloneElement(children as any, { value, onChange });
+  return (
+    <Space direction={"vertical"} size={4} style={{ width: "100%" }}>
+      <div className={className}>{relChild}</div>
+      <Helper helper={helper} />
+    </Space>
+  );
+};
+
+const Index: React.FC<FormItemWithRender> = ({
+  hover,
+  labelWidth,
+  required,
+  colon = true,
+  label,
+  itemProps,
+  children,
+  helper,
+  hide,
+  render,
+  ...props
+}) => {
+  const { form } = useFormContext();
+  const hideItem = useHide({ hide, form });
+  if (hideItem) {
+    return null;
+  }
+  return (
+    <Form.Item
+      label={
+        <Label
+          hover={hover}
+          labelWidth={labelWidth}
+          required={required}
+          colon={colon}
+        >
+          {label}
+        </Label>
+      }
+      {...props}
+      colon={false}
+      required={false}
+    >
+      <Content helper={helper}>{render(form)}</Content>
+    </Form.Item>
+  );
+};
+
+export default Index;

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,
+  };
+}; //初始化