@carefrees/form-utils-react-hooks 0.0.4

package/lib/hooks/useMultipleForm.js

@@ -0,0 +1,62 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useMultipleForm: ()=>useMultipleForm,
+    MultipleFormInstanceContext: ()=>MultipleFormInstanceContext,
+    useMultipleFormInstance: ()=>useMultipleFormInstance,
+    MultipleFormProvider: ()=>MultipleFormProvider
+});
+const form_utils_namespaceObject = require("@carefrees/form-utils");
+const external_react_namespaceObject = require("react");
+const MultipleFormInstanceContext = (0, external_react_namespaceObject.createContext)(new form_utils_namespaceObject.MultipleInstanceBase());
+const useMultipleFormInstance = ()=>(0, external_react_namespaceObject.useContext)(MultipleFormInstanceContext);
+const useMultipleForm = (multipleForm)=>{
+    const ref = (0, external_react_namespaceObject.useRef)();
+    if (!ref.current) if (multipleForm) ref.current = multipleForm;
+    else ref.current = new form_utils_namespaceObject.MultipleInstanceBase();
+    return ref.current;
+};
+const MultipleFormProvider = (props)=>{
+    const { children, multipleForm } = props;
+    const multipleFormInstance = useMultipleForm(multipleForm);
+    return (0, external_react_namespaceObject.createElement)(MultipleFormInstanceContext.Provider, {
+        value: multipleFormInstance,
+        children
+    });
+};
+exports.MultipleFormInstanceContext = __webpack_exports__.MultipleFormInstanceContext;
+exports.MultipleFormProvider = __webpack_exports__.MultipleFormProvider;
+exports.useMultipleForm = __webpack_exports__.useMultipleForm;
+exports.useMultipleFormInstance = __webpack_exports__.useMultipleFormInstance;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "MultipleFormInstanceContext",
+    "MultipleFormProvider",
+    "useMultipleForm",
+    "useMultipleFormInstance"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/hooks/useUpdate.d.ts

@@ -0,0 +1,2 @@
+/**更新页面状态*/
+export declare const useUpdate: () => import("react").MutableRefObject<Function>;

package/lib/hooks/useUpdate.js

@@ -0,0 +1,44 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useUpdate: ()=>useUpdate
+});
+const external_react_namespaceObject = require("react");
+const useUpdate = ()=>{
+    const [, _update] = (0, external_react_namespaceObject.useState)({});
+    const refUpdate = (0, external_react_namespaceObject.useRef)(()=>void 0);
+    refUpdate.current = ()=>{
+        _update({});
+    };
+    return refUpdate;
+};
+exports.useUpdate = __webpack_exports__.useUpdate;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useUpdate"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/hooks/useWatch.d.ts

@@ -0,0 +1,19 @@
+import { FormInstanceBase } from '@carefrees/form-utils';
+export declare class WatchInstanceBase {
+    /**监听字段*/
+    name: string;
+    /**表单实例*/
+    form: FormInstanceBase;
+    /**老值*/
+    oldValue: any;
+    /**更新值*/
+    dispatch: (value: any) => void;
+    /**回调*/
+    callBack?: (value: any, form: FormInstanceBase) => void;
+    /**更新*/
+    updated: () => void;
+}
+/**
+ * 字段监听
+ */
+export declare const useWatch: (name: string, form: FormInstanceBase, callBack?: (value: any, form: FormInstanceBase) => void) => [any, FormInstanceBase, WatchInstanceBase];

package/lib/hooks/useWatch.js

@@ -0,0 +1,78 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    WatchInstanceBase: ()=>WatchInstanceBase,
+    useWatch: ()=>useWatch
+});
+const external_react_namespaceObject = require("react");
+const external_useForm_js_namespaceObject = require("./useForm.js");
+const external_useFormItem_js_namespaceObject = require("./useFormItem.js");
+class WatchInstanceBase {
+    name;
+    form;
+    oldValue;
+    dispatch;
+    callBack;
+    updated = ()=>{
+        const newValue = this.form.getFieldValue(this.name);
+        if (this.oldValue === newValue) return;
+        if (this.callBack) this.callBack(newValue, this.form);
+        else this.dispatch(newValue);
+    };
+}
+const useWatch = (name, form, callBack)=>{
+    const formInstance = form || (0, external_useForm_js_namespaceObject.useFormInstance)();
+    const [oldValue, setValue] = (0, external_react_namespaceObject.useState)(formInstance.getFieldValue(name));
+    const watch = (0, external_react_namespaceObject.useRef)(new WatchInstanceBase()).current;
+    watch.name = name;
+    watch.oldValue = oldValue;
+    watch.dispatch = setValue;
+    watch.callBack = callBack;
+    watch.form = formInstance;
+    const formItemInstance = (0, external_useFormItem_js_namespaceObject.useFormItem)();
+    (0, external_react_namespaceObject.useMemo)(()=>formItemInstance.ctor(name), []);
+    formItemInstance.instance = formInstance;
+    formItemInstance.isWatch = true;
+    formItemInstance.updated = watch.updated;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const unMount = formInstance.registerFormItem(formItemInstance);
+        return ()=>unMount();
+    }, []);
+    return [
+        oldValue,
+        formInstance,
+        watch
+    ];
+};
+exports.WatchInstanceBase = __webpack_exports__.WatchInstanceBase;
+exports.useWatch = __webpack_exports__.useWatch;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "WatchInstanceBase",
+    "useWatch"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export * from './hooks/register/register.FormHideItem';
+export * from './hooks/register/register.FormItem';
+export * from './hooks/register/register.FormList';
+export * from './hooks/register/register.form';
+export * from './hooks/useAttrs';
+export * from './hooks/useForm';
+export * from './hooks/useFormItem';
+export * from './hooks/useFormItemParentName';
+export * from './hooks/useFormList';
+export * from './hooks/useHtmlFor';
+export * from './hooks/useMultipleForm';
+export * from './hooks/useUpdate';
+export * from './hooks/useWatch';

package/lib/index.js

@@ -0,0 +1,168 @@
+"use strict";
+var __webpack_modules__ = {
+    "./hooks/register/register.FormHideItem": function(module) {
+        module.exports = require("./hooks/register/register.FormHideItem.js");
+    },
+    "./hooks/register/register.FormItem": function(module) {
+        module.exports = require("./hooks/register/register.FormItem.js");
+    },
+    "./hooks/register/register.FormList": function(module) {
+        module.exports = require("./hooks/register/register.FormList.js");
+    },
+    "./hooks/register/register.form": function(module) {
+        module.exports = require("./hooks/register/register.form.js");
+    },
+    "./hooks/useAttrs": function(module) {
+        module.exports = require("./hooks/useAttrs.js");
+    },
+    "./hooks/useForm": function(module) {
+        module.exports = require("./hooks/useForm.js");
+    },
+    "./hooks/useFormItem": function(module) {
+        module.exports = require("./hooks/useFormItem.js");
+    },
+    "./hooks/useFormItemParentName": function(module) {
+        module.exports = require("./hooks/useFormItemParentName.js");
+    },
+    "./hooks/useFormList": function(module) {
+        module.exports = require("./hooks/useFormList.js");
+    },
+    "./hooks/useHtmlFor": function(module) {
+        module.exports = require("./hooks/useHtmlFor.js");
+    },
+    "./hooks/useMultipleForm": function(module) {
+        module.exports = require("./hooks/useMultipleForm.js");
+    },
+    "./hooks/useUpdate": function(module) {
+        module.exports = require("./hooks/useUpdate.js");
+    },
+    "./hooks/useWatch": function(module) {
+        module.exports = require("./hooks/useWatch.js");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    var _hooks_register_register_FormHideItem__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./hooks/register/register.FormHideItem");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_register_register_FormHideItem__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_register_register_FormHideItem__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_register_register_FormItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./hooks/register/register.FormItem");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_register_register_FormItem__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_register_register_FormItem__WEBPACK_IMPORTED_MODULE_1__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_register_register_FormList__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./hooks/register/register.FormList");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_register_register_FormList__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_register_register_FormList__WEBPACK_IMPORTED_MODULE_2__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_register_register_form__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./hooks/register/register.form");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_register_register_form__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_register_register_form__WEBPACK_IMPORTED_MODULE_3__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useAttrs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("./hooks/useAttrs");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useAttrs__WEBPACK_IMPORTED_MODULE_4__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useAttrs__WEBPACK_IMPORTED_MODULE_4__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useForm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("./hooks/useForm");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useForm__WEBPACK_IMPORTED_MODULE_5__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useForm__WEBPACK_IMPORTED_MODULE_5__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useFormItem__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("./hooks/useFormItem");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useFormItem__WEBPACK_IMPORTED_MODULE_6__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useFormItem__WEBPACK_IMPORTED_MODULE_6__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useFormItemParentName__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("./hooks/useFormItemParentName");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useFormItemParentName__WEBPACK_IMPORTED_MODULE_7__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useFormItemParentName__WEBPACK_IMPORTED_MODULE_7__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useFormList__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("./hooks/useFormList");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useFormList__WEBPACK_IMPORTED_MODULE_8__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useFormList__WEBPACK_IMPORTED_MODULE_8__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useHtmlFor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("./hooks/useHtmlFor");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useHtmlFor__WEBPACK_IMPORTED_MODULE_9__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useHtmlFor__WEBPACK_IMPORTED_MODULE_9__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useMultipleForm__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("./hooks/useMultipleForm");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useMultipleForm__WEBPACK_IMPORTED_MODULE_10__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useMultipleForm__WEBPACK_IMPORTED_MODULE_10__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useUpdate__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("./hooks/useUpdate");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useUpdate__WEBPACK_IMPORTED_MODULE_11__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useUpdate__WEBPACK_IMPORTED_MODULE_11__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _hooks_useWatch__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("./hooks/useWatch");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks_useWatch__WEBPACK_IMPORTED_MODULE_12__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks_useWatch__WEBPACK_IMPORTED_MODULE_12__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+})();
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@carefrees/form-utils-react-hooks",
+  "author": "SunLxy <1011771396@qq.com>",
+  "description": "表单组件公共hooks",
+  "homepage": "https://github.com/SunLxy/carefrees-form-utils",
+  "version": "0.0.4",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build",
+    "watch": "carefrees-rslib build --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "lib",
+    "esm"
+  ],
+  "dependencies": {
+    "@carefrees/form-utils": "^0.0.4"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.21",
+    "react": "^18.2.0"
+  }
+}

package/src/hooks/register/register.FormHideItem.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { RegisterFormItemOptions } from './register.FormItem';
+import { FormHideItemInstanceBase } from '@carefrees/form-utils';
+import { useFormItemParentName } from '../useFormItemParentName';
+import { useFormInstance } from '../useForm';
+import { useUpdate } from '../useUpdate';
+
+interface RegisterFormHideItemOptions extends Omit<RegisterFormItemOptions, 'rules'> {}
+
+/**注册表单隐藏表单项到表单实例中*/
+export const useRegisterFormHideItem = (options: RegisterFormHideItemOptions) => {
+  const { name, sort, isJoinParentField = true } = options;
+  const form = useFormInstance();
+  const _update = useUpdate();
+  const { newName, newSort } = useFormItemParentName({ name, sort, isJoinParentField });
+  const hideItemInstance = useRef(new FormHideItemInstanceBase().ctor(newName)).current;
+  const isHide = form.getFieldHideValue(newName);
+
+  hideItemInstance.instance = form;
+  hideItemInstance.updated = _update.current;
+  hideItemInstance.sort = newSort;
+
+  useEffect(() => {
+    const unMount = form.registerFormHideItem(hideItemInstance);
+    return () => unMount();
+  }, [newName]);
+
+  return { form, isHide };
+};

package/src/hooks/register/register.FormItem.ts

@@ -0,0 +1,52 @@
+/**
+ * @description 注册组件
+ */
+
+import { useEffect, useMemo, useRef } from 'react';
+import { RuleInstanceBase } from '@carefrees/form-utils';
+import type { RuleItem } from 'async-validator';
+import { useUpdate } from '../useUpdate';
+import { useFormInstance } from '../useForm';
+import { useFormItem } from '../useFormItem';
+import { useFormItemParentName } from '../useFormItemParentName';
+
+export interface RegisterFormItemOptions {
+  /**字段*/
+  name: string;
+  /**规则*/
+  rules?: RuleItem[];
+  /**排序值*/
+  sort?: string;
+  /**是否拼接父级字段*/
+  isJoinParentField?: boolean;
+}
+
+/**注册表单项到表单实例中*/
+export const useRegisterFormItem = (options: RegisterFormItemOptions) => {
+  const { name, rules, sort, isJoinParentField = true } = options;
+  const form = useFormInstance();
+  const { newName, newSort, parentName } = useFormItemParentName({ name, sort, isJoinParentField });
+  // 注册规则
+  // 注册单个实例
+  const ruleInstance = useRef(new RuleInstanceBase()).current;
+  useMemo(() => ruleInstance.ctor(newName, rules), [rules, newName]);
+  ruleInstance.instance = form;
+  ruleInstance.sort = newSort;
+
+  const formItemInstance = useFormItem();
+  useMemo(() => formItemInstance.ctor(newName, ruleInstance), []);
+  formItemInstance.instance = form;
+  formItemInstance.sort = newSort;
+  formItemInstance.parentDataField = parentName;
+
+  const _updated = useUpdate();
+  formItemInstance.updated = _updated.current;
+  ruleInstance.updated = _updated.current;
+
+  useEffect(() => {
+    const unMount = form.registerFormItem(formItemInstance);
+    return () => unMount();
+  }, []);
+
+  return { ruleInstance, formItemInstance, form, parentName, newName };
+};

package/src/hooks/register/register.FormList.ts

@@ -0,0 +1,31 @@
+import { useEffect, useMemo } from 'react';
+import { RegisterFormItemOptions, useRegisterFormItem } from './register.FormItem';
+import { useFormList } from '../useFormList';
+
+export interface RegisterFormListOptions extends RegisterFormItemOptions {}
+
+/**注册表单List到表单实例中*/
+export const useRegisterFormList = (options: RegisterFormListOptions) => {
+  const { ...rest } = options;
+  const { ruleInstance, formItemInstance, form, newName, parentName } = useRegisterFormItem({ ...rest });
+  const formListInstance = useFormList();
+
+  useMemo(() => formListInstance.ctor(newName), [newName]);
+
+  formListInstance.instance = form;
+  formListInstance.rule = ruleInstance;
+  formListInstance.sort = options.sort;
+  formListInstance.formItemInstance = formItemInstance;
+  formListInstance.parentDataField = parentName;
+
+  useEffect(() => {
+    const unMount = form.registerFormList(options.name, formListInstance);
+    return () => unMount();
+  }, [options.name, formListInstance]);
+
+  return {
+    ruleInstance,
+    formItemInstance,
+    formListInstance,
+  };
+};

package/src/hooks/register/register.form.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useMultipleFormInstance } from '../useMultipleForm';
+import { FormInstanceBase } from '@carefrees/form-utils';
+
+/**注册表单实例到多表单收集实例中*/
+export const useRegisterForm = (form: FormInstanceBase, name?: string) => {
+  const multipleForm = useMultipleFormInstance();
+  useEffect(() => {
+    let onMounted;
+    if (name) {
+      onMounted = multipleForm.ctor(name, form);
+    }
+    return () => {
+      onMounted?.();
+    };
+  }, [name, form]);
+  return multipleForm;
+};

package/src/hooks/useAttrs.ts

@@ -0,0 +1,40 @@
+/**公共属性*/
+import { createContext, useContext } from 'react';
+export interface AttrsOptions {
+  /**列数据*/
+  colCount?: number;
+  /**规则校验失败错误提示位置*/
+  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  /**
+   * label显示模式
+   * @platform taro 支持 between
+   */
+  labelMode?: 'left' | 'top' | 'between' | 'hide';
+  /**是否显示label后的冒号*/
+  showColon?: boolean;
+  /**表单项 className*/
+  formItemClassName?: string;
+  /**表单项 style*/
+  formItemStyle?: React.CSSProperties;
+  /**表单项 label  className*/
+  formItemLabelClassName?: string;
+  /**表单项 label  style*/
+  formItemLabelStyle?: React.CSSProperties;
+  /**
+   * 输入框底部边框
+   * @platform taro
+   */
+  inputBordered?: boolean;
+}
+
+/**公共属性 Context */
+export const AttrsContext = createContext<AttrsOptions>({
+  colCount: 4,
+  errorLayout: 'left-bottom',
+  labelMode: 'top',
+  showColon: true,
+  inputBordered: true,
+});
+
+/**子项中获取公共属性*/
+export const useAttrs = () => useContext(AttrsContext);

package/src/hooks/useForm.ts

@@ -0,0 +1,23 @@
+import { FormInstanceBase } from '@carefrees/form-utils';
+import { createContext, useContext, useRef } from 'react';
+
+/**表单实例 Context */
+export const FormInstanceContext = createContext(new FormInstanceBase());
+
+/**子项中获取表单实例*/
+export function useFormInstance<T = any>() {
+  return useContext<FormInstanceBase<T>>(FormInstanceContext);
+}
+
+/**初始化表单实例*/
+export function useForm<T = any>(form?: FormInstanceBase<T>) {
+  const ref = useRef<FormInstanceBase<T>>();
+  if (!ref.current) {
+    if (form) {
+      ref.current = form;
+    } else {
+      ref.current = new FormInstanceBase<T>();
+    }
+  }
+  return ref.current;
+}

package/src/hooks/useFormItem.ts

@@ -0,0 +1,21 @@
+import { FormItemInstanceBase } from '@carefrees/form-utils';
+import { createContext, useContext, useRef } from 'react';
+
+/**表单项实例 Context */
+export const FormItemInstanceContext = createContext(new FormItemInstanceBase());
+
+/**子项中获取表单项实例*/
+export const useFormItemInstance = () => useContext(FormItemInstanceContext);
+
+/**s初始化 表单项实例*/
+export const useFormItem = (formItem?: FormItemInstanceBase) => {
+  const ref = useRef<FormItemInstanceBase>();
+  if (!ref.current) {
+    if (formItem) {
+      ref.current = formItem;
+    } else {
+      ref.current = new FormItemInstanceBase();
+    }
+  }
+  return ref.current;
+};