@canlooks/can-ui 0.0.30 → 0.0.32

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 (7) hide show
  1. package/dist/cjs/components/form/formItem.d.ts +2 -2
  2. package/dist/cjs/components/form/formItem.js +25 -35
  3. package/dist/esm/components/form/formItem.d.ts +2 -2
  4. package/dist/esm/components/form/formItem.js +26 -36
  5. package/documentation/dist/assets/{index-BLGjXpOp.js → index-BRy0zMx7.js} +193 -193
  6. package/documentation/dist/index.html +1 -1
  7. package/package.json +1 -1
package/dist/cjs/components/form/formItem.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ReactNode, ElementType, Ref } from 'react';
1
+ import { ReactNode, ElementType, Ref } from 'react';
2
2
  import { FormRef, FormSharedProps, FormValue } from './form';
3
3
  import { ColorPropsValue, MergeProps, Size } from '../../types';
4
4
  import { FieldPath } from '../../utils';
@@ -12,7 +12,7 @@ export type FormItemRules<I = any> = {
12
12
  export type FieldProps<I = any> = {
13
13
  checked?: boolean;
14
14
  value?: I;
15
- onChange?(e: React.ChangeEvent): void;
15
+ onChange?(e: any): void;
16
16
  };
17
17
  export type StyleProps = {
18
18
  size?: Size;
package/dist/cjs/components/form/formItem.js CHANGED
@@ -8,9 +8,10 @@ const utils_1 = require("../../utils");
8
8
  const descriptions_1 = require("../descriptions");
9
9
  const form_style_1 = require("./form.style");
10
10
  const transitionBase_1 = require("../transitionBase");
11
- const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }) => {
12
- const { variant, formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
11
+ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, ...props }) => {
12
+ const { formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
13
13
  requiredMark ??= context.requiredMark ?? '*';
14
+ variant ??= context.variant ?? 'grid';
14
15
  /**
15
16
  * --------------------------------------------------------------------
16
17
  * 重置与初始化
@@ -29,22 +30,11 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
29
30
  * --------------------------------------------------------------------
30
31
  * 字段值
31
32
  */
32
- const isActiveChanging = (0, react_1.useRef)(false);
33
- const [innerValue, setInnerValue] = (0, utils_1.useDerivedState)(prev => {
34
- isActiveChanging.current = false;
35
- const value = typeof field !== 'undefined' && formValue
36
- ? (0, utils_1.queryDeep)(formValue, field)
37
- : void 0;
38
- if (typeof prev !== 'undefined' && typeof value === 'undefined') {
39
- console.error(`The field "${(0, utils_1.stringifyField)(field)}" value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
33
+ const fieldValue = (0, react_1.useMemo)(() => {
34
+ if (typeof field !== 'undefined' && formValue) {
35
+ return (0, utils_1.queryDeep)(formValue, field);
40
36
  }
41
- return value;
42
37
  }, [formValue, field]);
43
- const deferredValue = (0, react_1.useDeferredValue)(innerValue.current);
44
- (0, react_1.useEffect)(() => {
45
- // 主动改变值，需要触发上层setFieldValue
46
- isActiveChanging.current && setFieldValue?.(field, deferredValue);
47
- }, [deferredValue]);
48
38
  /**
49
39
  * --------------------------------------------------------------------
50
40
  * 校验
@@ -60,8 +50,8 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
60
50
  const promises = [];
61
51
  let invalid = false;
62
52
  rulesArr?.some(r => {
63
- if ((r.required && (typeof deferredValue === 'undefined' || deferredValue === null || deferredValue === '')) ||
64
- (r.pattern && typeof deferredValue === 'string' && !r.pattern.test(deferredValue))) {
53
+ if ((r.required && (typeof fieldValue === 'undefined' || fieldValue === null || fieldValue === '')) ||
54
+ (r.pattern && typeof fieldValue === 'string' && !r.pattern.test(fieldValue))) {
65
55
  setInnerError(true);
66
56
  setInnerHelperText(r.message || defaultMessage);
67
57
  return invalid = true;
@@ -69,7 +59,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
69
59
  if (r.validator) {
70
60
  promises.push((async () => {
71
61
  try {
72
- await r.validator(deferredValue, formValue, formRef?.current || null);
62
+ await r.validator(fieldValue, formValue, formRef?.current || null);
73
63
  setInnerError(false);
74
64
  }
75
65
  catch (e) {
@@ -98,7 +88,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
98
88
  (0, react_1.useMemo)(() => {
99
89
  shouldValidate.current && validate().then();
100
90
  shouldValidate.current = true;
101
- }, [deferredValue, ...dependencyValues || []]);
91
+ }, [fieldValue, ...dependencyValues || []]);
102
92
  /**
103
93
  * --------------------------------------------------------------------
104
94
  * 挂载formItemRef
@@ -132,38 +122,38 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
132
122
  if (typeof children === 'function') {
133
123
  return children(typeof field !== 'undefined'
134
124
  ? {
135
- ...typeof innerValue.current === 'boolean'
136
- ? { checked: innerValue.current }
137
- : { value: innerValue.current },
125
+ ...typeof fieldValue === 'boolean'
126
+ ? { checked: fieldValue }
127
+ : { value: fieldValue },
138
128
  onChange(e) {
139
- isTouched.current = isActiveChanging.current = true;
140
- setInnerValue((o) => (0, utils_1.getValueOnChange)(e, o));
129
+ isTouched.current = true;
130
+ setFieldValue?.(field, (0, utils_1.getValueOnChange)(e, fieldValue));
141
131
  }
142
132
  }
143
133
  : {}, {
144
- size: props.size,
134
+ ...props.size && { size: props.size },
145
135
  ...innerError.current ? { color: 'error' } : {}
146
136
  });
147
137
  }
148
138
  if ((0, react_1.isValidElement)(children)) {
149
- const { props } = children;
139
+ const { props: childProps } = children;
150
140
  return (0, react_1.cloneElement)(children, {
151
141
  ...typeof field !== 'undefined' && {
152
- ...typeof innerValue.current === 'boolean'
153
- ? { checked: props.checked ?? innerValue.current }
154
- : { value: props.value ?? innerValue.current },
142
+ ...typeof fieldValue === 'boolean'
143
+ ? { checked: childProps.checked ?? fieldValue }
144
+ : { value: childProps.value ?? fieldValue },
155
145
  onChange(e) {
156
- props.onChange?.(e);
157
- isTouched.current = isActiveChanging.current = true;
158
- setInnerValue((o) => (0, utils_1.getValueOnChange)(e, o));
146
+ childProps.onChange?.(e);
147
+ isTouched.current = true;
148
+ setFieldValue?.(field, (0, utils_1.getValueOnChange)(e, fieldValue));
159
149
  }
160
150
  },
161
- size: props.size ?? props.size,
151
+ ...props.size && { size: childProps.size },
162
152
  ...innerError.current && { color: 'error' }
163
153
  });
164
154
  }
165
155
  return children;
166
- }, [children, innerValue.current, innerError.current, field, props.size]);
156
+ }, [children, fieldValue, innerError.current, field, props.size]);
167
157
  if (noStyle || variant === 'plain') {
168
158
  return renderedChildren;
169
159
  }
package/dist/esm/components/form/formItem.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ReactNode, ElementType, Ref } from 'react';
1
+ import { ReactNode, ElementType, Ref } from 'react';
2
2
  import { FormRef, FormSharedProps, FormValue } from './form';
3
3
  import { ColorPropsValue, MergeProps, Size } from '../../types';
4
4
  import { FieldPath } from '../../utils';
@@ -12,7 +12,7 @@ export type FormItemRules<I = any> = {
12
12
  export type FieldProps<I = any> = {
13
13
  checked?: boolean;
14
14
  value?: I;
15
- onChange?(e: React.ChangeEvent): void;
15
+ onChange?(e: any): void;
16
16
  };
17
17
  export type StyleProps = {
18
18
  size?: Size;
package/dist/esm/components/form/formItem.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
2
- import { cloneElement, isValidElement, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
2
+ import { cloneElement, isValidElement, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
3
3
  import { useFormContext } from './form';
4
4
  import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray } from '../../utils';
5
5
  import { DescriptionItem } from '../descriptions';
6
6
  import { classes } from './form.style';
7
7
  import { Collapse } from '../transitionBase';
8
- export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }) => {
9
- const { variant, formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
8
+ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, ...props }) => {
9
+ const { formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
10
10
  requiredMark ??= context.requiredMark ?? '*';
11
+ variant ??= context.variant ?? 'grid';
11
12
  /**
12
13
  * --------------------------------------------------------------------
13
14
  * 重置与初始化
@@ -26,22 +27,11 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
26
27
  * --------------------------------------------------------------------
27
28
  * 字段值
28
29
  */
29
- const isActiveChanging = useRef(false);
30
- const [innerValue, setInnerValue] = useDerivedState(prev => {
31
- isActiveChanging.current = false;
32
- const value = typeof field !== 'undefined' && formValue
33
- ? queryDeep(formValue, field)
34
- : void 0;
35
- if (typeof prev !== 'undefined' && typeof value === 'undefined') {
36
- console.error(`The field "${stringifyField(field)}" value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
30
+ const fieldValue = useMemo(() => {
31
+ if (typeof field !== 'undefined' && formValue) {
32
+ return queryDeep(formValue, field);
37
33
  }
38
- return value;
39
34
  }, [formValue, field]);
40
- const deferredValue = useDeferredValue(innerValue.current);
41
- useEffect(() => {
42
- // 主动改变值，需要触发上层setFieldValue
43
- isActiveChanging.current && setFieldValue?.(field, deferredValue);
44
- }, [deferredValue]);
45
35
  /**
46
36
  * --------------------------------------------------------------------
47
37
  * 校验
@@ -57,8 +47,8 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
57
47
  const promises = [];
58
48
  let invalid = false;
59
49
  rulesArr?.some(r => {
60
- if ((r.required && (typeof deferredValue === 'undefined' || deferredValue === null || deferredValue === '')) ||
61
- (r.pattern && typeof deferredValue === 'string' && !r.pattern.test(deferredValue))) {
50
+ if ((r.required && (typeof fieldValue === 'undefined' || fieldValue === null || fieldValue === '')) ||
51
+ (r.pattern && typeof fieldValue === 'string' && !r.pattern.test(fieldValue))) {
62
52
  setInnerError(true);
63
53
  setInnerHelperText(r.message || defaultMessage);
64
54
  return invalid = true;
@@ -66,7 +56,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
66
56
  if (r.validator) {
67
57
  promises.push((async () => {
68
58
  try {
69
- await r.validator(deferredValue, formValue, formRef?.current || null);
59
+ await r.validator(fieldValue, formValue, formRef?.current || null);
70
60
  setInnerError(false);
71
61
  }
72
62
  catch (e) {
@@ -95,7 +85,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
95
85
  useMemo(() => {
96
86
  shouldValidate.current && validate().then();
97
87
  shouldValidate.current = true;
98
- }, [deferredValue, ...dependencyValues || []]);
88
+ }, [fieldValue, ...dependencyValues || []]);
99
89
  /**
100
90
  * --------------------------------------------------------------------
101
91
  * 挂载formItemRef
@@ -129,38 +119,38 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
129
119
  if (typeof children === 'function') {
130
120
  return children(typeof field !== 'undefined'
131
121
  ? {
132
- ...typeof innerValue.current === 'boolean'
133
- ? { checked: innerValue.current }
134
- : { value: innerValue.current },
122
+ ...typeof fieldValue === 'boolean'
123
+ ? { checked: fieldValue }
124
+ : { value: fieldValue },
135
125
  onChange(e) {
136
- isTouched.current = isActiveChanging.current = true;
137
- setInnerValue((o) => getValueOnChange(e, o));
126
+ isTouched.current = true;
127
+ setFieldValue?.(field, getValueOnChange(e, fieldValue));
138
128
  }
139
129
  }
140
130
  : {}, {
141
- size: props.size,
131
+ ...props.size && { size: props.size },
142
132
  ...innerError.current ? { color: 'error' } : {}
143
133
  });
144
134
  }
145
135
  if (isValidElement(children)) {
146
- const { props } = children;
136
+ const { props: childProps } = children;
147
137
  return cloneElement(children, {
148
138
  ...typeof field !== 'undefined' && {
149
- ...typeof innerValue.current === 'boolean'
150
- ? { checked: props.checked ?? innerValue.current }
151
- : { value: props.value ?? innerValue.current },
139
+ ...typeof fieldValue === 'boolean'
140
+ ? { checked: childProps.checked ?? fieldValue }
141
+ : { value: childProps.value ?? fieldValue },
152
142
  onChange(e) {
153
- props.onChange?.(e);
154
- isTouched.current = isActiveChanging.current = true;
155
- setInnerValue((o) => getValueOnChange(e, o));
143
+ childProps.onChange?.(e);
144
+ isTouched.current = true;
145
+ setFieldValue?.(field, getValueOnChange(e, fieldValue));
156
146
  }
157
147
  },
158
- size: props.size ?? props.size,
148
+ ...props.size && { size: childProps.size },
159
149
  ...innerError.current && { color: 'error' }
160
150
  });
161
151
  }
162
152
  return children;
163
- }, [children, innerValue.current, innerError.current, field, props.size]);
153
+ }, [children, fieldValue, innerError.current, field, props.size]);
164
154
  if (noStyle || variant === 'plain') {
165
155
  return renderedChildren;
166
156
  }