fix(layout): slove DensityIcon setting not work (ant-design#7942)

shijistar · Dec 6, 2023 · f51ee6a · f51ee6a
1 parent e16d2ec
commit f51ee6a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/table/src/components/ToolBar/DensityIcon.tsx b/packages/table/src/components/ToolBar/DensityIcon.tsx
@@ -7,10 +7,11 @@ import { TableContext } from '../../Store/Provide';
 
 export type DensitySize = 'middle' | 'small' | 'large' | undefined;
 
-const DensityIcon = () => {
+const DensityIcon = (props: { icon?: React.ReactNode }) => {
+  const { icon = <ColumnHeightOutlined /> } = props;
   const counter = useContext(TableContext);
   const intl = useIntl();
-  const props = menuOverlayCompatible({
+  const dropdownProps = menuOverlayCompatible({
     selectedKeys: [counter.tableSize as string],
     onClick: ({ key }) => {
       counter.setTableSize?.(key as DensitySize);
@@ -33,10 +34,13 @@ const DensityIcon = () => {
       },
     ],
   });
+
+  console.log('props', props);
+
   return (
-    <Dropdown {...props} trigger={['click']}>
+    <Dropdown {...dropdownProps} trigger={['click']}>
       <Tooltip title={intl.getMessage('tableToolBar.density', '表格密度')}>
-        <ColumnHeightOutlined />
+        {icon}
       </Tooltip>
     </Dropdown>
   );

diff --git a/packages/table/src/components/ToolBar/index.tsx b/packages/table/src/components/ToolBar/index.tsx
@@ -83,7 +83,7 @@ function getButtonText(
     },
     density: {
       text: intl.getMessage('tableToolBar.density', '表格密度'),
-      icon: options.densityIcon ?? <DensityIcon />,
+      icon: <DensityIcon icon={options.densityIcon} />,
     },
     fullScreen: {
       text: intl.getMessage('tableToolBar.fullScreen', '全屏'),