feat(fullscreen): remove img and use icons

src/fullscreen/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,18 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test Fullscreen should default render correctly 1`] = `
-<span>
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+<div>
+  <div
+    class="dtc-fullscreen"
   >
-    <img
-      class="dtc-fullscreen-icon"
-      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDcwODIxNTI3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MzciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzM5LjQzMiA2My41OTRIOTkuOTQ0Yy0xOS44NTEgMC0zNiAxNi4xNDktMzYgMzZ2MjM5LjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEyNy41OTRoMjExLjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzIgMC4wMDEtMTcuNjczLTE0LjMyNi0zMi0zMS45OTktMzJ6TTMzOS40MzIgODk1LjUwM0gxMjcuOTQ0VjY4NC4wMTZjMC0xNy42NzMtMTQuMzI3LTMyLTMyLTMycy0zMiAxNC4zMjctMzIgMzJ2MjM5LjQ4N2MwIDE5Ljg1MSAxNi4xNDkgMzYgMzYgMzZoMjM5LjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJzLTE0LjMyNi0zMi0zMS45OTktMzJ6TTkyOCA2NTEuOTE1Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJ2MjExLjQ4N0g2ODQuNTEzYy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJzMTQuMzI3IDMyIDMyIDMySDkyNGMxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWNjgzLjkxNWMwLTE3LjY3My0xNC4zMjctMzItMzItMzJ6TTkyNCA2NC4xNTFINjg0LjUxM2MtMTcuNjczIDAtMzIgMTQuMzI3LTMyIDMyczE0LjMyNyAzMiAzMiAzMkg4OTZ2MjExLjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEwMC4xNTFjMC0xOS44NTEtMTYuMTQ5LTM2LTM2LTM2eiIgZmlsbD0iIzUxNTE1MSIgcC1pZD0iMzczOCI+PC9wYXRoPjwvc3ZnPg=="
-    />
     <span>
-      全屏
+      <button
+        class="ant-btn ant-btn-default dtc-button"
+        type="button"
+      >
+        <span
+          class="dtc-button__icon dtc-button__icon--middle"
+        >
+          <span
+            data-mock-icon="FullscreenOutlined"
+          />
+        </span>
+        <span
+          class="dtc-button__text dtc-button__text--middle"
+        >
+          全屏
+        </span>
+      </button>
     </span>
-  </button>
-</span>
+  </div>
+</div>
 `;

src/fullscreen/__tests__/index.test.tsx

@@ -10,8 +10,8 @@ describe('test Fullscreen', () => {
     });
     test('should default render correctly', () => {
         const { container } = render(<Fullscreen />);
-        expect(container.firstChild).toMatchSnapshot();
-        expect(container.querySelector('.ant-btn')?.firstChild).toHaveClass('dtc-fullscreen-icon');
+        expect(container).toMatchSnapshot();
+        expect(container.querySelector('.ant-btn')?.firstChild).toHaveClass('dtc-button__icon');
         expect(container.innerHTML).toMatch('全屏');
     });
     test('should customIcon render correctly', () => {
@@ -36,13 +36,13 @@ describe('test Fullscreen', () => {
     });
     test('should custom iconStyle render correctly', () => {
         const iconStyle = {
-            width: 12,
-            height: 12,
+            fontSize: 20,
             marginRight: 5,
         };
-        render(<Fullscreen iconStyle={iconStyle} />);
-        const img = screen.getByRole('img');
-        expect(img).toHaveStyle(`width: 12px; height: 12px; margin-right: 5px;`);
+        const { container } = render(<Fullscreen iconStyle={iconStyle} />);
+        expect(container.querySelector('.ant-btn')?.firstChild?.firstChild).toHaveStyle(
+            'font-size: 20px; margin-right: 5px;'
+        );
     });
     test('button fireEvent correct', () => {
         const { container } = render(<Fullscreen />);

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/index.md

@@ -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/index.scss

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

src/fullscreen/index.tsx

@@ -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>
     );
 }