MUI 适配完成

luoanb · Mar 31, 2024 · e53a0e1 · e53a0e1
1 parent 0f092f4
commit e53a0e1
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 42 deletions.
diff --git a/test/src/Antd.tsx b/test/src/Antd.tsx
@@ -1,4 +1,15 @@
-import { Button, Checkbox, Input, InputNumber, Radio, Select, Switch, TreeSelect } from 'antd'
+import {
+  Button,
+  Checkbox,
+  DatePicker,
+  Input,
+  InputNumber,
+  Radio,
+  Select,
+  Switch,
+  TimePicker,
+  TreeSelect
+} from 'antd'
 import { Verifications, useAttr, useFormData } from 'hook-form-react'
 import { Antd_5 } from 'hook-form-react/Antd_5'
 import { animals, treeData } from './data'
@@ -11,7 +22,7 @@ export default function Antd() {
       value11: 1,
       value6: true,
       value2: false,
-      value7: [],
+      value7: [] as string[],
       value3: [],
       value4: {},
       value5: '',
@@ -20,7 +31,8 @@ export default function Antd() {
     {
       value: [Verifications.required()],
       value5: [Verifications.required()],
-      value8: [Verifications.required()],
+      value7: [Verifications.minLenth(2, '请选择时间范围')],
+      value8: [Verifications.required('请选择时间')],
       value10: [Verifications.min(10)]
     }
   )
@@ -56,7 +68,21 @@ export default function Antd() {
               <Radio value={it.value}>{it.label}</Radio>
             ))}
           </Radio.Group>
-
+          <Antd_5.FormItem className="mt-2" {...attr('value8')}>
+            <TimePicker className="pb-2" {...attr('value8', Antd_5.F_A_TimePicker())} />
+          </Antd_5.FormItem>
+          <Antd_5.FormItem className="mt-2" {...attr('value8')}>
+            <DatePicker className="pb-2" {...attr('value8', Antd_5.F_A_DatePicker())} />
+          </Antd_5.FormItem>
+          <Antd_5.FormItem className="mt-2" {...attr('value7')}>
+            <DatePicker className="pb-2" {...attr('value7', Antd_5.F_A_DatePickerMult())} />
+          </Antd_5.FormItem>
+          <Antd_5.FormItem className="mt-2" {...attr('value7')}>
+            <DatePicker.RangePicker
+              className="pb-2"
+              {...attr('value7', Antd_5.F_A_DateRangePicker())}
+            />
+          </Antd_5.FormItem>
           <Antd_5.FormItem className="mt-2" {...attr('value8')}>
             <TreeSelect treeData={treeData} {...attr('value8', Antd_5.A_TreeSelect)}></TreeSelect>
           </Antd_5.FormItem>

diff --git a/test/src/App.tsx b/test/src/App.tsx
@@ -5,28 +5,30 @@ import Antd from './Antd'
 
 export default function App() {
   return (
-    <Tabs className="m-2" color="primary">
-      <Tab key="NextUI" title="Next UI" className="mx-2 h-full">
-        <Card className="h-full">
-          <CardBody className="h-full">
-            <NextUI />
-          </CardBody>
-        </Card>
-      </Tab>
-      <Tab key="Antd" title="Antd">
-        <Card>
-          <CardBody>
-            <Antd />
-          </CardBody>
-        </Card>
-      </Tab>
-      <Tab key="MUI" title="MUI">
-        <Card>
-          <CardBody>
-            <MUI />
-          </CardBody>
-        </Card>
-      </Tab>
-    </Tabs>
+    <div className="p-2">
+      <Tabs color="primary">
+        <Tab key="NextUI" title="Next UI" className="h-full">
+          <Card className="h-full">
+            <CardBody className="h-full">
+              <NextUI />
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="Antd" title="Antd">
+          <Card>
+            <CardBody>
+              <Antd />
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="MUI" title="MUI">
+          <Card>
+            <CardBody>
+              <MUI />
+            </CardBody>
+          </Card>
+        </Tab>
+      </Tabs>
+    </div>
   )
 }
diff --git a/test/src/NextUI.tsx b/test/src/NextUI.tsx
@@ -295,21 +295,31 @@ export const NextUI = () => {
           </Button>
         </div>
       </div>
-      <div className="flex-1 h-full overflow-y-auto">
-        <h1 className="text-lg font-bold">Form Value:</h1>
-        <pre className="bg-gray-100 rounded-md text-sm p-4">
-          {JSON.stringify(formData.value, null, 1)}
-        </pre>
-        <h1 className="text-lg font-bold">SubForm, Value10:</h1>
-        <pre className="bg-gray-100 rounded-md text-sm p-4">{JSON.stringify(value10, null, 1)}</pre>
-        <h1 className="text-lg font-bold">Error:</h1>
-        <pre className="bg-gray-100 rounded-md text-sm p-4">
-          {JSON.stringify(formData.errors, null, 1)}
-        </pre>
-        <h1 className="text-lg font-bold">Value10 Error:</h1>
-        <pre className="bg-gray-100 rounded-md text-sm p-4">
-          {JSON.stringify(value10Form.errors, null, 1)}
-        </pre>
+      <div className="flex-1 h-full overflow-y-auto flex flex-wrap">
+        <div className="mr-2">
+          <h1 className="text-lg font-bold">Form Value:</h1>
+          <pre className="bg-gray-800 text-gray-50 rounded-md text-sm p-4">
+            {JSON.stringify(formData.value, null, 1)}
+          </pre>
+        </div>
+        <div className="mr-2">
+          <h1 className="text-lg font-bold">SubForm, Value10:</h1>
+          <pre className="bg-gray-800 text-gray-50 rounded-md text-sm p-4">
+            {JSON.stringify(value10, null, 1)}
+          </pre>
+        </div>
+        <div className="mr-2">
+          <h1 className="text-lg font-bold">Error:</h1>
+          <pre className="bg-gray-800 text-gray-50 rounded-md text-sm p-4">
+            {JSON.stringify(formData.errors, null, 1)}
+          </pre>
+        </div>
+        <div className="mr-2">
+          <h1 className="text-lg font-bold">Value10 Error:</h1>
+          <pre className="bg-gray-800 text-gray-50 rounded-md text-sm p-4">
+            {JSON.stringify(value10Form.errors, null, 1)}
+          </pre>
+        </div>
       </div>
     </div>
   )