@fairys/valtio-form-basic 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/form/form.d.ts
CHANGED
|
@@ -14,8 +14,13 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
|
|
|
14
14
|
formData?: FairysValtioFormInstance<T>['state'];
|
|
15
15
|
/**表单隐藏状态*/
|
|
16
16
|
hideState?: FairysValtioFormInstance<T>['hideState'];
|
|
17
|
-
/**
|
|
18
|
-
|
|
17
|
+
/**
|
|
18
|
+
* 初始化表单数据类型,默认值为 deepCopy
|
|
19
|
+
* - deepCopy:使用深度拷贝初始化表单数据
|
|
20
|
+
* - proxy:使用代理对象初始化表单数据
|
|
21
|
+
* - immutable:直接使用对象,不进行任何处理,注意,这个使用必须是`valtio`中的`proxy`声明的对象数据,否则表单项更新数据不会同步
|
|
22
|
+
*/
|
|
23
|
+
initFormDataType?: 'deepCopy' | 'proxy' | 'immutable';
|
|
19
24
|
}
|
|
20
25
|
/**
|
|
21
26
|
* 表单属性处理
|
package/esm/form/form.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { useFairysValtioFormInstance } from "./instance/index.js";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
function useFairysValtioForm(props) {
|
|
4
|
-
const { form, rules, formData, hideState,
|
|
4
|
+
const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
|
|
5
5
|
const formInstance = useFairysValtioFormInstance(form);
|
|
6
6
|
formInstance.rules = rules;
|
|
7
7
|
useMemo(()=>formInstance.ctor({
|
|
8
8
|
formData,
|
|
9
9
|
hideState,
|
|
10
|
-
|
|
10
|
+
initFormDataType
|
|
11
11
|
}), []);
|
|
12
12
|
return {
|
|
13
13
|
...rest,
|
|
@@ -14,7 +14,7 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
|
|
|
14
14
|
ctor: (options?: {
|
|
15
15
|
formData?: Partial<T>;
|
|
16
16
|
hideState?: Record<PropertyKey, boolean>;
|
|
17
|
-
|
|
17
|
+
initFormDataType?: "deepCopy" | "proxy" | "immutable";
|
|
18
18
|
}) => void;
|
|
19
19
|
/**
|
|
20
20
|
* 更新数据
|
|
@@ -8,11 +8,12 @@ class FairysValtioFormInstance {
|
|
|
8
8
|
errorState = proxy({});
|
|
9
9
|
hideState = proxy({});
|
|
10
10
|
ctor = (options)=>{
|
|
11
|
-
const { formData, hideState,
|
|
11
|
+
const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
|
|
12
12
|
this.errorState = proxy({});
|
|
13
13
|
this.hideState = proxy(hideState ? copy(hideState) : {});
|
|
14
|
-
if (
|
|
15
|
-
else if (
|
|
14
|
+
if ('deepCopy' === initFormDataType) this.state = proxy(formData ? copy(formData) : {});
|
|
15
|
+
else if ('proxy' === initFormDataType) this.state = proxy(formData);
|
|
16
|
+
else if ('immutable' === initFormDataType) this.state = formData;
|
|
16
17
|
};
|
|
17
18
|
updated = (state, isValidate = true)=>{
|
|
18
19
|
const keys = Object.keys(state);
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"author": "SunLxy <1011771396@qq.com>",
|
|
4
4
|
"description": "使用 valtio 实现的表单基础库, 使其更加便捷,同时支持`PC`、`H5`、`Taro`,同时也更加灵活。",
|
|
5
5
|
"homepage": "https://github.com/autumn-fairy-tales/fairys-taro-react",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.12",
|
|
7
7
|
"main": "lib/index.js",
|
|
8
8
|
"types": "esm/index.d.ts",
|
|
9
9
|
"module": "esm/index.js",
|
package/src/form/form.tsx
CHANGED
|
@@ -15,8 +15,13 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
|
|
|
15
15
|
formData?: FairysValtioFormInstance<T>['state'];
|
|
16
16
|
/**表单隐藏状态*/
|
|
17
17
|
hideState?: FairysValtioFormInstance<T>['hideState'];
|
|
18
|
-
/**
|
|
19
|
-
|
|
18
|
+
/**
|
|
19
|
+
* 初始化表单数据类型,默认值为 deepCopy
|
|
20
|
+
* - deepCopy:使用深度拷贝初始化表单数据
|
|
21
|
+
* - proxy:使用代理对象初始化表单数据
|
|
22
|
+
* - immutable:直接使用对象,不进行任何处理,注意,这个使用必须是`valtio`中的`proxy`声明的对象数据,否则表单项更新数据不会同步
|
|
23
|
+
*/
|
|
24
|
+
initFormDataType?: 'deepCopy' | 'proxy' | 'immutable';
|
|
20
25
|
}
|
|
21
26
|
|
|
22
27
|
/**
|
|
@@ -40,12 +45,12 @@ export const Form = (props: FormProps) => {
|
|
|
40
45
|
* ```
|
|
41
46
|
*/
|
|
42
47
|
export function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>) {
|
|
43
|
-
const { form, rules, formData, hideState,
|
|
48
|
+
const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
|
|
44
49
|
const formInstance = useFairysValtioFormInstance(form);
|
|
45
50
|
/**表单规则*/
|
|
46
51
|
formInstance.rules = rules;
|
|
47
52
|
/**初始化表单值*/
|
|
48
|
-
useMemo(() => formInstance.ctor({ formData, hideState,
|
|
53
|
+
useMemo(() => formInstance.ctor({ formData, hideState, initFormDataType }), []);
|
|
49
54
|
return {
|
|
50
55
|
...rest,
|
|
51
56
|
formInstance,
|
|
@@ -16,15 +16,21 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
|
|
|
16
16
|
/**隐藏状态*/
|
|
17
17
|
hideState = proxy<Record<PropertyKey, boolean>>({});
|
|
18
18
|
/**初始化表单值*/
|
|
19
|
-
ctor = (options?: {
|
|
20
|
-
|
|
19
|
+
ctor = (options?: {
|
|
20
|
+
formData?: Partial<T>;
|
|
21
|
+
hideState?: Record<PropertyKey, boolean>;
|
|
22
|
+
initFormDataType?: 'deepCopy' | 'proxy' | 'immutable';
|
|
23
|
+
}) => {
|
|
24
|
+
const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
|
|
21
25
|
// 如果是 isProxy,则直接赋值
|
|
22
26
|
this.errorState = proxy<Record<PropertyKey, string[]>>({});
|
|
23
27
|
this.hideState = proxy<Record<PropertyKey, boolean>>(hideState ? copy(hideState) : {});
|
|
24
|
-
if (
|
|
28
|
+
if (initFormDataType === 'deepCopy') {
|
|
25
29
|
this.state = proxy((formData ? copy(formData) : {}) as T);
|
|
26
|
-
} else if (
|
|
30
|
+
} else if (initFormDataType === 'proxy') {
|
|
27
31
|
this.state = proxy(formData as T);
|
|
32
|
+
} else if (initFormDataType === 'immutable') {
|
|
33
|
+
this.state = formData as T;
|
|
28
34
|
}
|
|
29
35
|
};
|
|
30
36
|
/**
|