重写测试用例

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

Hide file tree

Showing 6 changed files with 171 additions and 19 deletions.
diff --git a/src/MUI_5/FormItem.tsx b/src/MUI_5/FormItem.tsx
@@ -4,19 +4,20 @@ import {
   FormControlProps,
   FormHelperText,
   FormHelperTextProps,
+  FormLabel,
   InputLabel,
-  InputLabelProps,
-  MenuItem,
-  Select,
-  TextField
+  InputLabelProps
 } from '@mui/material'
-import { Input } from '@nextui-org/react'
 
 /**
  * @description MUI表单项参数
  */
 export type FormItemProps = FormControlProps & {
   helperText?: React.ReactNode
+  /**
+   * 是否采用FormLabel, 默认 : false(InputLabel)
+   */
+  isFormLabel?: boolean
   label?: React.ReactNode
   error?: boolean
   inputLabelProps?: InputLabelProps
@@ -33,15 +34,23 @@ export const FormItem = ({
   helperText,
   label,
   error,
+  isFormLabel = false,
   inputLabelProps = {},
   formHelperText = {},
   ...props
 }: FormItemProps) => {
   return (
     <FormControl {...props}>
-      <InputLabel error={error} {...inputLabelProps}>
-        {label}
-      </InputLabel>
+      {isFormLabel ? (
+        <FormLabel error={error} {...inputLabelProps}>
+          {label}
+        </FormLabel>
+      ) : (
+        <InputLabel error={error} {...inputLabelProps}>
+          {label}
+        </InputLabel>
+      )}
+
       {children}
       <FormHelperText {...formHelperText} error={error}>
         {helperText}

diff --git a/src/MUI_5/index.ts b/src/MUI_5/index.ts
@@ -82,10 +82,10 @@ export class MUI_5 extends AttrBase {
    * @param props
    * @returns
    */
-  static M_Slider = (props: RenderAttrProps<number>) => {
+  static M_Slider = (props: RenderAttrProps<any>) => {
     return {
       value: props.value,
-      onChange: (_e: unknown, v: number) => {
+      onChange: (_e: unknown, v: any) => {
         props.setValue(v)
       }
     }
@@ -107,10 +107,10 @@ export class MUI_5 extends AttrBase {
    * @param props
    * @returns
    */
-  static M_Rating = (props: RenderAttrProps<number>) => {
+  static M_Rating = (props: RenderAttrProps<number | null>) => {
     return {
       value: props.value,
-      onChange: (_e: any, v: number) => {
+      onChange: (_e: any, v: number | null) => {
         props.setValue(v)
       }
     }
@@ -123,6 +123,7 @@ export class MUI_5 extends AttrBase {
    */
   static M_Select = <T = any>(props: RenderAttrProps<T>) => {
     return {
+      ...this.M_Error(props),
       ...this.D_Input(props)
     }
   }

diff --git a/test/package.json b/test/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --force",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
@@ -38,4 +38,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.1.4"
   }
-}
+}
diff --git a/test/src/Antd.tsx b/test/src/Antd.tsx
@@ -0,0 +1,89 @@
+import { Button, Checkbox, Input, InputNumber, Radio, Select, Switch, 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'
+
+export default function Antd() {
+  const form = useFormData(
+    {
+      value: '',
+      value10: 1,
+      value11: 1,
+      value6: true,
+      value2: false,
+      value7: [],
+      value3: [],
+      value4: {},
+      value5: '',
+      value8: ''
+    },
+    {
+      value: [Verifications.required()],
+      value5: [Verifications.required()],
+      value8: [Verifications.required()],
+      value10: [Verifications.min(10)]
+    }
+  )
+
+  const attr = useAttr(form)
+
+  const submit = async () => {
+    form.doAllValidate()
+  }
+
+  const reset = async () => {
+    form.reset()
+  }
+  return (
+    <div className="flex ">
+      <div className="w-[50vw] flex flex-col">
+        <div className="max-w-[25rem]">
+          <Antd_5.FormItem className="mt-2" {...attr('value')}>
+            <Input {...attr('value', Antd_5.A_Input)} />
+          </Antd_5.FormItem>
+          <Antd_5.FormItem className="mt-2" {...attr('value10')}>
+            <InputNumber className="pb-2" {...attr('value10', Antd_5.A_InputNumber)} />
+          </Antd_5.FormItem>
+          <Antd_5.FormItem className="mt-2" {...attr('value5')}>
+            <Select {...attr('value5', Antd_5.A_Select)}></Select>
+          </Antd_5.FormItem>
+          <div className="p-2 rounded mt-2 bg-gray-50 flex items-center">
+            <Switch className="mr-2" {...attr('value6', Antd_5.A_Switch)}></Switch>
+            <Checkbox {...attr('value6', Antd_5.A_Checkbox)}></Checkbox>
+          </div>
+          <Radio.Group className="mt-2" {...attr('value', Antd_5.A_RadioGroup)}>
+            {animals.map((it) => (
+              <Radio value={it.value}>{it.label}</Radio>
+            ))}
+          </Radio.Group>
+
+          <Antd_5.FormItem className="mt-2" {...attr('value8')}>
+            <TreeSelect treeData={treeData} {...attr('value8', Antd_5.A_TreeSelect)}></TreeSelect>
+          </Antd_5.FormItem>
+          <div className="mt-2">
+            <Button onClick={reset} shape="round" size="large" className="mr-2">
+              重置
+            </Button>
+            <Button onClick={submit} shape="round" size="large">
+              提交
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-wrap">
+        <div className="mr-2 mb-2">
+          <h1 className="text-2xl mb-2">FormValue</h1>
+          <pre className="p-2 bg-gray-800 text-gray-100 text-sm rounded-lg">
+            {JSON.stringify(form.value, null, 1)}
+          </pre>
+        </div>
+        <div className="mr-2 mb-2">
+          <h1 className="text-2xl mb-2">FormErrors</h1>
+          <pre className="p-2 bg-gray-800 text-gray-100 text-sm rounded-lg">
+            {JSON.stringify(form.errors, null, 1)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/test/src/App.tsx b/test/src/App.tsx
@@ -1,6 +1,7 @@
 import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
 import NextUI from './NextUI'
 import MUI from './MUI'
+import Antd from './Antd'
 
 export default function App() {
   return (
@@ -15,9 +16,7 @@ export default function App() {
       <Tab key="Antd" title="Antd">
         <Card>
           <CardBody>
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-            dolore eu fugiat nulla pariatur.
+            <Antd />
           </CardBody>
         </Card>
       </Tab>

diff --git a/test/src/MUI.tsx b/test/src/MUI.tsx
@@ -1,5 +1,18 @@
 import { Verifications, useAttr, useFormData } from 'hook-form-react'
-import { Button, MenuItem, Select, TextField } from '@mui/material'
+import {
+  Button,
+  MenuItem,
+  Select,
+  Slider,
+  TextField,
+  Autocomplete,
+  Switch,
+  Checkbox,
+  Rating,
+  RadioGroup,
+  FormControlLabel,
+  Radio
+} from '@mui/material'
 import { MUI_5 } from 'hook-form-react/MUI_5'
 import { animals } from './data'
 /**
@@ -11,6 +24,7 @@ export default function MUI() {
     {
       value: '',
       valu10: 1,
+      valu11: 1,
       valu6: false,
       valu2: false,
       valu7: [],
@@ -21,7 +35,9 @@ export default function MUI() {
     },
     {
       value: [Verifications.required()],
-      value5: [Verifications.required()]
+      value5: [Verifications.required()],
+      value8: [Verifications.required()],
+      valu10: [Verifications.min(10)]
     }
   )
 
@@ -60,6 +76,44 @@ export default function MUI() {
               </Select>
             </MUI_5.FormItem>
           </div>
+          <div className="mb-2">
+            <MUI_5.FormItem {...attr('valu10', MUI_5.M_Error)} fullWidth>
+              <Slider {...attr('valu10', MUI_5.M_Slider)} />
+            </MUI_5.FormItem>
+          </div>
+          <div className="mb-2">
+            <Autocomplete
+              {...attr('value8', MUI_5.M_AutoComplete)}
+              options={animals.map((option) => option.label)}
+              renderInput={(params) => (
+                <TextField {...params} {...attr('value8', MUI_5.M_Error)} label="value8" />
+              )}
+            />
+          </div>
+          <div className="mb-2">
+            <MUI_5.FormItem {...attr('valu6', MUI_5.M_Error)} label="valu6" isFormLabel fullWidth>
+              <Switch {...attr('valu6', MUI_5.M_Switch)} />
+            </MUI_5.FormItem>
+          </div>
+          <div className="mb-2">
+            <MUI_5.FormItem {...attr('valu6', MUI_5.M_Error)} label="valu6" isFormLabel>
+              <Checkbox {...attr('valu6', MUI_5.M_Checkbox)} />
+            </MUI_5.FormItem>
+          </div>
+          <div className="mb-2">
+            <MUI_5.FormItem {...attr('valu11', MUI_5.M_Error)} label="valu11" isFormLabel fullWidth>
+              <Rating {...attr('valu11', MUI_5.M_Rating)} />
+            </MUI_5.FormItem>
+          </div>
+          <div className="mb-2">
+            <MUI_5.FormItem {...attr('value', MUI_5.M_Error)} label="value" isFormLabel fullWidth>
+              <RadioGroup {...attr('value', MUI_5.M_RadioGroup)}>
+                <FormControlLabel value="female" control={<Radio />} label="Female" />
+                <FormControlLabel value="male" control={<Radio />} label="Male" />
+                <FormControlLabel value="other" control={<Radio />} label="Other" />
+              </RadioGroup>
+            </MUI_5.FormItem>
+          </div>
           <div>
             <Button variant="outlined" onClick={reset} style={{ marginRight: '12px' }}>
               重置