@rainbow-oh/yee-c 0.8.20 → 0.9.1

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 (51) hide show
  1. package/dist/cjs/Form/Field.js +6 -6
  2. package/dist/cjs/Form/demo/async-validate.js +2 -2
  3. package/dist/cjs/Form/demo/field-status.d.ts +3 -0
  4. package/dist/cjs/Form/demo/field-status.js +116 -0
  5. package/dist/cjs/Form/demo/validate.js +2 -2
  6. package/dist/cjs/Form/form-store.d.ts +6 -1
  7. package/dist/cjs/Form/form-store.js +93 -8
  8. package/dist/cjs/Form/index.d.ts +1 -1
  9. package/dist/cjs/Form/interface.d.ts +26 -3
  10. package/dist/cjs/Form/style/index.less +26 -0
  11. package/dist/cjs/Form/utils/path.js +1 -1
  12. package/dist/cjs/TreeSelect/tree-select.js +14 -4
  13. package/dist/cjs/style/themes.css +1 -1
  14. package/dist/cjs/style/variables.css +1 -1
  15. package/dist/cjs/version.d.ts +1 -1
  16. package/dist/cjs/version.js +1 -1
  17. package/dist/esm/Form/Field.js +6 -6
  18. package/dist/esm/Form/demo/async-validate.js +2 -2
  19. package/dist/esm/Form/demo/field-status.d.ts +3 -0
  20. package/dist/esm/Form/demo/field-status.js +104 -0
  21. package/dist/esm/Form/demo/validate.js +2 -2
  22. package/dist/esm/Form/form-store.d.ts +6 -1
  23. package/dist/esm/Form/form-store.js +118 -13
  24. package/dist/esm/Form/hooks/useForm.js +0 -175
  25. package/dist/esm/Form/index.d.ts +1 -1
  26. package/dist/esm/Form/interface.d.ts +26 -3
  27. package/dist/esm/Form/style/index.less +26 -0
  28. package/dist/esm/Form/utils/path.js +2 -1
  29. package/dist/esm/TreeSelect/tree-select.js +20 -6
  30. package/dist/esm/style/themes.css +1 -1
  31. package/dist/esm/style/variables.css +1 -1
  32. package/dist/esm/version.d.ts +1 -1
  33. package/dist/esm/version.js +1 -1
  34. package/dist/umd/yee-c.min.css +1 -1
  35. package/dist/umd/yee-c.min.js +1 -1
  36. package/package.json +1 -1
  37. package/src/Form/Field.tsx +7 -8
  38. package/src/Form/demo/async-validate.tsx +3 -2
  39. package/src/Form/demo/field-status.tsx +108 -0
  40. package/src/Form/demo/validate.tsx +3 -2
  41. package/src/Form/form-store.test.ts +156 -0
  42. package/src/Form/form-store.ts +117 -8
  43. package/src/Form/hooks/useForm.ts +0 -175
  44. package/src/Form/index.en-US.md +93 -88
  45. package/src/Form/index.ts +3 -0
  46. package/src/Form/index.zh-CN.md +56 -51
  47. package/src/Form/interface.ts +28 -3
  48. package/src/Form/style/index.less +26 -0
  49. package/src/Form/utils/path.ts +2 -1
  50. package/src/TreeSelect/tree-select.tsx +21 -4
  51. package/src/version.ts +1 -1
package/src/Form/index.zh-CN.md CHANGED
@@ -23,6 +23,7 @@ toc: 'content'
23
23
  <code src="./demo/layout.tsx" title="表单布局" description="不同的表单布局"></code>
24
24
  <code src="./demo/validate.tsx" title="表单校验" description="表单校验功能"></code>
25
25
  <code src="./demo/async-validate.tsx" title="异步校验" description="async validator 实现服务端唯一性校验等异步场景"></code>
26
+ <code src="./demo/field-status.tsx" title="动态字段状态" description="通过 setFieldStatus 动态设置 error、warning、success 和 info 状态及提示"></code>
26
27
 
27
28
  ## API
28
29
 
@@ -37,10 +38,10 @@ toc: 'content'
37
38
  | name | `string` | 表单名 | - |
38
39
  | form | [FormInstance](#forminstance) | 表单实例 | - |
39
40
  | disabled | `boolean` | 是否禁用 | - |
40
- | initialValues | `Store` | 初始值 | - |
41
+ | initialValues | `Store` | 初始值,键为字段 name;嵌套字段用嵌套对象表示,如 `{ user: { name: 'tom' } }` | - |
41
42
  | layout | `'vertical' \| 'horizontal'` | 布局 | - |
42
43
  | onFinish | `(values: Values) => void` | submit提交时触发事件 | - |
43
- | onFinishFailed | `(err: Values) => void` | submit提交报错时触发事件 | - |
44
+ | onFinishFailed | `(errors: ValidateMessage[]) => void` | submit提交报错时触发事件 | - |
44
45
  | onValuesChange | `(changedValues: Record<string, any>, values: Values) => void` | 表单字段值改变时触发事件 | - |
45
46
  | onValuesBeforeChange | `(changedValues: Record<string, any>, values: Values) => void \| any` | 表单字段值改变前触发事件 | - |
46
47
  | onReset | `() => void` | 表单重置时触发的事件 | - |
@@ -48,32 +49,34 @@ toc: 'content'
48
49
 
49
50
  ### FormInstance
50
51
 
51
- | 属性名 | 类型 | 描述 |
52
- | --------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------ |
53
- | getFieldValidate | `(name: Name) => ValidateMessage \| null` | 获取字段验证（异步校验未完成时可能读到旧值，最终会随 onStoreChange 更新） |
54
- | getFieldValue | `(name: Name) => StoreValue` | 获取字段值 |
55
- | submit | `() => Promise<ValidateMessage[]>` | 提交表单（异步，校验完成后才触发 onFinish） |
56
- | getFieldsValue | `() => Values` | 获取所有字段值 |
57
- | setFieldsValue | `(newStore: Store, trigger?: TRIGGER) => void` | 设置字段值 |
58
- | setCallbacks | `(callbacks: Callbacks) => void` | 设置回调 |
59
- | resetFields | `(name?: Name[]) => void` | 重置字段 |
60
- | clearFields | `(name?: Name[]) => void` | 清空字段 |
61
- | validateField | `(name: Name, trigger?: 'onChange' \| 'onBlur') => Promise<ValidateMessage[]>` | 校验单个字段 |
62
- | validateFields | `(names?: Name[], trigger?: TRIGGER) => Promise<ValidateMessage[]>` | 校验多个字段 |
63
- | getCallbacks | `() => Callbacks` | 获取回调 |
64
- | registerFieldEntities | `(entity: FieldEntity) => void` | 注册字段实体 |
65
- | initialize | `({ initialValues, callbacks }: { initialValues?: Store; callbacks?: Callbacks }) => void` | 初始化表单 |
66
- | getListFields | `(name: NamePath) => FormListField[]` | 获取列表字段 |
67
- | getListOperations | `(name: NamePath) => FormListOperation` | 获取列表操作 |
68
- | subscribe | `(namePath?: NamePath, callback?: () => void) => () => void` | 订阅字段值变化，不传 namePath 监听所有字段 |
52
+ | 属性名 | 类型 | 描述 |
53
+ | --------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
54
+ | getFieldValidate | `(name: Name) => ValidateMessage \| null` | 获取字段验证（异步校验未完成时可能读到旧值，最终会随 onStoreChange 更新） |
55
+ | getFieldStatus | `(name: NamePath) => FieldStatusData \| null` | 获取字段当前展示状态；规则校验错误优先展示，其余情况手动设置的状态优先于校验结果 |
56
+ | setFieldStatus | `(name: NamePath, status: FieldStatusData \| null) => void` | 动态设置字段状态和提示，传入 `null` 清除；仅 `blocking: true` 的 error 会阻止提交 |
57
+ | getFieldValue | `(name: Name) => StoreValue` | 获取字段值 |
58
+ | submit | `() => Promise<ValidateMessage[]>` | 提交表单（异步，校验完成后才触发 onFinish） |
59
+ | getFieldsValue | `() => Values` | 获取所有字段值 |
60
+ | setFieldsValue | `(newStore: Store, trigger?: TRIGGER) => void` | 设置字段值 |
61
+ | setCallbacks | `(callbacks: Callbacks) => void` | 设置回调 |
62
+ | resetFields | `(name?: Name[]) => void` | 重置字段（值与校验状态；指定 name 时只影响相关字段） |
63
+ | clearFields | `(name?: Name[]) => void` | 清空字段（值与校验状态；指定 name 时只影响相关字段） |
64
+ | validateField | `(name: Name, trigger?: 'onChange' \| 'onBlur') => Promise<ValidateMessage[]>` | 校验单个字段 |
65
+ | validateFields | `(names?: Name[], trigger?: TRIGGER) => Promise<ValidateMessage[]>` | 校验多个字段 |
66
+ | getCallbacks | `() => Callbacks` | 获取回调 |
67
+ | registerFieldEntities | `(entity: FieldEntity) => void` | 注册字段实体 |
68
+ | initialize | `({ initialValues, callbacks }: { initialValues?: Store; callbacks?: Callbacks }) => void` | 初始化表单 |
69
+ | getListFields | `(name: NamePath) => FormListField[]` | 获取列表字段 |
70
+ | getListOperations | `(name: NamePath) => FormListOperation` | 获取列表操作 |
71
+ | subscribe | `(namePath?: NamePath, callback?: () => void) => () => void` | 订阅字段值变化，不传 namePath 监听所有字段 |
69
72
 
70
73
  ### Form 静态方法
71
74
 
72
- | 方法名 | 类型 | 描述 |
73
- | ------------- | -------------------------------------------------------------- | -------------------------------------------- |
74
- | Form.useForm | `(form?: FormInstance) => [FormInstance]` | 创建 Form 实例，传入外部 form 可受控使用 |
75
- | Form.useWatch | `(namePath?: NamePath, form?: FormInstance) => T \| undefined` | 监听表单字段值变化，不传 namePath 返回所有值 |
76
- | Form.useFormInstance | `() => FormInstance` | 获取当前上下文中最近的 Form 实例，须在 `<Form>` 内调用 |
75
+ | 方法名 | 类型 | 描述 |
76
+ | -------------------- | -------------------------------------------------------------- | ------------------------------------------------------ |
77
+ | Form.useForm | `(form?: FormInstance) => [FormInstance]` | 创建 Form 实例，传入外部 form 可受控使用 |
78
+ | Form.useWatch | `(namePath?: NamePath, form?: FormInstance) => T \| undefined` | 监听表单字段值变化，不传 namePath 返回所有值 |
79
+ | Form.useFormInstance | `() => FormInstance` | 获取当前上下文中最近的 Form 实例，须在 `<Form>` 内调用 |
77
80
 
78
81
  ### Field.GroupProps
79
82
 
@@ -89,36 +92,36 @@ toc: 'content'
89
92
 
90
93
  ### FieldProps
91
94
 
92
- | 属性名 | 类型 | 描述 | 默认值 |
93
- | ------------- | -------------------- | -------------------- | --------- |
94
- | className | `string` | 自定义字段根类名 | - |
95
- | style | `React.CSSProperties` | 自定义字段根样式 | - |
96
- | classNames | `Partial<Record<'label' \| 'control', string>>` | 语义化结构类名 | - |
97
- | styles | `Partial<Record<'label' \| 'control', React.CSSProperties>>` | 语义化结构样式 | - |
98
- | children | `React.ReactElement` | 子元素 | - |
99
- | name | `NamePath` | 字段名 | - |
100
- | rules | [Rule\[\]](#rule) | 校验规则 | - |
101
- | label | `React.ReactNode` | 标签 | - |
95
+ | 属性名 | 类型 | 描述 | 默认值 |
96
+ | ------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------- |
97
+ | className | `string` | 自定义字段根类名 | - |
98
+ | style | `React.CSSProperties` | 自定义字段根样式 | - |
99
+ | classNames | `Partial<Record<'label' \| 'control', string>>` | 语义化结构类名 | - |
100
+ | styles | `Partial<Record<'label' \| 'control', React.CSSProperties>>` | 语义化结构样式 | - |
101
+ | children | `React.ReactElement` | 子元素 | - |
102
+ | name | `NamePath` | 字段名 | - |
103
+ | rules | [Rule\[\]](#rule) | 校验规则 | - |
104
+ | label | `React.ReactNode` | 标签 | - |
102
105
  | tooltip | `ReactNode \| (Omit<TooltipProps, 'children'> & { icon?: ReactNode })` | 标签旁的帮助提示。传字符串/节点使用默认图标；传对象时可自定义 `icon`，其余属性透传给 Tooltip（`title`、`color`、`placement` 等） | - |
103
- | required | `boolean` | 是否必填 | - |
104
- | disabled | `boolean` | 是否禁用 | - |
105
- | initialValue | `unknown` | 初始值 | - |
106
- | valuePropName | `string` | 设置子组件值的属性名 | `'value'` |
106
+ | required | `boolean` | 是否必填 | - |
107
+ | disabled | `boolean` | 是否禁用 | - |
108
+ | initialValue | `unknown` | 初始值 | - |
109
+ | valuePropName | `string` | 设置子组件值的属性名 | `'value'` |
107
110
 
108
111
  ### Rule
109
112
 
110
- | 属性名 | 类型 | 描述 |
111
- | --------------- | ------------------------------------------------------------------------------------- | -------------- |
112
- | required | `boolean` | 是否必填 |
113
- | type | `string` | 类型 |
114
- | min | `number` | 最小值 |
115
- | max | `number` | 最大值 |
116
- | minLength | `number` | 最小长度 |
117
- | maxLength | `number` | 最大长度 |
118
- | regexp | `RegExp` | 正则表达式 |
119
- | message | `string` | 错误信息 |
120
- | validator | `(value: unknown) => boolean \| void \| Promise<boolean \| void>` | 自定义校验函数，支持同步与异步。同步返回 `false` 或 `throw` 表示失败；异步 `resolve(false)`/`reject`/`throw` 表示失败。`throw`/`reject` 时 `error.message` 覆盖 `message` |
121
- | validateTrigger | `'onBlur' \| 'onChange' \| 'onSubmit' \| Array<'onBlur' \| 'onChange' \| 'onSubmit'>` | 校验触发时机 |
113
+ | 属性名 | 类型 | 描述 |
114
+ | --------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
115
+ | required | `boolean` | 是否必填 |
116
+ | type | `string` | 类型 |
117
+ | min | `number` | 最小值 |
118
+ | max | `number` | 最大值 |
119
+ | minLength | `number` | 最小长度 |
120
+ | maxLength | `number` | 最大长度 |
121
+ | regexp | `RegExp` | 正则表达式 |
122
+ | message | `string` | 错误信息 |
123
+ | validator | `(value: unknown) => boolean \| void \| Promise<boolean \| void>` | 自定义校验函数，支持同步与异步。同步返回 `false` 或 `throw` 表示失败；异步 `resolve(false)`/`reject`/`throw` 表示失败。`throw`/`reject` 时 `error.message` 覆盖 `message` |
124
+ | validateTrigger | `'onBlur' \| 'onChange' \| 'onSubmit' \| Array<'onBlur' \| 'onChange' \| 'onSubmit'>` | 校验触发时机 |
122
125
 
123
126
  ### Types
124
127
 
@@ -128,6 +131,8 @@ toc: 'content'
128
131
  | Store | `Record<string, StoreValue>` |
129
132
  | Name | `string` |
130
133
  | NamePath | `string \| string[] \| number \| (string \| number)[]` |
134
+ | FieldStatus | `'error' \| 'success' \| 'warning' \| 'info'` |
135
+ | FieldStatusData | `{ status: FieldStatus; message?: string; blocking?: boolean }` |
131
136
  | ValidateMessage | `{ name: NamePath \| NamePath[] \| undefined; message: string; value: unknown; status: 'error' \| 'success' \| 'warning' \| 'info' }` |
132
137
  | FieldEntity | `{ props: fieldProps & { name?: NamePath }; onStoreChange: () => void }` |
133
138
  | TRIGGER | `'onChange' \| 'onBlur' \| 'onSubmit' \| 'reset' \| 'clear' \| 'update'` |
package/src/Form/interface.ts CHANGED
@@ -2,6 +2,11 @@ import type { TooltipProps } from '../Tooltip';
2
2
  import type { DataAttributeProps } from '../utils/types';
3
3
 
4
4
  export type StoreValue = any;
5
+ /**
6
+ * Form values keyed by field name. Nested-path fields (e.g.
7
+ * name="user.name") hold their values in nested objects:
8
+ * `{ user: { name: 'tom' } }`
9
+ */
5
10
  export type Store = Record<string, StoreValue>;
6
11
  export type Name = string;
7
12
  export type NamePath = string | string[] | number | (string | number)[];
@@ -41,7 +46,9 @@ export interface FormProps<Values = any> extends DataAttributeProps {
41
46
  */
42
47
  disabled?: boolean;
43
48
  /**
44
- * Initial values
49
+ * Initial values, keyed by field name. Nested-path fields (e.g.
50
+ * name="user.name") take their values from nested objects:
51
+ * `{ user: { name: 'tom' } }`
45
52
  */
46
53
  initialValues?: Store;
47
54
  /**
@@ -90,7 +97,7 @@ export interface Callbacks<Values = any> {
90
97
  /**
91
98
  * Triggered on failed form submit
92
99
  * */
93
- onFinishFailed?: (err: Values) => void;
100
+ onFinishFailed?: (errors: ValidateMessage[]) => void;
94
101
  /**
95
102
  * Triggered on form reset
96
103
  * */
@@ -106,6 +113,15 @@ export interface FormInstance<Values = any> {
106
113
  * Get field validation info
107
114
  */
108
115
  getFieldValidate: (name: Name) => ValidateMessage | null;
116
+ /**
117
+ * Get the displayed field status. Rule validation errors take display
118
+ * precedence; otherwise a manually set status overrides validation.
119
+ */
120
+ getFieldStatus: (name: NamePath) => FieldStatusData | null;
121
+ /**
122
+ * Set or clear a field's displayed status. Pass null to clear it.
123
+ */
124
+ setFieldStatus: (name: NamePath, status: FieldStatusData | null) => void;
109
125
  /**
110
126
  * Get field value
111
127
  */
@@ -253,11 +269,20 @@ export type Rule = {
253
269
  | Array<'onBlur' | 'onChange' | 'onSubmit'>;
254
270
  };
255
271
 
272
+ export type FieldStatus = 'error' | 'success' | 'warning' | 'info';
273
+
274
+ export type FieldStatusData = {
275
+ status: FieldStatus;
276
+ message?: string;
277
+ /** Whether an error status should prevent form submission. */
278
+ blocking?: boolean;
279
+ };
280
+
256
281
  export type ValidateMessage = {
257
282
  name: NamePath | NamePath[] | undefined;
258
283
  message: string;
259
284
  value: unknown;
260
- status: 'error' | 'success' | 'warning' | 'info';
285
+ status: FieldStatus;
261
286
  };
262
287
 
263
288
  export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
package/src/Form/style/index.less CHANGED
@@ -79,6 +79,18 @@
79
79
  &-error {
80
80
  color: var(--yee-error-color);
81
81
  }
82
+
83
+ &-warning {
84
+ color: var(--yee-warning-color);
85
+ }
86
+
87
+ &-success {
88
+ color: var(--yee-success-color);
89
+ }
90
+
91
+ &-info {
92
+ color: var(--yee-info-color);
93
+ }
82
94
  }
83
95
 
84
96
  // 表单校验态：在此重定义控件读取的 border / box-shadow 变量，
@@ -97,5 +109,19 @@
97
109
  --yee-input-focus-bs-color: var(--yee-warning-color-border);
98
110
  --yee-checkbox-border-color: var(--yee-warning-color);
99
111
  }
112
+
113
+ &&-success {
114
+ --yee-input-border-color: var(--yee-success-color);
115
+ --yee-input-hover-border-color: var(--yee-success-color-hover);
116
+ --yee-input-focus-bs-color: var(--yee-success-color-border);
117
+ --yee-checkbox-border-color: var(--yee-success-color);
118
+ }
119
+
120
+ &&-info {
121
+ --yee-input-border-color: var(--yee-info-color);
122
+ --yee-input-hover-border-color: var(--yee-info-color-hover);
123
+ --yee-input-focus-bs-color: var(--yee-info-color-border);
124
+ --yee-checkbox-border-color: var(--yee-info-color);
125
+ }
100
126
  }
101
127
  }
package/src/Form/utils/path.ts CHANGED
@@ -62,7 +62,8 @@ export function setValueByPath(
62
62
 
63
63
  for (let i = 0; i < path.length - 1; i++) {
64
64
  const key = String(path[i]);
65
- if (!(key in current)) {
65
+ // eslint-disable-next-line eqeqeq
66
+ if (current[key] == null) {
66
67
  // 根据下一个键的类型创建容器
67
68
  current[key] = typeof path[i + 1] === 'number' ? [] : {};
68
69
  }
package/src/TreeSelect/tree-select.tsx CHANGED
@@ -78,6 +78,23 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
78
78
  [dataSource, mergedFieldNames],
79
79
  );
80
80
 
81
+ // itemMap 以 uid（Tree 内部的路径键）为键，仅根节点 uid === key。
82
+ // 选中项展示 / getNodes 需要按外部 value（raw key）查找，否则嵌套节点
83
+ // 查不到会走 Selector 的孤儿值回退，直接显示 value 本身
84
+ const keyItemMap = useMemo(() => {
85
+ const map = new Map<
86
+ string,
87
+ { key: string | number; label: string; original: T }
88
+ >();
89
+ itemMap.forEach((item) => {
90
+ const k = String(item.key);
91
+ if (!map.has(k)) {
92
+ map.set(k, item);
93
+ }
94
+ });
95
+ return map;
96
+ }, [itemMap]);
97
+
81
98
  // Filter data source for searching
82
99
  const filteredDataSource = useMemo(() => {
83
100
  const sourceArray = Array.isArray(dataSource) ? dataSource : [dataSource];
@@ -125,7 +142,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
125
142
  const selectedOptions = useMemo(() => {
126
143
  return mergedValue
127
144
  .map((key: string | number) => {
128
- const item = itemMap.get(key as string);
145
+ const item = keyItemMap.get(String(key));
129
146
  if (!item) return null;
130
147
 
131
148
  const label =
@@ -140,7 +157,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
140
157
  };
141
158
  })
142
159
  .filter(Boolean);
143
- }, [mergedValue, itemMap, optionLabelProp]);
160
+ }, [mergedValue, keyItemMap, optionLabelProp]);
144
161
 
145
162
  const getNodes = (keys: string | number | Array<string | number>) => {
146
163
  if (keys === '' || keys === null) {
@@ -151,10 +168,10 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
151
168
  return [];
152
169
  }
153
170
  return keys
154
- .map((key) => itemMap.get(key as string)?.original)
171
+ .map((key) => keyItemMap.get(String(key))?.original)
155
172
  .filter((node): node is T => node !== undefined);
156
173
  }
157
- return itemMap.get(keys as string)?.original;
174
+ return keyItemMap.get(String(keys))?.original;
158
175
  };
159
176
 
160
177
  const handleSelect = (selectedKeys: Array<string | number>) => {
package/src/version.ts CHANGED
@@ -4,7 +4,7 @@ declare global {
4
4
  }
5
5
  }
6
6
 
7
- export const version = "0.8.20";
7
+ export const version = "0.9.1";
8
8
 
9
9
  if (typeof window !== 'undefined') {
10
10
  window.__yee_c_version__ = version;