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

package/src/components/DialogForm/hooks.ts

@@ -0,0 +1,122 @@
+import { useEffect, useMemo, useState } from "react";
+import useHForm from "../Form/hooks/useHForm";
+import type {
+  DialogFormProps,
+  HDialogFormInstance,
+  ModifyPropsModal,
+} from "./modal";
+import { useRequest } from "ahooks";
+
+export const useModifyProps = ({
+  visible,
+  configData,
+  initialValues,
+  dialogForm,
+  afterClose,
+  params,
+  title,
+  onCancel,
+  autoClear,
+}: ModifyPropsModal) => {
+  const [modalVisible, setModalVisible] = useState(visible);
+  const [modalFormData, setModalFormData] = useState(configData);
+  const [initValue, setInitValue] = useState(initialValues);
+  const [formParams, setFormParams] = useState(params);
+  const [modalTitle, setModalTitle] = useState(title);
+  const saveOldParamsObj = useMemo(() => {
+    return {
+      old: {},
+    };
+  }, []);
+  const onAfterClose = () => {
+    onCancel?.();
+    saveOldParamsObj.old = dialogForm.outputValues();
+    setTimeout(() => {
+      dialogForm.clear();
+      afterClose?.();
+    }, 100);
+  };
+
+  useEffect(() => {
+    setModalVisible(visible);
+  }, [visible]);
+
+  useEffect(() => {
+    setModalFormData(configData);
+  }, [configData]);
+  useEffect(() => {
+    setFormParams(params);
+  }, [params]);
+  useEffect(() => {
+    setModalTitle(title);
+  }, [title]);
+  useEffect(() => {
+    setInitValue(initialValues);
+  }, [initialValues]);
+  useEffect(() => {
+    dialogForm.show = (showParams = {}) => {
+      const {
+        configData: changeConfigData,
+        initialValues: changeInitialValues = {},
+        params: changeParams = {},
+        title: changeTitle,
+      } = showParams;
+      if (!!changeConfigData) {
+        setModalFormData(changeConfigData);
+      }
+      setFormParams(changeParams);
+      if (!!changeTitle) {
+        setModalTitle(changeTitle);
+      }
+      const relChangeInitVal = autoClear
+        ? changeInitialValues
+        : { ...saveOldParamsObj.old, ...changeInitialValues };
+      setInitValue(relChangeInitVal);
+      setModalVisible(true);
+    };
+    dialogForm.hide = () => {
+      setModalVisible(false);
+      onAfterClose();
+    };
+  }, [afterClose, autoClear]);
+  return {
+    modalFormData,
+    modalVisible,
+    setModalVisible,
+    setModalFormData,
+    initValue,
+    setInitValue,
+    onAfterClose,
+    formParams,
+    title: modalTitle,
+  };
+};
+export const useHDialogForm = () => {
+  const hForm = useHForm();
+  return useMemo<HDialogFormInstance>(() => {
+    return {
+      ...hForm,
+      show: (params) => {},
+      hide: () => {},
+    };
+  }, []);
+};
+
+export const useCurrentForm = (hDialogForm?: HDialogFormInstance) => {
+  const defaultHModalForm = useHDialogForm();
+  return hDialogForm || defaultHModalForm;
+};
+
+export const useSub = ({ request, onFinish }: Partial<DialogFormProps>) => {
+  return useRequest(
+    async (values, params) => {
+      if (onFinish) {
+        return onFinish(values, params);
+      }
+      if (request) {
+        return request(values, params);
+      }
+    },
+    { manual: true }
+  );
+};

package/src/components/DialogForm/modal.ts

@@ -0,0 +1,44 @@
+import type { ModalProps } from "antd";
+import type { HFormInstance, HItemProps, HFormProps } from "../Form/modal";
+import type { PromiseFnResult } from "../modal";
+import type React from "react";
+
+type RootProps = HFormProps & ModalProps;
+
+export interface ModifyPropsModal<P = any> {
+  configData: HItemProps[];
+  visible?: boolean;
+  initialValues?: Record<string, any>;
+  dialogForm: HDialogFormInstance;
+  afterClose?: VoidFunction;
+  params?: P;
+  title?: DialogFormProps["title"];
+  onCancel?: VoidFunction;
+  autoClear?: boolean;
+}
+export interface ShowParamsModal<P = any, T = any> {
+  configData?: HItemProps[];
+  visible?: boolean;
+  initialValues?: Record<string, any>;
+  infoRequest?: PromiseFnResult<P, T>;
+  params?: P;
+  title?: DialogFormProps["title"];
+}
+
+export interface HDialogFormInstance<P = any, T = any> extends HFormInstance {
+  show: (data?: ShowParamsModal<P, T>) => void;
+  hide: VoidFunction;
+}
+export interface DialogFormProps<P = any, T = any>
+  extends Omit<RootProps, "onFinish" | "onCancel" | "onOk" | "infoRequest"> {
+  dialogForm?: HDialogFormInstance;
+  onFinish?: (values: T, params: P) => Promise<any>;
+  onCancel?: VoidFunction;
+  onOk?: (data: T, params: P) => boolean | void;
+  infoRequest?: (params: P) => Promise<T>;
+  autoClear?: boolean;
+  contentRender?: (
+    dom: React.ReactNode,
+    form: HDialogFormInstance
+  ) => React.ReactNode;
+}

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,95 @@
+import Label from "../Label";
+import { Form, Space, Col } from "antd";
+import React from "react";
+import Helper from "./Helper";
+import { useClassName } from "../../hooks";
+import { useHide, usePositionClassName } from "./hooks";
+import { useFormContext } from "../Context";
+import type { HItemProps } from "../modal";
+import { useDefaultRender } from "../hooks/useDefaultRender";
+import type { HFormItemProps } from "../modal";
+import { useDefaultComponents } from "../hooks";
+import {useFormConfigContext} from "../Context/FormConfigProvider";
+
+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<HFormItemProps> = (props) => {
+  const {
+    hover,
+    labelWidth,
+    required,
+    colon = true,
+    label,
+    itemProps:colItemProps,
+    children,
+    helper,
+    hide,
+    render,
+    itemSpan = { span: 24 },
+    hideLabel = false,
+    labelAlign,
+    style,
+    className:colClassName,
+    ...oProps
+  } = props;
+  const { labelAlign: align = "right",itemProps, ...inProps } = props;
+  const { form } = useFormContext();
+  const defaultComponent = useDefaultComponents();
+  const formItemStyle = useFormConfigContext("formItemStyle");
+  const ctxItemProps = useFormConfigContext("itemProps");
+  const defaultItemProps={
+      ...ctxItemProps,
+      ...itemProps
+  }
+  const defaultRender = useDefaultRender({...inProps,itemProps:defaultItemProps}, defaultComponent);
+  const className = usePositionClassName(align);
+  const hideItem = useHide({ hide, form });
+  if (hideItem) {
+    return null;
+  }
+  return (
+    <Col {...itemSpan} className={colClassName}>
+      <Form.Item
+        className={className}
+        label={
+          !hideLabel && (
+            <Label
+              hover={hover}
+              labelWidth={labelWidth}
+              required={required}
+              colon={colon}
+            >
+              {label}
+            </Label>
+          )
+        }
+        {...oProps}
+          style={style||formItemStyle}
+        colon={false}
+        required={false}
+      >
+        <Content helper={helper}>{defaultRender(form)}</Content>
+      </Form.Item>
+    </Col>
+  );
+};
+
+export default Index;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { HItemProps, HFormInstance } from "@/components/Form/modal";
+import { Typography } 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 HFormInstance)}
+      </Typography.Text>
+    );
+  }
+  return <Typography.Text type={"secondary"}>{helper}</Typography.Text>;
+};
+
+export default Index;

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

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

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

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

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

@@ -0,0 +1,54 @@
+import UpFormItem from "./UpFormItem";
+import RegularFormItem from "./RegularFormItem";
+import { useMemo } from "react";
+import type { HFormInstance, HItemProps } from "../modal";
+import type { LabelAlignModal } from "../modal";
+import { useClassName } from "../../hooks";
+
+export const useFormItemDomControl = ({
+  shouldUpdate,
+  hide,
+  dependencies,
+}: HItemProps) => {
+  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;
+};
+
+const classNameData = {
+  top: "hw-form-base-item-top",
+  left: "hw-form-base-item-left",
+  right: "hw-form-base-item-right",
+  topRight: "hw-form-base-item-top-right",
+  topLeft: "hw-form-base-item-top-left",
+};
+export const usePositionClassName = (position: LabelAlignModal) => {
+  const className = classNameData[position];
+  return useClassName(className);
+};

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

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

package/src/components/Form/HFormConnect.tsx

@@ -0,0 +1,74 @@
+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";
+import type { argsFn } from "@/components/Form/modal";
+interface ResultModal {
+  inputValue?: (value: Record<string, any>) => Record<string, any>;
+  outputValue?: (value: Record<string, any>) => Record<string, any>;
+}
+const formatMaker = (
+  itemProps: HFormItemProps,
+  formats?: addFormatItemModal
+) => {
+  const { inputValue, outputValue } = formats || {};
+  const { initValueProvider = inputValue, subProvider = outputValue } =
+    itemProps;
+  const resultObj: ResultModal = {};
+  if (initValueProvider) {
+    resultObj.inputValue = (value) => {
+      return initValueProvider(itemProps, value);
+    };
+  }
+  if (subProvider) {
+    resultObj.outputValue = (value) => {
+      return subProvider(itemProps, value);
+    };
+  }
+  const keysLen = Object.keys(resultObj).length;
+  return keysLen === 0 ? undefined : resultObj;
+};
+
+export default (
+  component:
+    | React.FunctionComponent
+    | React.ComponentClass
+    | React.ForwardRefRenderFunction<any, any>,
+  config: ConnectConfigModal = {}
+) => {
+  const { format = {} } = config;
+  const Index: React.ForwardRefRenderFunction<any, HFormItemProps> = (
+    props: HFormItemProps,
+    ref
+  ) => {
+    const { name = "", dispatch } = 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]));
+    };
+    const addDispatchListener = (key: string, fn: argsFn) => {
+      form?.addDispatchListener({ key, name, dispatch }, fn);
+    };
+    const Component = component as React.ForwardRefRenderFunction<
+      any,
+      ConnectResultProps
+    >;
+    return (
+      <Component
+        {...props}
+        addFormat={addFormat}
+        addDispatchListener={addDispatchListener}
+        ref={ref}
+      />
+    );
+  };
+  return React.forwardRef(Index);
+};

package/src/components/Form/InitSet.tsx

@@ -0,0 +1,10 @@
+import { useFormContext } from "./Context";
+import { useEffect } from "react";
+
+export default () => {
+  const { form } = useFormContext();
+  useEffect(() => {
+    form.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,58 @@
+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 TextArea from "../TextArea";
+import ColorInput from "../Input/ColorInput";
+import Cascader from "../Cascader";
+import VerificationCodeInput from "../Input/VerificationCodeInput";
+import TrimInput from "../Input/TrimInput";
+import TrimTextArea from "../TextArea/TrimTextArea";
+export const placeholderConfig = {
+  inputType: [
+    "input",
+    "inputNumber",
+    "selectInput",
+    "buttonInput",
+    "verificationCodeInput",
+    "trimInput",
+    "",
+  ],
+  selectType: ["select", "datePicker", "timePicker", "colorInput"],
+};
+const componentConfig = {
+  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,
+  textArea: TextArea,
+  colorInput: ColorInput,
+  cascader: Cascader,
+  verificationCodeInput: VerificationCodeInput,
+  trimInput: TrimInput,
+  trimTextArea: TrimTextArea,
+};
+
+export default componentConfig;