Skip to content

Commit 12444f5

Browse files
ONLY-yoursONLY-yours
authored
Merge pull request #105 from ant-design/feat/sortable-header
✨ feat: sortablelist support renderHeader"
2 parents 172b64d + 5ac850b commit 12444f5

9 files changed

Lines changed: 261 additions & 248 deletions

File tree

‎package.json‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -60,17 +60,17 @@
6060
},
6161
"dependencies": {
6262
"@ant-design/icons": "^5.2.6",
63-
"@ant-design/pro-components": "^2.6.18",
63+
"@ant-design/pro-components": "^2.6.43",
6464
"@antv/dw-random": "^1.1.7",
65-
"@babel/runtime": "^7.22.15",
66-
"@dnd-kit/core": "^6.0.8",
65+
"@babel/runtime": "^7.23.4",
66+
"@dnd-kit/core": "^6.1.0",
6767
"@dnd-kit/modifiers": "^6.0.1",
6868
"@dnd-kit/sortable": "^7.0.2",
69-
"@dnd-kit/utilities": "^3.2.1",
69+
"@dnd-kit/utilities": "^3.2.2",
7070
"@faker-js/faker": "^7.6.0",
7171
"@floating-ui/react": "^0.24.8",
72-
"@mui/material": "^5.14.9",
73-
"@textea/json-viewer": "^3.1.1",
72+
"@mui/material": "^5.14.18",
73+
"@textea/json-viewer": "^3.2.3",
7474
"ahooks": "^3.7.8",
7575
"classnames": "^2.3.2",
7676
"color": "^4.2.3",
@@ -93,71 +93,71 @@
9393
"lodash.unionby": "^4.8.0",
9494
"lodash.uniq": "^4.5.0",
9595
"mockjs": "^1.1.0",
96-
"nanoid": "^5.0.1",
96+
"nanoid": "^5.0.3",
9797
"polished": "^4.2.2",
98-
"prettier": "^2.7.1",
99-
"rc-util": "^5.37.0",
98+
"prettier": "^2.8.8",
99+
"rc-util": "^5.38.1",
100100
"re-resizable": "^6.9.11",
101101
"react-colorful": "^5.6.1",
102102
"react-copy-to-clipboard": "^5.1.0",
103103
"react-hotkeys-hook": "^4.4.1",
104-
"react-layout-kit": "^1.7.1",
105-
"react-markdown": "^8.0.1",
104+
"react-layout-kit": "^1.7.4",
105+
"react-markdown": "^8.0.7",
106106
"react-rnd": "^10.4.1",
107-
"reactflow": "^11.8.3",
108-
"rehype-katex": "^6.0.0",
109-
"remark-gfm": "^3.0.0",
110-
"remark-math": "^5.0.0",
107+
"reactflow": "^11.10.1",
108+
"rehype-katex": "^6.0.3",
109+
"remark-gfm": "^3.0.1",
110+
"remark-math": "^5.1.1",
111111
"rxjs": "^7.8.1",
112-
"shikiji": "^0.6.12",
112+
"shikiji": "^0.6.13",
113113
"type-fest": "^3.13.1",
114114
"umi-request": "^1.4.0",
115115
"use-merge-value": "^1.2.0",
116-
"yjs": "^13.6.7",
117-
"zustand": "^4.4.1",
116+
"yjs": "^13.6.10",
117+
"zustand": "^4.4.6",
118118
"zustand-middleware-yjs": "^1.3.1",
119119
"zustand-utils": "^1.3.1"
120120
},
121121
"devDependencies": {
122122
"@emotion/jest": "^11.11.0",
123-
"@testing-library/jest-dom": "^6.1.3",
124123
"@lobehub/i18n-cli": "^1.15.0",
124+
"@testing-library/jest-dom": "^6.1.4",
125125
"@testing-library/react": "^13.4.0",
126126
"@testing-library/user-event": "^14.5.1",
127-
"@types/color": "^3.0.4",
128-
"@types/json-schema": "^7.0.13",
129-
"@types/react": "^18.2.21",
130-
"@types/react-dom": "^18.2.7",
131-
"@umijs/lint": "^4.0.81",
127+
"@types/color": "^3.0.6",
128+
"@types/json-schema": "^7.0.15",
129+
"@types/react": "^18.2.38",
130+
"@types/react-dom": "^18.2.17",
131+
"@umijs/lint": "^4.0.88",
132132
"@vitest/coverage-v8": "latest",
133-
"antd": "^5.9.1",
134-
"antd-style": "^3.4.6",
133+
"antd": "^5.11.4",
134+
"antd-style": "^3.5.2",
135135
"babel-plugin-antd-style": "^1.0.4",
136-
"commitlint": "^17.7.1",
136+
"commitlint": "^17.8.1",
137137
"commitlint-config-gitmoji": "^2.3.1",
138138
"conventional-changelog-gitmoji-config": "^1.5.2",
139-
"dumi": "^2.2.7",
139+
"dumi": "^2.2.14",
140140
"dumi-theme-antd-style": "latest",
141-
"eslint": "^8.49.0",
142-
"father": "^4.3.4",
141+
"eslint": "^8.54.0",
142+
"father": "^4.3.7",
143143
"gh-pages": "^5.0.0",
144-
"glob": "^10.3.4",
144+
"glob": "^10.3.10",
145145
"husky": "^8.0.3",
146146
"jsdom": "^22.1.0",
147147
"lint-staged": "^13.3.0",
148-
"prettier-plugin-organize-imports": "^3.2.3",
149-
"prettier-plugin-packagejson": "^2.4.5",
148+
"prettier-plugin-organize-imports": "^3.2.4",
149+
"prettier-plugin-packagejson": "^2.4.6",
150150
"react": "^18.2.0",
151151
"react-dom": "^18.2.0",
152152
"rxjs-spy": "^8.0.2",
153153
"semantic-release": "^21.1.2",
154154
"semantic-release-config-gitmoji": "^1.5.3",
155-
"stylelint": "^15.10.3",
156-
"typescript": "^5.2.2",
155+
"stylelint": "^15.11.0",
156+
"typescript": "^5.3.2",
157157
"vitest": "latest",
158158
"wait-on": "^6.0.1",
159-
"y-protocols": "^1.0.5",
160-
"y-webrtc": "^10.2.5",
159+
"y-protocols": "^1.0.6",
160+
"y-webrtc": "^10.2.6",
161161
"y-websocket": "^1.5.0",
162162
"zundo": "beta"
163163
},

‎src/ColumnList/ColumnList.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,13 @@ const ColumnList: <T>(props: ColumnListProps<T>) => ReturnType<FC> = forwardRef<
3838
);
3939

4040
return (
41-
<>
42-
<Header prefixCls={prefixCls} columns={columns} />
43-
<SortableList
44-
ref={ref}
45-
renderItem={renderItem}
46-
className={cx(prefixCls, className)}
47-
{...props}
48-
/>
49-
</>
41+
<SortableList
42+
ref={ref}
43+
renderItem={renderItem}
44+
renderHeader={() => <Header prefixCls={prefixCls} columns={columns} />}
45+
className={cx(prefixCls, className)}
46+
{...props}
47+
/>
5048
);
5149
});
5250

‎src/SortableList/container/App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const selector = (s: Store) => ({
3535
handleDragCancel: s.handleDragCancel,
3636
handleDragEnd: s.handleDragEnd,
3737
keyManager: s.keyManager,
38+
renderHeader: s.renderHeader,
3839
});
3940

4041
export interface AppProps {
@@ -53,7 +54,7 @@ export interface AppProps {
5354
}
5455

5556
const App: FC<AppProps> = ({ className, style, prefixCls: customPrefixCls }) => {
56-
const { handleDragStart, handleDragCancel, handleDragEnd, keyManager } = useStore(
57+
const { handleDragStart, handleDragCancel, handleDragEnd, keyManager, renderHeader } = useStore(
5758
selector,
5859
shallow,
5960
);
@@ -85,6 +86,7 @@ const App: FC<AppProps> = ({ className, style, prefixCls: customPrefixCls }) =>
8586
modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}
8687
>
8788
<SortableContext items={keyManager} strategy={verticalListSortingStrategy}>
89+
{renderHeader?.()}
8890
<SortList prefixCls={prefixCls} />
8991
{overlay}
9092
</SortableContext>

‎src/SortableList/container/StoreUpdater.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const StoreUpdater = forwardRef(
1616
renderItem,
1717
renderContent,
1818
renderEmpty,
19+
renderHeader,
1920
getItemStyles,
2021
creatorButtonProps,
2122
hideRemove,
@@ -50,6 +51,7 @@ const StoreUpdater = forwardRef(
5051
useStoreUpdater('renderItem', renderItem);
5152
useStoreUpdater('renderContent', renderContent);
5253
useStoreUpdater('renderEmpty', renderEmpty);
54+
useStoreUpdater('renderHeader', renderHeader);
5355
useStoreUpdater('getItemStyles', getItemStyles);
5456
useStoreUpdater('creatorButtonProps', creatorButtonProps);
5557
useStoreUpdater('hideRemove', hideRemove);

‎src/SortableList/features/SortList.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,9 @@ const SortableList: FC<SortableListProps> = ({ prefixCls }) => {
6868
renderEmpty ? (
6969
renderEmpty()
7070
) : (
71-
<>
72-
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据">
73-
{creatorButtonProps !== false ? <CreateButton empty={true} /> : null}
74-
</Empty>
75-
</>
71+
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据">
72+
{creatorButtonProps !== false ? <CreateButton empty={true} /> : null}
73+
</Empty>
7674
)
7775
) : (
7876
<>

‎src/SortableList/index.zh-CN.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ demo:
3838
| onChange | `(value: T[], event: ListDataDispatchPayload) => void` | 值变化 |
3939
| renderContent | `(item: T, index: number) => ReactNode` | 自定义可排序列表项内容 |
4040
| renderItem | `(item: T, options) => ReactNode` | 自定义可排序列表项 |
41+
| renderHeader | `() => ReactNode` | 自定义渲染表头 |
42+
| renderEmpty | `() => ReactNode` | 自定义渲染空状态 |
4143
| getItemStyle | `(status: GetItemStylesArgs) => ReactNode` | 自定义容器样式 |
4244
| ref | `ForwardedRef<SortableListRef<T>>` | 对外部暴露方法 |
4345
| hideRemove | `boolean` | 是否隐藏删除按钮，默认为 false |

‎src/SortableList/type/component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ export type RenderContent<T = any> = (item: T, index: number) => React.ReactNode
4747

4848
export type RenderEmpty = () => ReturnType<FC>;
4949

50+
export type RenderHeader = () => ReturnType<FC>;
51+
5052
export interface CreatorButtonProps {
5153
/**
5254
* 添加创建按钮的位置

‎src/SortableList/type/store.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
RenderActionProps,
66
RenderContent,
77
RenderEmpty,
8+
RenderHeader,
89
RenderItem,
910
SortableListDispatchPayload,
1011
UniqueIdentifier,
@@ -49,6 +50,10 @@ export interface SortableListState {
4950
* 渲染可排序项内容
5051
*/
5152
renderContent?: RenderContent;
53+
/**
54+
* 渲染头部
55+
*/
56+
renderHeader?: RenderHeader;
5257
/**
5358
* 新建对象相关属性
5459
*/
@@ -97,6 +102,10 @@ export interface StoreUpdaterProps<T = any> {
97102
* 渲染空状态
98103
*/
99104
renderEmpty?: RenderEmpty;
105+
/**
106+
* 渲染头部
107+
*/
108+
renderHeader?: RenderHeader;
100109
/**
101110
* 新建对象相关属性
102111
*/

0 commit comments

Comments
 (0)