@carefrees/form-utils-react-hooks 0.0.10 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/hooks/register/register.FormHideItem.js +9 -9
- package/esm/hooks/register/register.FormItem.js +13 -13
- package/esm/hooks/register/register.FormList.js +7 -7
- package/esm/hooks/register/register.form.js +4 -4
- package/esm/hooks/useAttrs.d.ts +0 -1
- package/esm/hooks/useAttrs.js +3 -3
- package/esm/hooks/useForm.js +6 -6
- package/esm/hooks/useFormItem.js +6 -6
- package/esm/hooks/useFormItemParentName.js +7 -7
- package/esm/hooks/useFormList.js +6 -6
- package/esm/hooks/useHtmlFor.js +3 -3
- package/esm/hooks/useMultipleForm.js +7 -7
- package/esm/hooks/useWatch.js +9 -9
- package/lib/hooks/useAttrs.d.ts +0 -1
- package/lib/hooks/useAttrs.js +2 -2
- package/lib/hooks/useForm.js +2 -2
- package/lib/hooks/useFormItem.js +2 -2
- package/lib/hooks/useFormItemParentName.js +2 -2
- package/lib/hooks/useFormList.js +2 -2
- package/lib/hooks/useMultipleForm.js +2 -2
- package/package.json +2 -2
- package/src/hooks/useAttrs.ts +0 -1
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { useEffect, useRef, useState } from "react";
|
|
2
|
+
import { FormHideItemInstanceBase } from "@carefrees/form-utils";
|
|
3
|
+
import { useFormItemParentName } from "../useFormItemParentName.js";
|
|
4
|
+
import { useFormInstance } from "../useForm.js";
|
|
5
5
|
const useRegisterFormHideItem = (options)=>{
|
|
6
6
|
const { name, sort, isJoinParentField = true } = options;
|
|
7
|
-
const form =
|
|
8
|
-
const [, setValue] =
|
|
9
|
-
const { newName, newSort } =
|
|
7
|
+
const form = useFormInstance();
|
|
8
|
+
const [, setValue] = useState({});
|
|
9
|
+
const { newName, newSort } = useFormItemParentName({
|
|
10
10
|
name,
|
|
11
11
|
sort,
|
|
12
12
|
isJoinParentField
|
|
13
13
|
});
|
|
14
|
-
const hideItemInstance =
|
|
14
|
+
const hideItemInstance = useRef(new FormHideItemInstanceBase().ctor(newName)).current;
|
|
15
15
|
const isHide = form.getFieldHideValue(newName);
|
|
16
16
|
hideItemInstance.preHideValue = isHide;
|
|
17
17
|
hideItemInstance.instance = form;
|
|
18
18
|
hideItemInstance.updatedItem = setValue;
|
|
19
19
|
hideItemInstance.sort = newSort;
|
|
20
|
-
|
|
20
|
+
useEffect(()=>{
|
|
21
21
|
const unMount = form.registerFormHideItem(hideItemInstance);
|
|
22
22
|
return ()=>unMount();
|
|
23
23
|
}, [
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import { RuleInstanceBase } from "@carefrees/form-utils";
|
|
3
|
+
import { useFormInstance } from "../useForm.js";
|
|
4
|
+
import { useFormItem } from "../useFormItem.js";
|
|
5
|
+
import { useFormItemParentName } from "../useFormItemParentName.js";
|
|
6
6
|
const useRegisterFormItem = (options)=>{
|
|
7
7
|
const { name, rules, sort, isJoinParentField = true } = options;
|
|
8
|
-
const form =
|
|
9
|
-
const { newName, newSort, parentName } =
|
|
8
|
+
const form = useFormInstance();
|
|
9
|
+
const { newName, newSort, parentName } = useFormItemParentName({
|
|
10
10
|
name,
|
|
11
11
|
sort,
|
|
12
12
|
isJoinParentField
|
|
13
13
|
});
|
|
14
|
-
const [, setValue] =
|
|
15
|
-
const ruleInstance =
|
|
16
|
-
|
|
14
|
+
const [, setValue] = useState({});
|
|
15
|
+
const ruleInstance = useRef(new RuleInstanceBase()).current;
|
|
16
|
+
useMemo(()=>ruleInstance.ctor(newName, rules), [
|
|
17
17
|
rules,
|
|
18
18
|
newName
|
|
19
19
|
]);
|
|
20
20
|
ruleInstance.instance = form;
|
|
21
21
|
ruleInstance.sort = newSort;
|
|
22
|
-
const formItemInstance =
|
|
23
|
-
|
|
22
|
+
const formItemInstance = useFormItem();
|
|
23
|
+
useMemo(()=>formItemInstance.ctor(newName, ruleInstance), []);
|
|
24
24
|
formItemInstance.instance = form;
|
|
25
25
|
formItemInstance.sort = newSort;
|
|
26
26
|
formItemInstance.parentDataField = parentName;
|
|
27
27
|
formItemInstance.updated = setValue;
|
|
28
28
|
ruleInstance.updated = setValue;
|
|
29
|
-
|
|
29
|
+
useEffect(()=>{
|
|
30
30
|
const unMount = form.registerFormItem(formItemInstance);
|
|
31
31
|
return ()=>unMount();
|
|
32
32
|
}, []);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { useEffect, useMemo } from "react";
|
|
2
|
+
import { useRegisterFormItem } from "./register.FormItem.js";
|
|
3
|
+
import { useFormList } from "../useFormList.js";
|
|
4
4
|
const useRegisterFormList = (options)=>{
|
|
5
5
|
const { ...rest } = options;
|
|
6
|
-
const { ruleInstance, formItemInstance, form, newName, parentName } =
|
|
6
|
+
const { ruleInstance, formItemInstance, form, newName, parentName } = useRegisterFormItem({
|
|
7
7
|
...rest
|
|
8
8
|
});
|
|
9
|
-
const formListInstance =
|
|
10
|
-
|
|
9
|
+
const formListInstance = useFormList();
|
|
10
|
+
useMemo(()=>formListInstance.ctor(newName), [
|
|
11
11
|
newName
|
|
12
12
|
]);
|
|
13
13
|
formListInstance.instance = form;
|
|
@@ -15,7 +15,7 @@ const useRegisterFormList = (options)=>{
|
|
|
15
15
|
formListInstance.sort = options.sort;
|
|
16
16
|
formListInstance.formItemInstance = formItemInstance;
|
|
17
17
|
formListInstance.parentDataField = parentName;
|
|
18
|
-
|
|
18
|
+
useEffect(()=>{
|
|
19
19
|
const unMount = form.registerFormList(newName, formListInstance);
|
|
20
20
|
return ()=>unMount();
|
|
21
21
|
}, [
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { useMultipleFormInstance } from "../useMultipleForm.js";
|
|
3
3
|
const useRegisterForm = (form, name)=>{
|
|
4
|
-
const multipleForm =
|
|
5
|
-
|
|
4
|
+
const multipleForm = useMultipleFormInstance();
|
|
5
|
+
useEffect(()=>{
|
|
6
6
|
let onMounted;
|
|
7
7
|
if (name) onMounted = multipleForm.ctor(name, form);
|
|
8
8
|
return ()=>{
|
package/esm/hooks/useAttrs.d.ts
CHANGED
package/esm/hooks/useAttrs.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
const AttrsContext =
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
const AttrsContext = createContext({
|
|
3
3
|
colCount: 4,
|
|
4
4
|
errorLayout: 'left-bottom',
|
|
5
5
|
labelMode: 'top',
|
|
6
6
|
showColon: true,
|
|
7
7
|
inputBordered: true
|
|
8
8
|
});
|
|
9
|
-
const useAttrs = ()=>
|
|
9
|
+
const useAttrs = ()=>useContext(AttrsContext);
|
|
10
10
|
export { AttrsContext, useAttrs };
|
package/esm/hooks/useForm.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
const FormInstanceContext =
|
|
1
|
+
import { FormInstanceBase } from "@carefrees/form-utils";
|
|
2
|
+
import { createContext, useContext, useRef } from "react";
|
|
3
|
+
const FormInstanceContext = createContext(new FormInstanceBase());
|
|
4
4
|
function useFormInstance() {
|
|
5
|
-
return
|
|
5
|
+
return useContext(FormInstanceContext);
|
|
6
6
|
}
|
|
7
7
|
function useForm(form) {
|
|
8
|
-
const ref =
|
|
8
|
+
const ref = useRef();
|
|
9
9
|
if (!ref.current) if (form) ref.current = form;
|
|
10
|
-
else ref.current = new
|
|
10
|
+
else ref.current = new FormInstanceBase();
|
|
11
11
|
return ref.current;
|
|
12
12
|
}
|
|
13
13
|
export { FormInstanceContext, useForm, useFormInstance };
|
package/esm/hooks/useFormItem.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
const FormItemInstanceContext =
|
|
4
|
-
const useFormItemInstance = ()=>
|
|
1
|
+
import { FormItemInstanceBase } from "@carefrees/form-utils";
|
|
2
|
+
import { createContext, useContext, useRef } from "react";
|
|
3
|
+
const FormItemInstanceContext = createContext(new FormItemInstanceBase());
|
|
4
|
+
const useFormItemInstance = ()=>useContext(FormItemInstanceContext);
|
|
5
5
|
const useFormItem = (formItem)=>{
|
|
6
|
-
const ref =
|
|
6
|
+
const ref = useRef();
|
|
7
7
|
if (!ref.current) if (formItem) ref.current = formItem;
|
|
8
|
-
else ref.current = new
|
|
8
|
+
else ref.current = new FormItemInstanceBase();
|
|
9
9
|
return ref.current;
|
|
10
10
|
};
|
|
11
11
|
export { FormItemInstanceContext, useFormItem, useFormItemInstance };
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import
|
|
2
|
-
const FormItemParentNameContext =
|
|
1
|
+
import { createContext, createElement, useContext, useMemo } from "react";
|
|
2
|
+
const FormItemParentNameContext = createContext({
|
|
3
3
|
name: '',
|
|
4
4
|
sort: ''
|
|
5
5
|
});
|
|
6
6
|
const FormItemParentNameProvider = (props)=>{
|
|
7
7
|
const { name, sort, children } = props;
|
|
8
|
-
const value =
|
|
8
|
+
const value = useMemo(()=>({
|
|
9
9
|
name,
|
|
10
10
|
sort
|
|
11
11
|
}), [
|
|
12
12
|
name,
|
|
13
13
|
sort
|
|
14
14
|
]);
|
|
15
|
-
return
|
|
15
|
+
return createElement(FormItemParentNameContext.Provider, {
|
|
16
16
|
value,
|
|
17
17
|
children
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
const useFormItemParentName = (options)=>{
|
|
21
21
|
const { isJoinParentField = true, sort, name } = options;
|
|
22
|
-
const parentItem =
|
|
22
|
+
const parentItem = useContext(FormItemParentNameContext);
|
|
23
23
|
const parentName = parentItem.name;
|
|
24
24
|
const parentSort = parentItem.sort;
|
|
25
|
-
const newName =
|
|
25
|
+
const newName = useMemo(()=>{
|
|
26
26
|
if (parentName && isJoinParentField) {
|
|
27
27
|
if (/^\./.test(`${name}`)) ;
|
|
28
28
|
else if (name) return [
|
|
@@ -43,7 +43,7 @@ const useFormItemParentName = (options)=>{
|
|
|
43
43
|
name,
|
|
44
44
|
parentName
|
|
45
45
|
]);
|
|
46
|
-
const newSort =
|
|
46
|
+
const newSort = useMemo(()=>[
|
|
47
47
|
isJoinParentField ? parentSort : '',
|
|
48
48
|
sort
|
|
49
49
|
].filter(Boolean).join('-'), [
|
package/esm/hooks/useFormList.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
const FormListInstanceContext =
|
|
4
|
-
const useFormListInstance = ()=>
|
|
1
|
+
import { FormListInstanceBase } from "@carefrees/form-utils";
|
|
2
|
+
import { createContext, useContext, useRef } from "react";
|
|
3
|
+
const FormListInstanceContext = createContext(new FormListInstanceBase());
|
|
4
|
+
const useFormListInstance = ()=>useContext(FormListInstanceContext);
|
|
5
5
|
const useFormList = (formList)=>{
|
|
6
|
-
const ref =
|
|
6
|
+
const ref = useRef();
|
|
7
7
|
if (!ref.current) if (formList) ref.current = formList;
|
|
8
|
-
else ref.current = new
|
|
8
|
+
else ref.current = new FormListInstanceBase();
|
|
9
9
|
return ref.current;
|
|
10
10
|
};
|
|
11
11
|
export { FormListInstanceContext, useFormList, useFormListInstance };
|
package/esm/hooks/useHtmlFor.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useMemo, useRef } from "react";
|
|
2
2
|
let localId = 0;
|
|
3
3
|
const useHtmlFor = (suffix)=>{
|
|
4
|
-
const count =
|
|
5
|
-
return
|
|
4
|
+
const count = useRef(localId++);
|
|
5
|
+
return useMemo(()=>`carefree-form-item_${count.current.toString(32)}_${suffix}`, [
|
|
6
6
|
count.current,
|
|
7
7
|
suffix
|
|
8
8
|
]);
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
const MultipleFormInstanceContext =
|
|
4
|
-
const useMultipleFormInstance = ()=>
|
|
1
|
+
import { MultipleInstanceBase } from "@carefrees/form-utils";
|
|
2
|
+
import { createContext, createElement, useContext, useRef } from "react";
|
|
3
|
+
const MultipleFormInstanceContext = createContext(new MultipleInstanceBase());
|
|
4
|
+
const useMultipleFormInstance = ()=>useContext(MultipleFormInstanceContext);
|
|
5
5
|
const useMultipleForm = (multipleForm)=>{
|
|
6
|
-
const ref =
|
|
6
|
+
const ref = useRef();
|
|
7
7
|
if (!ref.current) if (multipleForm) ref.current = multipleForm;
|
|
8
|
-
else ref.current = new
|
|
8
|
+
else ref.current = new MultipleInstanceBase();
|
|
9
9
|
return ref.current;
|
|
10
10
|
};
|
|
11
11
|
const MultipleFormProvider = (props)=>{
|
|
12
12
|
const { children, multipleForm } = props;
|
|
13
13
|
const multipleFormInstance = useMultipleForm(multipleForm);
|
|
14
|
-
return
|
|
14
|
+
return createElement(MultipleFormInstanceContext.Provider, {
|
|
15
15
|
value: multipleFormInstance,
|
|
16
16
|
children
|
|
17
17
|
});
|
package/esm/hooks/useWatch.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import { useFormInstance } from "./useForm.js";
|
|
3
|
+
import { useFormItem } from "./useFormItem.js";
|
|
4
4
|
class WatchInstanceBase {
|
|
5
5
|
name;
|
|
6
6
|
form;
|
|
@@ -15,20 +15,20 @@ class WatchInstanceBase {
|
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
const useWatch = (name, form, callBack)=>{
|
|
18
|
-
const formInstance = form ||
|
|
19
|
-
const [oldValue, setValue] =
|
|
20
|
-
const watch =
|
|
18
|
+
const formInstance = form || useFormInstance();
|
|
19
|
+
const [oldValue, setValue] = useState(formInstance.getFieldValue(name));
|
|
20
|
+
const watch = useRef(new WatchInstanceBase()).current;
|
|
21
21
|
watch.name = name;
|
|
22
22
|
watch.oldValue = oldValue;
|
|
23
23
|
watch.dispatch = setValue;
|
|
24
24
|
watch.callBack = callBack;
|
|
25
25
|
watch.form = formInstance;
|
|
26
|
-
const formItemInstance =
|
|
27
|
-
|
|
26
|
+
const formItemInstance = useFormItem();
|
|
27
|
+
useMemo(()=>formItemInstance.ctor(name), []);
|
|
28
28
|
formItemInstance.instance = formInstance;
|
|
29
29
|
formItemInstance.isWatch = true;
|
|
30
30
|
formItemInstance.updated = watch.updated;
|
|
31
|
-
|
|
31
|
+
useEffect(()=>{
|
|
32
32
|
const unMount = formInstance.registerFormItem(formItemInstance);
|
|
33
33
|
return ()=>unMount();
|
|
34
34
|
}, []);
|
package/lib/hooks/useAttrs.d.ts
CHANGED
package/lib/hooks/useAttrs.js
CHANGED
|
@@ -24,8 +24,8 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
AttrsContext: ()=>AttrsContext,
|
|
28
|
+
useAttrs: ()=>useAttrs
|
|
29
29
|
});
|
|
30
30
|
const external_react_namespaceObject = require("react");
|
|
31
31
|
const AttrsContext = (0, external_react_namespaceObject.createContext)({
|
package/lib/hooks/useForm.js
CHANGED
|
@@ -25,8 +25,8 @@ var __webpack_exports__ = {};
|
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
27
|
FormInstanceContext: ()=>FormInstanceContext,
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
useFormInstance: ()=>useFormInstance,
|
|
29
|
+
useForm: ()=>useForm
|
|
30
30
|
});
|
|
31
31
|
const form_utils_namespaceObject = require("@carefrees/form-utils");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
package/lib/hooks/useFormItem.js
CHANGED
|
@@ -25,8 +25,8 @@ var __webpack_exports__ = {};
|
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
27
|
FormItemInstanceContext: ()=>FormItemInstanceContext,
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
useFormItemInstance: ()=>useFormItemInstance,
|
|
29
|
+
useFormItem: ()=>useFormItem
|
|
30
30
|
});
|
|
31
31
|
const form_utils_namespaceObject = require("@carefrees/form-utils");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
@@ -24,9 +24,9 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
FormItemParentNameProvider: ()=>FormItemParentNameProvider,
|
|
27
28
|
FormItemParentNameContext: ()=>FormItemParentNameContext,
|
|
28
|
-
useFormItemParentName: ()=>useFormItemParentName
|
|
29
|
-
FormItemParentNameProvider: ()=>FormItemParentNameProvider
|
|
29
|
+
useFormItemParentName: ()=>useFormItemParentName
|
|
30
30
|
});
|
|
31
31
|
const external_react_namespaceObject = require("react");
|
|
32
32
|
const FormItemParentNameContext = (0, external_react_namespaceObject.createContext)({
|
package/lib/hooks/useFormList.js
CHANGED
|
@@ -25,8 +25,8 @@ var __webpack_exports__ = {};
|
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
27
|
useFormList: ()=>useFormList,
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
useFormListInstance: ()=>useFormListInstance,
|
|
29
|
+
FormListInstanceContext: ()=>FormListInstanceContext
|
|
30
30
|
});
|
|
31
31
|
const form_utils_namespaceObject = require("@carefrees/form-utils");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
@@ -24,10 +24,10 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
-
|
|
27
|
+
MultipleFormProvider: ()=>MultipleFormProvider,
|
|
28
28
|
MultipleFormInstanceContext: ()=>MultipleFormInstanceContext,
|
|
29
29
|
useMultipleFormInstance: ()=>useMultipleFormInstance,
|
|
30
|
-
|
|
30
|
+
useMultipleForm: ()=>useMultipleForm
|
|
31
31
|
});
|
|
32
32
|
const form_utils_namespaceObject = require("@carefrees/form-utils");
|
|
33
33
|
const external_react_namespaceObject = require("react");
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"author": "SunLxy <1011771396@qq.com>",
|
|
4
4
|
"description": "表单组件公共hooks",
|
|
5
5
|
"homepage": "https://github.com/SunLxy/carefrees-form-utils",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.12",
|
|
7
7
|
"main": "lib/index.js",
|
|
8
8
|
"types": "lib/index.d.ts",
|
|
9
9
|
"module": "esm/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"esm"
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@carefrees/form-utils": "^0.0.
|
|
24
|
+
"@carefrees/form-utils": "^0.0.12"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@types/react": "18.2.21",
|