diff --git a/package.json b/package.json index 478476b4..7be4cb8f 100644 --- 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 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; /** * 新建对象相关属性 */ diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index c352813f..2c269dd6 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`] = `
- 列标题 -
-
- 值类型 -
-
- 字段 +
+ 列标题 +
+
+ 值类型 +
+
+ 字段 +
-
-
    > renders actions.tsx correctly 1`] = ` exports[` > renders column.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; @@ -3457,7 +3467,7 @@ exports[` > renders column.tsx correctly 1`] = ` gap: 4px; } -.emotion-1 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -3470,16 +3480,6 @@ exports[` > renders column.tsx correctly 1`] = ` padding-left: 8px; } -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - .emotion-6 { list-style: none; display: grid; @@ -3701,32 +3701,32 @@ exports[` > renders column.tsx correctly 1`] = `
    - 列标题 -
    -
    - 值类型 -
    -
    - 字段 -
    -
    - 颜色 +
    + 列标题 +
    +
    + 值类型 +
    +
    + 字段 +
    +
    + 颜色 +
    -
    -
      > renders column.tsx correctly 1`] = ` exports[` > renders controlled.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; @@ -4681,7 +4691,7 @@ exports[` > renders controlled.tsx correctly 1`] = ` gap: 4px; } -.emotion-1 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -4694,16 +4704,6 @@ exports[` > renders controlled.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; @@ -4925,27 +4925,27 @@ exports[` > renders controlled.tsx correctly 1`] = `
      - 列标题 -
      -
      - 值类型 -
      -
      - 字段 +
      + 列标题 +
      +
      + 值类型 +
      +
      + 字段 +
      -
      -
        > renders controlled.tsx correctly 1`] = ` exports[` > renders creatorButtonProps.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; @@ -5621,7 +5631,7 @@ exports[` > renders creatorButtonProps.tsx correctly 1`] = ` gap: 4px; } -.emotion-1 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -5634,16 +5644,6 @@ exports[` > renders creatorButtonProps.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 { height: 24px; padding-block: 2px; @@ -5888,27 +5888,27 @@ exports[` > renders creatorButtonProps.tsx correctly 1`] = `
        - 列标题 -
        -
        - 值类型 -
        -
        - 字段 +
        + 列标题 +
        +
        + 值类型 +
        +
        + 字段 +
        -
        -
        - 列标题 -
        -
        - 值类型 -
        -
        - 字段 +
        + 列标题 +
        +
        + 值类型 +
        +
        + 字段 +
        -
        -
          > renders customCreate.tsx correctly 1`] = ` exports[` > renders empty.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; @@ -7622,7 +7632,7 @@ exports[` > renders empty.tsx correctly 1`] = ` gap: 4px; } -.emotion-1 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -7635,39 +7645,29 @@ exports[` > renders empty.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; -} -
          - 列标题 -
          -
          - 值类型 -
          -
          - 字段 +
          + 列标题 +
          +
          + 值类型 +
          +
          + 字段 +
          -
          -
          @@ -7736,6 +7736,16 @@ exports[` > renders empty.tsx correctly 1`] = ` exports[` > renders normal.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; @@ -7750,7 +7760,7 @@ exports[` > renders normal.tsx correctly 1`] = ` gap: 4px; } -.emotion-1 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -7763,16 +7773,6 @@ exports[` > renders normal.tsx correctly 1`] = ` padding-left: 8px; } -.emotion-3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - .emotion-4 { list-style: none; display: grid; @@ -8013,22 +8013,22 @@ exports[` > renders normal.tsx correctly 1`] = `
          - 配置项一 -
          -
          - 配置项二 +
          + 配置项一 +
          +
          + 配置项二 +
          -
          -