@hw-component/form 0.0.1-beta-v6 → 0.0.1-beta-v7

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/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,40 @@ 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 fileList = initFileList.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]: urls,
+        };
+      },
+    },
+  });
   return (
     <div style={contentStyle}>
       <Upload
@@ -82,4 +114,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/index.tsx

@@ -3,9 +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 { useHModalForm } from "./ModalForm/hooks";
-import ModalForm from "./ModalForm";
-
+export { useHModalForm } 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;
@@ -22,5 +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 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, useHModalForm } 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 = useHModalForm();
+  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/routes.tsx

@@ -9,6 +9,8 @@ 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;
   name?: string;
@@ -68,6 +70,11 @@ const routes: RouteModal[] = [
     name: "弹窗表单",
     element: <ModalForm />,
   },
+  {
+    path: "/drawerForm",
+    name: "抽屉表单",
+    element: <DrawerForm />,
+  },
 ];
 
 export default routes;

package/es/ModalForm/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { ModalFormProps } from "@/components/ModalForm/modal";
-declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, modalForm, initialValues, ...props }: ModalFormProps) => JSX.Element;
-export default _default;

package/lib/ModalForm/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { ModalFormProps } from "@/components/ModalForm/modal";
-declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, modalForm, initialValues, ...props }: ModalFormProps) => JSX.Element;
-export default _default;