feat: adapt semantic close (#455)

* feat: adapt semantic close

* feat: update unit test

* feat: adapt clsx

Author: Arktomson

src/Preview/CloseBtn.tsx

@@ -1,16 +1,23 @@
+import { clsx } from 'clsx';
 import * as React from 'react';
 
 export interface CloseBtnProps {
   prefixCls: string;
   icon?: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export default function CloseBtn(props: CloseBtnProps) {
-  const { prefixCls, icon, onClick } = props;
+  const { prefixCls, icon, onClick, className, style } = props;
 
   return (
-    <button className={`${prefixCls}-close`} onClick={onClick}>
+    <button
+      className={clsx(`${prefixCls}-close`, className)}
+      style={style}
+      onClick={onClick}
+    >
       {icon}
     </button>
   );

src/Preview/index.tsx

@@ -19,7 +19,7 @@ import PrevNext from './PrevNext';
 
 // Note: if you want to add `action`,
 // pls contact @zombieJ or @thinkasany first.
-export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
+export type PreviewSemanticName = 'root' | 'mask' | 'body' | 'close' | FooterSemanticName;
 
 export interface OperationIcons {
   rotateLeft?: React.ReactNode;
@@ -444,6 +444,8 @@ const Preview: React.FC<PreviewProps> = props => {
                   prefixCls={prefixCls}
                   icon={closeIcon === true ? icons.close : closeIcon || icons.close}
                   onClick={onClose}
+                  className={classNames.close}
+                  style={styles.close}
                 />
               )}
 

tests/preview.test.tsx

@@ -1099,6 +1099,7 @@ describe('Preview', () => {
         mask: 'custom-mask',
         actions: 'custom-actions',
         root: 'custom-root',
+        close: 'custom-close',
       },
     };
     const customStyles = {
@@ -1107,6 +1108,7 @@ describe('Preview', () => {
         mask: { color: 'red' },
         actions: { backgroundColor: 'blue' },
         root: { border: '1px solid green' },
+        close: { color: 'purple' },
       },
     };
     const { baseElement } = render(
@@ -1125,12 +1127,15 @@ describe('Preview', () => {
     const cover = document.querySelector('.rc-image-cover');
     const mask = document.querySelector('.rc-image-preview-mask');
     const actions = baseElement.querySelector('.rc-image-preview-actions');
+    const close = baseElement.querySelector('.rc-image-preview-close');
     expect(cover).toHaveClass(customClassnames.cover);
     expect(cover).toHaveStyle(customStyles.cover);
     expect(mask).toHaveClass(customClassnames.popup.mask);
     expect(mask).toHaveStyle(customStyles.popup.mask);
     expect(actions).toHaveClass(customClassnames.popup.actions);
     expect(actions).toHaveStyle(customStyles.popup.actions);
+    expect(close).toHaveClass(customClassnames.popup.close);
+    expect(close).toHaveStyle(customStyles.popup.close);
     expect(baseElement.querySelector('.rc-image-preview')).toHaveClass(customClassnames.popup.root);
     expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.popup.root);
   });