@fairys/valtio-form-basic 1.0.3 → 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/form.item.d.ts +2 -0
  2. package/esm/form/form.item.js +14 -16
  3. package/lib/form/form.item.d.ts +2 -0
  4. package/lib/form/form.item.js +14 -16
  5. package/package.json +1 -1
  6. package/src/form/form.item.tsx +21 -16
package/esm/form/form.item.d.ts CHANGED
@@ -77,6 +77,8 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<st
77
77
  isJoinParentField?: boolean;
78
78
  /**校验规则*/
79
79
  rules?: RuleItem[];
80
+ /**自定义校验规则*/
81
+ useRules?: (rules?: RuleItem[]) => RuleItem[];
80
82
  /**卸载移除数据值
81
83
  * @default true
82
84
  */
package/esm/form/form.item.js CHANGED
@@ -21,7 +21,7 @@ function useFairysValtioFormItemAttrs(props) {
21
21
  const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
22
22
  const parent_showColon = layoutAttrs.showColon;
23
23
  const parent_platform = layoutAttrs.platform;
24
- const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, platform = parent_platform, isRemoveValueOnUnmount = false } = props;
24
+ const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, platform = parent_platform, isRemoveValueOnUnmount = false, useRules = (rules)=>rules } = props;
25
25
  const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
26
26
  name,
27
27
  isJoinParentField
@@ -33,16 +33,18 @@ function useFairysValtioFormItemAttrs(props) {
33
33
  ]);
34
34
  const error = errorState[_name];
35
35
  const _formItemRules = formInstance.rules?.[_name];
36
+ const _mergeRules = rules || _formItemRules;
37
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
36
38
  const id = useId(_name);
37
39
  formInstance.nameToPaths[_name] = paths;
38
40
  useEffect(()=>{
39
- if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
41
+ if (Array.isArray(_lastRules)) formInstance.mountRules[_name] = _lastRules;
40
42
  return ()=>{
41
43
  formInstance.removeRules(_name);
42
44
  };
43
45
  }, [
44
46
  _name,
45
- rules
47
+ _lastRules
46
48
  ]);
47
49
  const onValueChange = (event)=>{
48
50
  let _value = event;
@@ -66,13 +68,10 @@ function useFairysValtioFormItemAttrs(props) {
66
68
  };
67
69
  const isRequired = useMemo(()=>{
68
70
  if (_isRequired) return _isRequired;
69
- if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
70
- if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
71
+ if (Array.isArray(_lastRules)) return _lastRules.some((rule)=>rule.required);
71
72
  return false;
72
73
  }, [
73
- rules,
74
- formInstance,
75
- _formItemRules
74
+ _lastRules
76
75
  ]);
77
76
  const isInvalid = useMemo(()=>{
78
77
  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 = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = false, isRequired: _isRequired } = props;
218
+ const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, useRules = (rules)=>rules, isRemoveValueOnUnmount = false, isRequired: _isRequired } = 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
  const onValueChange = (event)=>{
243
244
  let _value = event;
@@ -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/lib/form/form.item.d.ts CHANGED
@@ -77,6 +77,8 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<st
77
77
  isJoinParentField?: boolean;
78
78
  /**校验规则*/
79
79
  rules?: RuleItem[];
80
+ /**自定义校验规则*/
81
+ useRules?: (rules?: RuleItem[]) => RuleItem[];
80
82
  /**卸载移除数据值
81
83
  * @default true
82
84
  */
package/lib/form/form.item.js CHANGED
@@ -62,7 +62,7 @@ function useFairysValtioFormItemAttrs(props) {
62
62
  const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
63
63
  const parent_showColon = layoutAttrs.showColon;
64
64
  const parent_platform = layoutAttrs.platform;
65
- const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, platform = parent_platform, isRemoveValueOnUnmount = false } = props;
65
+ const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, platform = parent_platform, isRemoveValueOnUnmount = false, useRules = (rules)=>rules } = props;
66
66
  const { name: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
67
67
  name,
68
68
  isJoinParentField
@@ -74,16 +74,18 @@ function useFairysValtioFormItemAttrs(props) {
74
74
  ]);
75
75
  const error = errorState[_name];
76
76
  const _formItemRules = formInstance.rules?.[_name];
77
+ const _mergeRules = rules || _formItemRules;
78
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
77
79
  const id = (0, hooks_index_js_namespaceObject.useId)(_name);
78
80
  formInstance.nameToPaths[_name] = paths;
79
81
  (0, external_react_namespaceObject.useEffect)(()=>{
80
- if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
82
+ if (Array.isArray(_lastRules)) formInstance.mountRules[_name] = _lastRules;
81
83
  return ()=>{
82
84
  formInstance.removeRules(_name);
83
85
  };
84
86
  }, [
85
87
  _name,
86
- rules
88
+ _lastRules
87
89
  ]);
88
90
  const onValueChange = (event)=>{
89
91
  let _value = event;
@@ -107,13 +109,10 @@ function useFairysValtioFormItemAttrs(props) {
107
109
  };
108
110
  const isRequired = (0, external_react_namespaceObject.useMemo)(()=>{
109
111
  if (_isRequired) return _isRequired;
110
- if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
111
- if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
112
+ if (Array.isArray(_lastRules)) return _lastRules.some((rule)=>rule.required);
112
113
  return false;
113
114
  }, [
114
- rules,
115
- formInstance,
116
- _formItemRules
115
+ _lastRules
117
116
  ]);
118
117
  const isInvalid = (0, external_react_namespaceObject.useMemo)(()=>{
119
118
  if (Array.isArray(error) && error.length) return true;
@@ -257,7 +256,7 @@ function useFairysValtioFormItemAttrs(props) {
257
256
  };
258
257
  }
259
258
  function useFairysValtioFormItemNoStyleAttrs(props) {
260
- const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = false, isRequired: _isRequired } = props;
259
+ const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, useRules = (rules)=>rules, isRemoveValueOnUnmount = false, isRequired: _isRequired } = props;
261
260
  const [state, errorState, formInstance] = (0, index_js_namespaceObject.useFairysValtioFormInstanceContextState)();
262
261
  const { name: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
263
262
  name,
@@ -271,14 +270,16 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
271
270
  const error = errorState[_name];
272
271
  formInstance.nameToPaths[_name] = paths;
273
272
  const _formItemRules = formInstance.rules?.[_name];
273
+ const _mergeRules = rules || _formItemRules;
274
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
274
275
  (0, external_react_namespaceObject.useEffect)(()=>{
275
- if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
276
+ if (Array.isArray(_lastRules)) formInstance.mountRules[_name] = _lastRules;
276
277
  return ()=>{
277
278
  formInstance.removeRules(_name);
278
279
  };
279
280
  }, [
280
281
  _name,
281
- rules
282
+ _lastRules
282
283
  ]);
283
284
  const onValueChange = (event)=>{
284
285
  let _value = event;
@@ -302,13 +303,10 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
302
303
  };
303
304
  const isRequired = (0, external_react_namespaceObject.useMemo)(()=>{
304
305
  if (_isRequired) return _isRequired;
305
- if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
306
- if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
306
+ if (Array.isArray(_lastRules)) return _lastRules.some((rule)=>rule.required);
307
307
  return false;
308
308
  }, [
309
- rules,
310
- formInstance,
311
- _formItemRules
309
+ _lastRules
312
310
  ]);
313
311
  const isInvalid = (0, external_react_namespaceObject.useMemo)(()=>{
314
312
  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": "使用 valtio 实现的表单基础库, 使其更加便捷，同时支持`PC`、`H5`、`Taro`，同时也更加灵活。",
5
5
  "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
6
- "version": "1.0.3",
6
+ "version": "1.0.4",
7
7
  "main": "lib/index.js",
8
8
  "types": "esm/index.d.ts",
9
9
  "module": "esm/index.js",
package/src/form/form.item.tsx CHANGED
@@ -81,6 +81,8 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<st
81
81
  isJoinParentField?: boolean;
82
82
  /**校验规则*/
83
83
  rules?: RuleItem[];
84
+ /**自定义校验规则*/
85
+ useRules?: (rules?: RuleItem[]) => RuleItem[];
84
86
  /**卸载移除数据值
85
87
  * @default true
86
88
  */
@@ -182,6 +184,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<strin
182
184
  rules,
183
185
  platform = parent_platform,
184
186
  isRemoveValueOnUnmount = false,
187
+ useRules = (rules) => rules,
185
188
  } = props;
186
189
 
187
190
  const {
@@ -195,16 +198,19 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<strin
195
198
  const error = errorState[_name];
196
199
  // 使用从 Form 中设置的规则
197
200
  const _formItemRules = formInstance.rules?.[_name];
201
+ const _mergeRules = rules || _formItemRules;
202
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
203
+
198
204
  const id = useId(_name);
199
205
  formInstance.nameToPaths[_name] = paths;
200
206
  useEffect(() => {
201
- if (Array.isArray(rules) && rules.length) {
202
- formInstance.mountRules[_name] = rules;
207
+ if (Array.isArray(_lastRules)) {
208
+ formInstance.mountRules[_name] = _lastRules;
203
209
  }
204
210
  return () => {
205
211
  formInstance.removeRules(_name);
206
212
  };
207
- }, [_name, rules]);
213
+ }, [_name, _lastRules]);
208
214
 
209
215
  const onValueChange = (event: any) => {
210
216
  let _value = event;
@@ -247,13 +253,11 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<strin
247
253
  const isRequired = useMemo(() => {
248
254
  if (_isRequired) {
249
255
  return _isRequired;
250
- } else if (Array.isArray(rules) && rules.length) {
251
- return rules.some((rule) => rule.required);
252
- } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
253
- return _formItemRules.some((rule) => rule.required);
256
+ } else if (Array.isArray(_lastRules)) {
257
+ return _lastRules.some((rule) => rule.required);
254
258
  }
255
259
  return false;
256
- }, [rules, formInstance, _formItemRules]);
260
+ }, [_lastRules]);
257
261
 
258
262
  /**校验是否存在错误信息*/
259
263
  const isInvalid = useMemo(() => {
@@ -539,6 +543,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
539
543
  attrs = {},
540
544
  isJoinParentField = true,
541
545
  rules,
546
+ useRules = (rules) => rules,
542
547
  isRemoveValueOnUnmount = false,
543
548
  isRequired: _isRequired,
544
549
  } = props;
@@ -555,15 +560,17 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
555
560
  formInstance.nameToPaths[_name] = paths;
556
561
  // 使用从 Form 中设置的规则
557
562
  const _formItemRules = formInstance.rules?.[_name];
563
+ const _mergeRules = rules || _formItemRules;
564
+ const _lastRules = useRules?.(_mergeRules) || _mergeRules;
558
565
 
559
566
  useEffect(() => {
560
- if (Array.isArray(rules) && rules.length) {
561
- formInstance.mountRules[_name] = rules;
567
+ if (Array.isArray(_lastRules)) {
568
+ formInstance.mountRules[_name] = _lastRules;
562
569
  }
563
570
  return () => {
564
571
  formInstance.removeRules(_name);
565
572
  };
566
- }, [_name, rules]);
573
+ }, [_name, _lastRules]);
567
574
 
568
575
  const onValueChange = (event: any) => {
569
576
  let _value = event;
@@ -606,13 +613,11 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
606
613
  const isRequired = useMemo(() => {
607
614
  if (_isRequired) {
608
615
  return _isRequired;
609
- } else if (Array.isArray(rules) && rules.length) {
610
- return rules.some((rule) => rule.required);
611
- } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
612
- return _formItemRules.some((rule) => rule.required);
616
+ } else if (Array.isArray(_lastRules)) {
617
+ return _lastRules.some((rule) => rule.required);
613
618
  }
614
619
  return false;
615
- }, [rules, formInstance, _formItemRules]);
620
+ }, [_lastRules]);
616
621
 
617
622
  /**校验是否存在错误信息*/
618
623
  const isInvalid = useMemo(() => {