feat: adapt semantic close

Author: Arktomson

src/Preview/CloseBtn.tsx

@@ -1,16 +1,23 @@
+import classnames from 'classnames';
 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={classnames(`${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;
@@ -440,6 +440,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}
                 />
               )}