@hw-component/form 1.8.1 → 1.8.3

package/src/components/Input/index.less

@@ -1,15 +1,13 @@
 @import "../styles/local.less";
 @all-input-group: ~"@{ant-prefix}-hw-input-group";
 
-.@{all-input-group} {
-  .@{all-input-group}-disabled {
-    background-color: #f5f5f5;
-  }
-}
 .@{all-input-group} {
   display: flex !important;
   width: 100%;
   color: rgba(0, 0, 0, 0.25);
+  .@{all-input-group}-disabled {
+    background-color: #f5f5f5;
+  }
   .@{all-input-group}-body {
     position: relative;
     display: flex !important;
@@ -44,7 +42,7 @@
     display: flex;
     align-items: center;
     padding: 0 4px;
-    color:rgba(0, 0, 0, 0.25);
+    color: rgba(0, 0, 0, 0.25);
   }
   .@{all-input-group}-one {
     flex: 1;

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

@@ -13,26 +13,27 @@ export const useValueChange = (params: PartialHSelectProps) => {
     fieldNames = {},
   } = params;
   const [val, setVal] = useState<any>();
-  const labelInValueItemMaker=(changeVal)=>{
-    const {value:fieldValue="value",label:fieldLabel="label"}=fieldNames;
-    const {label:changeLabel,value:changeValue,...oVal}=changeVal;
-    return  {
-      [fieldValue]:changeValue,
-      [fieldLabel]:changeLabel,
-      ...oVal
+  const labelInValueItemMaker = (changeVal) => {
+    const { value: fieldValue = "value", label: fieldLabel = "label" } =
+      fieldNames;
+    const { label: changeLabel, value: changeValue, ...oVal } = changeVal;
+    return {
+      [fieldValue]: changeValue,
+      [fieldLabel]: changeLabel,
+      ...oVal,
+    };
+  };
+  const labelInValueMaker = (changeVal) => {
+    if (!changeVal) {
+      return undefined;
+    }
+    if (!Array.isArray(changeVal)) {
+      return labelInValueItemMaker(changeVal);
     }
-  }
-  const labelInValueMaker=(changeVal)=>{
-      if (!changeVal){
-         return undefined;
-      }
-      if (!Array.isArray(changeVal)){
-         return  labelInValueItemMaker(changeVal)
-      }
-      return  changeVal.map((item)=>{
-        return  labelInValueItemMaker(item)
-      })
-  }
+    return changeVal.map((item) => {
+      return labelInValueItemMaker(item);
+    });
+  };
   const change = (changeVal, itemOps) => {
     if (!onChange) {
       setVal(changeVal);
@@ -44,11 +45,11 @@ export const useValueChange = (params: PartialHSelectProps) => {
     }
     const subItemOps = itemOpProvider(itemOps, fieldNames);
     if (labelInValue) {
-      onChange(labelInValueMaker(changeVal),itemOps);
+      onChange(labelInValueMaker(changeVal), itemOps);
       return;
     }
     let newChangeVal = changeVal.value;
-    if (Array.isArray(changeVal)&&!labelInValue) {
+    if (Array.isArray(changeVal) && !labelInValue) {
       newChangeVal = changeVal.map((item) => {
         return item.value;
       });
@@ -60,7 +61,7 @@ export const useValueChange = (params: PartialHSelectProps) => {
       setVal(undefined);
       return;
     }
-    if (mode === "tags"||labelInValue) {
+    if (mode === "tags" || labelInValue) {
       setVal(value);
       return;
     }
@@ -73,13 +74,14 @@ export const useValueChange = (params: PartialHSelectProps) => {
   }, [value, options, mode]);
   const itemMaker = (item) => {
     const { value: itemVal, label, noMatch } = item;
-    const {value:fieldValue="value",label:fieldLabel="label"}=fieldNames;
-    if (labelInValue){
-        const {[fieldValue]:changeVal,[fieldLabel]:changeLable}=item;
-        return  {
-          value:changeVal,
-          label: changeLable
-        };
+    const { value: fieldValue = "value", label: fieldLabel = "label" } =
+      fieldNames;
+    if (labelInValue) {
+      const { [fieldValue]: changeVal, [fieldLabel]: changeLable } = item;
+      return {
+        value: changeVal,
+        label: changeLable,
+      };
     }
     if (noMatch) {
       return {

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

@@ -100,7 +100,7 @@ const useOptionsRequest = ({
     }
   );
   const run = (requestParams = {}, type = "init") => {
-    if (loading&&type!=="init") {
+    if (loading && type !== "init") {
       return;
     }
     listRun(requestParams, type);

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

@@ -3,7 +3,7 @@ import Input from "antd/es/input/Input";
 import Upload from "../index";
 import type { IUploadRefModal, IUrlUploadProps } from "../modal";
 import TypeEle from "../MediaTypeEle/TypeEle";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import type { RcFile, UploadFile } from "antd/es/upload/interface";
 import { useDefaultExFiles } from "./hooks";
 const { Text } = Typography;

package/src/components/config.ts

@@ -1,6 +1,9 @@
 import moment from "moment";
 import type { IFormConfigContextProps } from "./Form/modal";
 import { fileToBase64 } from "./Upload/util";
+const rangeStartDay=(day:number)=>{
+  return moment().subtract(day, "days").startOf("days")
+}
 export const baseConfig: IFormConfigContextProps = {
   fieldNames: {
     label: "label",
@@ -23,9 +26,15 @@ export const baseConfig: IFormConfigContextProps = {
     },
   },
   dateRanges: {
-    最近三天: [moment().subtract(2, "days").startOf("days"), moment()],
-    最近七天: [moment().subtract(6, "days").startOf("days"), moment()],
-    最近三十天: [moment().subtract(29, "days").startOf("days"), moment()],
+    最近三天: ()=>{
+      return [rangeStartDay(2), moment()]
+    },
+    最近七天: ()=>{
+      return [rangeStartDay(6),moment()]
+    },
+    最近三十天:()=>{
+      return  [rangeStartDay(29), moment()]
+    },
   },
   uploadProps: {
     exFiles: ["JPG", "PNG", "JPEG", "GIF"],

package/src/components/index.tsx

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

package/src/pages/Form/index.tsx

@@ -1,102 +1,79 @@
 import {
-    HBasicForm,
-    HForm,
-    HFormConfigProvider,
-    HSwitch,
-    useHForm,
-    HSelect
+  HBasicForm,
+  HForm,
+  HFormConfigProvider,
+  HSwitch,
+  useHForm,
+  HSelect,
 } from "../../components";
 import { useState } from "react";
-import {Button, DatePicker, Form, Input, Row, Space} from "antd";
+import { Button, DatePicker, Form, Input, Row, Space } from "antd";
 const Test2 = () => {
   return <Row style={{ background: "red" }} />;
 };
-const Test3 = ({ value={}, onChange }) => {
-    const {fs,end}=value;
-    return <Space>
-        <HSelect
-            options={[{value:"1321",key:1}]}
-            value={fs}
-            allowClear
-            onChange={()=>{
-                 onChange?.({})
-            }}
-        />
-        <HSelect options={[{value:"112",key:2}]}
-                 allowClear
-                 value={end}
-                 onChange={(val)=>{
-                     onChange?.({
-                         ...value,
-                         end:val
-                     })
-                 }}
-        />
+const Test3 = ({ value = {}, onChange }) => {
+  const { fs, end } = value;
+  return (
+    <Space>
+      <HSelect
+        options={[{ value: "1321", key: 1 }]}
+        value={fs}
+        allowClear
+        onChange={() => {
+          onChange?.({});
+        }}
+      />
+      <HSelect
+        options={[{ value: "112", key: 2 }]}
+        allowClear
+        value={end}
+        onChange={(val) => {
+          onChange?.({
+            ...value,
+            end: val,
+          });
+        }}
+      />
     </Space>
+  );
 };
-const TestItem=()=>{
-    return <Form.Item name="name1">
-         <Test3/>
+const TestItem = () => {
+  return (
+    <Form.Item name="name1">
+      <Test3 />
     </Form.Item>
-}
-const Test3Item=()=>{
-    return <Form.List name="users">
-        {(fields, { add, remove }) => (
+  );
+};
+const Test3Item = () => {
+  return (
+    <Form.List name="users">
+      {(fields, { add, remove }) => (
         <>
-            {fields.map(({ key, name, ...restField }) => (
-                <Form.Item
-                    {...restField}
-                    name={name}
-                    key={key}
-                >
-                    <Test3/>
-                </Form.Item>
-            ))}
-            <Form.Item>
-                <Button type="dashed" onClick={() => add({})} block>
-                    Add field
-                </Button>
+          {fields.map(({ key, name, ...restField }) => (
+            <Form.Item {...restField} name={name} key={key}>
+              <Test3 />
             </Form.Item>
+          ))}
+          <Form.Item>
+            <Button type="dashed" onClick={() => add({})} block>
+              Add field
+            </Button>
+          </Form.Item>
         </>
-    )}
-
-</Form.List>
-}
+      )}
+    </Form.List>
+  );
+};
 const formData = (options) => {
   return [
       {
-        render:()=>{
-            return <HBasicForm
-                configData={[
-                {
-                    label: "下拉123",
-                    className: "xiala",
-                    render:()=>{
-                        return <TestItem/>
-                    }
-                },
-            ]}/>
-        }
+          name:"name",
+          label:"输入框"
       },
       {
-          label: '会员标签',
-          hover: '添加新的会员标签后会覆盖用户原有的会员标签类型',
-          nameKey: 'userTags',
-          style: {
-              marginBottom: 0,
-          },
-          render:()=>{
-              return <HBasicForm
-                  configData={[
-                      {
-                          label: "333",
-                          className: "xiala",
-                          render:()=>{
-                              return <Test3Item/>
-                          }
-                      },
-                  ]}/>
-          }
+          name:"url",
+          type:"urlUpload",
+          label:"文本"
       },
   ];
 };
@@ -140,6 +117,7 @@ export default () => {
         <HForm
           configData={formData(options)}
           labelWidth={300}
+          dismissOnPressEnter={false}
           form={form}
           labelAlign={"left"}
           onFinish={(value) => {
@@ -149,7 +127,7 @@ export default () => {
             console.log(val, "onValuesChange");
           }}
           initialValues={{
-              name1:{}
+            name1: {},
           }}
           request={(params) => {
             return new Promise<any>((resolve) => {

package/src/pages/Input/index.tsx

@@ -26,11 +26,13 @@ export default () => {
           return Promise.resolve({ code: 200 });
         }}
       />
-        <HInputNumberGroup
-            inputNumberProps={[{
-                min:Number.MIN_SAFE_INTEGER
-            }]}
-        />
+      <HInputNumberGroup
+        inputNumberProps={[
+          {
+            min: Number.MIN_SAFE_INTEGER,
+          },
+        ]}
+      />
     </Space>
   );
 };

package/src/pages/Select/index.tsx

@@ -1,8 +1,8 @@
 import { HSelect } from "../../components";
-import { Space ,Select} from "antd";
+import { Space, Select } from "antd";
 import { useState } from "react";
 export default () => {
-  const [selectVal, setSelectVal] = useState([{name:"11",id:-100}]);
+  const [selectVal, setSelectVal] = useState([{ name: "11", id: -100 }]);
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HSelect
@@ -11,12 +11,12 @@ export default () => {
         allowClear={true}
         labelInValue
         fieldNames={{
-          label:"name",
-          value:"id"
+          label: "name",
+          value: "id",
         }}
         value={selectVal}
-        onChange={(val,item)=>{
-           setSelectVal(val)
+        onChange={(val, item) => {
+          setSelectVal(val);
         }}
         request={async (params) => {
           const { page, size } = params;
@@ -24,15 +24,19 @@ export default () => {
           for (let i = 0; i < 100; i += 1) {
             op.push({ name: `第${page}页第${i}条`, id: i + page });
           }
-          return  Promise.resolve({
-              page,
-              size: 100,
-              total: 1000,
-              data: op,
-          })
+          return Promise.resolve({
+            page,
+            size: 100,
+            total: 1000,
+            data: op,
+          });
         }}
         isList
       />
+      <HSelect
+       value={1}
+       options={null}
+      />
     </Space>
   );
 };

package/src/pages/Upload/index.tsx

@@ -24,13 +24,12 @@ export default () => {
         maxCount={3}
         maxSize={Number.MAX_SAFE_INTEGER}
       />
-      <HUrlUpload
+      <HUpload
         value={files1}
         mediaType={MediaTypeEnum.file}
         showUploadList={{
           showPreviewIcon: false,
         }}
-        exFiles={["TXT", "EXE"]}
         onChange={setFiles1}
       />
     </Space>