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

package/src/components/CheckboxGroup/hooks.ts

@@ -1,105 +0,0 @@
-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, noChecked } = oldValueCheckMap.valueMap;
-    if (!value) {
-      return;
-    }
-    if (!Array.isArray(value)) {
-      setVal(value);
-      return;
-    }
-    setVal((oldVal) => {
-      const newVal = { ...oldVal };
-      Object.keys(newVal).forEach((key) => {
-        newVal[key] = noChecked;
-      });
-      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

@@ -1,85 +0,0 @@
-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,
-  direction,
-}: 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;
-        if (Array.isArray(itemVal)) {
-          return {
-            [name]: itemVal,
-          };
-        }
-        return {
-          ...itemVal,
-        };
-      },
-    },
-  });
-  return (
-    <Space direction={direction}>
-      {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

@@ -1,17 +0,0 @@
-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;
-  subParams?: (formatValue: Record<string, any>, sourceValue: any[]) => any;
-  direction?: "horizontal" | "vertical";
-}

package/src/components/DialogForm/DrawerForm/Footer.tsx

@@ -1,20 +0,0 @@
-import { Row, Space, Button } from "antd";
-
-interface IProps {
-  onOk?: VoidFunction;
-  onCancel?: VoidFunction;
-  confirmLoading?: boolean;
-}
-
-export default ({ onCancel, onOk, confirmLoading }: IProps) => {
-  return (
-    <Row justify={"end"}>
-      <Space size={"middle"}>
-        <Button onClick={onCancel}>关闭</Button>
-        <Button type={"primary"} onClick={onOk} loading={confirmLoading}>
-          确定
-        </Button>
-      </Space>
-    </Row>
-  );
-};

package/src/components/DialogForm/DrawerForm/Title.tsx

@@ -1,12 +0,0 @@
-import type { ModalProps } from "antd";
-import { Row } from "antd";
-import { CloseOutlined } from "@ant-design/icons";
-
-export default ({ title, closable, onCancel }: ModalProps) => {
-  return (
-    <Row justify={"space-between"}>
-      <div>{title}</div>
-      {closable && <CloseOutlined onClick={onCancel} />}
-    </Row>
-  );
-};

package/src/components/DialogForm/DrawerForm/index.tsx

@@ -1,110 +0,0 @@
-import { Drawer } from "antd";
-import type { DialogFormProps } from "../modal";
-import { useCurrentForm, useModifyProps, useSub } from "../hooks";
-import HForm from "../../Form";
-import Title from "./Title";
-import Footer from "./Footer";
-import FormConfigProvider, {
-  useFormConfigContext,
-} from "../../Form/Context/FormConfigProvider";
-export default ({
-  visible,
-  title,
-  onCancel,
-  configData,
-  infoRequest,
-  request,
-  afterClose,
-  dialogForm,
-  closable = true,
-  initialValues,
-  labelWidth,
-  onOk,
-  onFinish,
-  size,
-  form,
-  footer,
-  params,
-  onValuesChange,
-  autoClear = true,
-  contentRender,
-  ...props
-}: DialogFormProps) => {
-  const currentForm = useCurrentForm(dialogForm);
-  const providerConfig = useFormConfigContext();
-  const {
-    modalVisible,
-    modalFormData,
-    setModalVisible,
-    initValue,
-    onAfterClose,
-    formParams,
-    title: modalTitle,
-  } = useModifyProps({
-    configData,
-    visible,
-    initialValues,
-    dialogForm: currentForm,
-    params,
-    title,
-    onCancel,
-    autoClear,
-  });
-  const cancel = () => {
-    onAfterClose();
-    if (onCancel) {
-      return onCancel?.();
-    }
-    setModalVisible(false);
-  };
-  const { loading, run } = useSub({ request, onFinish });
-  const footerComponent = () => {
-    if (footer === null) {
-      return null;
-    }
-    return (
-      footer || (
-        <Footer
-          onCancel={cancel}
-          onOk={currentForm.submit}
-          confirmLoading={loading}
-        />
-      )
-    );
-  };
-  const node = (
-    <HForm
-      configData={modalFormData}
-      initialValues={initValue}
-      onValuesChange={onValuesChange}
-      {...props}
-      form={currentForm}
-      params={formParams}
-      onFinish={async (values, subParams) => {
-        const result = await run(values, subParams);
-        const close = onOk?.(result, subParams);
-        if (close === false) {
-          return;
-        }
-        cancel();
-      }}
-      infoRequest={infoRequest}
-      labelWidth={labelWidth}
-    />
-  );
-  return (
-    <Drawer
-      visible={modalVisible}
-      title={<Title title={modalTitle} closable={closable} onCancel={cancel} />}
-      {...props}
-      onClose={cancel}
-      closable={false}
-      destroyOnClose={true}
-      footer={footerComponent()}
-    >
-      <FormConfigProvider {...providerConfig}>
-        {contentRender ? contentRender(node, currentForm) : node}
-      </FormConfigProvider>
-    </Drawer>
-  );
-};

package/src/components/DialogForm/ModalForm.tsx

@@ -1,91 +0,0 @@
-import { Modal } from "antd";
-import type { DialogFormProps } from "./modal";
-import HForm from "../Form";
-import FormConfigProvider, {
-  useFormConfigContext,
-} from "../Form/Context/FormConfigProvider";
-import { useCurrentForm, useModifyProps, useSub } from "./hooks";
-export default ({
-  visible,
-  title,
-  onCancel,
-  configData,
-  infoRequest,
-  request,
-  afterClose,
-  dialogForm,
-  initialValues,
-  onFinish,
-  params,
-  onOk,
-  onValuesChange,
-  autoClear = true,
-  contentRender,
-  ...props
-}: DialogFormProps) => {
-  const currentForm = useCurrentForm(dialogForm);
-  const providerConfig = useFormConfigContext();
-  const {
-    modalVisible,
-    modalFormData,
-    setModalVisible,
-    initValue,
-    formParams,
-    title: modalTitle,
-  } = useModifyProps({
-    configData,
-    visible,
-    initialValues,
-    dialogForm: currentForm,
-    params,
-    title,
-    onCancel,
-  });
-  const cancel = () => {
-    if (onCancel) {
-      return onCancel?.();
-    }
-    setModalVisible(false);
-  };
-  const { loading, run } = useSub({ request, onFinish });
-  const node = (
-    <HForm
-      configData={modalFormData}
-      initialValues={initValue}
-      onValuesChange={onValuesChange}
-      onFinish={async (values, outParams) => {
-        const result = await run(values, outParams);
-        const close = onOk?.(result, outParams);
-        if (close === false) {
-          return;
-        }
-        cancel();
-      }}
-      {...props}
-      params={formParams}
-      form={currentForm}
-      infoRequest={infoRequest}
-    />
-  );
-  return (
-    <Modal
-      title={modalTitle}
-      visible={modalVisible}
-      onCancel={cancel}
-      confirmLoading={loading}
-      afterClose={() => {
-        if (autoClear) {
-          currentForm.clear();
-        }
-        afterClose?.();
-      }}
-      {...props}
-      onOk={currentForm.submit}
-      destroyOnClose={true}
-    >
-      <FormConfigProvider {...providerConfig}>
-        {contentRender ? contentRender?.(node, currentForm) : node}
-      </FormConfigProvider>
-    </Modal>
-  );
-};

package/src/components/DialogForm/hooks.ts

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

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

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

@@ -1,14 +0,0 @@
-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>(
-  {}
-);