✨ feat: SortableList support onChange event

ant-design · Jun 12, 2023 · 663846c · 663846c
1 parent 8e9a930
commit 663846c
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 10 deletions.
diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
@@ -3,7 +3,7 @@ import { ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 import { useSortableList } from '..';
 
-import { useStoreApi } from '../store';
+import { OnChange, useStoreApi } from '../store';
 
 import type { CreatorButtonProps, RenderActionProps, RenderItemProps } from '../type';
 
@@ -28,7 +28,7 @@ export interface StoreUpdaterProps<T = any> {
   /**
    * 值变化
    */
-  onChange?: (value: T[]) => void;
+  onChange?: OnChange;
   /**
    * 渲染内容区域
    */

diff --git a/src/SortableList/demos/normal.tsx b/src/SortableList/demos/normal.tsx
@@ -7,8 +7,8 @@ export default () => {
     <div style={{ width: 340, padding: '0 12px' }}>
       <SortableList<SchemaItem>
         initialValues={INIT_VALUES}
-        onChange={(data) => {
-          console.log('data', data);
+        onChange={(data, event) => {
+          console.log('data', data, event);
         }}
         renderContent={(item, index) => <ItemRender item={item} index={index} />}
       />

diff --git a/src/SortableList/index.md b/src/SortableList/index.md
@@ -72,6 +72,8 @@ group:
 
 ## API
 
+### Basic 组件属性
+
 | 属性名             | 类型                                                             | 描述                               |
 | ------------------ | ---------------------------------------------------------------- | ---------------------------------- |
 | value              | `T[]`                                                            | 值                                 |
@@ -85,13 +87,50 @@ group:
 | compact            | `boolean`                                                        | 紧凑模式, 默认为 false             |
 | hideRemove         | `boolean`                                                        | 是否隐藏删除按钮，默认为 false     |
 
-### CreatorButtonProps
-
-创建按钮组件的属性
+### CreatorButtonProps 创建按钮属性
 
 | 属性名            | 类型                                     | 描述                       |
 | ----------------- | ---------------------------------------- | -------------------------- |
 | showInList        | `boolean`                                | 列表有值时是否展示添加按钮 |
 | showInEmpty       | `boolean`                                | 空数据时是否展示添加按钮   |
 | record            | `(index: number) => Record<string, any>` | 生成初始值逻辑             |
 | creatorButtonText | `string`                                 | 新增一行按钮文案           |
+
+### Actions
+
+通过 `ref` 你可以控制列表的增删改查和移动。
+
+```jsx | pure
+// 新增节点
+interface AddItemAction {
+  type: 'addItem';
+  item: any;
+  index?: number;
+}
+
+// 移动节点
+interface MoveItemAction {
+  type: 'moveItem';
+  /**
+   * 当前节点id
+   */
+  activeId: UniqueIdentifier;
+  /**
+   * 目标节点id
+   */
+  targetId: UniqueIdentifier;
+}
+
+// 移除节点
+interface RemoveItemAction {
+  type: 'removeItem';
+  index: number;
+}
+
+// 修改节点content内容
+interface UpdateItemAction {
+  type: 'updateItem';
+  index: number;
+  item: any;
+}
+```
diff --git a/src/SortableList/store/index.ts b/src/SortableList/store/index.ts
@@ -11,6 +11,6 @@ const createStore = (showDevTools: boolean) =>
 const { useStore, useStoreApi, Provider } = createContext<StoreApi<Store>>();
 
 // ========= 导出 ========= //
-export type { State } from './initialState';
+export type { OnChange, State } from './initialState';
 export type { Store } from './store';
 export { createStore, useStore, Provider, useStoreApi };
diff --git a/src/SortableList/store/initialState.ts b/src/SortableList/store/initialState.ts
@@ -5,12 +5,15 @@ import type {
   RenderItemProps,
   UniqueIdentifier,
 } from '../type';
+import { ListDataDispatchPayload } from './listDataReducer';
+
+export type OnChange<T = any> = (values: T[], event: ListDataDispatchPayload) => void;
 
 export interface State<T = any> {
   /*
    * 值变化
    */
-  onChange?: (values: T[]) => void;
+  onChange?: OnChange;
   /**
    * 删除回调
    */

diff --git a/src/SortableList/store/store.ts b/src/SortableList/store/store.ts
@@ -45,7 +45,7 @@ const vanillaStore: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     if (data) {
       if (isEqual(value, data)) return;
       set({ value: data });
-      if (onChange) onChange(data);
+      if (onChange) onChange(data, payload);
     }
     if (manager) {
       set({ keyManager: manager });