♻️ refactor: 重构 store

packages/sortable-list/src/store/index.test.ts

@@ -0,0 +1,79 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import { createStore } from './index';
+
+const useStore = createStore();
+describe('useStore', () => {
+  it('默认值', () => {
+    const { result } = renderHook(() => useStore());
+
+    expect(result.current.data).toEqual([]);
+  });
+
+  describe('updateTableStore', () => {
+    describe('添加item', () => {
+      it('基础添加', () => {
+        const { result } = renderHook(() => useStore());
+
+        act(() => {
+          result.current.addItem({ id: '333' });
+        });
+
+        expect(result.current.data).toEqual([{ id: '333' }]);
+      });
+
+      it('携带索引的添加', () => {
+        const { result } = renderHook(() => useStore());
+
+        act(() => {
+          result.current.internalUpdateData([
+            { id: '1' },
+            { id: '2' },
+            { id: '3' },
+          ]);
+
+          result.current.addItem({ id: '4' }, 0);
+        });
+
+        expect(result.current.data).toEqual([
+          { id: '4' },
+          { id: '1' },
+          { id: '2' },
+          { id: '3' },
+        ]);
+      });
+    });
+    it('删除item', () => {
+      const { result } = renderHook(() => useStore());
+
+      act(() => {
+        result.current.internalUpdateData([
+          { id: '1' },
+          { id: '2' },
+          { id: '3' },
+        ]);
+        result.current.removeItem('2');
+      });
+
+      expect(result.current.data).toEqual([{ id: '1' }, { id: '3' }]);
+    });
+    it('重排序item', () => {
+      const { result } = renderHook(() => useStore());
+
+      act(() => {
+        result.current.internalUpdateData([
+          { id: '1' },
+          { id: '2' },
+          { id: '3' },
+        ]);
+        result.current.reorder(2, 0);
+      });
+
+      expect(result.current.data).toEqual([
+        { id: '3' },
+        { id: '1' },
+        { id: '2' },
+      ]);
+    });
+  });
+});

packages/sortable-list/src/store/index.ts

@@ -0,0 +1,70 @@
+import create from 'zustand';
+import createContext from 'zustand/context';
+
+import { arrayMove } from '@dnd-kit/sortable';
+import produce from 'immer';
+import initialState from './initialState';
+import type { SortableListStore } from '../types';
+
+const createStore = () =>
+  create<SortableListStore>((set, get) => ({
+    // 内部值
+    ...initialState,
+    activateItem: (id) => {
+      set({ activeId: id });
+    },
+    deactivateItem: () => {
+      set({ activeId: null });
+    },
+    // 内部更新 data 方法
+    internalUpdateData: (data) => {
+      const { onDataChange } = get();
+      set({ data });
+
+      if (onDataChange) {
+        onDataChange(data);
+      }
+    },
+
+    syncOutsideData: (data) => {
+      set({ data });
+    },
+
+    // 重新排序
+    reorder: (startIndex, endIndex) => {
+      const { data, internalUpdateData } = get();
+      const nextData = produce(data, (state) => {
+        if (startIndex !== endIndex) {
+          return arrayMove(state, startIndex, endIndex);
+        }
+
+        return state;
+      });
+
+      internalUpdateData(nextData);
+    },
+    // 添加元素
+    addItem: (item, addIndex) => {
+      const { data, internalUpdateData } = get();
+      const nextData = produce(data, (state) => {
+        if (typeof addIndex !== 'number') {
+          // 如果没有提供添加位的 index 值,默认添加在最后
+          state.push(item);
+        }
+
+        state.splice(addIndex, 0, item);
+      });
+
+      internalUpdateData(nextData);
+    },
+    removeItem: (id) => {
+      const { data, internalUpdateData } = get();
+      const nextData = data.filter((item) => item.id !== id);
+
+      internalUpdateData(nextData);
+    },
+  }));
+
+const { Provider, useStore, useStoreApi } = createContext<SortableListStore>();
+
+export { Provider, useStore, createStore, useStoreApi };

packages/sortable-list/src/store/initialState.ts

@@ -0,0 +1,9 @@
+import type { SortableListState } from '../types';
+
+const initialState: SortableListState = {
+  data: [],
+  onDataChange: null,
+  activeId: null,
+};
+
+export default initialState;

packages/sortable-list/src/store/utils.test.ts

@@ -0,0 +1,15 @@
+import { getIndexOfActiveItem } from './utils';
+
+const list = [{ id: '123' }, { id: '3245' }];
+
+describe('getIndexOfActiveItem', () => {
+  it('找到 index', () => {
+    const index = getIndexOfActiveItem(list, '123');
+    expect(index).toEqual(0);
+  });
+  it('没找到 index', () => {
+    const index = getIndexOfActiveItem(list, '135');
+
+    expect(index).toEqual(-1);
+  });
+});

packages/sortable-list/src/utils.ts → packages/sortable-list/src/store/utils.ts

@@ -1,4 +1,4 @@
-import type { SortableItemList } from './types';
+import type { SortableItemList } from '../types';
 
 export const getIndexOfActiveItem = <
   T extends SortableItemList = SortableItemList,

packages/sortable-list/src/types/common.ts

@@ -3,7 +3,7 @@ import type {
   UniqueIdentifier,
 } from '@dnd-kit/core';
 import type { CSSProperties, ReactElement, Ref } from 'react';
-import type { SortableItem } from './data';
+import type { SortableItem } from './store';
 
 export type RenderItem<T = SortableItem> = (
   item: T,