@hw-component/form 0.0.2-bate → 0.0.2-beta-v2

package/src/components/Form/modal.ts

@@ -25,6 +25,7 @@ import type {
   ValueSwitchMapModal,
   DateRangePickerValueMapModal,
 } from "../modal";
+import type { ForwardedRef } from "react";
 type RenderFun = (
   props: HItemProps,
   node: React.ReactNode,
@@ -53,18 +54,20 @@ type HelperModal = (form: HFormInstance) => React.ReactNode | string;
 
 export type HideModal = (form: HFormInstance) => boolean;
 
+export type AddDispatchListenerFn = (action: ActionModal, fn: argsFn) => void;
+
 export interface HItemProps extends Omit<FormItemProps, "name"> {
   type?: string;
   itemProps?: ItemPropsType;
   render?: RenderFun;
-  helper?: HelperModal;
+  helper?: HelperModal | string;
   hover?: string | HoverModal;
   // formItems?: HItemProps[]; 保留感觉没必要
   labelWidth?: number;
   hide?: boolean | HideModal;
   placeholder?: string | string[];
-  formatKeys?: string[];
-  name: string;
+  // formatKeys?: string[];
+  name?: string;
 }
 
 export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"> {
@@ -78,11 +81,13 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"> {
 
 export interface HFormItemProps extends HItemProps {
   required?: boolean;
+  value?: any;
+  onChange?: (val: any, item: any) => void;
 }
 export interface FormItemWithRender extends Omit<HFormItemProps, "render"> {
   render: (form: HFormInstance) => React.ReactNode;
 }
-
+export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {
   loading?: boolean;
   form: HFormInstance;
@@ -102,18 +107,21 @@ export interface IFormConfigContextProps {
   dateRanges?: RangePickerProps["ranges"];
   uploadProps?: ConfigUploadProps;
 }
-
+interface ActionModal {
+  key: string;
+  name?: string;
+}
 export interface HFormInstance extends FormInstance {
   addFormat: (name: string, formats?: FormatItemModal) => void;
-  initValues: (values?: Record<string, any>) => void;
+  initValues: VoidFunction;
   formatValues: (
     values?: Record<string, any>,
     formatKey?: string
   ) => Record<string, any>;
-  dispatch: (key: string) => void;
+  dispatch: (action: ActionModal, ...args: any[]) => void;
   outputValues: (values?: Record<string, any>) => Record<string, any>;
-  addDispatchListener: (key: string, fn: VoidFunction) => void;
-  removeDispatchListener: (key?: string) => void;
+  addDispatchListener: AddDispatchListenerFn;
+  removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
 }
 
 export interface ConnectConfigModal {
@@ -137,6 +145,10 @@ export interface addFormatItemModal {
   outputValue: addValueFormat;
 }
 
-export interface ConnectResultProps {
+export interface ConnectResultProps extends HFormItemProps {
   addFormat?: (format: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: (key: string, fn: argsFn) => void;
+  ref?: ForwardedRef<any>;
+  value?: any;
+  onChange?: (value: any, item?: any) => void;
 }

package/src/components/Input/SelectInput.tsx

@@ -3,6 +3,7 @@ import type { HSelectInputProps } from "./modal";
 import HSelect from "../Select";
 import { defaultSelectStyle, defaultValueName } from "./defaultConfig";
 import HFormConnect from "../Form/HFormConnect";
+import { ConnectResultProps } from "@/components/Form/modal";
 export enum SelectInputType {
   input,
   select,
@@ -13,6 +14,7 @@ export const Index = ({
   onChange,
   valueName = defaultValueName,
   addFormat,
+  addDispatchListener,
   ...props
 }: HSelectInputProps) => {
   const { input = "", select = "" } = valueName;
@@ -31,7 +33,7 @@ export const Index = ({
   addFormat?.({
     float: {
       inputValue: (item, initValue) => {
-        const { name } = item;
+        const { name = "" } = item;
         const resultObj = {};
         Object.values(valueName).forEach((key) => {
           resultObj[key] = initValue[key];
@@ -41,7 +43,7 @@ export const Index = ({
         };
       },
       outputValue: (item, outputValue) => {
-        const { name } = item;
+        const { name = "" } = item;
         const { [name]: itemVal = {} } = outputValue;
         const newItemVal = { [itemVal[select]]: itemVal[input] };
         return {

package/src/components/Input/modal.ts

@@ -3,6 +3,7 @@ import type { HSelectProps } from "../Select/modal";
 import type { SelectInputType } from "./SelectInput";
 import type { PromiseFnResult } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
+import type { AddDispatchListenerFn } from "../Form/modal";
 
 export type HInputProps = InputProps;
 
@@ -18,6 +19,7 @@ export interface HSelectInputProps
   onChange?: (value: Record<string, any>, type: SelectInputType) => void;
   valueName?: ValueNameModal;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: AddDispatchListenerFn;
 }
 export interface HButtonProps extends Omit<ButtonProps, "onClick"> {
   onClick: (

package/src/components/TDPicker/RangePicker.tsx

@@ -47,24 +47,23 @@ const HRangePicker: React.FC<HRangePickerProps> = ({
     }
     return ranges;
   }, [ranges]); //默认
-
   addFormat?.({
     float: {
       inputValue: (item, initValue) => {
-        const { name: valueName } = item;
+        const { name: valueName = "" } = item;
         const resultObj = {};
         Object.values(dateMapKeys).forEach((key) => {
-          if (initValue[key]){
+          if (initValue[key]) {
             resultObj[key] = initValue[key];
           }
         });
-        const hasKeys=Object.keys(resultObj).length!==0;
+        const hasKeys = Object.keys(resultObj).length !== 0;
         return {
-          [valueName]: hasKeys?resultObj:null,
+          [valueName]: hasKeys ? resultObj : null,
         };
       },
       outputValue: (item, outputValue) => {
-        const { name: valueName } = item;
+        const { name: valueName = "" } = item;
         const { [valueName]: itemVal = {} } = outputValue;
         return {
           ...itemVal,

package/src/components/Upload/UrlUpload/index.tsx

@@ -5,8 +5,7 @@ import type { IUploadRefModal, IUrlUploadProps } from "../modal";
 import TypeEle from "../MediaTypeEle/TypeEle";
 import { useRef, useState } from "react";
 import type { RcFile, UploadFile } from "antd/es/upload/interface";
-
-export default ({
+const Index = ({
   placeholder = "请输入文件地址",
   value = [],
   onChange,
@@ -89,3 +88,4 @@ export default ({
     </Space>
   );
 };
+export default Index;

package/src/components/Upload/hooks/customRequest.ts

@@ -2,7 +2,62 @@ import type { IUpLoadProps } from "../modal";
 import type { UploadFile } from "antd/es/upload/interface";
 import type { RcFile } from "antd/lib/upload";
 import { useEffect, useMemo } from "react";
+import type { UploadFileStatus } from "antd/es/upload/interface";
+import type { BeforeUploadFileType } from "rc-upload/lib/interface";
+import { message } from "antd";
 
+interface SubReqParamsModal {
+  request?: (
+    file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
+  ) => Promise<{ url: string }>;
+  file: RcFile;
+}
+interface ResultModal {
+  url: string;
+  status: UploadFileStatus;
+  uid?: string;
+}
+const subReq = async ({
+  request,
+  file,
+}: SubReqParamsModal): Promise<ResultModal> => {
+  if (!request) {
+    return {
+      url: "",
+      status: "done",
+    };
+  }
+  try {
+    const { url } = await request(file);
+    return {
+      url,
+      status: "done",
+    };
+  } catch (err: any) {
+    message.error(err.message);
+    return {
+      url: "",
+      status: "error",
+    };
+  }
+};
+const fileListProvider = (changeFile: ResultModal, files?: UploadFile[]) => {
+  const { status, url, uid } = changeFile;
+  if (status === "error") {
+    return files?.filter((item) => {
+      return item.uid !== uid;
+    });
+  }
+  return files?.map((item) => {
+    const resultUrl = url || item.thumbUrl;
+    if (item.uid === uid) {
+      item.status = status;
+      item.response = { url: resultUrl };
+      return item;
+    }
+    return item;
+  });
+};
 export const useCustomRequest = ({
   value,
   request,
@@ -20,20 +75,8 @@ export const useCustomRequest = ({
 
   const sendFile = async (file: RcFile) => {
     const { uid } = file;
-    let url = "";
-    if (request) {
-      const result = await request(file);
-      url = result.url;
-    }
-    const fileList = valObj?.value?.map((item) => {
-      const resultUrl = url || item.thumbUrl;
-      if (item.uid === uid) {
-        item.status = "done";
-        item.response = { url: resultUrl };
-        return item;
-      }
-      return item;
-    });
+    const result = await subReq({ request, file });
+    const fileList = fileListProvider({ ...result, uid }, valObj.value);
     onChange?.(fileList || []);
   };
   return (fileList: UploadFile[]) => {

package/src/components/Upload/index.tsx

@@ -1,11 +1,12 @@
-import { Upload } from "antd";
-import Btn from "./Btn";
 import React, { useImperativeHandle, useMemo, useState } from "react";
+import type { IUpLoadProps, IUploadRefModal } from "./modal";
+import { useProps } from "./hooks/propsMaker";
 import type { IPreviewProps } from "./Preview";
 import Preview from "./Preview";
 import { useChange } from "./hooks/change";
-import type { IUpLoadProps, IUploadRefModal } from "./modal";
-import { useProps } from "./hooks/propsMaker";
+import { Upload } from "antd";
+import Btn from "./Btn";
+import HFormConnect from "../Form/HFormConnect";
 
 const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
   {
@@ -18,6 +19,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
     onPreview,
     request,
     maxSize,
+    addFormat,
     ...props
   },
   ref
@@ -52,10 +54,41 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
       file,
     });
   };
-
   const maxNum = maxCount === 1 ? maxCount : Number.MAX_VALUE;
   const { visible, file: previewFile } = previewModal;
-
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name = "" } = item;
+        const initFileList = initValue[name] || [];
+        const relInitFileList=typeof initFileList==="string"?[initFileList]:initFileList;
+        const fileList = relInitFileList.map((url, index) => {
+          return {
+            name: url,
+            response: {
+              url,
+            },
+            status: "done",
+            uid: `init-${index}`,
+            thumbUrl: url,
+          };
+        });
+        return {
+          [name]: fileList,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name: valueName = "" } = item;
+        const { [valueName]: itemVal = [] } = outputValue;
+        const urls = itemVal.map((fileItem) => {
+          return fileItem.response.url;
+        });
+        return {
+          [valueName]: maxCount===1?urls[0]:urls,
+        };
+      },
+    },
+  });
   return (
     <div style={contentStyle}>
       <Upload
@@ -82,4 +115,4 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
   );
 };
 
-export default React.forwardRef(Index);
+export default HFormConnect(React.forwardRef(Index));

package/src/components/Upload/modal.ts

@@ -3,6 +3,7 @@ import type { UploadFile } from "antd/es/upload/interface";
 import type { BeforeUploadFileType, RcFile } from "rc-upload/lib/interface";
 import type { UploadChangeParam } from "antd/lib/upload/interface";
 import type { MediaTypeEnum } from "@/components/Upload/enums";
+import type { addFormatItemModal } from "@/components/Form/modal";
 
 export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
   exFiles?: string[];
@@ -14,6 +15,7 @@ export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
   value?: UploadFile[];
   maxRowNum?: number;
   maxSize?: number;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }
 export interface IMediaTypeEleProps {
   file?: UploadFile;

package/src/components/config.ts

@@ -7,12 +7,12 @@ export const baseConfig: IFormConfigContextProps = {
     value: "value",
   },
   valueCheckMap: {
-    checked: true,
-    noChecked: false,
+    checked: 1,
+    noChecked: 0,
   },
   valueSwitchMap: {
-    open: true,
-    close: false,
+    open: 1,
+    close: 0,
   },
   valueRangePickerValueMap: {
     start: (name) => {

package/src/components/index.tsx

@@ -3,6 +3,9 @@ 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";
+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;
@@ -19,3 +22,6 @@ export const HTimePicker = FormConfig.timePicker;
 export const HInputNumber = FormConfig.inputNumber;
 export const HPageHandler = PageHandler;
 export const HFormConfigProvider = FormConfig.formConfigProvider;
+export const HTextArea = FormConfig.textArea;
+export const HModalForm = ModalForm;
+export const HDrawerForm = DrawerForm;

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

@@ -128,6 +128,9 @@ export default () => {
                   testEnd: "1693538359",
                   op: 1,
                   opInput: "12121",
+                  upload: [
+                    "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
+                  ],
                 });
               }, 3000);
             });

package/src/pages/ModalForm/index.tsx

@@ -0,0 +1,127 @@
+import { Button } from "antd";
+import { HModalForm, 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>
+      <HModalForm
+        configData={data}
+        labelWidth={88}
+        modalForm={modalForm}
+        title="测试"
+      />
+    </>
+  );
+};

package/src/routes.tsx

@@ -8,6 +8,8 @@ import Switch from "./pages/Switch";
 import DatePicker from "./pages/DatePicker";
 import Upload from "./pages/Upload";
 import Form from "./pages/Form";
+import ModalForm from "./pages/ModalForm";
+import DrawerForm from "./pages/DrawerForm";
 
 export interface RouteModal {
   path?: string;
@@ -63,6 +65,16 @@ const routes: RouteModal[] = [
     name: "表单",
     element: <Form />,
   },
+  {
+    path: "/modalForm",
+    name: "弹窗表单",
+    element: <ModalForm />,
+  },
+  {
+    path: "/drawerForm",
+    name: "抽屉表单",
+    element: <DrawerForm />,
+  },
 ];
 
 export default routes;