Skip to content

Commit cec74d9

Browse files
LuckyFBBLuckyFBB
authored
feat(fullscreen): remove img and use icons (#588)
* feat(fullscreen): remove img and use icons fix #587 * test(fullscreen): change unit test
1 parent f8fd9a2 commit cec74d9

9 files changed

Lines changed: 73 additions & 133 deletions

File tree

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`test Fullscreen should default render correctly 1`] = `
4-
<span>
5-
<button
6-
class="ant-btn ant-btn-default"
7-
type="button"
4+
<div>
5+
<div
6+
class="dtc-fullscreen"
87
>
9-
<img
10-
class="dtc-fullscreen-icon"
11-
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDcwODIxNTI3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MzciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzM5LjQzMiA2My41OTRIOTkuOTQ0Yy0xOS44NTEgMC0zNiAxNi4xNDktMzYgMzZ2MjM5LjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEyNy41OTRoMjExLjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzIgMC4wMDEtMTcuNjczLTE0LjMyNi0zMi0zMS45OTktMzJ6TTMzOS40MzIgODk1LjUwM0gxMjcuOTQ0VjY4NC4wMTZjMC0xNy42NzMtMTQuMzI3LTMyLTMyLTMycy0zMiAxNC4zMjctMzIgMzJ2MjM5LjQ4N2MwIDE5Ljg1MSAxNi4xNDkgMzYgMzYgMzZoMjM5LjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJzLTE0LjMyNi0zMi0zMS45OTktMzJ6TTkyOCA2NTEuOTE1Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJ2MjExLjQ4N0g2ODQuNTEzYy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJzMTQuMzI3IDMyIDMyIDMySDkyNGMxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWNjgzLjkxNWMwLTE3LjY3My0xNC4zMjctMzItMzItMzJ6TTkyNCA2NC4xNTFINjg0LjUxM2MtMTcuNjczIDAtMzIgMTQuMzI3LTMyIDMyczE0LjMyNyAzMiAzMiAzMkg4OTZ2MjExLjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEwMC4xNTFjMC0xOS44NTEtMTYuMTQ5LTM2LTM2LTM2eiIgZmlsbD0iIzUxNTE1MSIgcC1pZD0iMzczOCI+PC9wYXRoPjwvc3ZnPg=="
12-
/>
138
<span>
14-
全屏
9+
<button
10+
class="ant-btn ant-btn-default dtc-button"
11+
type="button"
12+
>
13+
<span
14+
class="dtc-button__icon dtc-button__icon--middle"
15+
>
16+
<span
17+
data-mock-icon="FullscreenOutlined"
18+
/>
19+
</span>
20+
<span
21+
class="dtc-button__text dtc-button__text--middle"
22+
>
23+
全屏
24+
</span>
25+
</button>
1526
</span>
16-
</button>
17-
</span>
27+
</div>
28+
</div>
1829
`;

‎src/fullscreen/__tests__/index.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ describe('test Fullscreen', () => {
1010
});
1111
test('should default render correctly', () => {
1212
const { container } = render(<Fullscreen />);
13-
expect(container.firstChild).toMatchSnapshot();
14-
expect(container.querySelector('.ant-btn')?.firstChild).toHaveClass('dtc-fullscreen-icon');
13+
expect(container).toMatchSnapshot();
14+
expect(container.querySelector('.ant-btn')?.firstChild).toHaveClass('dtc-button__icon');
1515
expect(container.innerHTML).toMatch('全屏');
1616
});
1717
test('should customIcon render correctly', () => {
@@ -36,13 +36,13 @@ describe('test Fullscreen', () => {
3636
});
3737
test('should custom iconStyle render correctly', () => {
3838
const iconStyle = {
39-
width: 12,
40-
height: 12,
39+
fontSize: 20,
4140
marginRight: 5,
4241
};
43-
render(<Fullscreen iconStyle={iconStyle} />);
44-
const img = screen.getByRole('img');
45-
expect(img).toHaveStyle(`width: 12px; height: 12px; margin-right: 5px;`);
42+
const { container } = render(<Fullscreen iconStyle={iconStyle} />);
43+
expect(container.querySelector('.ant-btn')?.firstChild?.firstChild).toHaveStyle(
44+
'font-size: 20px; margin-right: 5px;'
45+
);
4646
});
4747
test('button fireEvent correct', () => {
4848
const { container } = render(<Fullscreen />);

‎src/fullscreen/demos/local.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import { Card } from 'antd';
33
import { Fullscreen } from 'dt-react-component';
44

55
export default () => {
6-
const [targetKey, setTargetKey] = useState('');
7-
8-
useEffect(() => {
9-
setTargetKey('localContainer');
10-
}, []);
11-
126
return (
13-
<Card id={targetKey} style={{ background: '#fafafa' }}>
14-
<Fullscreen target={targetKey} />
7+
<Card id="localContainer" style={{ background: '#fafafa' }}>
8+
<Fullscreen target="localContainer" />
159
<div style={{ margin: '10px 0', textAlign: 'center' }}>Fullscreen in this</div>
1610
</Card>
1711
);

‎src/fullscreen/demos/theme.tsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/fullscreen/icon.tsx‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎src/fullscreen/index.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,14 @@ demo:
1515
## 代码演示
1616

1717
<code src="./demos/basic.tsx" title="基本使用"></code>
18-
<code src="./demos/theme.tsx" title="主题切换"></code>
1918
<code src="./demos/local.tsx" title="局部全屏" iframe="124"></code>
2019
<code src="./demos/custom.tsx" title="自定义全屏图标" ></code>
2120

2221
## API
2322

24-
| 参数 | 说明 | 类型 | 默认值 |
25-
| ------------ | -------------------------- | ----------------- | ------- |
26-
| target | 全局操作作用于指定目标对象 | `string` | - |
27-
| themeDark | 是否使用暗黑主题模式 | `boolean` | `false` |
28-
| iconStyle | 图标元素样式 | `CSSProperties` | - |
29-
| fullIcon | 自定义全屏图标 | `React.ReactNode` | - |
30-
| exitFullIcon | 自定义退出全屏图标 | `React.ReactNode` | - |
23+
| 参数 | 说明 | 类型 | 默认值 |
24+
| ------------ | -------------------------- | ----------------- | ------ |
25+
| target | 全局操作作用于指定目标对象 | `string` | - |
26+
| iconStyle | 图标元素样式 | `CSSProperties` | - |
27+
| fullIcon | 自定义全屏图标 | `React.ReactNode` | - |
28+
| exitFullIcon | 自定义退出全屏图标 | `React.ReactNode` | - |

‎src/fullscreen/index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.dtc-fullscreen {
2+
width: fit-content;
3+
}

‎src/fullscreen/index.tsx‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { CSSProperties, HTMLAttributes, ReactNode, useEffect, useState } from 'react';
2-
import { Button } from 'antd';
2+
import { FullscreenExitOutlined, FullscreenOutlined } from '@dtinsight/react-icons';
33

4+
import Button from '../button';
45
import KeyEventListener from '../keyEventListener';
56
import useLocale from '../locale/useLocale';
6-
import MyIcon from './icon';
7+
import './index.scss';
78

89
const { KeyCombiner } = KeyEventListener;
910
declare let document: any;
@@ -27,7 +28,6 @@ interface DocumentWithFullscreen extends Document {
2728

2829
export interface IFullscreenProps
2930
extends React.DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
30-
themeDark?: boolean;
3131
target?: string;
3232
iconStyle?: CSSProperties;
3333
fullIcon?: ReactNode;
@@ -36,7 +36,6 @@ export interface IFullscreenProps
3636
}
3737

3838
export default function Fullscreen({
39-
themeDark,
4039
target,
4140
fullIcon,
4241
exitFullIcon,
@@ -178,24 +177,34 @@ export default function Fullscreen({
178177
};
179178

180179
return (
181-
<KeyCombiner
182-
onTrigger={handlePressFullScreen}
183-
keyMap={{
184-
70: true,
185-
91: true,
186-
16: true,
187-
}}
188-
>
189-
{customIcon ? (
190-
<span {...other} onClick={handleFullScreen}>
191-
{customIcon}
192-
</span>
193-
) : (
194-
<Button onClick={handleFullScreen}>
195-
<MyIcon style={iconStyle} type={isFullScreen} themeDark={themeDark} />
196-
{isFullScreen ? locale.exitFull : locale.full}
197-
</Button>
198-
)}
199-
</KeyCombiner>
180+
<div className="dtc-fullscreen">
181+
<KeyCombiner
182+
onTrigger={handlePressFullScreen}
183+
keyMap={{
184+
70: true,
185+
91: true,
186+
16: true,
187+
}}
188+
>
189+
{customIcon ? (
190+
<span {...other} onClick={handleFullScreen}>
191+
{customIcon}
192+
</span>
193+
) : (
194+
<Button
195+
onClick={handleFullScreen}
196+
icon={
197+
isFullScreen ? (
198+
<FullscreenExitOutlined style={iconStyle} />
199+
) : (
200+
<FullscreenOutlined style={iconStyle} />
201+
)
202+
}
203+
>
204+
{isFullScreen ? locale.exitFull : locale.full}
205+
</Button>
206+
)}
207+
</KeyCombiner>
208+
</div>
200209
);
201210
}

‎src/fullscreen/style.scss‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)