feat: sidesheet support for customized closeIcon (#1965)

content/show/sidesheet/index-en-US.md

@@ -303,6 +303,7 @@ class Demo extends React.Component {
 | bodyStyle | Content style                                                                                                              | CSSProperties | - | - |
 | className | Class name                                                                                                                 | string | - | - |
 | closable | Toggle whether to show close button                                                                                        | boolean | true | - |
+| closeIcon         | Icon for close button                                                                                              | ReactNode | <IconClose /\>    | - |
 | closeOnEsc | oggle whether to allow close modal by keyboard event Esc                                                                   | boolean | false | 1.0.0 |
 | disableScroll | Toggle whether to add `overflow: hidden` to document.body element. Only works when not setting `getPopupContainer`         | boolean | true | - |
 | footer | Footer                                                                                                                     | ReactNode | null | 1.3.0 |

content/show/sidesheet/index.md

@@ -308,6 +308,7 @@ class Demo extends React.Component {
 | bodyStyle | 面板内容的样式                                                                       | CSSProperties | - | - |
 | className | 类名                                                                            | string | - | - |
 | closable | 是否允许通过右上角的关闭按钮关闭                                                              | boolean | true | - |
+| closeIcon | 关闭按钮的 icon                                                                 | ReactNode | <IconClose /\> | - |
 | closeOnEsc | 允许通过键盘事件 Esc 触发关闭                                                             | boolean | false | 1.0.0 |
 | disableScroll | 默认渲染在 document.body 层时是否禁止 body 的滚动，即给 body 添加 `overflow: hidden`             | boolean | true | - |
 | footer | 侧边栏底部                                                                         | ReactNode | null | 1.3.0 |

packages/semi-foundation/sideSheet/sideSheetFoundation.ts

@@ -8,6 +8,7 @@ export interface SideSheetProps {
     bodyStyle?: Record<string, any>;
     className?: string;
     closable?: boolean;
+    closeIcon?: any;
     closeOnEsc?: boolean;
     disableScroll?: boolean;
     footer?: any;

packages/semi-ui/sideSheet/SideSheetContent.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/sideSheet/constants';
@@ -14,6 +14,7 @@ const prefixCls = cssClasses.PREFIX;
 
 export interface SideSheetContentProps {
     onClose?: (e: React.MouseEvent) => void;
+    closeIcon?: ReactNode;
     mask?: boolean;
     maskStyle?: CSSProperties;
     maskClosable?: boolean;
@@ -38,6 +39,7 @@ export interface SideSheetContentProps {
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
     static propTypes = {
         onClose: PropTypes.func,
+        closeIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     };
 
     static defaultProps = {
@@ -92,6 +94,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             title,
             closable,
             headerStyle,
+            closeIcon,
         } = this.props;
         let header, closer;
         if (title) {
@@ -102,13 +105,14 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             );
         }
         if (closable) {
+            const iconType = closeIcon || <IconClose/>;
             closer = (
                 <Button
                     className={`${prefixCls}-close`}
                     key="close-btn"
                     onClick={this.close}
                     type="tertiary"
-                    icon={<IconClose/>}
+                    icon={iconType}
                     theme="borderless"
                     size="small"
                 />

packages/semi-ui/sideSheet/__test__/sideSheet.test.js

@@ -1,5 +1,6 @@
 import { Icon, SideSheet, Modal } from '../../index';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { IconEyeClosed } from '@douyinfe/semi-icons';
 // import toJson from 'enzyme-to-json';
 
 function getSideSheet(SideSheetProps, children) {
@@ -316,4 +317,13 @@ describe('SideSheet', () => {
         sideSheet.unmount();
     });
 
+    it('closeIcon', () => {
+        let com = getSideSheet({
+            visible: true,
+            closeIcon: (<IconEyeClosed />)
+        });
+        let sideSheet = mount(com, { attachTo: document.getElementById('container') });
+        expect(sideSheet.find(`.${BASE_CLASS_PREFIX}-icon-eye_closed`).length).toBe(1);
+    });
+
 })