feat(fullscreen): remove img and use icons

fix #587

Author: LuckyFBB

src/fullscreen/demos/local.tsx

@@ -1,17 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Card } from 'antd';
 import { Fullscreen } from 'dt-react-component';
 
 export default () => {
-    const [targetKey, setTargetKey] = useState('');
-
-    useEffect(() => {
-        setTargetKey('localContainer');
-    }, []);
-
     return (
-        <Card id={targetKey} style={{ background: '#fafafa' }}>
-            <Fullscreen target={targetKey} />
+        <Card id="localContainer" style={{ background: '#fafafa' }}>
+            <Fullscreen target="localContainer" />
             <div style={{ margin: '10px 0', textAlign: 'center' }}>Fullscreen in this</div>
         </Card>
     );

src/fullscreen/demos/theme.tsx

@@ -15,16 +15,14 @@ demo:
 ## 代码演示
 
 <code src="./demos/basic.tsx" title="基本使用"></code>
-<code src="./demos/theme.tsx" title="主题切换"></code>
 <code src="./demos/local.tsx" title="局部全屏" iframe="124"></code>
 <code src="./demos/custom.tsx" title="自定义全屏图标" ></code>
 
 ## API
 
-| 参数         | 说明                       | 类型              | 默认值  |
-| ------------ | -------------------------- | ----------------- | ------- |
-| target       | 全局操作作用于指定目标对象 | `string`          | -       |
-| themeDark    | 是否使用暗黑主题模式       | `boolean`         | `false` |
-| iconStyle    | 图标元素样式               | `CSSProperties`   | -       |
-| fullIcon     | 自定义全屏图标             | `React.ReactNode` | -       |
-| exitFullIcon | 自定义退出全屏图标         | `React.ReactNode` | -       |
+| 参数         | 说明                       | 类型              | 默认值 |
+| ------------ | -------------------------- | ----------------- | ------ |
+| target       | 全局操作作用于指定目标对象 | `string`          | -      |
+| iconStyle    | 图标元素样式               | `CSSProperties`   | -      |
+| fullIcon     | 自定义全屏图标             | `React.ReactNode` | -      |
+| exitFullIcon | 自定义退出全屏图标         | `React.ReactNode` | -      |

src/fullscreen/icon.tsx

@@ -0,0 +1,3 @@
+.dtc-fullscreen {
+    width: fit-content;
+}

src/fullscreen/index.md

@@ -1,9 +1,10 @@
 import React, { CSSProperties, HTMLAttributes, ReactNode, useEffect, useState } from 'react';
-import { Button } from 'antd';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@dtinsight/react-icons';
 
+import Button from '../button';
 import KeyEventListener from '../keyEventListener';
 import useLocale from '../locale/useLocale';
-import MyIcon from './icon';
+import './index.scss';
 
 const { KeyCombiner } = KeyEventListener;
 declare let document: any;
@@ -27,7 +28,6 @@ interface DocumentWithFullscreen extends Document {
 
 export interface IFullscreenProps
     extends React.DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
-    themeDark?: boolean;
     target?: string;
     iconStyle?: CSSProperties;
     fullIcon?: ReactNode;
@@ -36,7 +36,6 @@ export interface IFullscreenProps
 }
 
 export default function Fullscreen({
-    themeDark,
     target,
     fullIcon,
     exitFullIcon,
@@ -178,24 +177,34 @@ export default function Fullscreen({
     };
 
     return (
-        <KeyCombiner
-            onTrigger={handlePressFullScreen}
-            keyMap={{
-                70: true,
-                91: true,
-                16: true,
-            }}
-        >
-            {customIcon ? (
-                <span {...other} onClick={handleFullScreen}>
-                    {customIcon}
-                </span>
-            ) : (
-                <Button onClick={handleFullScreen}>
-                    <MyIcon style={iconStyle} type={isFullScreen} themeDark={themeDark} />
-                    {isFullScreen ? locale.exitFull : locale.full}
-                </Button>
-            )}
-        </KeyCombiner>
+        <div className="dtc-fullscreen">
+            <KeyCombiner
+                onTrigger={handlePressFullScreen}
+                keyMap={{
+                    70: true,
+                    91: true,
+                    16: true,
+                }}
+            >
+                {customIcon ? (
+                    <span {...other} onClick={handleFullScreen}>
+                        {customIcon}
+                    </span>
+                ) : (
+                    <Button
+                        onClick={handleFullScreen}
+                        icon={
+                            isFullScreen ? (
+                                <FullscreenExitOutlined style={iconStyle} />
+                            ) : (
+                                <FullscreenOutlined style={iconStyle} />
+                            )
+                        }
+                    >
+                       {isFullScreen ? locale.exitFull : locale.full}
+                    </Button>
+                )}
+            </KeyCombiner>
+        </div>
     );
 }