Merge pull request #105 from ant-design/feat/sortable-header

✨ feat: sortablelist support renderHeader"
ant-design · Nov 27, 2023 · 12444f5 · 12444f5
2 parents 172b64d + 5ac850b
commit 12444f5
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 248 deletions.
diff --git a/package.json b/package.json
@@ -60,17 +60,17 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@ant-design/pro-components": "^2.6.18",
+    "@ant-design/pro-components": "^2.6.43",
     "@antv/dw-random": "^1.1.7",
-    "@babel/runtime": "^7.22.15",
-    "@dnd-kit/core": "^6.0.8",
+    "@babel/runtime": "^7.23.4",
+    "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/utilities": "^3.2.1",
+    "@dnd-kit/utilities": "^3.2.2",
     "@faker-js/faker": "^7.6.0",
     "@floating-ui/react": "^0.24.8",
-    "@mui/material": "^5.14.9",
-    "@textea/json-viewer": "^3.1.1",
+    "@mui/material": "^5.14.18",
+    "@textea/json-viewer": "^3.2.3",
     "ahooks": "^3.7.8",
     "classnames": "^2.3.2",
     "color": "^4.2.3",
@@ -93,71 +93,71 @@
     "lodash.unionby": "^4.8.0",
     "lodash.uniq": "^4.5.0",
     "mockjs": "^1.1.0",
-    "nanoid": "^5.0.1",
+    "nanoid": "^5.0.3",
     "polished": "^4.2.2",
-    "prettier": "^2.7.1",
-    "rc-util": "^5.37.0",
+    "prettier": "^2.8.8",
+    "rc-util": "^5.38.1",
     "re-resizable": "^6.9.11",
     "react-colorful": "^5.6.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-hotkeys-hook": "^4.4.1",
-    "react-layout-kit": "^1.7.1",
-    "react-markdown": "^8.0.1",
+    "react-layout-kit": "^1.7.4",
+    "react-markdown": "^8.0.7",
     "react-rnd": "^10.4.1",
-    "reactflow": "^11.8.3",
-    "rehype-katex": "^6.0.0",
-    "remark-gfm": "^3.0.0",
-    "remark-math": "^5.0.0",
+    "reactflow": "^11.10.1",
+    "rehype-katex": "^6.0.3",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
     "rxjs": "^7.8.1",
-    "shikiji": "^0.6.12",
+    "shikiji": "^0.6.13",
     "type-fest": "^3.13.1",
     "umi-request": "^1.4.0",
     "use-merge-value": "^1.2.0",
-    "yjs": "^13.6.7",
-    "zustand": "^4.4.1",
+    "yjs": "^13.6.10",
+    "zustand": "^4.4.6",
     "zustand-middleware-yjs": "^1.3.1",
     "zustand-utils": "^1.3.1"
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
-    "@testing-library/jest-dom": "^6.1.3",
     "@lobehub/i18n-cli": "^1.15.0",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/color": "^3.0.4",
-    "@types/json-schema": "^7.0.13",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@umijs/lint": "^4.0.81",
+    "@types/color": "^3.0.6",
+    "@types/json-schema": "^7.0.15",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@umijs/lint": "^4.0.88",
     "@vitest/coverage-v8": "latest",
-    "antd": "^5.9.1",
-    "antd-style": "^3.4.6",
+    "antd": "^5.11.4",
+    "antd-style": "^3.5.2",
     "babel-plugin-antd-style": "^1.0.4",
-    "commitlint": "^17.7.1",
+    "commitlint": "^17.8.1",
     "commitlint-config-gitmoji": "^2.3.1",
     "conventional-changelog-gitmoji-config": "^1.5.2",
-    "dumi": "^2.2.7",
+    "dumi": "^2.2.14",
     "dumi-theme-antd-style": "latest",
-    "eslint": "^8.49.0",
-    "father": "^4.3.4",
+    "eslint": "^8.54.0",
+    "father": "^4.3.7",
     "gh-pages": "^5.0.0",
-    "glob": "^10.3.4",
+    "glob": "^10.3.10",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.3.0",
-    "prettier-plugin-organize-imports": "^3.2.3",
-    "prettier-plugin-packagejson": "^2.4.5",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-packagejson": "^2.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs-spy": "^8.0.2",
     "semantic-release": "^21.1.2",
     "semantic-release-config-gitmoji": "^1.5.3",
-    "stylelint": "^15.10.3",
-    "typescript": "^5.2.2",
+    "stylelint": "^15.11.0",
+    "typescript": "^5.3.2",
     "vitest": "latest",
     "wait-on": "^6.0.1",
-    "y-protocols": "^1.0.5",
-    "y-webrtc": "^10.2.5",
+    "y-protocols": "^1.0.6",
+    "y-webrtc": "^10.2.6",
     "y-websocket": "^1.5.0",
     "zundo": "beta"
   },

diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx
@@ -38,15 +38,13 @@ const ColumnList: <T>(props: ColumnListProps<T>) => ReturnType<FC> = forwardRef<
   );
 
   return (
-    <>
-      <Header prefixCls={prefixCls} columns={columns} />
-      <SortableList
-        ref={ref}
-        renderItem={renderItem}
-        className={cx(prefixCls, className)}
-        {...props}
-      />
-    </>
+    <SortableList
+      ref={ref}
+      renderItem={renderItem}
+      renderHeader={() => <Header prefixCls={prefixCls} columns={columns} />}
+      className={cx(prefixCls, className)}
+      {...props}
+    />
   );
 });
 

diff --git a/src/SortableList/container/App.tsx b/src/SortableList/container/App.tsx
@@ -35,6 +35,7 @@ const selector = (s: Store) => ({
   handleDragCancel: s.handleDragCancel,
   handleDragEnd: s.handleDragEnd,
   keyManager: s.keyManager,
+  renderHeader: s.renderHeader,
 });
 
 export interface AppProps {
@@ -53,7 +54,7 @@ export interface AppProps {
 }
 
 const App: FC<AppProps> = ({ className, style, prefixCls: customPrefixCls }) => {
-  const { handleDragStart, handleDragCancel, handleDragEnd, keyManager } = useStore(
+  const { handleDragStart, handleDragCancel, handleDragEnd, keyManager, renderHeader } = useStore(
     selector,
     shallow,
   );
@@ -85,6 +86,7 @@ const App: FC<AppProps> = ({ className, style, prefixCls: customPrefixCls }) =>
         modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}
       >
         <SortableContext items={keyManager} strategy={verticalListSortingStrategy}>
+          {renderHeader?.()}
           <SortList prefixCls={prefixCls} />
           {overlay}
         </SortableContext>

diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
@@ -16,6 +16,7 @@ const StoreUpdater = forwardRef(
       renderItem,
       renderContent,
       renderEmpty,
+      renderHeader,
       getItemStyles,
       creatorButtonProps,
       hideRemove,
@@ -50,6 +51,7 @@ const StoreUpdater = forwardRef(
     useStoreUpdater('renderItem', renderItem);
     useStoreUpdater('renderContent', renderContent);
     useStoreUpdater('renderEmpty', renderEmpty);
+    useStoreUpdater('renderHeader', renderHeader);
     useStoreUpdater('getItemStyles', getItemStyles);
     useStoreUpdater('creatorButtonProps', creatorButtonProps);
     useStoreUpdater('hideRemove', hideRemove);

diff --git a/src/SortableList/features/SortList.tsx b/src/SortableList/features/SortList.tsx
@@ -68,11 +68,9 @@ const SortableList: FC<SortableListProps> = ({ prefixCls }) => {
     renderEmpty ? (
       renderEmpty()
     ) : (
-      <>
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据">
-          {creatorButtonProps !== false ? <CreateButton empty={true} /> : null}
-        </Empty>
-      </>
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据">
+        {creatorButtonProps !== false ? <CreateButton empty={true} /> : null}
+      </Empty>
     )
   ) : (
     <>

diff --git a/src/SortableList/index.zh-CN.md b/src/SortableList/index.zh-CN.md
@@ -38,6 +38,8 @@ demo:
 | onChange           | `(value: T[], event: ListDataDispatchPayload) => void`           | 值变化                             |
 | renderContent      | `(item: T, index: number) => ReactNode`                          | 自定义可排序列表项内容             |
 | renderItem         | `(item: T, options) => ReactNode`                                | 自定义可排序列表项                 |
+| renderHeader       | `() => ReactNode`                                                | 自定义渲染表头                     |
+| renderEmpty        | `() => ReactNode`                                                | 自定义渲染空状态                   |
 | getItemStyle       | `(status: GetItemStylesArgs) => ReactNode`                       | 自定义容器样式                     |
 | ref                | `ForwardedRef<SortableListRef<T>>`                               | 对外部暴露方法                     |
 | hideRemove         | `boolean`                                                        | 是否隐藏删除按钮，默认为 false     |

diff --git a/src/SortableList/type/component.ts b/src/SortableList/type/component.ts
@@ -47,6 +47,8 @@ export type RenderContent<T = any> = (item: T, index: number) => React.ReactNode
 
 export type RenderEmpty = () => ReturnType<FC>;
 
+export type RenderHeader = () => ReturnType<FC>;
+
 export interface CreatorButtonProps {
   /**
    * 添加创建按钮的位置

diff --git a/src/SortableList/type/store.ts b/src/SortableList/type/store.ts
@@ -5,6 +5,7 @@ import type {
   RenderActionProps,
   RenderContent,
   RenderEmpty,
+  RenderHeader,
   RenderItem,
   SortableListDispatchPayload,
   UniqueIdentifier,
@@ -49,6 +50,10 @@ export interface SortableListState {
    * 渲染可排序项内容
    */
   renderContent?: RenderContent;
+  /**
+   * 渲染头部
+   */
+  renderHeader?: RenderHeader;
   /**
    * 新建对象相关属性
    */
@@ -97,6 +102,10 @@ export interface StoreUpdaterProps<T = any> {
    * 渲染空状态
    */
   renderEmpty?: RenderEmpty;
+  /**
+   * 渲染头部
+   */
+  renderHeader?: RenderHeader;
   /**
    * 新建对象相关属性
    */