@hw-component/form 0.0.5 → 0.0.6-beta-v2

package/scripts/rollup.config.js

@@ -7,9 +7,7 @@ const typescript = require("rollup-plugin-typescript2");
 const autoprefixer = require("autoprefixer");
 const inject = require("@rollup/plugin-inject");
 const url = require("@rollup/plugin-url");
-const pkg = require("../package.json");
 const postcss = require("rollup-plugin-postcss");
-const prefix = pkg.cssPrefix;
 const input = path.resolve(__dirname, "../src/components/index.tsx");
 const outDir = path.resolve(__dirname, "../lib");
 const esOutDir = path.resolve(__dirname, "../es");
@@ -27,8 +25,8 @@ module.exports = {
     {
       dir: esOutDir,
       format: "es",
-      banner: "// welcome to ww-building-blocks-tmp",
-      footer: "// powered by ww",
+      banner: "// welcome to hoo hoo hoo",
+      footer: "// powered by hdj",
       entryFileNames: "[name].js",
       exports: "named",
       preserveModules: true,
@@ -63,6 +61,18 @@ module.exports = {
       exclude: "node_modules/**",
       extensions: [".ts", ".tsx", ".js", ".jsx"],
       babelHelpers: "runtime",
+      "presets": [
+       [ "@babel/preset-env",{
+         "targets":{
+           "chrome": "58",
+           "ie": "11",
+           "ios":"11"
+         },
+         "useBuiltIns":"usage",
+         "corejs":3,
+         "modules":false
+       }]
+      ],
     }),
     inject({
       React: "react",

package/scripts/webpack.config.js

@@ -42,18 +42,15 @@ module.exports = {
           "style-loader",
           {
             loader: "css-loader",
-            options: {
-              modules: true,
-            },
           },
           {
             loader: "less-loader",
-            options:{
-              lessOptions:{
+            options: {
+              lessOptions: {
                 javascriptEnabled: true,
-              }
-            }
-          }
+              },
+            },
+          },
         ],
       },
     ],

package/src/Layout.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Menu } from "antd";
-import styles from "./index.less";
+import "./index.less";
 import type { RouteModal } from "./routes";
 import routes from "./routes";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
@@ -35,9 +35,9 @@ export default () => {
     setOpenKey(openKeys);
   }, [pathname]);
   return (
-    <div className={styles.layout}>
+    <div className="layout">
       <Menu
-        className={styles.menu}
+        className="menu"
         selectedKeys={keys}
         openKeys={openKey}
         onOpenChange={(openKeys) => {
@@ -53,7 +53,7 @@ export default () => {
           return menuItem(item);
         })}
       </Menu>
-      <div className={styles.body}>
+      <div className="body">
         <Outlet />
       </div>
     </div>

package/src/components/CheckboxGroup/CheckBox/index.tsx

@@ -1,18 +1,18 @@
-import type { CheckboxProps } from "antd/lib/checkbox/Checkbox";
 import { Checkbox } from "antd";
 import React, { useMemo } from "react";
-import { baseConfig } from "../../config";
 import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useMatchConfigProps } from "../../hooks";
 
-interface IProps extends CheckboxProps {
-  valueCheckMap?: ValueCheckMapModal;
-}
-const Index: React.FC<IProps> = ({
+const Index: React.FC<HCheckboxProps> = ({
   value,
   onChange,
   children,
-  valueCheckMap = baseConfig.defaultValueCheckMap,
+  valueMap: propsValueCheckMap,
 }) => {
+  const { valueCheckMap = {} } = useMatchConfigProps({
+    valueCheckMap: propsValueCheckMap,
+  }); //匹配全局
   const checkedVal = useMemo(() => {
     const { checked } = valueCheckMap;
     if (value === checked) {

package/src/components/CheckboxGroup/hooks.ts

@@ -1,14 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
 import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
-import { baseConfig } from "../config";
 
 const changValProvider = ({
   value,
   options,
-  valueCheckMap = baseConfig.defaultValueCheckMap,
+  valueMap = {},
 }: HCheckboxProps) => {
   const newVal = { ...value };
-  const { checked, noChecked } = valueCheckMap;
+  const { checked, noChecked } = valueMap;
   options?.forEach((item) => {
     const { value: itemVal } = item;
     if (newVal[itemVal] !== checked) {
@@ -20,7 +19,7 @@ const changValProvider = ({
 
 export const useValueProvider = ({
   value,
-  valueCheckMap = baseConfig.defaultValueCheckMap,
+  valueMap = {},
   keyInValue = true,
   onChange,
   options,
@@ -28,21 +27,21 @@ export const useValueProvider = ({
   const [val, setVal] = useState<Record<any, any>>({});
   const oldValueCheckMap = useMemo(() => {
     return {
-      valueCheckMap,
+      valueMap,
     };
-  }, []);
+  }, []); //存储老的map
   useEffect(() => {
     setVal((oldVal) => {
       return changValProvider({
         value: oldVal,
         options,
-        valueCheckMap: oldValueCheckMap.valueCheckMap,
+        valueMap: oldValueCheckMap.valueMap,
       });
     });
   }, [options]); //初始化数据
   useEffect(() => {
-    const { checked: oldChecked } = oldValueCheckMap.valueCheckMap;
-    const { checked, noChecked } = valueCheckMap;
+    const { checked: oldChecked } = oldValueCheckMap.valueMap;
+    const { checked, noChecked } = valueMap;
     setVal((oldVal) => {
       const newVal = { ...oldVal };
       const keys = Object.keys(newVal);
@@ -53,13 +52,13 @@ export const useValueProvider = ({
         }
         newVal[key] = noChecked;
       });
-      oldValueCheckMap.valueCheckMap = valueCheckMap;
+      oldValueCheckMap.valueMap = valueMap;
       return newVal;
     });
-  }, [valueCheckMap]);
+  }, [valueMap]);
 
   useEffect(() => {
-    const { checked } = oldValueCheckMap.valueCheckMap;
+    const { checked } = oldValueCheckMap.valueMap;
     if (!value) {
       return;
     }
@@ -77,7 +76,7 @@ export const useValueProvider = ({
   }, [value]);
 
   const change = (key: any, changeVal: any) => {
-    const { checked, noChecked } = valueCheckMap;
+    const { checked, noChecked } = valueMap;
     const newVal = { ...val };
     newVal[key] = noChecked;
     if (changeVal === checked) {

package/src/components/CheckboxGroup/index.tsx

@@ -1,27 +1,58 @@
 import { Space } from "antd";
-import { useChangeOptions } from "../hooks/useChangeOptions";
 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";
 
-export default ({
+const Index = ({
   options,
   fieldNames,
   onChange,
-  valueCheckMap,
+  valueMap,
   value,
   disabled,
   keyInValue = true,
+  addFormat,
 }: HCheckboxProps) => {
-  const checkOptions = useChangeOptions({ options, fieldNames });
+  const { valueCheckMap: resultValueCheckMap, fieldNames: resultFieldNames } =
+    useMatchConfigProps({ fieldNames, valueCheckMap: valueMap }); //匹配全局
+  const checkOptions = useChangeOptions({
+    options,
+    fieldNames: resultFieldNames,
+  });
   const { val, change } = useValueProvider({
     options: checkOptions,
     onChange,
-    valueCheckMap,
+    valueMap: resultValueCheckMap,
     keyInValue,
     value,
   });
-  console.log(val);
+  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) => {
@@ -34,7 +65,7 @@ export default ({
             onChange={(changeVal) => {
               change(itemVal, changeVal);
             }}
-            valueCheckMap={valueCheckMap}
+            valueMap={valueMap}
             disabled={disabled}
           >
             {label}
@@ -44,3 +75,5 @@ export default ({
     </Space>
   );
 };
+
+export default HFormConnect(Index);

package/src/components/CheckboxGroup/{modal.d.ts → modal.ts}

@@ -1,12 +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"];
-  valueCheckMap?: ValueCheckMapModal;
+  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/DialogForm/DrawerForm/Footer.tsx

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

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

@@ -0,0 +1,95 @@
+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";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  closable = true,
+  initialValues = {},
+  labelWidth,
+  onOk,
+  onFinish,
+  size,
+  form,
+  footer,
+  params,
+  onValuesChange,
+  ...props
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    initValue,
+    onAfterClose,
+    formParams,
+  } = useModifyProps({
+    configData,
+    visible,
+    initialValues,
+    dialogForm: currentForm,
+    params,
+  });
+  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}
+        />
+      )
+    );
+  };
+  return (
+    <Drawer
+      visible={modalVisible}
+      title={<Title title={title} closable={closable} onCancel={cancel} />}
+      {...props}
+      onClose={cancel}
+      closable={false}
+      destroyOnClose={true}
+      footer={footerComponent()}
+    >
+      <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}
+      />
+    </Drawer>
+  );
+};

package/src/components/DialogForm/ModalForm.tsx

@@ -0,0 +1,77 @@
+import { Modal } from "antd";
+import type { DialogFormProps } from "./modal";
+import HForm from "../Form";
+import { useCurrentForm, useModifyProps, useSub } from "./hooks";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  initialValues = {},
+  onFinish,
+  params,
+  onOk,
+  onValuesChange,
+  ...props
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    initValue,
+    formParams,
+    title: modalTitle,
+  } = useModifyProps({
+    configData,
+    visible,
+    initialValues,
+    dialogForm: currentForm,
+    params,
+    title,
+  });
+  const cancel = () => {
+    if (onCancel) {
+      return onCancel?.();
+    }
+    setModalVisible(false);
+  };
+  const { loading, run } = useSub({ request, onFinish });
+  return (
+    <Modal
+      title={modalTitle}
+      visible={modalVisible}
+      onCancel={cancel}
+      confirmLoading={loading}
+      afterClose={() => {
+        currentForm.resetFields();
+        afterClose?.();
+      }}
+      {...props}
+      onOk={currentForm.submit}
+      destroyOnClose={true}
+    >
+      <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}
+      />
+    </Modal>
+  );
+};

package/src/components/DialogForm/hooks.ts

@@ -0,0 +1,109 @@
+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,
+}: 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 onAfterClose = () => {
+    setTimeout(() => {
+      dialogForm.resetFields();
+      afterClose?.();
+    }, 100);
+  };
+
+  useEffect(() => {
+    setModalVisible(visible);
+  }, [visible]);
+
+  useEffect(() => {
+    setModalFormData(configData);
+  }, [configData]);
+  useEffect(() => {
+    setFormParams(params);
+  }, [params]);
+  useEffect(() => {
+    setModalTitle(title);
+  }, [title]);
+  useEffect(() => {
+    dialogForm.show = (showParams = {}) => {
+      const {
+        configData: changeConfigData,
+        initialValues: changeInitialValues,
+        params: changeParams,
+        title: changeTitle,
+      } = showParams;
+      if (!!changeConfigData) {
+        setModalFormData(changeConfigData);
+      }
+      if (!!changeParams) {
+        setFormParams(changeParams);
+      }
+      if (!!changeTitle) {
+        setModalTitle(changeTitle);
+      }
+      setInitValue(changeInitialValues);
+      setModalVisible(true);
+    };
+    dialogForm.hide = () => {
+      setModalVisible(false);
+      onAfterClose();
+    };
+  }, [afterClose]);
+  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,36 @@
+import type { ModalProps } from "antd";
+import type { HFormInstance, HItemProps, HFormProps } from "../Form/modal";
+import type { PromiseFnResult } from "../modal";
+
+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"];
+}
+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 | undefined;
+  infoRequest?: (params: P) => Promise<T>;
+}

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;