From be3d822bc2adb944a811a33092324ce9a142323b Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Tue, 5 Aug 2025 11:38:16 +0800 Subject: [PATCH 1/2] feat(fullscreen): remove img and use icons fix #587 --- src/fullscreen/demos/local.tsx | 12 ++------ src/fullscreen/demos/theme.tsx | 23 -------------- src/fullscreen/icon.tsx | 46 ---------------------------- src/fullscreen/index.md | 14 ++++----- src/fullscreen/index.scss | 3 ++ src/fullscreen/index.tsx | 55 ++++++++++++++++++++-------------- src/fullscreen/style.scss | 6 ---- 7 files changed, 44 insertions(+), 115 deletions(-) delete mode 100644 src/fullscreen/demos/theme.tsx delete mode 100644 src/fullscreen/icon.tsx create mode 100644 src/fullscreen/index.scss delete mode 100644 src/fullscreen/style.scss diff --git a/src/fullscreen/demos/local.tsx b/src/fullscreen/demos/local.tsx index 6aea968ec..e4f07f04a 100644 --- a/src/fullscreen/demos/local.tsx +++ b/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 ( - - + +
Fullscreen in this
 ); diff --git a/src/fullscreen/demos/theme.tsx b/src/fullscreen/demos/theme.tsx deleted file mode 100644 index 519abfcc3..000000000 --- a/src/fullscreen/demos/theme.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { useState } from 'react'; -import { Switch } from 'antd'; -import { Fullscreen } from 'dt-react-component'; - -export default () => { - const [themeDark, setThemeDark] = useState(false); - const changeTheme = (value: boolean) => { - setThemeDark(value); - }; - return ( - <> - -
-
- - - ); -}; diff --git a/src/fullscreen/icon.tsx b/src/fullscreen/icon.tsx deleted file mode 100644 index 4a11102a5..000000000 --- a/src/fullscreen/icon.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; - -import './style.scss'; - -export interface IconProps - extends React.DetailedHTMLProps, HTMLImageElement> { - themeDark?: boolean; - type?: boolean; - className?: string; - alt?: string; -} - -export default function Icon({ themeDark, type, className, alt, ...otherProps }: IconProps) { - const getBase64ImgSrc = (type: boolean | undefined, themeDark: boolean | undefined): string => { - let src = ''; - if (themeDark) { - // 全屏状态 - if (type) { - src = - 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDY4NzE5NzYyIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijk1NzgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUuOTQ0IDM3MS4wODJoMjM5LjQ4N2MxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWOTUuNTk0YzAtMTcuNjczLTE0LjMyNy0zMi0zMi0zMnMtMzIgMTQuMzI3LTMyIDMydjIxMS40ODhIOTUuOTQ0Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzIgMCAxNy42NzIgMTQuMzI3IDMyIDMyIDMyek05NS45NDQgNzE2LjAxNmgyMTEuNDg3djIxMS40ODdjMCAxNy42NzMgMTQuMzI3IDMyIDMyIDMyczMyLTE0LjMyNyAzMi0zMlY2ODguMDE2YzAtMTkuODUxLTE2LjE0OS0zNi0zNi0zNkg5NS45NDRjLTE3LjY3MyAwLTMyIDE0LjMyNy0zMiAzMnMxNC4zMjcgMzIgMzIgMzJ6TTY4NC41MTMgOTU5LjQwMmMxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJWNzE1LjkxNUg5MjhjMTcuNjczIDAgMzItMTQuMzI3IDMyLTMycy0xNC4zMjctMzItMzItMzJINjg4LjUxM2MtMTkuODUxIDAtMzYgMTYuMTQ5LTM2IDM2djIzOS40ODdjMCAxNy42NzMgMTQuMzI3IDMyIDMyIDMyek02ODguNTEzIDM3MS42MzlIOTI4YzE3LjY3MyAwIDMyLTE0LjMyNyAzMi0zMnMtMTQuMzI3LTMyLTMyLTMySDcxNi41MTNWOTYuMTUxYzAtMTcuNjczLTE0LjMyNy0zMi0zMi0zMnMtMzIgMTQuMzI3LTMyIDMydjIzOS40ODhjMCAxOS44NSAxNi4xNDkgMzYgMzYgMzZ6IiBmaWxsPSIjQURBREFEIiBwLWlkPSI5NTc5Ij48L3BhdGg+PC9zdmc+'; - } else { - src = - 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDcwODIxNTI3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MzciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzM5LjQzMiA2My41OTRIOTkuOTQ0Yy0xOS44NTEgMC0zNiAxNi4xNDktMzYgMzZ2MjM5LjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEyNy41OTRoMjExLjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzIgMC4wMDEtMTcuNjczLTE0LjMyNi0zMi0zMS45OTktMzJ6TTMzOS40MzIgODk1LjUwM0gxMjcuOTQ0VjY4NC4wMTZjMC0xNy42NzMtMTQuMzI3LTMyLTMyLTMycy0zMiAxNC4zMjctMzIgMzJ2MjM5LjQ4N2MwIDE5Ljg1MSAxNi4xNDkgMzYgMzYgMzZoMjM5LjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJzLTE0LjMyNi0zMi0zMS45OTktMzJ6TTkyOCA2NTEuOTE1Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJ2MjExLjQ4N0g2ODQuNTEzYy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJzMTQuMzI3IDMyIDMyIDMySDkyNGMxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWNjgzLjkxNWMwLTE3LjY3My0xNC4zMjctMzItMzItMzJ6TTkyNCA2NC4xNTFINjg0LjUxM2MtMTcuNjczIDAtMzIgMTQuMzI3LTMyIDMyczE0LjMyNyAzMiAzMiAzMkg4OTZ2MjExLjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEwMC4xNTFjMC0xOS44NTEtMTYuMTQ5LTM2LTM2LTM2eiIgZmlsbD0iI0FEQURBRCIgcC1pZD0iMzczOCI+PC9wYXRoPjwvc3ZnPg=='; - } - } else { - // 全屏状态 - if (type) { - src = - 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDY4NzE5NzYyIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijk1NzgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUuOTQ0IDM3MS4wODJoMjM5LjQ4N2MxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWOTUuNTk0YzAtMTcuNjczLTE0LjMyNy0zMi0zMi0zMnMtMzIgMTQuMzI3LTMyIDMydjIxMS40ODhIOTUuOTQ0Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzIgMCAxNy42NzIgMTQuMzI3IDMyIDMyIDMyek05NS45NDQgNzE2LjAxNmgyMTEuNDg3djIxMS40ODdjMCAxNy42NzMgMTQuMzI3IDMyIDMyIDMyczMyLTE0LjMyNyAzMi0zMlY2ODguMDE2YzAtMTkuODUxLTE2LjE0OS0zNi0zNi0zNkg5NS45NDRjLTE3LjY3MyAwLTMyIDE0LjMyNy0zMiAzMnMxNC4zMjcgMzIgMzIgMzJ6TTY4NC41MTMgOTU5LjQwMmMxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJWNzE1LjkxNUg5MjhjMTcuNjczIDAgMzItMTQuMzI3IDMyLTMycy0xNC4zMjctMzItMzItMzJINjg4LjUxM2MtMTkuODUxIDAtMzYgMTYuMTQ5LTM2IDM2djIzOS40ODdjMCAxNy42NzMgMTQuMzI3IDMyIDMyIDMyek02ODguNTEzIDM3MS42MzlIOTI4YzE3LjY3MyAwIDMyLTE0LjMyNyAzMi0zMnMtMTQuMzI3LTMyLTMyLTMySDcxNi41MTNWOTYuMTUxYzAtMTcuNjczLTE0LjMyNy0zMi0zMi0zMnMtMzIgMTQuMzI3LTMyIDMydjIzOS40ODhjMCAxOS44NSAxNi4xNDkgMzYgMzYgMzZ6IiBmaWxsPSIjNTE1MTUxIiBwLWlkPSI5NTc5Ij48L3BhdGg+PC9zdmc+'; - } else { - src = - 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDcwODIxNTI3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MzciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzM5LjQzMiA2My41OTRIOTkuOTQ0Yy0xOS44NTEgMC0zNiAxNi4xNDktMzYgMzZ2MjM5LjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEyNy41OTRoMjExLjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzIgMC4wMDEtMTcuNjczLTE0LjMyNi0zMi0zMS45OTktMzJ6TTMzOS40MzIgODk1LjUwM0gxMjcuOTQ0VjY4NC4wMTZjMC0xNy42NzMtMTQuMzI3LTMyLTMyLTMycy0zMiAxNC4zMjctMzIgMzJ2MjM5LjQ4N2MwIDE5Ljg1MSAxNi4xNDkgMzYgMzYgMzZoMjM5LjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJzLTE0LjMyNi0zMi0zMS45OTktMzJ6TTkyOCA2NTEuOTE1Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJ2MjExLjQ4N0g2ODQuNTEzYy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJzMTQuMzI3IDMyIDMyIDMySDkyNGMxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWNjgzLjkxNWMwLTE3LjY3My0xNC4zMjctMzItMzItMzJ6TTkyNCA2NC4xNTFINjg0LjUxM2MtMTcuNjczIDAtMzIgMTQuMzI3LTMyIDMyczE0LjMyNyAzMiAzMiAzMkg4OTZ2MjExLjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEwMC4xNTFjMC0xOS44NTEtMTYuMTQ5LTM2LTM2LTM2eiIgZmlsbD0iIzUxNTE1MSIgcC1pZD0iMzczOCI+PC9wYXRoPjwvc3ZnPg=='; - } - } - return src; - }; - return ( - {alt} - ); -} diff --git a/src/fullscreen/index.md b/src/fullscreen/index.md index 14db56db9..d7af010c4 100644 --- a/src/fullscreen/index.md +++ b/src/fullscreen/index.md @@ -15,16 +15,14 @@ demo: ## 代码演示 - ## API -| 参数 | 说明 | 类型 | 默认值 | -| ------------ | -------------------------- | ----------------- | ------- | -| target | 全局操作作用于指定目标对象 | `string` | - | -| themeDark | 是否使用暗黑主题模式 | `boolean` | `false` | -| iconStyle | 图标元素样式 | `CSSProperties` | - | -| fullIcon | 自定义全屏图标 | `React.ReactNode` | - | -| exitFullIcon | 自定义退出全屏图标 | `React.ReactNode` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | -------------------------- | ----------------- | ------ | +| target | 全局操作作用于指定目标对象 | `string` | - | +| iconStyle | 图标元素样式 | `CSSProperties` | - | +| fullIcon | 自定义全屏图标 | `React.ReactNode` | - | +| exitFullIcon | 自定义退出全屏图标 | `React.ReactNode` | - | diff --git a/src/fullscreen/index.scss b/src/fullscreen/index.scss new file mode 100644 index 000000000..27a73ed33 --- /dev/null +++ b/src/fullscreen/index.scss @@ -0,0 +1,3 @@ +.dtc-fullscreen { + width: fit-content; +} diff --git a/src/fullscreen/index.tsx b/src/fullscreen/index.tsx index 97b5ea09f..09e994934 100644 --- a/src/fullscreen/index.tsx +++ b/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, 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 ( - - {customIcon ? ( - - {customIcon} - - ) : ( - - )} - +
+ + {customIcon ? ( + + {customIcon} + + ) : ( + + )} + +
); } diff --git a/src/fullscreen/style.scss b/src/fullscreen/style.scss deleted file mode 100644 index bcfe5a8e5..000000000 --- a/src/fullscreen/style.scss +++ /dev/null @@ -1,6 +0,0 @@ -.dtc-fullscreen-icon { - width: 16px; - height: 16px; - margin-right: 5px; - margin-top: -4px; -} From 38e96d97dcbf14ee42f5d7547e3468fb30df785e Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Tue, 5 Aug 2025 14:06:25 +0800 Subject: [PATCH 2/2] test(fullscreen): change unit test --- .../__snapshots__/index.test.tsx.snap | 33 ++++++++++++------- src/fullscreen/__tests__/index.test.tsx | 14 ++++---- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/fullscreen/__tests__/__snapshots__/index.test.tsx.snap b/src/fullscreen/__tests__/__snapshots__/index.test.tsx.snap index 9b8b19c14..a9f7d2153 100644 --- a/src/fullscreen/__tests__/__snapshots__/index.test.tsx.snap +++ b/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`] = ` - - - - + + `; diff --git a/src/fullscreen/__tests__/index.test.tsx b/src/fullscreen/__tests__/index.test.tsx index 323914163..d519f66e7 100644 --- a/src/fullscreen/__tests__/index.test.tsx +++ b/src/fullscreen/__tests__/index.test.tsx @@ -10,8 +10,8 @@ describe('test Fullscreen', () => { }); test('should default render correctly', () => { const { container } = render(); - 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(); - const img = screen.getByRole('img'); - expect(img).toHaveStyle(`width: 12px; height: 12px; margin-right: 5px;`); + const { container } = render(); + expect(container.querySelector('.ant-btn')?.firstChild?.firstChild).toHaveStyle( + 'font-size: 20px; margin-right: 5px;' + ); }); test('button fireEvent correct', () => { const { container } = render();