Skip to content

Commit 2671988

Browse files
novlan1github-actions[bot]
novlan1
and
github-actions[bot]
authored
feat(image-viewer): add image-viewer (#607)
* feat(image-viewer): add image-viewer * feat(image-viewer): add transition * feat(image-viewer): try add drag events * chore: update spell * feat(image-viewer): optimize viewer * chore: lint * chore: update snapshot * chore: update snapshot * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * feat(image-viewer): 优化preview * chore: test preview * chore: test preview * chore: test preview * chore: test preview * feat(viewer): 优化放大 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent fb234c7 commit 2671988

27 files changed

+1273
-97
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
"concurrently": "^6.4.0",
114114
"cross-env": "^7.0.3",
115115
"cssnano": "^5.0.12",
116+
"csstype": "^3.1.3",
116117
"cz-conventional-changelog": "^3.3.0",
117118
"dom-parser": "^0.1.6",
118119
"eslint": "^8.4.1",

‎site/mobile/mobile.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ export default {
4545
name: 'image',
4646
component: () => import('tdesign-mobile-react/image/_example/index.tsx'),
4747
},
48+
{
49+
title: 'ImageViewer 图片预览',
50+
name: 'image-viewer',
51+
component: () => import('tdesign-mobile-react/image-viewer/_example/index.tsx'),
52+
},
4853
{
4954
title: 'Overlay 遮罩层',
5055
name: 'overlay',

‎site/web/site.config.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -384,12 +384,14 @@ export const docs = [
384384
component: () => import('tdesign-mobile-react/image/image.md'),
385385
componentEn: () => import('tdesign-mobile-react/image/image.en-US.md'),
386386
},
387-
// {
388-
// title: 'ImageViewer 图片预览',
389-
// name: 'image-viewer',
390-
// path: '/mobile-react/components/image-viewer',
391-
// component: () => import('tdesign-mobile-react/image-viewer/image-viewer.md'),
392-
// },
387+
{
388+
title: 'ImageViewer 图片预览',
389+
titleEn: 'ImageViewer',
390+
name: 'ImageViewer',
391+
path: '/mobile-react/components/image-viewer',
392+
component: () => import('tdesign-mobile-react/image-viewer/image-viewer.md'),
393+
componentEn: () => import('tdesign-mobile-react/image-viewer/image-viewer.en-US.md'),
394+
},
393395
{
394396
title: 'List 列表',
395397
name: 'list',

‎src/_util/useSwipe.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ export interface UseSwipeOptions {
3535
* 滑动结束时的回调函数
3636
*/
3737
onSwipeEnd?: (e: TouchEvent) => void;
38+
39+
/**
40+
* 是否禁用
41+
*/
42+
disabled?: boolean;
3843
}
3944

4045
/**
@@ -48,7 +53,7 @@ export function useSwipe(target: EventTarget | null | undefined, options = {} as
4853
const coordsStart = useRef<Position>({ x: 0, y: 0 }); // 用于存储触摸起始位置的坐标
4954
const coordsEnd = useRef<Position>({ x: 0, y: 0 }); // 用于存储触摸结束位置的坐标
5055
const coordsOffset = useRef<Position>({ x: 0, y: 0 }); // 用于存储滑动偏移量
51-
const { threshold = 0, onSwipe, onSwipeEnd, onSwipeStart, listenerOptions = { passive: true } } = options;
56+
const { threshold = 0, onSwipe, onSwipeEnd, onSwipeStart, listenerOptions = { passive: true }, disabled } = options;
5257

5358
const updateOffset = useCallback(() => {
5459
coordsOffset.current = {
@@ -95,6 +100,7 @@ export function useSwipe(target: EventTarget | null | undefined, options = {} as
95100
const onTouchStart = useCallback(
96101
(e: TouchEvent) => {
97102
if (e.touches.length !== 1) return;
103+
if (disabled) return;
98104
if (
99105
listenerOptions === true ||
100106
(isObject(listenerOptions) && listenerOptions.capture && listenerOptions.passive)
@@ -106,6 +112,7 @@ export function useSwipe(target: EventTarget | null | undefined, options = {} as
106112
updateCoordsEnd(x, y);
107113
onSwipeStart?.(e);
108114
},
115+
// eslint-disable-next-line react-hooks/exhaustive-deps
109116
[listenerOptions, updateCoordsStart, updateCoordsEnd, onSwipeStart],
110117
);
111118

‎src/image-viewer/_example/align.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useState } from 'react';
2+
import { ImageViewer, Button, type ImageInfo } from 'tdesign-mobile-react';
3+
4+
const images: ImageInfo[] = [
5+
{
6+
url: 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
7+
align: 'start',
8+
},
9+
{
10+
url: 'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
11+
align: 'end',
12+
},
13+
{
14+
url: 'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
15+
align: 'center',
16+
},
17+
];
18+
19+
export default function AlignDemo() {
20+
const [visible, setVisible] = useState(false);
21+
22+
return (
23+
<div className="image-example">
24+
<Button block size="large" variant="outline" theme="primary" onClick={() => setVisible(true)}>
25+
基础图片预览 + 对齐方式
26+
</Button>
27+
28+
<ImageViewer images={images} visible={visible} onClose={() => setVisible(false)} />
29+
</div>
30+
);
31+
}

‎src/image-viewer/_example/base.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { useState } from 'react';
2+
import { ImageViewer, Button } from 'tdesign-mobile-react';
3+
4+
const images = [
5+
'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
6+
'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
7+
];
8+
9+
export default function BaseDemo() {
10+
const [visible, setVisible] = useState(false);
11+
12+
const onIndexChange = (...args) => {
13+
console.log('[onIndexChange]', args);
14+
};
15+
16+
return (
17+
<div className="image-example">
18+
<Button block size="large" variant="outline" theme="primary" onClick={() => setVisible(true)}>
19+
基础图片预览
20+
</Button>
21+
22+
<ImageViewer images={images} visible={visible} onClose={() => setVisible(false)} onIndexChange={onIndexChange} />
23+
</div>
24+
);
25+
}

‎src/image-viewer/_example/index.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import TDemoBlock from '../../../site/mobile/components/DemoBlock';
3+
import TDemoHeader from '../../../site/mobile/components/DemoHeader';
4+
import BaseDemo from './base';
5+
import AlignDemo from './align';
6+
import OperationDemo from './operation';
7+
import './style/index.less';
8+
9+
export default function ImageViewerDemo() {
10+
return (
11+
<div className="tdesign-mobile-demo">
12+
<TDemoHeader
13+
title="ImageViewer 图片预览"
14+
summary="图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范"
15+
/>
16+
<TDemoBlock title="01 组件类型" summary="图片预览类型" padding={true}>
17+
<BaseDemo />
18+
</TDemoBlock>
19+
<TDemoBlock title="02 组件类型" summary="图片预览类型，可设置垂直对齐方式" padding={true}>
20+
<AlignDemo />
21+
</TDemoBlock>
22+
<TDemoBlock title="03 组件类型" summary="带操作图片预览" padding={true}>
23+
<OperationDemo />
24+
</TDemoBlock>
25+
</div>
26+
);
27+
}

‎src/image-viewer/_example/operation.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { useState } from 'react';
2+
import { ImageViewer, Button } from 'tdesign-mobile-react';
3+
4+
const images = [
5+
'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
6+
'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
7+
];
8+
9+
export default function OperationDemo() {
10+
const [visible, setVisible] = useState(false);
11+
12+
return (
13+
<div className="image-example">
14+
<Button block size="large" variant="outline" theme="primary" onClick={() => setVisible(true)}>
15+
带操作图片预览
16+
</Button>
17+
18+
<ImageViewer
19+
images={images}
20+
visible={visible}
21+
showIndex={true}
22+
deleteBtn={true}
23+
onClose={() => setVisible(false)}
24+
/>
25+
</div>
26+
);
27+
}

‎src/image-viewer/_example/style/index.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tdesign-mobile-demo {
2+
background-color: #fff;
3+
min-height: 100%;
4+
}

‎src/image-viewer/defaultProps.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3+
* */
4+
5+
import { TdImageViewerProps } from './type';
6+
7+
export const imageViewerDefaultProps: TdImageViewerProps = {
8+
closeBtn: true,
9+
deleteBtn: false,
10+
images: [],
11+
defaultIndex: 0,
12+
maxZoom: 3,
13+
showIndex: false,
14+
defaultVisible: false,
15+
};

0 commit comments

Comments
 (0)