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

package/src/components/Form/HFormConnect.tsx

@@ -25,11 +25,17 @@ const formatMaker = (
 };
 
 export default (
-  Component: React.FunctionComponent | React.ComponentClass,
+  component:
+    | React.FunctionComponent
+    | React.ComponentClass
+    | React.ForwardRefRenderFunction<any, any>,
   config: ConnectConfigModal = {}
 ) => {
   const { format = {} } = config;
-  return (props: HFormItemProps) => {
+  const Index: React.ForwardRefRenderFunction<any, HFormItemProps> = (
+    props: HFormItemProps,
+    ref
+  ) => {
     const { name = "" } = props;
 
     const { form, valueType = "float" } = useFormContext();
@@ -44,10 +50,18 @@ export default (
     const addDispatchListener = (key: string, fn: argsFn) => {
       form?.addDispatchListener({ key, name }, fn);
     };
-    return React.createElement<ConnectResultProps>(Component, {
-      ...props,
-      addFormat,
-      addDispatchListener,
-    });
+    const Component = component as React.ForwardRefRenderFunction<
+      any,
+      ConnectResultProps
+    >;
+    return (
+      <Component
+        {...props}
+        addFormat={addFormat}
+        addDispatchListener={addDispatchListener}
+        ref={ref}
+      />
+    );
   };
+  return React.forwardRef(Index);
 };

package/src/components/Form/config.ts

@@ -14,7 +14,7 @@ import HUpload from "../Upload";
 import HUrlUpload from "../Upload/UrlUpload";
 import HSubmit from "../Submit";
 import FormConfigProvider from "../Form/Context/FormConfigProvider";
-import TextArea from '../TextArea'
+import TextArea from "../TextArea";
 export const placeholderConfig = {
   inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
   selectType: ["select", "datePicker", "timePicker"],
@@ -37,5 +37,5 @@ export default {
   urlUpload: HUrlUpload,
   submit: HSubmit,
   formConfigProvider: FormConfigProvider,
-  textArea:TextArea
+  textArea: TextArea,
 };

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,
@@ -80,6 +81,8 @@ 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;
@@ -142,7 +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,

package/src/components/TDPicker/modal.ts

@@ -6,7 +6,6 @@ import type { TimePickerProps } from "antd";
 import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "@/components/Form/modal";
-import type { argsFn } from "@/components/Form/modal";
 export interface HDatePickerProps
   extends Omit<DatePickerProps, "onChange" | "format" | "ranges"> {
   onChange?: (time?: Moment | string | number) => void;

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 { 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;
@@ -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, 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

@@ -1,5 +1,5 @@
 import { Button } from "antd";
-import { HModalForm, useHModalForm } from "../../components";
+import { HModalForm, useHDiaLogForm } from "../../components";
 const data = [
   {
     label: "输入框",
@@ -98,7 +98,7 @@ const data = [
   },
 ];
 export default () => {
-  const modalForm = useHModalForm();
+  const modalForm = useHDiaLogForm();
   return (
     <>
       <Button

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/hooks.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { HModalFormInstance, ModifyPropsModal } from "@/components/ModalForm/modal";
-export declare const useModifyProps: ({ visible, configData, initialValues, modalForm, }: ModifyPropsModal) => {
-    modalFormData: import("../Form/modal").HItemProps[];
-    modalVisible: boolean | undefined;
-    setModalVisible: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
-    setModalFormData: import("react").Dispatch<import("react").SetStateAction<import("../Form/modal").HItemProps[]>>;
-    initValue: Record<string, any> | undefined;
-    setInitValue: import("react").Dispatch<import("react").SetStateAction<Record<string, any> | undefined>>;
-};
-export declare const useHModalForm: () => HModalFormInstance;
-export declare const useCurrentForm: (hModalForm?: HModalFormInstance) => HModalFormInstance;

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/hooks.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { HModalFormInstance, ModifyPropsModal } from "@/components/ModalForm/modal";
-export declare const useModifyProps: ({ visible, configData, initialValues, modalForm, }: ModifyPropsModal) => {
-    modalFormData: import("../Form/modal").HItemProps[];
-    modalVisible: boolean | undefined;
-    setModalVisible: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
-    setModalFormData: import("react").Dispatch<import("react").SetStateAction<import("../Form/modal").HItemProps[]>>;
-    initValue: Record<string, any> | undefined;
-    setInitValue: import("react").Dispatch<import("react").SetStateAction<Record<string, any> | undefined>>;
-};
-export declare const useHModalForm: () => HModalFormInstance;
-export declare const useCurrentForm: (hModalForm?: HModalFormInstance) => HModalFormInstance;

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;