@canlooks/can-ui 0.0.55 → 0.0.56

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/curd/curdDialog.js +11 -4
  2. package/dist/cjs/components/form/formItem.d.ts +1 -0
  3. package/dist/cjs/components/form/formItem.js +7 -1
  4. package/dist/esm/components/curd/curdDialog.js +11 -4
  5. package/dist/esm/components/form/formItem.d.ts +1 -0
  6. package/dist/esm/components/form/formItem.js +8 -2
  7. package/package.json +1 -1
package/dist/cjs/components/curd/curdDialog.js CHANGED
@@ -39,8 +39,7 @@ exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props })
39
39
  (0, react_2.useImperativeHandle)(ref, () => ({
40
40
  open(row, initialFormValue) {
41
41
  innerFormRef.current?.resetForm();
42
- suppressTransform.current = !!initialFormValue;
43
- initialFormValue && innerFormRef.current?.setFormValue(initialFormValue);
42
+ handlingFormValue.current = initialFormValue;
44
43
  setActiveRow(row);
45
44
  setInnerOpen(true);
46
45
  const { promise } = openResolvers.current = Promise.withResolvers();
@@ -64,13 +63,21 @@ exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props })
64
63
  * 表单项
65
64
  */
66
65
  const [activeRow, setActiveRow] = (0, react_2.useState)();
67
- const suppressTransform = (0, react_2.useRef)(false);
66
+ const handlingFormValue = (0, react_2.useRef)(void 0);
68
67
  const [transforming, setFormValue] = (0, utils_1.useLoading)(async (row) => {
69
68
  const formValue = rowToForm && row ? await rowToForm(row) : row;
70
69
  formValue && innerFormRef.current?.setFormValue(formValue);
71
70
  });
72
71
  (0, react_2.useEffect)(() => {
73
- innerOpen.current && !suppressTransform.current && setFormValue(activeRow);
72
+ if (!innerOpen.current) {
73
+ return;
74
+ }
75
+ if (handlingFormValue.current) {
76
+ innerFormRef.current?.setFormValue(handlingFormValue.current);
77
+ }
78
+ else {
79
+ setFormValue(activeRow);
80
+ }
74
81
  }, [innerOpen.current, activeRow]);
75
82
  const renderedFormItems = (0, react_2.useMemo)(() => {
76
83
  return (0, utils_1.columnsToFormItem)(columns, activeRow)?.map(col => {
package/dist/cjs/components/form/formItem.d.ts CHANGED
@@ -10,6 +10,7 @@ export type FormItemRules<I = any> = {
10
10
  validator?(fieldValue: I | undefined, formValue: any, formRef: FormRef | null): any;
11
11
  };
12
12
  export type FieldProps<I = any> = {
13
+ key?: string;
13
14
  checked?: boolean;
14
15
  value?: I;
15
16
  onChange?(e: any): void;
package/dist/cjs/components/form/formItem.js CHANGED
@@ -21,6 +21,10 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
21
21
  return (0, utils_1.queryDeep)(formValue, field);
22
22
  }
23
23
  }, [formValue, field]);
24
+ const [randomKey] = (0, utils_1.useDerivedState)(prev => {
25
+ // fieldValue变为undefined时，需要更新key以强制重渲染组件
26
+ return typeof fieldValue === 'undefined' ? (0, utils_1.getShortID)() : prev;
27
+ }, [fieldValue]);
24
28
  /**
25
29
  * --------------------------------------------------------------------
26
30
  * 校验
@@ -85,7 +89,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
85
89
  // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
86
90
  const reset = (value = formValue) => {
87
91
  shouldValidate.current = isTouched.current = false;
88
- if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
92
+ if (typeof field !== 'undefined' && value) {
89
93
  (0, utils_1.queryDeep)(value, field, () => initialValue);
90
94
  }
91
95
  innerError.current && setInnerError(false);
@@ -124,6 +128,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
124
128
  if (typeof children === 'function') {
125
129
  return children(typeof field !== 'undefined'
126
130
  ? {
131
+ key: randomKey.current,
127
132
  ...typeof fieldValue === 'boolean'
128
133
  ? { checked: fieldValue }
129
134
  : { value: fieldValue },
@@ -140,6 +145,7 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
140
145
  if ((0, react_1.isValidElement)(children)) {
141
146
  const { props: childProps } = children;
142
147
  return (0, react_1.cloneElement)(children, {
148
+ key: randomKey.current,
143
149
  ...typeof field !== 'undefined' && {
144
150
  ...typeof fieldValue === 'boolean'
145
151
  ? { checked: childProps.checked ?? fieldValue }
package/dist/esm/components/curd/curdDialog.js CHANGED
@@ -36,8 +36,7 @@ export const CurdDialog = memo(({ ref, onFinish, curdProps, ...props }) => {
36
36
  useImperativeHandle(ref, () => ({
37
37
  open(row, initialFormValue) {
38
38
  innerFormRef.current?.resetForm();
39
- suppressTransform.current = !!initialFormValue;
40
- initialFormValue && innerFormRef.current?.setFormValue(initialFormValue);
39
+ handlingFormValue.current = initialFormValue;
41
40
  setActiveRow(row);
42
41
  setInnerOpen(true);
43
42
  const { promise } = openResolvers.current = Promise.withResolvers();
@@ -61,13 +60,21 @@ export const CurdDialog = memo(({ ref, onFinish, curdProps, ...props }) => {
61
60
  * 表单项
62
61
  */
63
62
  const [activeRow, setActiveRow] = useState();
64
- const suppressTransform = useRef(false);
63
+ const handlingFormValue = useRef(void 0);
65
64
  const [transforming, setFormValue] = useLoading(async (row) => {
66
65
  const formValue = rowToForm && row ? await rowToForm(row) : row;
67
66
  formValue && innerFormRef.current?.setFormValue(formValue);
68
67
  });
69
68
  useEffect(() => {
70
- innerOpen.current && !suppressTransform.current && setFormValue(activeRow);
69
+ if (!innerOpen.current) {
70
+ return;
71
+ }
72
+ if (handlingFormValue.current) {
73
+ innerFormRef.current?.setFormValue(handlingFormValue.current);
74
+ }
75
+ else {
76
+ setFormValue(activeRow);
77
+ }
71
78
  }, [innerOpen.current, activeRow]);
72
79
  const renderedFormItems = useMemo(() => {
73
80
  return columnsToFormItem(columns, activeRow)?.map(col => {
package/dist/esm/components/form/formItem.d.ts CHANGED
@@ -10,6 +10,7 @@ export type FormItemRules<I = any> = {
10
10
  validator?(fieldValue: I | undefined, formValue: any, formRef: FormRef | null): any;
11
11
  };
12
12
  export type FieldProps<I = any> = {
13
+ key?: string;
13
14
  checked?: boolean;
14
15
  value?: I;
15
16
  onChange?(e: any): void;
package/dist/esm/components/form/formItem.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
2
2
  import { cloneElement, isValidElement, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
3
3
  import { useFormContext } from './form';
4
- import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray } from '../../utils';
4
+ import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID } from '../../utils';
5
5
  import { DescriptionItem } from '../descriptions';
6
6
  import { classes } from './form.style';
7
7
  import { Collapse } from '../transitionBase';
@@ -18,6 +18,10 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
18
18
  return queryDeep(formValue, field);
19
19
  }
20
20
  }, [formValue, field]);
21
+ const [randomKey] = useDerivedState(prev => {
22
+ // fieldValue变为undefined时，需要更新key以强制重渲染组件
23
+ return typeof fieldValue === 'undefined' ? getShortID() : prev;
24
+ }, [fieldValue]);
21
25
  /**
22
26
  * --------------------------------------------------------------------
23
27
  * 校验
@@ -82,7 +86,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
82
86
  // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
83
87
  const reset = (value = formValue) => {
84
88
  shouldValidate.current = isTouched.current = false;
85
- if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
89
+ if (typeof field !== 'undefined' && value) {
86
90
  queryDeep(value, field, () => initialValue);
87
91
  }
88
92
  innerError.current && setInnerError(false);
@@ -121,6 +125,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
121
125
  if (typeof children === 'function') {
122
126
  return children(typeof field !== 'undefined'
123
127
  ? {
128
+ key: randomKey.current,
124
129
  ...typeof fieldValue === 'boolean'
125
130
  ? { checked: fieldValue }
126
131
  : { value: fieldValue },
@@ -137,6 +142,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
137
142
  if (isValidElement(children)) {
138
143
  const { props: childProps } = children;
139
144
  return cloneElement(children, {
145
+ key: randomKey.current,
140
146
  ...typeof field !== 'undefined' && {
141
147
  ...typeof fieldValue === 'boolean'
142
148
  ? { checked: childProps.checked ?? fieldValue }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.55",
3
+ "version": "0.0.56",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",