@hw-component/form 1.6.9 → 1.7.1

package/src/components/DialogForm/ModalForm.tsx

@@ -10,28 +10,28 @@ import {
   useModifyProps,
   useSub,
 } from "./hooks";
-import ChildComponent from './ChildComponent'
+import ChildComponent from "./ChildComponent";
 import React from "react";
-const Index:React.FC<DialogFormProps>= ({
-                visible,
-                title,
-                onCancel,
-                configData,
-                infoRequest,
-                request,
-                afterClose,
-                dialogForm,
-                initialValues,
-                onFinish,
-                params,
-                onOk,
-                onValuesChange,
-                autoClear = true,
-                contentRender,
-                footer,
-    children,
-                ...props
-              }) => {
+const Index: React.FC<DialogFormProps> = ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  initialValues,
+  onFinish,
+  params,
+  onOk,
+  onValuesChange,
+  autoClear = true,
+  contentRender,
+  footer,
+  children,
+  ...props
+}) => {
   const currentForm = useCurrentForm(dialogForm);
   const providerConfig = useFormConfigContext();
 
@@ -59,23 +59,23 @@ const Index:React.FC<DialogFormProps>= ({
   };
   const { loading, run } = useSub({ request, onFinish });
   const node = (
-      <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}
-      />
+    <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}
+    />
   );
   const defaultFooter = useFooterRender({
     dialogForm,
@@ -84,32 +84,34 @@ const Index:React.FC<DialogFormProps>= ({
     params: formParams,
   });
   return (
-      <Modal
-          title={modalTitle}
-          visible={modalVisible}
-          onCancel={cancel}
-          confirmLoading={loading}
-          afterClose={() => {
-            if (autoClear) {
-              currentForm.clear();
-            }
-            afterClose?.();
-          }}
-          {...props}
-          onOk={currentForm.submit}
-          destroyOnClose={true}
-          footer={defaultFooter}
-      >
-        <FormConfigProvider {...providerConfig}>
-            <ChildComponent dialogForm={currentForm}
-                            contentRender={contentRender}
-                            formNode={node}
-                            params={params}>
-                {children}
-            </ChildComponent>
-        </FormConfigProvider>
-      </Modal>
+    <Modal
+      title={modalTitle}
+      visible={modalVisible}
+      onCancel={cancel}
+      confirmLoading={loading}
+      afterClose={() => {
+        if (autoClear) {
+          currentForm.clear();
+        }
+        afterClose?.();
+      }}
+      {...props}
+      onOk={currentForm.submit}
+      destroyOnClose={true}
+      footer={defaultFooter}
+    >
+      <FormConfigProvider {...providerConfig}>
+        <ChildComponent
+          dialogForm={currentForm}
+          contentRender={contentRender}
+          formNode={node}
+          params={params}
+        >
+          {children}
+        </ChildComponent>
+      </FormConfigProvider>
+    </Modal>
   );
 };
 
-export default Index;
+export default Index;

package/src/components/Form/Basic.tsx

@@ -0,0 +1,42 @@
+import {HFormProps, HItemProps, ItemPropsType} from "@/components/Form/modal";
+import Item from "./FormItem";
+import {Row} from "antd";
+import {useFormContext} from "./Context";
+
+export default ({configData,gutter}:HFormProps)=>{
+  const {form,itemProps:formItemProps,itemSpan,colon:formColon}=useFormContext();
+    const defaultOnPressEnter = () => {
+        form.submit();
+    };
+  return <Row gutter={gutter} style={{width:"100%"}}>
+      {configData.map((itemData: HItemProps, index) => {
+          const {
+              labelWidth: itemLabelWidth,
+              hideLabel ,
+              labelAlign,
+              name,
+              style ,
+              itemProps = {},
+              colon: itemColon,
+          } = itemData;
+          const defaultItemProps = {
+              onPressEnter: defaultOnPressEnter,
+              ...formItemProps,
+              ...itemProps,
+          };
+          return (
+              <Item
+                  {...itemData}
+                  labelAlign={labelAlign}
+                  key={name || index}
+                  style={style}
+                  itemProps={defaultItemProps as ItemPropsType}
+                  hideLabel={hideLabel}
+                  itemSpan={itemSpan}
+                  labelWidth={itemLabelWidth}
+                  colon={typeof itemColon === "undefined" ? formColon : itemColon}
+              />
+          );
+      })}
+  </Row>
+}

package/src/components/Form/FormItem/index.tsx

@@ -1,12 +1,31 @@
 import { useFormItemDomControl } from "./hooks";
 import React from "react";
 import type { HItemProps } from "../modal";
-import {useFormContext} from "../Context";
+import { useFormContext } from "../Context";
 
 export default (props: HItemProps) => {
-  const {labelWidth:formLabelWidth,labelAlign:formLabelAlign}=useFormContext();
-  const {labelWidth=formLabelWidth,labelAlign=formLabelAlign}=props;
+  const {
+    labelWidth: formLabelWidth,
+    labelAlign: formLabelAlign ,
+    hideLabel:formLabelHide,
+    formItemStyle,
+    colon:formColon
+  } = useFormContext();
+  const {
+    labelWidth = formLabelWidth,
+    labelAlign = formLabelAlign,
+    hideLabel=formLabelHide,
+    style=formItemStyle,
+    colon
+  } = props;
   const Component = useFormItemDomControl(props);
-  console.log(formLabelWidth,"formLabelWidth")
-  return <Component {...props} labelAlign={labelAlign} labelWidth={labelWidth}/>;
+  return (
+    <Component {...props}
+               labelAlign={labelAlign}
+               labelWidth={labelWidth}
+               hideLabel={hideLabel}
+               style={style}
+               colon={typeof colon === "undefined" ? colon : formColon}
+    />
+  );
 };

package/src/components/Form/index.tsx

@@ -1,13 +1,12 @@
-import { Form, Input, Row } from "antd";
-import type { HFormProps, HItemProps } from "./modal";
-import Item from "./FormItem";
+import { Form } from "antd";
+import type { HFormProps } from "./modal";
 import { useCurrentForm, useInfoReq, useValuesChange } from "./hooks";
 import { FormContext } from "./Context";
 import PageHandler from "../PageHandler";
 import useInitConfigData from "./hooks/useInitConfigData";
 import { useEffect } from "react";
 import InitSet from "./InitSet";
-import type { ItemPropsType } from "./modal";
+import Basic from "./Basic";
 
 export default ({
   configData,
@@ -62,9 +61,6 @@ export default ({
       hForm.removeDispatchListener();
     };
   }, []);
-  const defaultOnPressEnter = () => {
-    hForm.submit();
-  };
   return (
     <PageHandler
       loading={infoLoading}
@@ -75,9 +71,15 @@ export default ({
       <FormContext.Provider
         value={{
           loading: submitLoading || loading,
-          form: hForm, valueType ,
-          labelAlign:formLabelAlign,
-          labelWidth
+          form: hForm,
+          valueType,
+          labelAlign: formLabelAlign,
+          labelWidth,
+          formItemStyle,
+          hideLabel:formHideLabel,
+          colon,
+          itemProps:formItemProps,
+          itemSpan
         }}
       >
         <Form
@@ -86,37 +88,7 @@ export default ({
           onValuesChange={valuesChange}
           {...props}
         >
-          <Row gutter={gutter}>
-            {newConfigData.map((itemData: HItemProps, index) => {
-              const {
-                labelWidth: itemLabelWidth,
-                hideLabel = formHideLabel,
-                labelAlign = formLabelAlign,
-                name,
-                style = formItemStyle,
-                itemProps = {},
-                colon: itemColon,
-              } = itemData;
-              const defaultItemProps = {
-                onPressEnter: defaultOnPressEnter,
-                ...formItemProps,
-                ...itemProps,
-              };
-              return (
-                <Item
-                  {...itemData}
-                  labelAlign={labelAlign}
-                  key={name || index}
-                  style={style}
-                  itemProps={defaultItemProps as ItemPropsType}
-                  hideLabel={hideLabel}
-                  itemSpan={itemSpan}
-                  labelWidth={itemLabelWidth || labelWidth}
-                  colon={typeof itemColon === "undefined" ? colon : itemColon}
-                />
-              );
-            })}
-          </Row>
+          <Basic configData={newConfigData} gutter={gutter}/>
           <InitSet />
         </Form>
       </FormContext.Provider>

package/src/components/Form/modal.ts

@@ -130,8 +130,13 @@ export interface FormContextProps {
   loading?: boolean;
   form: HFormInstance;
   valueType?: string;
-  labelAlign?:LabelAlignModal;
-  labelWidth?:number
+  labelAlign?: LabelAlignModal;
+  labelWidth?: number;
+  formItemStyle?:React.CSSProperties;
+  hideLabel?:boolean;
+  colon?:boolean;
+  itemProps?: ItemPropsType;
+  itemSpan?: ColProps;
 }
 interface ConfigUploadProps {
   exFiles?: string[];

package/src/components/Select/hooks/changeHooks.tsx

@@ -67,8 +67,8 @@ export const useValueChange = (params: PartialHSelectProps) => {
     if (labelInValue) {
       return val;
     }
-    if (val===undefined||mode==="tags"){
-      return  val
+    if (val === undefined || mode === "tags") {
+      return val;
     }
     if (!val) {
       return val;

package/src/components/Select/hooks/norHooks.ts

@@ -62,9 +62,14 @@ const useOptionsRequest = ({
     }
     return params;
   };
-  const { run:listRun, loading, error } = useRequest(
+  const {
+    run: listRun,
+    loading,
+    error,
+  } = useRequest(
     async (requestParams = {}, type = "init") => {
-      const { params = saveParams.listParams.reqParams, values } = requestParams;
+      const { params = saveParams.listParams.reqParams, values } =
+        requestParams;
       const formData = values || form?.getFieldsValue();
       if (type === "init") {
         resetSaveParams();
@@ -94,12 +99,12 @@ const useOptionsRequest = ({
       },
     }
   );
-  const run=(requestParams = {}, type = "init")=>{
-    if (loading){
+  const run = (requestParams = {}, type = "init") => {
+    if (loading) {
       return;
     }
-    listRun(requestParams,type);
-  }
+    listRun(requestParams, type);
+  };
   return {
     loading,
     run,

package/src/components/index.tsx

@@ -6,6 +6,7 @@ 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";
+export {default as HBasicForm} from './Form/Basic';
 
 import ModalForm from "./DialogForm/ModalForm";
 import DrawerForm from "./DialogForm/DrawerForm";

package/src/pages/DrawerForm/index.tsx

@@ -1,29 +1,31 @@
 import { Button } from "antd";
 import { HDrawerForm, useHDialogForm } from "../../components";
 import { MediaTypeEnum } from "../../components/Upload/enums";
-import FormItem from '../../components/Form/FormItem'
-import {useEffect} from "react";
-const Test=()=>{
-  return <FormItem name="123" label="你好"/>
-}
+import FormItem from "../../components/Form/FormItem";
+import { useEffect } from "react";
+const Test = () => {
+  return <FormItem name="123" label="你好" />;
+};
 const data = [
   {
-    hideLabel:true,
-    render:()=>{
-       return <Test/>
-    }
-  }
+    hideLabel: true,
+    render: () => {
+      return <Test />;
+    },
+  },
 ];
 let num = 0;
-const Test1=({formNode,dialogForm,params})=>{
+const Test1 = ({ formNode, dialogForm, params }) => {
   useEffect(() => {
-    console.log("渲染")
+    console.log("渲染");
   }, []);
-  return   <div>
-    <div>测试一些</div>
-    {formNode}
-  </div>
-}
+  return (
+    <div>
+      <div>测试一些</div>
+      {formNode}
+    </div>
+  );
+};
 export default () => {
   const modalForm = useHDialogForm();
   return (
@@ -66,11 +68,11 @@ export default () => {
         labelWidth={88}
         labelAlign={"left"}
         dialogForm={modalForm}
-        footer={()=>{
-            return <div>ff</div>
+        footer={() => {
+          return <div>ff</div>;
         }}
-        request={(values)=>{
-          console.log(values)
+        request={(values) => {
+          console.log(values);
         }}
         afterClose={() => {
           console.log("afterClose");
@@ -81,7 +83,7 @@ export default () => {
         }}
         title="测试"
       >
-      <Test1/>
+        <Test1 />
       </HDrawerForm>
     </>
   );

package/src/pages/Form/index.tsx

@@ -1,8 +1,9 @@
 import {
-  HForm,
-  HFormConfigProvider,
-  HSwitch,
-  useHForm,
+    HBasicForm,
+    HForm,
+    HFormConfigProvider,
+    HSwitch,
+    useHForm,
 } from "../../components";
 import { useState } from "react";
 import { Button, DatePicker, Form, Input, Row } from "antd";
@@ -58,6 +59,32 @@ const formData = (options) => {
       className: "hdjd",
       name: "test123",
     },
+      {
+        noStyle:true,
+        render:()=>{
+            return <HBasicForm configData={[
+                {
+                    label: "下拉",
+                    className: "hdjd",
+                    type: "select",
+                    name: "test321",
+                    itemProps: {
+                        options: [
+                            {
+                                value: "选项1",
+                                key: 1,
+                            },
+                            {
+                                value: "选项2",
+                                key: 2,
+                            },
+                        ],
+                        showSearch: true,
+                    },
+                },
+            ]}/>
+        }
+      },
     {
       type: "submit",
     },
@@ -102,9 +129,10 @@ export default () => {
       >
         <HForm
           configData={formData(options)}
-          labelWidth={200}
+          labelWidth={300}
           form={form}
           labelAlign={"right"}
+          colon={false}
           onFinish={(value) => {
             console.log(value, "onFinish");
           }}

package/src/pages/ModalForm/index.tsx

@@ -5,7 +5,7 @@ import {
   HFormConfigProvider,
   HUrlUpload,
 } from "../../components";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import { ShowParamsModal } from "@/components/DialogForm/modal";
 
 const Test = (props) => {
@@ -144,15 +144,17 @@ const data = [
   },
 ];
 let num = 0;
-const Test1=({formNode})=>{
+const Test1 = ({ formNode }) => {
   useEffect(() => {
-     console.log("渲染")
+    console.log("渲染");
   }, []);
-  return   <div>
-    <div>测试一些</div>
-    {formNode}
-  </div>
-}
+  return (
+    <div>
+      <div>测试一些</div>
+      {formNode}
+    </div>
+  );
+};
 export default () => {
   const modalForm = useHDialogForm();
   return (
@@ -205,7 +207,7 @@ export default () => {
           dialogForm={modalForm}
           title={<div>fff</div>}
         >
-           <Test1/>
+          <Test1 />
         </HModalForm>
       </HFormConfigProvider>
     </>

package/src/pages/Select/index.tsx

@@ -20,7 +20,7 @@ export default () => {
         placeholder="多选"
         value={null}
         onChange={(val, option) => {
-            console.log(val)
+          console.log(val);
           setSelectVal(val);
         }}
         allSelect={true}
@@ -53,11 +53,11 @@ export default () => {
             op.push({ label: `第${page}页第${i}条`, value: i + page });
           }
           return Promise.resolve({
-              page,
-              size: 100,
-              total: 1000,
-              data: op,
-          })
+            page,
+            size: 100,
+            total: 1000,
+            data: op,
+          });
         }}
         isList
       />