fix: 修复open属性冲突的问题 close #1736 (#1831)

* feat: 修复open属性冲突的问题 * test: 增加export组件dropdown测试用例 Co-authored-by: chengqu <[email protected]>
antvis · Oct 19, 2022 · 6e9f3eb · 6e9f3eb
1 parent b6ec0ed
commit 6e9f3eb
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/packages/s2-react/__tests__/bugs/issue-1736-spec.tsx b/packages/s2-react/__tests__/bugs/issue-1736-spec.tsx
@@ -0,0 +1,46 @@
+/**
+ * @description spec for issue #1736
+ * https://github.com/antvis/S2/issues/1736
+ * Export dropdown visible state error
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { getMockSheetInstance, getContainer } from 'tests/util/helpers';
+import { Export } from '@/components/export';
+
+describe('header export component render tests', () => {
+  test('should render export and dropdown keep invisible', () => {
+    act(() => {
+      const sheet = getMockSheetInstance();
+
+      ReactDOM.render(<Export sheet={sheet} open={true} />, getContainer());
+    });
+
+    // export 组件
+    expect(document.querySelector('.antv-s2-export')).toBeDefined();
+
+    // dropdown 不应该渲染
+    expect(document.querySelector('.ant-dropdown')).toBe(null);
+  });
+
+  test('should render export dropdown menu', () => {
+    act(() => {
+      const sheet = getMockSheetInstance();
+
+      ReactDOM.render(
+        <Export
+          sheet={sheet}
+          open={true}
+          dropdown={{
+            open: true,
+          }}
+        />,
+        getContainer(),
+      );
+    });
+
+    // dropdown组件
+    expect(document.querySelector('.ant-dropdown')).toBeDefined();
+  });
+});
diff --git a/packages/s2-react/src/components/export/index.tsx b/packages/s2-react/src/components/export/index.tsx
@@ -6,7 +6,7 @@ import {
   SpreadSheet,
   i18n,
 } from '@antv/s2';
-import { Dropdown, Menu, message } from 'antd';
+import { Dropdown, Menu, message, type DropDownProps } from 'antd';
 import cx from 'classnames';
 import React from 'react';
 import { DotIcon } from '../icons';
@@ -31,6 +31,8 @@ export interface ExportCfgProps {
   errorText?: string;
   fileName?: string;
   syncCopy?: boolean;
+  // ref: https://ant.design/components/dropdown-cn/#API
+  dropdown?: DropDownProps;
 }
 
 export interface ExportProps extends ExportCfgProps {
@@ -50,6 +52,8 @@ export const Export: React.FC<ExportProps> = React.memo((props) => {
     errorText = i18n('操作失败'),
     sheet,
     fileName,
+    open,
+    dropdown,
     ...restProps
   } = props;
 
@@ -102,6 +106,7 @@ export const Export: React.FC<ExportProps> = React.memo((props) => {
       trigger={['click']}
       className={cx(PRE_CLASS, className)}
       {...restProps}
+      {...dropdown}
     >
       <a
         className="ant-dropdown-link"

diff --git a/s2-site/docs/api/components/export.zh.md b/s2-site/docs/api/components/export.zh.md
@@ -28,6 +28,7 @@ order: 5
 | errorText | 操作失败文案 | `string` |  |  |
 | fileName | 自定义下载文件名 | `string` | `sheet` |  |
 | syncCopy | 同步复制数据 （默认异步） | `boolean` | `false` |  |
+| dropdown | 下拉菜单配置，透传给 `antd` 的 `Dropdown` 组件 | [DropdownProps](https://ant.design/components/dropdown-cn/#API) | | |
 
 `markdown:docs/common/export.zh.md`