From 53d75fdfde4f4dd6ef5d4a1a0c9052a3212757b0 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Mon, 27 Nov 2023 16:39:13 +0800 Subject: [PATCH 1/3] :sparkles: feat: sortablelist support renderHeader" sortablelist support renderHeader --- src/ColumnList/ColumnList.tsx | 16 +++++++--------- src/SortableList/container/App.tsx | 4 +++- src/SortableList/container/StoreUpdater.tsx | 2 ++ src/SortableList/features/SortList.tsx | 8 +++----- src/SortableList/index.zh-CN.md | 2 ++ src/SortableList/type/component.ts | 2 ++ src/SortableList/type/store.ts | 9 +++++++++ 7 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx index 1708541e..b8dfc24d 100644 --- a/src/ColumnList/ColumnList.tsx +++ b/src/ColumnList/ColumnList.tsx @@ -38,15 +38,13 @@ const ColumnList: (props: ColumnListProps) => ReturnType = forwardRef< ); return ( - <> -
- - +
} + className={cx(prefixCls, className)} + {...props} + /> ); }); diff --git a/src/SortableList/container/App.tsx b/src/SortableList/container/App.tsx index fd610352..1ac4d2ae 100644 --- 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 = ({ 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 = ({ className, style, prefixCls: customPrefixCls }) => modifiers={[restrictToVerticalAxis, restrictToWindowEdges]} > + {renderHeader?.()} {overlay} diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx index 7f40d2b1..1f40ee2c 100644 --- 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 index 31912e6f..5936dff9 100644 --- a/src/SortableList/features/SortList.tsx +++ b/src/SortableList/features/SortList.tsx @@ -68,11 +68,9 @@ const SortableList: FC = ({ prefixCls }) => { renderEmpty ? ( renderEmpty() ) : ( - <> - - {creatorButtonProps !== false ? : null} - - + + {creatorButtonProps !== false ? : null} + ) ) : ( <> diff --git a/src/SortableList/index.zh-CN.md b/src/SortableList/index.zh-CN.md index ef93a586..f448cfa0 100644 --- 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>` | 对外部暴露方法 | | hideRemove | `boolean` | 是否隐藏删除按钮，默认为 false | diff --git a/src/SortableList/type/component.ts b/src/SortableList/type/component.ts index 8dd8b1d4..e925453a 100644 --- a/src/SortableList/type/component.ts +++ b/src/SortableList/type/component.ts @@ -47,6 +47,8 @@ export type RenderContent = (item: T, index: number) => React.ReactNode export type RenderEmpty = () => ReturnType; +export type RenderHeader = () => ReturnType; + export interface CreatorButtonProps { /** * 添加创建按钮的位置 diff --git a/src/SortableList/type/store.ts b/src/SortableList/type/store.ts index c3c8400a..aa7de5d4 100644 --- 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 { * 渲染空状态 */ renderEmpty?: RenderEmpty; + /** + * 渲染头部 + */ + renderHeader?: RenderHeader; /** * 新建对象相关属性 */ From d5142b5dce57f986261d7e08b2faf06f7296cddb Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Mon, 27 Nov 2023 16:48:00 +0800 Subject: [PATCH 2/3] :camera_flash: chore: update snapshot --- tests/__snapshots__/demo.test.tsx.snap | 394 ++++++++++++------------- 1 file changed, 197 insertions(+), 197 deletions(-) diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index c352813f..b5286c96 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -2359,6 +2359,16 @@ exports[` > renders expand.tsx correctly 1`] = ` exports[` > renders actions.tsx correctly 1`] = ` .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2373,7 +2383,7 @@ exports[` > renders actions.tsx correctly 1`] = ` gap: 4px; } -.emotion-1 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -2386,16 +2396,6 @@ exports[` > renders actions.tsx correctly 1`] = ` padding-left: 8px; } -.emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - .emotion-5 { list-style: none; display: grid; @@ -2640,27 +2640,27 @@ exports[` > renders actions.tsx correctly 1`] = `
- 列标题 -
-
- 值类型 -
-
- 字段 +
+ 列标题 +
+
+ 值类型 +
+
+ 字段 +
-
-