setEnterShowTip(true)}
50 | onMouseLeave={() => setEnterShowTip(false)}
51 | />
52 |
53 | )
54 | }
55 |
56 | export default SliderBtn;
57 |
--------------------------------------------------------------------------------
/src/Scrollbar/__test__/__snapshots__/index.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Scrollbar 组件测试 create 1`] = `
4 |
5 |
89 |
90 | `;
91 |
--------------------------------------------------------------------------------
/src/Popup/__test__/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import userEvent from '@testing-library/user-event';
3 | import Popup from '../index';
4 |
5 | const App = ({ children }) => (
6 |
7 |
8 |
{children}
9 |
10 |
11 | )
12 |
13 | describe('Popup 组件测试', () => {
14 | it('create', () => {
15 | const { asFragment } = render(
16 |
17 |
18 |
19 | );
20 | expect(asFragment()).toMatchSnapshot();
21 | });
22 |
23 | it('trigger', async () => {
24 | const { getByTestId } = render(
25 |
26 |
27 | ,
28 | { wrapper: App }
29 | );
30 |
31 | expect(document.querySelector('.i-popup')).not.toBeInTheDocument()
32 |
33 | const user = userEvent.setup()
34 | await user.click(getByTestId('trigger'))
35 |
36 | expect(document.querySelector('.i-popup')).toBeInTheDocument()
37 | });
38 |
39 | it('disabled', async () => {
40 | const { getByTestId } = render(
41 |
42 |
43 | ,
44 | { wrapper: App }
45 | );
46 |
47 | expect(document.querySelector('.i-popup')).not.toBeInTheDocument()
48 |
49 | const user = userEvent.setup()
50 | await user.click(getByTestId('trigger'))
51 |
52 | expect(document.querySelector('.i-popup')).not.toBeInTheDocument()
53 | });
54 | });
55 |
56 |
--------------------------------------------------------------------------------
/src/Upload/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | nav:
3 | title: 组件
4 | path: /components
5 | group:
6 | title: 表单组件
7 | order: 3
8 | order: 12
9 | ---
10 |
11 | # Upload 上传
12 |
13 | 用户上传任意内容的组件。
14 |
15 | ## 基本用法
16 |
17 | ```tsx
18 | import React from 'react';
19 | import { Upload } from 'idesign-react';
20 |
21 | const App = () => {
22 | const handleChange = (file) => {
23 | console.log(file)
24 | }
25 |
26 | return (
27 |
28 | );
29 | };
30 |
31 | export default App;
32 | ```
33 |
34 | ## 不同主题
35 |
36 | 可通过 `theme` 属性控制不同属性的上传组件：
37 |
38 | ```tsx
39 | import React from 'react';
40 | import { Upload } from 'idesign-react';
41 |
42 | const App = () => {
43 | const handleChange = (file) => {
44 | console.log(file)
45 | }
46 |
47 | return (
48 |
49 |
50 |
51 |
52 |
53 | );
54 | };
55 |
56 | export default App;
57 | ```
58 |
59 | ## 自定义提示
60 |
61 | 可通过 `placeholder` 属性控制自定义占位符：
62 |
63 | ```tsx
64 | import React from 'react';
65 | import { Upload } from 'idesign-react';
66 |
67 | const App = () => {
68 | return (
69 |
70 | );
71 | };
72 |
73 | export default App;
74 | ```
75 |
76 | ## 自定义节点
77 |
78 | 可通过包裹自定义节点来展示任意上传组件：
79 |
80 | ```tsx
81 | import React from 'react';
82 | import { Upload } from 'idesign-react';
83 |
84 | const App = () => {
85 | return (
86 |
87 | 
88 |
89 | );
90 | };
91 |
92 | export default App;
93 | ```
94 |
95 |
96 |
--------------------------------------------------------------------------------
/src/Tag/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import './index.scss';
4 | import Icon from '../Icon';
5 | import { TagProps } from './type';
6 |
7 | const Tag: React.FC
= (props) => {
8 | const {
9 | children = '',
10 | className,
11 | icon,
12 | maxWidth,
13 | size,
14 | style,
15 | theme,
16 | type = 'default',
17 | onAdd,
18 | onClick = () => { },
19 | onClose,
20 | ...restProps
21 | } = props;
22 |
23 | const handleClick = (e: React.MouseEvent) => {
24 | if (onAdd) {
25 | onAdd(e);
26 | }
27 | onClick(e);
28 | };
29 |
30 | const handleClose = (e: React.MouseEvent) => {
31 | e.stopPropagation();
32 | onClose?.(e)
33 | }
34 |
35 | return (
36 |
50 | {onAdd &&
}
51 | {icon &&
}
52 | {children}
53 | {onClose && (
54 |
55 |
56 |
57 | )}
58 |
64 | {children}
65 |
66 | );
67 | };
68 |
69 | export default GridItem;
70 |
--------------------------------------------------------------------------------
/src/Badge/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import './index.scss';
4 | import { BadgeProps } from './type';
5 |
6 | const Badge: React.FC = (props) => {
7 | const {
8 | children = '',
9 | className,
10 | style,
11 | count = 0,
12 | maxCount = 99,
13 | color,
14 | dot = false,
15 | size = "medium",
16 | shape = "circle",
17 | showZero = true,
18 | offset,
19 | ...restProps
20 | } = props;
21 |
22 | const getDisplayCount = () => {
23 | if (typeof count === 'number' && count > maxCount) {
24 | return `${maxCount}+`;
25 | }
26 | return count;
27 | };
28 |
29 | let isHidden = !count;
30 | if (typeof count === 'number') {
31 | isHidden = count < 1 && !showZero;
32 | }
33 |
34 | const getOffset = () => {
35 | const result: React.CSSProperties = {}
36 | if (offset) {
37 | offset[0] && (result.right = +offset[0])
38 | offset[1] && (result.marginTop = +offset[1])
39 | }
40 | return result
41 | }
42 |
43 | return (
44 |
51 | {children}
52 | {!isHidden && (
53 |
61 | {!dot ? getDisplayCount() : null}
62 |
63 | )}
64 |
65 | );
66 | };
67 |
68 | Badge.displayName = 'Badge';
69 |
70 | export default Badge;
71 |
--------------------------------------------------------------------------------
/src/Checkbox/type.ts:
--------------------------------------------------------------------------------
1 | export interface CheckboxProps {
2 | /**
3 | * 类名
4 | */
5 | className?: string;
6 | /**
7 | * 内容
8 | */
9 | children?: React.ReactNode;
10 | /**
11 | * 自定义样式
12 | */
13 | style?: React.CSSProperties;
14 | /**
15 | * 按钮多选框尺寸
16 | * @default medium
17 | */
18 | size?: 'small' | 'medium' | 'large';
19 | /**
20 | * 是否固定选中（受控）
21 | */
22 | checked?: boolean;
23 | /**
24 | * 是否默认选中（非受控）
25 | * @default false
26 | */
27 | defaultChecked?: boolean;
28 | /**
29 | * 是否禁用组件
30 | * @default false
31 | */
32 | disabled?: boolean;
33 | /**
34 | * 多选框的值
35 | */
36 | value?: string | number;
37 | /**
38 | * 值变化时触发
39 | */
40 | onChange?: (checked: boolean, ev: React.ChangeEvent) => void;
41 | }
42 |
43 | export interface CheckboxGroupProps {
44 | /**
45 | * 类名
46 | */
47 | className?: string;
48 | /**
49 | * 内容
50 | */
51 | children?: React.ReactNode;
52 | /**
53 | * 自定义样式
54 | */
55 | style?: React.CSSProperties;
56 | /**
57 | * 多选框组选中固定值（受控）
58 | */
59 | selected?: Array | string | number;
60 | /**
61 | * 多选框组选中默认值（非受控）
62 | * @default 第一项
63 | */
64 | defaultSelected?: Array | string | number;
65 | /**
66 | * 按钮多选框全局尺寸
67 | * @default medium
68 | */
69 | size?: 'small' | 'medium' | 'large';
70 | /**
71 | * 多选框组是否全局禁用
72 | */
73 | disabled?: boolean;
74 | /**
75 | * 选中某一项时触发
76 | */
77 | onChange?: (
78 | value: Array | string | number,
79 | ev: React.ChangeEvent,
80 | ) => void;
81 | }
82 |
83 | export interface CheckboxContextValue {
84 | inject: (props: CheckboxProps) => CheckboxProps;
85 | }
86 |
--------------------------------------------------------------------------------
/src/Grid/index.scss:
--------------------------------------------------------------------------------
1 | $grid-list: (
2 | 0,
3 | 1,
4 | 2,
5 | 3,
6 | 4,
7 | 5,
8 | 6,
9 | 7,
10 | 8,
11 | 9,
12 | 10,
13 | 11,
14 | 12,
15 | 13,
16 | 14,
17 | 15,
18 | 16,
19 | 17,
20 | 18,
21 | 19,
22 | 20,
23 | 21,
24 | 22,
25 | 23,
26 | 24
27 | );
28 |
29 | .i-grid {
30 | width: 100%;
31 | display: flex;
32 | flex-flow: row wrap;
33 | margin-right: 0px;
34 | margin-left: 0px;
35 | }
36 |
37 | .i-grid--align-top {
38 | align-items: flex-start;
39 | }
40 |
41 | .i-grid--align-middle {
42 | align-items: center;
43 | }
44 |
45 | .i-grid--align-bottom {
46 | align-items: flex-end;
47 | }
48 |
49 | .i-grid--justify-start {
50 | justify-content: flex-start;
51 | }
52 |
53 | .i-grid--justify-center {
54 | justify-content: center;
55 | }
56 |
57 | .i-grid--justify-end {
58 | justify-content: flex-end;
59 | }
60 |
61 | .i-grid--justify-space-between {
62 | justify-content: space-between;
63 | }
64 |
65 | .i-grid--justify-space-around {
66 | justify-content: space-around;
67 | }
68 |
69 | .i-grid__item {
70 | position: relative;
71 | max-width: 100%;
72 | }
73 |
74 | .i-grid__item--align-top {
75 | align-self: flex-start;
76 | }
77 |
78 | .i-grid__item--align-middle {
79 | align-self: center;
80 | }
81 |
82 | .i-grid__item--align-bottom {
83 | align-self: flex-end;
84 | }
85 |
86 | @each $item in $grid-list {
87 | .i-grid__item--span-#{$item} {
88 | @if $item == 0 { display: none; } @else { display: block; };
89 | max-width: calc((nth($item, 1) / 24) * 100%);
90 | flex: 0 0 calc((nth($item, 1) / 24) * 100%);
91 | }
92 | .i-grid__item--offset-#{$item} {
93 | margin-left: calc((nth($item, 1) / 24) * 100%);
94 | }
95 | .i-grid__item--order-#{$item} {
96 | order: $item;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/Progress/__test__/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/react';
2 | import Progress from '../index';
3 |
4 | describe('Progress 组件测试', () => {
5 | it('create', () => {
6 | const { asFragment } = render();
7 | expect(asFragment()).toMatchSnapshot();
8 | });
9 |
10 | it('label', () => {
11 | const { queryByText } = render();
12 | expect(queryByText('😄')).toBeInTheDocument();
13 | });
14 |
15 | it('hide label', () => {
16 | const { container } = render();
17 | expect(container.querySelector('.i-progress__info')).not.toBeInTheDocument();
18 | });
19 |
20 | it('innerLabel', () => {
21 | const { container } = render();
22 | expect(container.firstChild.firstChild).toHaveClass('i-progress-bar__has-label');
23 | });
24 |
25 | it('color backColor', () => {
26 | const { container } = render();
27 | expect(container.querySelector('.i-progress-bar')).toHaveStyle('background: red');
28 | expect(container.querySelector('.i-progress-bar__inner')).toHaveStyle('background: blue');
29 | });
30 |
31 | it('width', () => {
32 | const { container } = render();
33 | expect(container.firstChild.firstChild).toHaveStyle('width: 300px');
34 | });
35 |
36 | it('strokeWidth', () => {
37 | const { container } = render();
38 | expect(container.firstChild.firstChild).toHaveStyle('height: 30px');
39 | });
40 |
41 | it('circle', () => {
42 | const { asFragment } = render();
43 | expect(asFragment()).toMatchSnapshot();
44 | });
45 | });
46 |
47 |
--------------------------------------------------------------------------------
/src/Button/__test__/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, fireEvent } from '@testing-library/react';
2 | import Button from '../index';
3 |
4 | describe('Button 组件测试', () => {
5 | const renderBtn = (btn) => {
6 | const { container } = render(btn);
7 | return container.firstChild
8 | }
9 |
10 | const renderBtnHasClass = (btn, className) => {
11 | return expect(renderBtn(btn)).toHaveClass(className);
12 | }
13 |
14 | it('children', () => {
15 | const { queryByText } = render();
16 | expect(queryByText('foo')).toBeInTheDocument();
17 | });
18 |
19 | it('type', () => {
20 | renderBtnHasClass(, 'i-button--type-success')
21 | });
22 |
23 | it('variant', () => {
24 | renderBtnHasClass(, 'i-button--variant-outline')
25 | });
26 |
27 | it('active', () => {
28 | renderBtnHasClass(, 'i-button-active')
29 | });
30 |
31 | it('disabled', () => {
32 | const clickFn = jest.fn();
33 | const btn = renderBtn()
34 | expect(btn).toBeDisabled();
35 | fireEvent.click(btn);
36 | expect(clickFn).toBeCalledTimes(0);
37 | });
38 |
39 | it('size', () => {
40 | renderBtnHasClass(, 'i-button--size-small')
41 | });
42 |
43 | it('shape', () => {
44 | renderBtnHasClass(, 'i-button--shape-circle')
45 | });
46 |
47 | it('icon', () => {
48 | const { asFragment } = render();
49 | expect(asFragment()).toMatchSnapshot();
50 | });
51 |
52 | it('onClick', () => {
53 | const clickFn = jest.fn();
54 | fireEvent.click(renderBtn());
55 | expect(clickFn).toHaveBeenCalled();
56 | });
57 | });
58 |
59 |
--------------------------------------------------------------------------------
/src/ColorPicker/type.ts:
--------------------------------------------------------------------------------
1 | export interface colorListType {
2 | value: string
3 | }
4 |
5 | export interface ColorPickerProps {
6 | /**
7 | * 类名
8 | */
9 | className?: string;
10 | /**
11 | * 自定义样式
12 | */
13 | style?: React.CSSProperties;
14 | /**
15 | * 触发颜色块类名
16 | */
17 | triggerClassName?: string;
18 | /**
19 | * 触发颜色块样式
20 | */
21 | triggerStyle?: React.CSSProperties;
22 | /**
23 | * 触发颜色块尺寸
24 | * @default medium
25 | */
26 | size?: 'small' | 'medium' | 'large';
27 | /**
28 | * 固定颜色值（受控）
29 | */
30 | value?: string;
31 | /**
32 | * 默认颜色值（非受控）
33 | * @default #5e62ea
34 | */
35 | defaultValue?: string;
36 | /**
37 | * 底部预设颜色
38 | */
39 | colorList?: colorListType[]
40 | /**
41 | * 是否禁用颜色选择器
42 | * @default false
43 | */
44 | disabled?: boolean;
45 | /**
46 | * 修改颜色值时触发
47 | */
48 | onChange?: (val: string) => void
49 | /**
50 | * 切换颜色面板时触发
51 | */
52 | onTrigger?: (val: string, visible: boolean) => void
53 | }
54 |
55 | export interface ColorPanelProps extends ColorPickerProps {
56 | /**
57 | * 点击关闭按钮时触发
58 | */
59 | onClose?: () => void
60 | }
61 |
62 | export interface ColorItemProps {
63 | /**
64 | * 颜色
65 | * @default #5e62ea
66 | */
67 | color?: string;
68 | /**
69 | * 点击事件
70 | */
71 | onClick?: (val: string) => void;
72 | }
73 |
74 | export interface ColorCursorProps {
75 | /**
76 | * 自定义样式
77 | */
78 | style?: React.CSSProperties;
79 | /**
80 | * 初始横坐标比例
81 | */
82 | x?: number;
83 | /**
84 | * 初始纵坐标比例
85 | */
86 | y?: number;
87 | /**
88 | * 拖拽方向
89 | * @default xy
90 | */
91 | mode?: 'x' | 'y' | 'xy';
92 | /**
93 | * 滑块颜色
94 | * @default #5e62ea
95 | */
96 | color?: string;
97 | }
98 |
--------------------------------------------------------------------------------
/src/Carousel/__test__/__snapshots__/index.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Carousel 组件测试 create 1`] = `
4 |
5 |
9 |
12 |
16 | -
19 | item3
20 |
21 | -
24 | item1
25 |
26 | -
29 | item2
30 |
31 | -
34 | item3
35 |
36 | -
39 | item1
40 |
41 |
42 |
43 |
56 |
59 |
63 |
64 |
67 |
71 |
72 |
55 | {stepItemList}
56 |
57 |
58 | );
59 | };
60 |
61 | Steps.Item = StepsItem
62 |
63 | StepsItem.displayName = 'StepsItem';
64 | Steps.displayName = 'Steps';
65 |
66 | export default Steps;
67 |
--------------------------------------------------------------------------------
/src/Alert/__test__/__snapshots__/index.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Alert 组件测试 type 1`] = `
4 |
5 |
8 |
12 |
15 |
18 | Alert 内容
19 |
20 |
21 |
30 |
34 |
37 |
40 | Alert 内容
41 |
42 |
43 |
52 |
56 |
59 |
62 | Alert 内容
63 |
64 |
65 |
74 |
78 |
81 |
84 | Alert 内容
85 |
86 |
87 |
59 | {children}
60 |
61 |
62 | );
63 | };
64 |
65 | export default RadioGroup;
66 |
--------------------------------------------------------------------------------
/docusaurus/docs/01-基础组件/Divider.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Divider 分割线
3 | ---
4 |
5 | 分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。
6 |
7 | ## 基本用法
8 |
9 | 可通过 `dashed` 属性来控制分割线样式。
10 |
11 | ```tsx live
12 |
13 |
14 | 柯里化即Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
15 |
16 |
17 |
18 | 柯里化即Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
19 |
20 |
21 |
22 | 柯里化即Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
23 |
24 |
33 |
34 | 柯里化即Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
35 |
36 |
iDesign
37 |
38 | 柯里化即Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
39 |
40 |
iDesign
41 |
42 | 柯里化即Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
43 |
44 |
iDesign
45 |
46 | 柯里化即Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
47 |
48 |
8 |
11 |
14 |
17 | 步骤1
18 |
21 |
22 | 1
23 |
24 |
25 |
26 |
29 | 提示文字
30 |
31 |
32 |
33 |
36 |
39 |
42 | 步骤2
43 |
46 |
47 | 2
48 |
49 |
50 |
51 |
54 | 提示文字
55 |
56 |
57 |
58 |
61 |
64 |
67 | 步骤3
68 |
71 |
72 | 3
73 |
74 |
75 |
76 |
79 | 提示文字
80 |
81 |
82 |
83 |
35 |
46 |
54 | {title &&
{title}
}
55 |
{content}
56 |
57 | {closeable && (
58 |
onClose?.()}>
59 |
60 |
61 | )}
62 |
27 | 柯里化即
28 | Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
29 |
30 |
31 |
32 | 柯里化即
33 | Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
34 |
35 |
36 |
37 | 柯里化即
38 | Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
39 |
40 |
41 | );
42 | };
43 |
44 | export default App;
45 | ```
46 |
47 | ## 带文字的分割线
48 |
49 | 可通过 `align` 属性来控制分割线文字内容的位置。
50 |
51 | ```tsx
52 | import React from 'react';
53 | import { Divider } from 'idesign-react';
54 |
55 | const App = () => {
56 | return (
57 | <>
58 |
59 | 柯里化即
60 | Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
61 |
62 | iDesign
63 |
64 | 柯里化即
65 | Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
66 |
67 | iDesign
68 |
69 | 柯里化即
70 | Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
71 |
72 | iDesign
73 |
74 | 柯里化即
75 | Currying，是一门编译原理层面的技术，用途是实现多参函数，其为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受第一个参数的函数，并且返回接受剩余参数且返回结果的新函数。
76 |
77 |
78 | );
79 | };
80 |
81 | export default App;
82 | ```
83 |
84 |
85 |
--------------------------------------------------------------------------------
/src/BackTop/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from 'react';
2 | import classNames from 'classnames';
3 | import _ from 'lodash';
4 | import './index.scss';
5 | import Button from '../Button'
6 | import Icon from '../Icon'
7 | import Transition from '../Transition';
8 | import { BackTopProps } from './type';
9 |
10 | const BackTop: React.FC = (props) => {
11 | const {
12 | className,
13 | children,
14 | style,
15 | target = () => window,
16 | visibleHeight = 0,
17 | smooth = true,
18 | onClick = () => { },
19 | onScroll = () => { },
20 | ...restProps
21 | } = props;
22 |
23 | const [visible, setVisible] = useState(visibleHeight > 0 ? false : true);
24 |
25 | // 获取滚动层节点 t
26 | const getTarget = (target: HTMLElement | Window): HTMLElement => {
27 | return target === window ? document.documentElement : (target as HTMLElement);
28 | };
29 |
30 | const handleScroll = _.throttle((e: Event) => {
31 | const top = (e.target as HTMLElement).scrollTop
32 | top >= visibleHeight ? setVisible(true) : setVisible(false)
33 | onScroll?.()
34 | }, 16)
35 |
36 | useEffect(() => {
37 | const t = getTarget(target?.())
38 | t?.addEventListener('scroll', handleScroll)
39 | }, [])
40 |
41 | const scrollToTop = () => {
42 | const t = getTarget(target?.())
43 | t?.scrollTo({
44 | top: 0,
45 | behavior: smooth ? 'smooth' : 'auto'
46 | });
47 | onClick?.();
48 | };
49 |
50 | return (
51 |
60 |
65 | {children || (
66 |
69 | )}
70 |
71 |
72 | );
73 | };
74 |
75 | BackTop.displayName = 'BackTop';
76 |
77 | export default BackTop;
78 |
--------------------------------------------------------------------------------
15 |