@hw-component/form 0.0.4 → 0.0.5-beta-v1

package/src/components/config.ts

@@ -1,14 +1,41 @@
-export const baseConfig = {
-  defaultFieldNames: {
+import moment from "moment";
+import type { IFormConfigContextProps } from "./Form/modal";
+import { fileToBase64 } from "./Upload/util";
+export const baseConfig: IFormConfigContextProps = {
+  fieldNames: {
     label: "label",
     value: "value",
   },
-  defaultValueCheckMap: {
-    checked: true,
-    noChecked: false,
+  valueCheckMap: {
+    checked: 1,
+    noChecked: 0,
   },
-  defaultValueSwitchMap: {
-    checked: true,
-    noChecked: false,
+  valueSwitchMap: {
+    open: 1,
+    close: 0,
   },
+  valueRangePickerValueMap: {
+    start: (name) => {
+      return `${name}StartTime`;
+    },
+    end: (name) => {
+      return `${name}EndTime`;
+    },
+  },
+  dateRanges: {
+    最近三天: [moment().subtract(2, "days").startOf("days"), moment()],
+    最近七天: [moment().subtract(6, "days").startOf("days"), moment()],
+    最近三十天: [moment().subtract(29, "days").startOf("days"), moment()],
+  },
+  uploadProps: {
+    exFiles: ["JPG", "PNG", "JPEG", "GIF"],
+    request: async (file: any) => {
+      const url = await fileToBase64(file);
+      return {
+        url,
+      };
+    },
+    maxSize: 1024 * 1024 * 1.8,
+  },
+  defaultComponent: {},
 };

package/src/components/hooks/index.ts

@@ -0,0 +1,53 @@
+import { useContext, useMemo } from "react";
+import type { SelectProps } from "antd";
+import { ConfigContext } from "antd/es/config-provider";
+import type { IFormConfigContextProps } from "../Form/modal";
+import { useFormConfigContext } from "../Form/Context/FormConfigProvider";
+
+interface UseChangeOptionsParams {
+  options?: Record<string, any>[];
+  fieldNames?: SelectProps["fieldNames"];
+}
+export const useChangeOptions = ({
+  options,
+  fieldNames = {},
+}: UseChangeOptionsParams) => {
+  return useMemo(() => {
+    return options?.map((item) => {
+      const { label = "", value = "" } = fieldNames;
+      const { [label]: relLabel, [value]: relVal, ...oItem } = item;
+      return {
+        ...oItem,
+        label: relLabel,
+        value: relVal,
+      };
+    });
+  }, [options]);
+}; //options组装
+
+export const useClassName = (className: string | string[]) => {
+  const config = useContext(ConfigContext);
+  return useMemo(() => {
+    if (Array.isArray(className)) {
+      const classNames = className.map((item) => {
+        return `${config.getPrefixCls()}-${item}`;
+      });
+      return classNames.join(" ");
+    }
+    return `${config.getPrefixCls()}-${className}`;
+  }, [className]);
+};
+
+export const useMatchConfigProps = (matchProps: IFormConfigContextProps) => {
+  const globalConfig = useFormConfigContext();
+  const keys = Object.keys(matchProps);
+  const resultMatchProps: IFormConfigContextProps = {};
+  keys.forEach((key) => {
+    if (!matchProps[key]) {
+      resultMatchProps[key] = globalConfig[key];
+      return;
+    }
+    resultMatchProps[key] = matchProps[key];
+  });
+  return resultMatchProps;
+}; //匹配全局配置

package/src/components/index.tsx

@@ -1,11 +1,30 @@
-export { default as HSelect } from "./Select";
-export { default as HInput } from "./Input";
-export { default as HInputNumber } from "./Input/InputNumber";
-export { default as HSelectInput } from "./Input/SelectInput";
-export { default as HButtonInput } from "./Input/ButtonInput";
-export { default as HCheckboxGroup } from "./CheckboxGroup";
-export { default as HCheckBox } from "./CheckboxGroup/CheckBox";
-export { default as HRadioGroup } from "./RadioGroup";
-export { default as HSwitch } from "./Switch";
-export { default as HDatePicker } from "./DatePicker";
-export { default as HRangePicker } from "./DatePicker/RangePicker";
+import "./styles/index.less";
+import FormConfig from "./Form/config";
+import PageHandler from "./PageHandler";
+export { default as HForm } from "./Form";
+export { default as useHForm } from "./Form/hooks/useHForm";
+export { useHDialogForm } from "./DialogForm/hooks";
+export { default as HFormConnect } from "./Form/HFormConnect";
+export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
+
+import ModalForm from "./DialogForm/ModalForm";
+import DrawerForm from "./DialogForm/DrawerForm";
+export const HSelect = FormConfig.select;
+export const HInput = FormConfig.input;
+export const HSelectInput = FormConfig.selectInput;
+export const HUpload = FormConfig.upload;
+export const HUrlUpload = FormConfig.urlUpload;
+export const HButtonInput = FormConfig.buttonInput;
+export const HCheckBox = FormConfig.checkBox;
+export const HSwitch = FormConfig.switch;
+export const HCheckboxGroup = FormConfig.checkboxGroup;
+export const HDatePicker = FormConfig.datePicker;
+export const HRangePicker = FormConfig.rangePicker.Component;
+export const HRadioGroup = FormConfig.radioGroup;
+export const HTimePicker = FormConfig.timePicker;
+export const HInputNumber = FormConfig.inputNumber;
+export const HPageHandler = PageHandler;
+export const HTextArea = FormConfig.textArea;
+export const HColorInput = FormConfig.colorInput;
+export const HModalForm = ModalForm;
+export const HDrawerForm = DrawerForm;

package/src/components/modal.ts

@@ -0,0 +1,20 @@
+export interface ValueCheckMapModal {
+  checked?: any;
+  noChecked?: any;
+}
+export type PromiseFnResult<T = any, R = any> = (
+  params: T,
+  formDataValues?: any
+) => Promise<R>;
+export interface ValueSwitchMapModal {
+  open?: any;
+  close?: any;
+}
+export interface DataFnProvider<P = any, R = any> {
+  (name: P): R;
+}
+
+export interface DateRangePickerValueMapModal {
+  start?: string | DataFnProvider<string, string>;
+  end?: string | DataFnProvider<string, string>;
+}

package/src/components/styles/index.less

@@ -0,0 +1,3 @@
+@import "../Select/index.less";
+@import "../Form/index.less";
+@import "../Input/ColorInput/index.less";

package/src/components/styles/local.less

@@ -1 +1 @@
-@ant-prefix:ant;
+@ant-prefix: ant;

package/src/components/typings.d.ts

@@ -9,8 +9,3 @@ declare module "*.jpeg";
 declare module "*.gif";
 declare module "*.bmp";
 declare module "*.tiff";
-type PromiseFnResult<T = any, R = any> = (params: T) => Promise<R>;
-interface ValueCheckMapModal {
-  checked?: any;
-  noChecked?: any;
-}

package/src/pages/Checkbox/index.tsx

@@ -4,12 +4,11 @@ export default () => {
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HCheckboxGroup
-        options={[{ label: "测试", value: "uu" }]}
+        options={[
+          { label: "测试", value: "uu" },
+          { label: "测试1", value: "uu1" },
+        ]}
         value={{ uu: 0 }}
-        onChange={(value) => {
-          console.log(value);
-        }}
-        valueCheckMap={{ checked: 1, noChecked: 0 }}
       />
     </Space>
   );

package/src/pages/DatePicker/index.tsx

@@ -1,6 +1,11 @@
 import { Space } from "antd";
-import { HDatePicker, HRangePicker } from "../../components";
+import { HDatePicker, HRangePicker, HTimePicker } from "../../components";
+import { useState } from "react";
 export default () => {
+  const [timeVal, setTimeVal] = useState({
+    start: 1692070068,
+    end: 1692242868,
+  });
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HDatePicker
@@ -9,7 +14,20 @@ export default () => {
           console.log(val);
         }}
       />
-      <HRangePicker />
+      <HRangePicker
+        value={timeVal}
+        valueMap={{ start: "start", end: "end" }}
+        onChange={(val) => {
+          console.log(val);
+          setTimeVal(val);
+        }}
+      />
+      <HTimePicker
+        value={55135}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      />
     </Space>
   );
 };

package/src/pages/DrawerForm/index.tsx

@@ -0,0 +1,127 @@
+import { Button } from "antd";
+import { HDrawerForm, useHDialogForm } from "../../components";
+const data = [
+  {
+    label: "输入框",
+    name: "name",
+    rules: [
+      () => {
+        return {
+          required: true,
+        };
+      },
+    ],
+  },
+  {
+    label: "数字",
+    name: "sz",
+    type: "inputNumber",
+    rules: [{ required: true }],
+  },
+  {
+    label: "下拉输入框",
+    name: "selectInput",
+    type: "selectInput",
+    rules: [{ required: true }],
+    itemProps: {
+      valueName: {
+        select: "op",
+        input: "opInput",
+      },
+      selectProps: {
+        options: [{ label: "测试", value: 1 }],
+      },
+    },
+  },
+  {
+    label: "按钮输入框",
+    name: "buttonInput",
+    type: "buttonInput",
+    children: "点击",
+    rules: [{ required: true }],
+  },
+  {
+    label: "选择",
+    name: "checkboxGroup",
+    type: "checkboxGroup",
+    rules: [{ required: true }],
+    helper: "帮助我",
+    options: [
+      { label: "选择1", value: "check1" },
+      { label: "选择2", value: "check2" },
+    ],
+  },
+  {
+    label: "开关",
+    name: "switch",
+    type: "switch",
+    rules: [{ required: true }],
+  },
+  {
+    label: "时间",
+    name: "datePicker",
+    type: "datePicker",
+    hover: "时间选择",
+    helper: "帮助我",
+    rules: [{ required: true }],
+  },
+  {
+    label: "时间段",
+    name: "rangePicker",
+    type: "rangePicker",
+    helper: "帮助我",
+    rules: [{ required: true }],
+    itemProps: {
+      valueMap: {
+        start: "testStart",
+        end: "testEnd",
+      },
+    },
+  },
+  {
+    label: "时分秒",
+    name: "timePicker",
+    type: "timePicker",
+    rules: [{ required: true }],
+  },
+  {
+    label: "文件",
+    name: "upload",
+    type: "upload",
+    rules: [{ required: true }],
+  },
+  {
+    label: "地址文件",
+    name: "urlUpload",
+    type: "urlUpload",
+    rules: [{ required: true }],
+  },
+];
+export default () => {
+  const modalForm = useHDialogForm();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          modalForm.show({
+            initialValues: {
+              check1: 1,
+              testStart: "1694747960",
+              testEnd: "1693538359",
+              op: 1,
+              opInput: "12121",
+            },
+          });
+        }}
+      >
+        打开
+      </Button>
+      <HDrawerForm
+        configData={data}
+        labelWidth={88}
+        modalForm={modalForm}
+        title="测试"
+      />
+    </>
+  );
+};

package/src/pages/Form/index.tsx

@@ -0,0 +1,203 @@
+import { HForm, HFormConfigProvider, useHForm } from "../../components";
+import { useState } from "react";
+
+const formData = (options) => {
+  return [
+    {
+      label: "输入框",
+      name: "name",
+      rules: [
+        () => {
+          return {
+            required: true,
+          };
+        },
+      ],
+    },
+    {
+      label: "数字",
+      name: "sz",
+      type: "inputNumber",
+      rules: [{ required: true }],
+    },
+    {
+      label: "下拉框",
+      name: "select",
+      type: "select",
+      dispatch: {
+        fnKey: "reload",
+        dependencies: ["selectInput", "sz"],
+      },
+      itemProps: {
+        request: (params = {}, values) => {
+          console.log(values, "paramsparamsparams");
+          const { label = "123", value = 1 } = params;
+          return Promise.resolve([{ label, value }]);
+        },
+        showSearch: true,
+      },
+      rules: [{ required: true }],
+    },
+    {
+      label: "下拉输入框",
+      name: "selectInput",
+      type: "selectInput",
+      rules: [{ required: true }],
+      itemProps: {
+        valueName: {
+          select: "op",
+          input: "opInput",
+        },
+        selectProps: {
+          options: [{ label: "测试", value: 1 }],
+        },
+      },
+    },
+    {
+      label: "按钮输入框",
+      name: "buttonInput",
+      type: "buttonInput",
+      children: "点击",
+      rules: [{ required: true }],
+    },
+    {
+      label: "选择",
+      name: "checkboxGroup",
+      type: "checkboxGroup",
+      rules: [{ required: true }],
+      helper: "帮助我",
+      options: [
+        { label: "选择1", value: "check1" },
+        { label: "选择2", value: "check2" },
+      ],
+    },
+    {
+      label: "开关",
+      name: "switch",
+      type: "switch",
+      rules: [{ required: true }],
+    },
+    {
+      label: "时间",
+      name: "datePicker",
+      type: "datePicker",
+      hover: "时间选择",
+      helper: "帮助我",
+      rules: [{ required: true }],
+    },
+    {
+      label: "时间段",
+      name: "rangePicker",
+      type: "rangePicker",
+      helper: "帮助我",
+      rules: [{ required: true }],
+      itemProps: {
+        valueMap: {
+          start: "testStart",
+          end: "testEnd",
+        },
+      },
+    },
+    {
+      label: "时分秒",
+      name: "timePicker",
+      type: "timePicker",
+      rules: [{ required: true }],
+    },
+    {
+      label: "文件",
+      name: "upload",
+      type: "upload",
+      rules: [{ required: true }],
+    },
+    {
+      label: "地址文件",
+      name: "urlUpload",
+      type: "urlUpload",
+      rules: [{ required: true }],
+    },
+    {
+      label: "颜色",
+      name: "colorInput",
+      type: "colorInput",
+    },
+    {
+      label: "测试",
+      type: "test",
+    },
+    {
+      type: "submit",
+    },
+  ];
+};
+const Test = (props) => {
+  return <div>ffff</div>;
+};
+export default () => {
+  const form = useHForm();
+  const [options, setOptions] = useState([{ label: "1", value: 1 }]);
+
+  return (
+    <div style={{ overflow: "auto", height: "90vh" }}>
+      <HFormConfigProvider
+        valueSwitchMap={{ open: 1, close: 2 }}
+        valueCheckMap={{ noChecked: 0, checked: 1 }}
+        defaultComponent={{
+          test: Test,
+        }}
+      >
+        <HForm
+          configData={formData(options)}
+          labelWidth={200}
+          form={form}
+          initialValues={{}}
+          onFinish={(value) => {
+            console.log(value);
+          }}
+          onValuesChange={(val) => {
+            console.log(val, "onValuesChange");
+          }}
+          infoRequest={() => {
+            return new Promise<any>((resolve) => {
+              setTimeout(() => {
+                resolve({
+                  check1: 1,
+                  op: 1,
+                  opInput: "12121",
+                  colorInput: "rgba(24, 144, 255,1)",
+                  upload:
+                    "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
+                });
+              }, 3000);
+            });
+          }}
+          request={(params) => {
+            return new Promise<any>((resolve) => {
+              setTimeout(() => {
+                resolve(params);
+              }, 3000);
+            });
+          }}
+        />
+      </HFormConfigProvider>
+      <div
+        onClick={() => {
+          form.dispatch(
+            {
+              name: "select",
+              key: "reload",
+            },
+            {
+              params: {
+                label: "更新",
+                value: 2,
+              },
+            }
+          );
+        }}
+      >
+        点我
+      </div>
+    </div>
+  );
+};

package/src/pages/Input/index.tsx

@@ -3,6 +3,7 @@ import {
   HSelectInput,
   HButtonInput,
   HInputNumber,
+  HColorInput,
 } from "../../components";
 import { Space } from "antd";
 export default () => {
@@ -17,6 +18,7 @@ export default () => {
       />
       <HButtonInput>点我</HButtonInput>
       <HInputNumber />
+      <HColorInput />
     </Space>
   );
 };