新增MUI适配

package.json

@@ -26,10 +26,16 @@
       "require": "./dist/Antd_5.cjs.js",
       "import": "./dist/Antd_5.esm.js",
       "types": "./dist/Antd_5.d.ts"
+    },
+    "./MUI_5": {
+      "require": "./dist/MUI_5.cjs.js",
+      "import": "./dist/MUI_5.esm.js",
+      "types": "./dist/MUI_5.d.ts"
     }
   },
   "browser": "dist/index.umd.js",
   "devDependencies": {
+    "@mui/material": "^5.15.14",
     "@changesets/cli": "^2.27.1",
     "@nextui-org/react": "^2.2.9",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -66,5 +72,6 @@
   },
   "author": "luoanbing",
   "email": "luoanb@163.com",
-  "license": "MIT"
-}
+  "license": "MIT",
+  "dependencies": {}
+}

rollup.config.mjs

@@ -27,7 +27,7 @@ const defineLib = ({ input, outputName }) => {
     // 声明
     {
       input,
-      external: ['react', '@nextui-org/react', 'antd'],
+      external: ['react', '@nextui-org/react', 'antd', '@mui/material'],
       output: [
         {
           file: `dist/${outputName}.d.ts`
@@ -54,6 +54,7 @@ export default [
       ...(process.env.NODE_ENV === 'development' ? [] : [terser(), uglify()])
     ]
   },
-  ...defineLib({ input: 'src/Antd_5/index.tsx', outputName: 'Antd_5', name: 'hookFormReact' }),
-  ...defineLib({ input: 'src/index.ts', outputName: 'index', name: 'hookFormReact' })
+  ...defineLib({ input: 'src/Antd_5/index.tsx', outputName: 'Antd_5' }),
+  ...defineLib({ input: 'src/MUI_5/index.ts', outputName: 'MUI_5' }),
+  ...defineLib({ input: 'src/index.ts', outputName: 'index' })
 ]

src/AttrBase.ts

@@ -4,17 +4,30 @@ import { RenderAttrProps } from './useAttr'
  * 属性绑定基类
  */
 export class AttrBase {
+  protected constructor() {}
   /**
    * HTML原生Input绑定：value/onChange(e.target.value)
    * @param props Form表单上下文
    * @returns
    */
-  static D_Input = ({ value, setValue }: RenderAttrProps<string>) => {
+  static D_Input = ({ value, setValue }: RenderAttrProps<any>) => {
     return {
       value,
       onChange: (e: any) => setValue(e.target.value)
     }
   }
+  /**
+   * HTML.checkbox绑定: checked/onChange(e.target.checked)
+   * @param props Form表单上下文
+   * @returns
+   */
+  static D_Checkbox = ({ value, setValue }: RenderAttrProps<boolean>) => {
+    return {
+      checked: value,
+      onChange: (e: any) => setValue(e.target.checked)
+    }
+  }
+
   /**
    * 绑定value/onChange(value)
    * @param props

src/MUI_5/FormItem.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import {
+  FormControl,
+  FormControlProps,
+  FormHelperText,
+  FormHelperTextProps,
+  InputLabel,
+  InputLabelProps,
+  MenuItem,
+  Select,
+  TextField
+} from '@mui/material'
+import { Input } from '@nextui-org/react'
+
+/**
+ * @description MUI表单项参数
+ */
+export type FormItemProps = FormControlProps & {
+  helperText?: React.ReactNode
+  label?: React.ReactNode
+  error?: boolean
+  inputLabelProps?: InputLabelProps
+  formHelperText?: FormHelperTextProps
+}
+
+/**
+ * MUI FormControl,FormLabel,FormHelperText 轻封装
+ * @param props
+ * @returns
+ */
+export const FormItem = ({
+  children,
+  helperText,
+  label,
+  error,
+  inputLabelProps = {},
+  formHelperText = {},
+  ...props
+}: FormItemProps) => {
+  return (
+    <FormControl {...props}>
+      <InputLabel error={error} {...inputLabelProps}>
+        {label}
+      </InputLabel>
+      {children}
+      <FormHelperText {...formHelperText} error={error}>
+        {helperText}
+      </FormHelperText>
+    </FormControl>
+  )
+}

src/MUI_5/index.ts

@@ -0,0 +1,133 @@
+import { AttrBase } from '@/AttrBase'
+import { RenderAttrProps } from '@/useAttr'
+import { AutocompleteProps, TextFieldProps } from '@mui/material'
+import { FormItem, FormItemProps } from './FormItem'
+
+/**
+ * MUI.5的快速绑定支持 静态工具类, 无需new,直接使用
+ */
+export class MUI_5 extends AttrBase {
+  private constructor() {
+    super()
+  }
+
+  static M_AutoComplete = <
+    Value,
+    Multiple extends boolean | undefined,
+    DisableClearable extends boolean | undefined,
+    FreeSolo extends boolean | undefined,
+    ChipComponent extends React.FunctionComponent<any>
+  >(
+    props: RenderAttrProps<Value>
+  ) => {
+    return {
+      value: props.value,
+      onChange: (_e: any, v: Value) => {
+        props.setValue(v)
+      }
+    } as unknown as AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+  }
+
+  /**
+   * 绑定错误信息
+   * @param props
+   * @returns
+   */
+  static M_Error = (props: RenderAttrProps<any>) => {
+    return {
+      helperText: props.msg,
+      error: props.isError
+    }
+  }
+
+  /**
+   * 绑定TextField
+   * @param props
+   * @returns
+   */
+  static M_TextField = (props: RenderAttrProps<string>) => {
+    return {
+      ...this.M_Error(props),
+      value: props.value,
+      onChange: (e: any) => {
+        props.setValue(e.target.value)
+      }
+    } as TextFieldProps
+  }
+
+  /**
+   * 绑定 Switch
+   * @param props
+   * @returns
+   */
+  static M_Switch = (props: RenderAttrProps<boolean>) => {
+    return {
+      ...this.D_Checkbox(props)
+    }
+  }
+
+  /**
+   * 绑定 Checkbox
+   * @param props
+   * @returns
+   */
+  static M_Checkbox = (props: RenderAttrProps<boolean>) => {
+    return {
+      ...this.D_Checkbox(props)
+    }
+  }
+
+  /**
+   * Slider
+   * @param props
+   * @returns
+   */
+  static M_Slider = (props: RenderAttrProps<number>) => {
+    return {
+      value: props.value,
+      onChange: (_e: unknown, v: number) => {
+        props.setValue(v)
+      }
+    }
+  }
+
+  /**
+   * RadioGroup
+   * @param props
+   * @returns
+   */
+  static M_RadioGroup = (props: RenderAttrProps<string>) => {
+    return {
+      ...this.D_Input(props)
+    }
+  }
+
+  /**
+   * Rating
+   * @param props
+   * @returns
+   */
+  static M_Rating = (props: RenderAttrProps<number>) => {
+    return {
+      value: props.value,
+      onChange: (_e: any, v: number) => {
+        props.setValue(v)
+      }
+    }
+  }
+
+  /**
+   * Select
+   * @param props
+   * @returns
+   */
+  static M_Select = <T = any>(props: RenderAttrProps<T>) => {
+    return {
+      ...this.D_Input(props)
+    }
+  }
+
+  static FormItem = FormItem
+}
+
+export type { FormItemProps }

test/package.json

@@ -10,14 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.14",
     "@nextui-org/react": "^2.2.9",
     "antd": "^5.15.1",
     "dayjs": "^1.11.10",
     "framer-motion": "^11.0.8",
+    "hook-form-react": "file:../",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.1",
-    "hook-form-react": "file:../"
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.25",