Skip to content

Commit 7eb4324

Browse files
big-camelbig-camel
committed
feat: export dargtoolbar item
1 parent 5679f07 commit 7eb4324

File tree

2 files changed

+131
-98
lines changed

2 files changed

+131
-98
lines changed

‎.changeset/flat-readers-tie.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'react-image-previewer': patch
3+
---
4+
5+
feat: export drag toolbar item

‎packages/core/src/ui/DragToolbar.tsx‎

Lines changed: 126 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -57,108 +57,136 @@ const getScaleStep = (scale: number, isAdd = true) => {
5757
return 0.5
5858
}
5959

60+
export interface DragItemProps extends OverlayRenderProps {
61+
className?: string
62+
}
63+
64+
export const DragArrowLeft: FC<DragItemProps> = ({ index, onIndexChange, images, className }) => {
65+
const count = images.length
66+
// 当前在第一张
67+
const isFirst = index === 0
68+
69+
const prev = () => {
70+
onIndexChange(isFirst ? count - 1 : index - 1)
71+
}
72+
return (
73+
<DragStyledItem disabled={isFirst} onClick={prev} className={className}>
74+
<ArrowLeftIcon />
75+
</DragStyledItem>
76+
)
77+
}
78+
79+
export const DragCountText: FC<DragItemProps> = ({ index, images, className }) => {
80+
const count = images.length
81+
return <DragStyledLabel className={className}>{`${index + 1}/${count}`}</DragStyledLabel>
82+
}
83+
84+
export const DragArrowRight: FC<DragItemProps> = ({ index, onIndexChange, images, className }) => {
85+
const count = images.length
86+
// 当前在最后一张
87+
const isLast = index === count - 1
88+
89+
const next = () => {
90+
onIndexChange(isLast ? 0 : index + 1)
91+
}
92+
return (
93+
<DragStyledItem disabled={isLast} onClick={next} className={className}>
94+
<ArrowRightIcon />
95+
</DragStyledItem>
96+
)
97+
}
98+
99+
export const DragSplit: FC<DragItemProps> = ({ className }) => {
100+
return <DragStyledSplit className={className} />
101+
}
102+
103+
export const DragZoomOut: FC<DragItemProps> = ({ scale, onScale, loading, className }) => {
104+
const handleZoomOut = () => {
105+
onScale(scale - getScaleStep(scale, false))
106+
}
107+
return (
108+
<DragStyledItem disabled={loading} onClick={handleZoomOut} className={className}>
109+
<ZoomOutIcon />
110+
</DragStyledItem>
111+
)
112+
}
113+
114+
export const DragScaleCount: FC<DragItemProps> = ({ scale, className }) => {
115+
return <DragStyledLabel className={className}>{`${Math.round(scale * 100)}%`}</DragStyledLabel>
116+
}
117+
118+
export const DragZoomIn: FC<DragItemProps> = ({ scale, onScale, loading, className }) => {
119+
const handleZoomIn = () => {
120+
onScale(scale + getScaleStep(scale))
121+
}
122+
return (
123+
<DragStyledItem disabled={loading} onClick={handleZoomIn} className={className}>
124+
<ZoomInIcon />
125+
</DragStyledItem>
126+
)
127+
}
128+
129+
export const DragOneToOne: FC<DragItemProps> = ({ onScale, loading, className }) => {
130+
const handleOneToOne = () => {
131+
onScale(1)
132+
}
133+
return (
134+
<DragStyledItem disabled={loading} onClick={handleOneToOne} className={className}>
135+
<OneToOneIcon />
136+
</DragStyledItem>
137+
)
138+
}
139+
140+
export const DragDownload: FC<DragItemProps> = ({ images, index, loading, className }) => {
141+
const handleDownload = () => {
142+
const { src } = images[index]
143+
if (!src) return
144+
download(src)
145+
}
146+
return (
147+
<DragStyledItem disabled={loading} onClick={handleDownload} className={className}>
148+
<DownloadIcon />
149+
</DragStyledItem>
150+
)
151+
}
152+
153+
export const DragRotateLeft: FC<DragItemProps> = ({ rotate, onRotate, loading, className }) => {
154+
const handleRotateLeft = () => {
155+
onRotate(rotate - 90)
156+
}
157+
return (
158+
<DragStyledItem disabled={loading} onClick={handleRotateLeft} className={className}>
159+
<RotateLeftIcon />
160+
</DragStyledItem>
161+
)
162+
}
163+
164+
export const DragRotateRight: FC<DragItemProps> = ({ rotate, onRotate, loading, className }) => {
165+
const handleRotateRight = () => {
166+
onRotate(rotate + 90)
167+
}
168+
return (
169+
<DragStyledItem disabled={loading} onClick={handleRotateRight} className={className}>
170+
<RotateRightIcon />
171+
</DragStyledItem>
172+
)
173+
}
174+
60175
export const DragToolbarItemDefaultComponent: Record<
61176
DragToolbarKeys,
62177
React.FC<OverlayRenderProps>
63178
> = {
64-
arrowLeft: ({ index, onIndexChange, images }: OverlayRenderProps) => {
65-
const count = images.length
66-
// 当前在第一张
67-
const isFirst = index === 0
68-
69-
const prev = () => {
70-
onIndexChange(isFirst ? count - 1 : index - 1)
71-
}
72-
return (
73-
<DragStyledItem disabled={isFirst} onClick={prev}>
74-
<ArrowLeftIcon />
75-
</DragStyledItem>
76-
)
77-
},
78-
countText: ({ index, images }: OverlayRenderProps) => {
79-
const count = images.length
80-
return <DragStyledLabel>{`${index + 1}/${count}`}</DragStyledLabel>
81-
},
82-
arrowRight: ({ index, onIndexChange, images }: OverlayRenderProps) => {
83-
const count = images.length
84-
// 当前在最后一张
85-
const isLast = index === count - 1
86-
87-
const next = () => {
88-
onIndexChange(isLast ? 0 : index + 1)
89-
}
90-
return (
91-
<DragStyledItem disabled={isLast} onClick={next}>
92-
<ArrowRightIcon />
93-
</DragStyledItem>
94-
)
95-
},
96-
split: DragStyledSplit,
97-
zoomOut: ({ scale, onScale, loading }: OverlayRenderProps) => {
98-
const handleZoomOut = () => {
99-
onScale(scale - getScaleStep(scale, false))
100-
}
101-
return (
102-
<DragStyledItem disabled={loading} onClick={handleZoomOut}>
103-
<ZoomOutIcon />
104-
</DragStyledItem>
105-
)
106-
},
107-
scaleCount: ({ scale }: OverlayRenderProps) => {
108-
return <DragStyledLabel>{`${Math.round(scale * 100)}%`}</DragStyledLabel>
109-
},
110-
zoomIn: ({ scale, onScale, loading }: OverlayRenderProps) => {
111-
const handleZoomIn = () => {
112-
onScale(scale + getScaleStep(scale))
113-
}
114-
return (
115-
<DragStyledItem disabled={loading} onClick={handleZoomIn}>
116-
<ZoomInIcon />
117-
</DragStyledItem>
118-
)
119-
},
120-
oneToOne: ({ onScale, loading }: OverlayRenderProps) => {
121-
const handleOneToOne = () => {
122-
onScale(1)
123-
}
124-
return (
125-
<DragStyledItem disabled={loading} onClick={handleOneToOne}>
126-
<OneToOneIcon />
127-
</DragStyledItem>
128-
)
129-
},
130-
download: ({ images, index, loading }: OverlayRenderProps) => {
131-
const handleDownload = () => {
132-
const { src } = images[index]
133-
if (!src) return
134-
download(src)
135-
}
136-
return (
137-
<DragStyledItem disabled={loading} onClick={handleDownload}>
138-
<DownloadIcon />
139-
</DragStyledItem>
140-
)
141-
},
142-
rotateLeft: ({ rotate, onRotate, loading }: OverlayRenderProps) => {
143-
const handleRotateLeft = () => {
144-
onRotate(rotate - 90)
145-
}
146-
return (
147-
<DragStyledItem disabled={loading} onClick={handleRotateLeft}>
148-
<RotateLeftIcon />
149-
</DragStyledItem>
150-
)
151-
},
152-
rotateRight: ({ rotate, onRotate, loading }: OverlayRenderProps) => {
153-
const handleRotateRight = () => {
154-
onRotate(rotate + 90)
155-
}
156-
return (
157-
<DragStyledItem disabled={loading} onClick={handleRotateRight}>
158-
<RotateRightIcon />
159-
</DragStyledItem>
160-
)
161-
},
179+
arrowLeft: DragArrowLeft,
180+
countText: DragCountText,
181+
arrowRight: DragArrowRight,
182+
split: DragSplit,
183+
zoomOut: DragZoomOut,
184+
scaleCount: DragScaleCount,
185+
zoomIn: DragZoomIn,
186+
oneToOne: DragOneToOne,
187+
download: DragDownload,
188+
rotateLeft: DragRotateLeft,
189+
rotateRight: DragRotateRight,
162190
}
163191

164192
export const DragToolbar: FC<DragToolbarProps> = ({

0 commit comments

Comments
 (0)