@hw-component/form 1.7.7 → 1.8.0

package/src/pages/Form/index.tsx

@@ -4,86 +4,100 @@ import {
     HFormConfigProvider,
     HSwitch,
     useHForm,
+    HSelect
 } from "../../components";
 import { useState } from "react";
-import { Button, DatePicker, Form, Input, Row } from "antd";
+import {Button, DatePicker, Form, Input, Row, Space} from "antd";
 const Test2 = () => {
   return <Row style={{ background: "red" }} />;
 };
-const Test3 = ({ value, onChange }) => {
-  return (
-    <Input
-      value={value.input}
-      style={{ width: 100 }}
-      onChange={(e) => {
-        onChange({
-          ...value,
-          input: e.target.value,
-        });
-      }}
-    />
-  );
+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/>
+    </Form.Item>
+}
+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>
+            </Form.Item>
+        </>
+    )}
+
+</Form.List>
+}
 const formData = (options) => {
   return [
       {
-          label: "下拉123",
-          className: "xiala",
-          type: "select",
-          name: "name1",
-          rules:[{required:true}],
-          itemProps: {
-              options: [
-                  {
-                      value: "选项1",
-                      key: 1,
-                  },
-                  {
-                      value: "选项2",
-                      key: 2,
-                  },
-              ],
-              showSearch: true,
-          },
-      },
-      {
-        noStyle:true,
         render:()=>{
-            return <HBasicForm configData={[
+            return <HBasicForm
+                configData={[
                 {
-                    label: "下拉",
+                    label: "下拉123",
                     className: "xiala",
-                    type: "select",
-                    name: "test321",
-                    colon:false,
-                    rules:[{required:true}],
-                    hover:()=>{
-                      return "ff"
-                    },
-                    hide:()=>{
-                        return false;
-                    },
-                    labelAlign:"right",
-                    itemProps: {
-                        options: [
-                            {
-                                value: "选项1",
-                                key: 1,
-                            },
-                            {
-                                value: "选项2",
-                                key: 2,
-                            },
-                        ],
-                        showSearch: true,
-                    },
+                    render:()=>{
+                        return <TestItem/>
+                    }
                 },
             ]}/>
         }
       },
-    {
-      type: "submit",
-    },
+      {
+          label: '会员标签',
+          hover: '添加新的会员标签后会覆盖用户原有的会员标签类型',
+          nameKey: 'userTags',
+          style: {
+              marginBottom: 0,
+          },
+          render:()=>{
+              return <HBasicForm
+                  configData={[
+                      {
+                          label: "333",
+                          className: "xiala",
+                          render:()=>{
+                              return <Test3Item/>
+                          }
+                      },
+                  ]}/>
+          }
+      },
   ];
 };
 function Ttta({ form }) {
@@ -135,12 +149,7 @@ export default () => {
             console.log(val, "onValuesChange");
           }}
           initialValues={{
-            file: "https://img0.baidu.com/it/u=530540642,263790536&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667",
-            min: 1,
-            max: 2,
-            inputNumberGroup: {
-              input: "xxxxxxx",
-            },
+              name1:{}
           }}
           request={(params) => {
             return new Promise<any>((resolve) => {

package/src/pages/Input/index.tsx

@@ -5,6 +5,7 @@ import {
   HInputNumber,
   HColorInput,
   HVerificationCodeInput,
+  HInputNumberGroup,
 } from "../../components";
 import { Space } from "antd";
 export default () => {
@@ -25,6 +26,7 @@ export default () => {
           return Promise.resolve({ code: 200 });
         }}
       />
+        <HInputNumberGroup/>
     </Space>
   );
 };

package/src/pages/Select/index.tsx

@@ -1,56 +1,28 @@
 import { HSelect } from "../../components";
-import { Space } from "antd";
+import { Space ,Select} from "antd";
 import { useState } from "react";
 export default () => {
-  const [selectVal, setSelectVal] = useState(null);
+  const [selectVal, setSelectVal] = useState([{name:"11",id:-100}]);
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-      <HSelect
-        options={[{ label: "测试", value: 1 }]}
-        value={1}
-        placeholder="基础"
-        allowClear={true}
-      />
-      <HSelect
-        fieldNames={{ label: "name", value: "value" }}
-        options={[
-          { name: "测试1", value: 10, userId: 112321, disabled: true },
-          { name: "测试2", value: 20, userId: 112321 },
-        ]}
-        placeholder="多选"
-        value={null}
-        onChange={(val, option) => {
-          console.log(val);
-          setSelectVal(val);
-        }}
-        allSelect={true}
-        mode={"multiple"}
-        allowClear={true}
-        showSearch={true}
-      />
-      <HSelect
-        mode={"tags"}
-        placeholder="tags模式"
-        showSearch={true}
-        allowClear={true}
-        value={null}
-        options={[
-          { label: "测试1", value: 10 },
-          { label: "测试2", value: 20 },
-        ]}
-      />
       <HSelect
         placeholder="分页"
         serviceSearch
         allowClear={true}
         labelInValue
-        mode="multiple"
-        value={["21321312"]}
+        fieldNames={{
+          label:"name",
+          value:"id"
+        }}
+        value={selectVal}
+        onChange={(val,item)=>{
+           setSelectVal(val)
+        }}
         request={async (params) => {
           const { page, size } = params;
           const op = [];
-          for (let i = 0; i < size; i += 1) {
-            op.push({ label: `第${page}页第${i}条`, value: i + page });
+          for (let i = 0; i < 5; i += 1) {
+            op.push({ name: `第${page}页第${i}条`, id: i + page });
           }
           return Promise.resolve({
             page,
@@ -61,27 +33,6 @@ export default () => {
         }}
         isList
       />
-      <HSelect
-        serviceSearch={true}
-        request={(params) => {
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              resolve([
-                {
-                  label: `我是搜索文案${params.inputValue}`,
-                  value: new Date().valueOf(),
-                },
-                {
-                  label: `我是搜索文案${params.inputValue}`,
-                  value: new Date().valueOf() + 1,
-                },
-              ]);
-            }, 2000);
-          });
-        }}
-        placeholder="远程搜索"
-        mode={"multiple"}
-      />
     </Space>
   );
 };