Skip to content

Commit 9f57efc

Browse files
shiqiWang0beier
shiqiWang0
and
beier
authored
WIP refactor: fullscreen component refactor (#304)
* refactor: fullscreen component refactor * refactor: methodName to improve && Icon change function * refactor: add removeEventListener && cursor --------- Co-authored-by: beier <[email protected]>
1 parent 4bf39ea commit 9f57efc

File tree

10 files changed

+324
-188
lines changed

10 files changed

+324
-188
lines changed

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`test Fullscreen should default render correctly 1`] = `
4+
<span
5+
data-testid="test_keyCombiner"
6+
>
7+
<button
8+
class="ant-btn ant-btn-default"
9+
type="button"
10+
>
11+
<img
12+
class="dtc-fullscreen-icon"
13+
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMyMDcwODIxNTI3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MzciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzM5LjQzMiA2My41OTRIOTkuOTQ0Yy0xOS44NTEgMC0zNiAxNi4xNDktMzYgMzZ2MjM5LjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEyNy41OTRoMjExLjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzIgMC4wMDEtMTcuNjczLTE0LjMyNi0zMi0zMS45OTktMzJ6TTMzOS40MzIgODk1LjUwM0gxMjcuOTQ0VjY4NC4wMTZjMC0xNy42NzMtMTQuMzI3LTMyLTMyLTMycy0zMiAxNC4zMjctMzIgMzJ2MjM5LjQ4N2MwIDE5Ljg1MSAxNi4xNDkgMzYgMzYgMzZoMjM5LjQ4N2MxNy42NzMgMCAzMi0xNC4zMjcgMzItMzJzLTE0LjMyNi0zMi0zMS45OTktMzJ6TTkyOCA2NTEuOTE1Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJ2MjExLjQ4N0g2ODQuNTEzYy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJzMTQuMzI3IDMyIDMyIDMySDkyNGMxOS44NTEgMCAzNi0xNi4xNDkgMzYtMzZWNjgzLjkxNWMwLTE3LjY3My0xNC4zMjctMzItMzItMzJ6TTkyNCA2NC4xNTFINjg0LjUxM2MtMTcuNjczIDAtMzIgMTQuMzI3LTMyIDMyczE0LjMyNyAzMiAzMiAzMkg4OTZ2MjExLjQ4OGMwIDE3LjY3MyAxNC4zMjcgMzIgMzIgMzJzMzItMTQuMzI3IDMyLTMyVjEwMC4xNTFjMC0xOS44NTEtMTYuMTQ5LTM2LTM2LTM2eiIgZmlsbD0iIzUxNTE1MSIgcC1pZD0iMzczOCI+PC9wYXRoPjwvc3ZnPg=="
14+
/>
15+
<span>
16+
全屏
17+
</span>
18+
</button>
19+
</span>
20+
`;

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

Lines changed: 49 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,60 @@
1-
import React from 'react';
2-
import Fullscreen from '../index';
3-
import { render, fireEvent, cleanup } from '@testing-library/react';
1+
import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons';
42
import '@testing-library/jest-dom/extend-expect';
3+
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
4+
import React from 'react';
5+
import Fullscreen from '..';
56
describe('test Fullscreen', () => {
67
afterEach(() => {
78
cleanup();
89
});
9-
test('should icon render correct', () => {
10-
const { getByTestId } = render(<Fullscreen />);
11-
const element = getByTestId('test_myIcon');
12-
expect(element).toBeInTheDocument();
13-
expect(element).toHaveClass('dtc-fullscreen-icon');
10+
test('should default render correctly', () => {
11+
const { container } = render(<Fullscreen />);
12+
expect(container.firstChild).toMatchSnapshot();
13+
expect(container.querySelector('.ant-btn')?.firstChild).toHaveClass('dtc-fullscreen-icon');
14+
expect(container.innerHTML).toMatch('全屏');
1415
});
15-
test('should button render correct', () => {
16-
const { getByTestId } = render(<Fullscreen />);
17-
const element = getByTestId('test_myButton');
18-
expect(element).toBeInTheDocument();
19-
expect(element).toHaveTextContent('全屏');
16+
test('should customIcon render correctly', () => {
17+
const customIcon = {
18+
fullIcon: (
19+
<>
20+
<ArrowsAltOutlined />
21+
全屏
22+
</>
23+
),
24+
exitFullIcon: (
25+
<>
26+
<ShrinkOutlined />
27+
退出全屏
28+
</>
29+
),
30+
};
31+
const { container } = render(
32+
<Fullscreen fullIcon={customIcon.fullIcon} exitFullIcon={customIcon.exitFullIcon} />
33+
);
34+
expect(container.firstChild).not.toHaveClass('dtc-fullscreen-icon');
35+
});
36+
test('should custom iconStyle render correctly', () => {
37+
const iconStyle = {
38+
width: 12,
39+
height: 12,
40+
marginRight: 5,
41+
};
42+
render(<Fullscreen iconStyle={iconStyle} />);
43+
const img = screen.getByRole('img');
44+
screen.debug(img);
45+
expect(img).toHaveStyle(`width: 12px; height: 12px; margin-right: 5px;`);
2046
});
2147
test('button fireEvent correct', () => {
22-
const { container, getByTestId } = render(<Fullscreen />);
23-
const element = getByTestId('test_myButton');
24-
fireEvent.click(element);
48+
const { container } = render(<Fullscreen />);
2549
expect(container.innerHTML).toMatch('全屏');
50+
const button = screen.getByRole('button', { name: '全屏' });
51+
fireEvent.click(button);
52+
});
53+
test('button props onFullscreen correct', () => {
54+
const callback = jest.fn();
55+
render(<Fullscreen onFullscreen={callback} />);
56+
const button = screen.getByRole('button', { name: '全屏' });
57+
fireEvent.click(button);
58+
expect(callback).toHaveBeenCalledTimes(1);
2659
});
2760
});

‎src/fullscreen/demos/basic.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { Fullscreen } from 'dt-react-component';
2+
import React from 'react';
3+
4+
export default () => {
5+
return <Fullscreen />;
6+
};

‎src/fullscreen/demos/custom.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons';
2+
import { Fullscreen } from 'dt-react-component';
3+
import React from 'react';
4+
5+
export default () => {
6+
const iconStyle = {
7+
width: 12,
8+
height: 12,
9+
marginRight: 5,
10+
};
11+
12+
return (
13+
<Fullscreen
14+
iconStyle={iconStyle}
15+
fullIcon={
16+
<div style={{ cursor: 'pointer' }}>
17+
<ArrowsAltOutlined />
18+
全屏
19+
</div>
20+
}
21+
exitFullIcon={
22+
<div style={{ cursor: 'pointer' }}>
23+
<ShrinkOutlined />
24+
退出全屏
25+
</div>
26+
}
27+
/>
28+
);
29+
};

‎src/fullscreen/demos/local.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Card } from 'antd';
2+
import { Fullscreen } from 'dt-react-component';
3+
import React, { useEffect, useState } from 'react';
4+
5+
export default () => {
6+
const [targetKey, setTargetKey] = useState('');
7+
8+
useEffect(() => {
9+
setTargetKey('localContainer');
10+
}, []);
11+
12+
return (
13+
<Card id={targetKey} style={{ background: '#fafafa' }}>
14+
<Fullscreen target={targetKey} />
15+
<div style={{ margin: '10px 0', textAlign: 'center' }}>Fullscreen in this</div>
16+
</Card>
17+
);
18+
};

‎src/fullscreen/demos/theme.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Switch } from 'antd';
2+
import { Fullscreen } from 'dt-react-component';
3+
import React, { useState } from 'react';
4+
5+
export default () => {
6+
const [themeDark, setThemeDark] = useState(false);
7+
const changeTheme = (value: boolean) => {
8+
setThemeDark(value);
9+
};
10+
return (
11+
<>
12+
<Switch
13+
checked={themeDark}
14+
onChange={changeTheme}
15+
checkedChildren="Dark"
16+
unCheckedChildren="Light"
17+
/>
18+
<br />
19+
<br />
20+
<Fullscreen themeDark={themeDark} />
21+
</>
22+
);
23+
};

‎src/fullscreen/icon.tsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import React from 'react';
21
import classNames from 'classnames';
2+
import React from 'react';
3+
import './style.scss';
34

4-
export interface IconProps {
5+
export interface IconProps
6+
extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
57
themeDark?: boolean;
68
type?: boolean;
79
className?: string;
810
alt?: string;
9-
[propName: string]: any;
1011
}
11-
export default class Icon extends React.Component<IconProps, any> {
12-
getBase64ImgSrc = (type: boolean | undefined, themeDark: boolean | undefined): string => {
12+
13+
export default function Icon({ themeDark, type, className, alt, ...otherProps }: IconProps) {
14+
const getBase64ImgSrc = (type: boolean | undefined, themeDark: boolean | undefined): string => {
1315
let src = '';
1416
if (themeDark) {
1517
// 全屏状态
@@ -32,18 +34,12 @@ export default class Icon extends React.Component<IconProps, any> {
3234
}
3335
return src;
3436
};
35-
render() {
36-
const { themeDark, type, ...otherProps } = this.props;
37-
const cls = classNames('dtc-fullscreen-icon', otherProps.className);
38-
const src = this.getBase64ImgSrc(type, themeDark);
39-
return (
40-
<img
41-
{...otherProps}
42-
data-testid="test_myIcon"
43-
className={cls}
44-
alt={otherProps.alt}
45-
src={src}
46-
/>
47-
);
48-
}
37+
return (
38+
<img
39+
{...otherProps}
40+
className={classNames('dtc-fullscreen-icon', className)}
41+
alt={alt}
42+
src={getBase64ImgSrc(type, themeDark)}
43+
/>
44+
);
4945
}

‎src/fullscreen/index.md‎

Lines changed: 13 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,40 +10,21 @@ demo:
1010

1111
## 何时使用
1212

13-
全屏操作
13+
全屏切换操作
1414

15-
## 示例
15+
## 代码演示
1616

17-
```jsx
18-
import React from 'react';
19-
import { Fullscreen } from 'dt-react-component';
20-
import { Divider } from 'antd';
21-
22-
export default () => {
23-
const iconStyle = {
24-
width: 12,
25-
height: 12,
26-
marginRight: 5,
27-
};
28-
29-
return (
30-
<>
31-
<p>白色主题</p>
32-
<Fullscreen iconStyle={iconStyle} />
33-
<Divider />
34-
<p>暗黑主题</p>
35-
<Fullscreen iconStyle={iconStyle} themeDark />
36-
</>
37-
);
38-
};
39-
```
17+
<code src="./demos/basic.tsx" title="基本使用"></code>
18+
<code src="./demos/theme.tsx" title="主题切换"></code>
19+
<code src="./demos/local.tsx" title="局部全屏" iframe="124"></code>
20+
<code src="./demos/custom.tsx" title="自定义全屏图标" ></code>
4021

4122
## API
4223

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

0 commit comments

Comments
 (0)