@fairys/rn-valtio-form-basic 1.0.2 → 1.0.4

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.
Files changed (6) hide show
  1. package/esm/form.d.ts +3 -0
  2. package/esm/form.js +1 -0
  3. package/esm/hooks/form.item.js +14 -16
  4. package/package.json +2 -2
  5. package/src/form.tsx +4 -0
  6. package/src/hooks/form.item.ts +20 -17
package/esm/form.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { FairysRNValtioFormLayout } from './layout';
1
2
  import { FairysRNValtioFormItem, FairysRNValtioFormHideItem, FairysRNValtioFormItemBase } from './form.item';
2
3
  import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceToState, useFairysValtioFormInstanceToHideState } from '@fairys/valtio-form-basic/esm/common';
3
4
  import type { FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic/esm/common';
@@ -25,5 +26,7 @@ export declare const FairysRNValtioForm: typeof FairysRNValtioFormBase & {
25
26
  useFormInstanceToState: typeof useFairysValtioFormInstanceToState;
26
27
  /**传递表单实例获取隐藏状态*/
27
28
  useFormInstanceToHideState: typeof useFairysValtioFormInstanceToHideState;
29
+ /**布局组件*/
30
+ Layout: typeof FairysRNValtioFormLayout;
28
31
  };
29
32
  export {};
package/esm/form.js CHANGED
@@ -24,4 +24,5 @@ FairysRNValtioForm.FormItem = FairysRNValtioFormItem;
24
24
  FairysRNValtioForm.FormHideItem = FairysRNValtioFormHideItem;
25
25
  FairysRNValtioForm.useFormInstanceToState = useFairysValtioFormInstanceToState;
26
26
  FairysRNValtioForm.useFormInstanceToHideState = useFairysValtioFormInstanceToHideState;
27
+ FairysRNValtioForm.Layout = FairysRNValtioFormLayout;
27
28
  export { FairysRNValtioForm };
package/esm/hooks/form.item.js CHANGED
@@ -16,7 +16,7 @@ function useFairysValtioFormItemAttrs(props) {
16
16
  const parent_isInvalidBorderRed = layoutAttrs.isInvalidBorderRed;
17
17
  const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
18
18
  const parent_showColon = layoutAttrs.showColon;
19
- const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', style, labelStyle, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, isRemoveValueOnUnmount = false } = props;
19
+ const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', style, labelStyle, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, useRules = (rules)=>rules, isRemoveValueOnUnmount = false } = props;
20
20
  const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
21
21
  name,
22
22
  isJoinParentField
@@ -39,16 +39,18 @@ function useFairysValtioFormItemAttrs(props) {
39
39
  ]);
40
40
  const error = errorState[_name];
41
41
  const _formItemRules = formInstance.rules?.[_name];
42
+ const _mergeRules = rules || _formItemRules;
43
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
42
44
  const id = useId(_name);
43
45
  formInstance.nameToPaths[_name] = paths;
44
46
  useEffect(()=>{
45
- if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
47
+ if (Array.isArray(_lastRules)) formInstance.mountRules[_name] = _lastRules;
46
48
  return ()=>{
47
49
  formInstance.removeRules(_name);
48
50
  };
49
51
  }, [
50
52
  _name,
51
- rules
53
+ _lastRules
52
54
  ]);
53
55
  useEffect(()=>()=>{
54
56
  if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
@@ -76,13 +78,10 @@ function useFairysValtioFormItemAttrs(props) {
76
78
  };
77
79
  const isRequired = useMemo(()=>{
78
80
  if (_isRequired) return _isRequired;
79
- if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
80
- if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
81
+ if (Array.isArray(_lastRules)) return _lastRules.some((rule)=>rule.required);
81
82
  return false;
82
83
  }, [
83
- rules,
84
- formInstance,
85
- _formItemRules
84
+ _lastRules
86
85
  ]);
87
86
  const isInvalid = useMemo(()=>{
88
87
  if (Array.isArray(error) && error.length) return true;
@@ -216,7 +215,7 @@ function useFairysValtioFormItemAttrs(props) {
216
215
  };
217
216
  }
218
217
  function useFairysValtioFormItemNoStyleAttrs(props) {
219
- const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRequired: _isRequired, isRemoveValueOnUnmount = false } = props;
218
+ const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, useRules = (rules)=>rules, isRequired: _isRequired, isRemoveValueOnUnmount = false } = props;
220
219
  const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
221
220
  const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
222
221
  name,
@@ -230,14 +229,16 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
230
229
  const error = errorState[_name];
231
230
  formInstance.nameToPaths[_name] = paths;
232
231
  const _formItemRules = formInstance.rules?.[_name];
232
+ const _mergeRules = rules || _formItemRules;
233
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
233
234
  useEffect(()=>{
234
- if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
235
+ if (Array.isArray(_lastRules)) formInstance.mountRules[_name] = _lastRules;
235
236
  return ()=>{
236
237
  formInstance.removeRules(_name);
237
238
  };
238
239
  }, [
239
240
  _name,
240
- rules
241
+ _lastRules
241
242
  ]);
242
243
  useEffect(()=>()=>{
243
244
  if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
@@ -261,13 +262,10 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
261
262
  };
262
263
  const isRequired = useMemo(()=>{
263
264
  if (_isRequired) return _isRequired;
264
- if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
265
- if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
265
+ if (Array.isArray(_lastRules)) return _lastRules.some((rule)=>rule.required);
266
266
  return false;
267
267
  }, [
268
- rules,
269
- formInstance,
270
- _formItemRules
268
+ _lastRules
271
269
  ]);
272
270
  const isInvalid = useMemo(()=>{
273
271
  if (Array.isArray(error) && error.length) return true;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "author": "SunLxy <1011771396@qq.com>",
4
4
  "description": "rn表单框架组件",
5
5
  "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
6
- "version": "1.0.2",
6
+ "version": "1.0.4",
7
7
  "main": "esm/index.js",
8
8
  "types": "esm/index.d.ts",
9
9
  "module": "esm/index.js",
@@ -25,7 +25,7 @@
25
25
  "esm"
26
26
  ],
27
27
  "dependencies": {
28
- "@fairys/valtio-form-basic": "^1.0.2"
28
+ "@fairys/valtio-form-basic": "^1.0.4"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@types/react": "~18.2.21",
package/src/form.tsx CHANGED
@@ -51,6 +51,8 @@ export const FairysRNValtioForm = React.forwardRef(
51
51
  useFormInstanceToState: typeof useFairysValtioFormInstanceToState;
52
52
  /**传递表单实例获取隐藏状态*/
53
53
  useFormInstanceToHideState: typeof useFairysValtioFormInstanceToHideState;
54
+ /**布局组件*/
55
+ Layout: typeof FairysRNValtioFormLayout;
54
56
  };
55
57
  /**初始化实例*/
56
58
  FairysRNValtioForm.useForm = useFairysValtioFormInstance;
@@ -70,3 +72,5 @@ FairysRNValtioForm.FormHideItem = FairysRNValtioFormHideItem;
70
72
  FairysRNValtioForm.useFormInstanceToState = useFairysValtioFormInstanceToState;
71
73
  /**传递表单实例获取隐藏状态*/
72
74
  FairysRNValtioForm.useFormInstanceToHideState = useFairysValtioFormInstanceToHideState;
75
+ /**布局组件*/
76
+ FairysRNValtioForm.Layout = FairysRNValtioFormLayout;
package/src/hooks/form.item.ts CHANGED
@@ -75,6 +75,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<strin
75
75
  isInvalidTextRed = parent_isInvalidTextRed,
76
76
  isJoinParentField = true,
77
77
  rules,
78
+ useRules = (rules) => rules,
78
79
  isRemoveValueOnUnmount = false,
79
80
  } = props;
80
81
  const {
@@ -99,17 +100,20 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<strin
99
100
  const error = errorState[_name];
100
101
  // 使用从 Form 中设置的规则
101
102
  const _formItemRules = formInstance.rules?.[_name];
103
+ const _mergeRules = rules || _formItemRules;
104
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
105
+
102
106
  const id = useId(_name);
103
107
  formInstance.nameToPaths[_name] = paths;
104
108
 
105
109
  useEffect(() => {
106
- if (Array.isArray(rules) && rules.length) {
107
- formInstance.mountRules[_name] = rules;
110
+ if (Array.isArray(_lastRules)) {
111
+ formInstance.mountRules[_name] = _lastRules;
108
112
  }
109
113
  return () => {
110
114
  formInstance.removeRules(_name);
111
115
  };
112
- }, [_name, rules]);
116
+ }, [_name, _lastRules]);
113
117
 
114
118
  useEffect(() => {
115
119
  return () => {
@@ -151,13 +155,11 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<strin
151
155
  const isRequired = useMemo(() => {
152
156
  if (_isRequired) {
153
157
  return _isRequired;
154
- } else if (Array.isArray(rules) && rules.length) {
155
- return rules.some((rule) => rule.required);
156
- } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
157
- return _formItemRules.some((rule) => rule.required);
158
+ } else if (Array.isArray(_lastRules)) {
159
+ return _lastRules.some((rule) => rule.required);
158
160
  }
159
161
  return false;
160
- }, [rules, formInstance, _formItemRules]);
162
+ }, [_lastRules]);
161
163
 
162
164
  /**校验是否存在错误信息*/
163
165
  const isInvalid = useMemo(() => {
@@ -381,6 +383,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
381
383
  attrs = {},
382
384
  isJoinParentField = true,
383
385
  rules,
386
+ useRules = (rules) => rules,
384
387
  isRequired: _isRequired,
385
388
  isRemoveValueOnUnmount = false,
386
389
  } = props;
@@ -395,18 +398,20 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
395
398
  const value = useMemo(() => get(state, paths), [state, paths]);
396
399
  const error = errorState[_name];
397
400
  formInstance.nameToPaths[_name] = paths;
398
-
399
401
  // 使用从 Form 中设置的规则
400
402
  const _formItemRules = formInstance.rules?.[_name];
403
+ const _mergeRules = rules || _formItemRules;
404
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
401
405
 
402
406
  useEffect(() => {
403
- if (Array.isArray(rules) && rules.length) {
404
- formInstance.mountRules[_name] = rules;
407
+ if (Array.isArray(_lastRules)) {
408
+ formInstance.mountRules[_name] = _lastRules;
405
409
  }
406
410
  return () => {
407
411
  formInstance.removeRules(_name);
408
412
  };
409
- }, [_name, rules]);
413
+ }, [_name, _lastRules]);
414
+
410
415
  useEffect(() => {
411
416
  return () => {
412
417
  if (isRemoveValueOnUnmount) {
@@ -444,13 +449,11 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
444
449
  const isRequired = useMemo(() => {
445
450
  if (_isRequired) {
446
451
  return _isRequired;
447
- } else if (Array.isArray(rules) && rules.length) {
448
- return rules.some((rule) => rule.required);
449
- } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
450
- return _formItemRules.some((rule) => rule.required);
452
+ } else if (Array.isArray(_lastRules)) {
453
+ return _lastRules.some((rule) => rule.required);
451
454
  }
452
455
  return false;
453
- }, [rules, formInstance, _formItemRules]);
456
+ }, [_lastRules]);
454
457
 
455
458
  /**校验是否存在错误信息*/
456
459
  const isInvalid = useMemo(() => {