Skip to content

Commit 2b2b6b8

Browse files
big-camelbig-camel
committed
feat: add children prop to toolbar item
1 parent 4eaa14b commit 2b2b6b8

File tree

4 files changed

+87
-30
lines changed

4 files changed

+87
-30
lines changed

‎.changeset/unlucky-eyes-hug.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: add children prop to toolbar item

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export interface CloseButtonProps extends React.HTMLAttributes<HTMLDivElement> {
66
visible?: boolean
77
}
88

9-
export const CloseButton: FC<CloseButtonProps> = ({ visible = true, ...props }) => {
9+
export const CloseButton: FC<CloseButtonProps> = ({ visible = true, children, ...props }) => {
1010
return (
1111
<div
1212
css={[
@@ -15,7 +15,7 @@ export const CloseButton: FC<CloseButtonProps> = ({ visible = true, ...props })
1515
]}
1616
{...props}
1717
>
18-
<CloseIcon />
18+
{children ?? <CloseIcon />}
1919
</div>
2020
)
2121
}

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

Lines changed: 63 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,16 @@ const getScaleStep = (scale: number, isAdd = true) => {
5959

6060
export interface DragItemProps extends OverlayRenderProps {
6161
className?: string
62+
children?: React.ReactNode
6263
}
6364

64-
export const DragArrowLeft: FC<DragItemProps> = ({ index, onIndexChange, images, className }) => {
65+
export const DragArrowLeft: FC<DragItemProps> = ({
66+
index,
67+
onIndexChange,
68+
images,
69+
className,
70+
children,
71+
}) => {
6572
const count = images.length
6673
// 当前在第一张
6774
const isFirst = index === 0
@@ -71,17 +78,25 @@ export const DragArrowLeft: FC<DragItemProps> = ({ index, onIndexChange, images,
7178
}
7279
return (
7380
<DragStyledItem disabled={isFirst} onClick={prev} className={className}>
74-
<ArrowLeftIcon />
81+
{children ?? <ArrowLeftIcon />}
7582
</DragStyledItem>
7683
)
7784
}
7885

79-
export const DragCountText: FC<DragItemProps> = ({ index, images, className }) => {
86+
export const DragCountText: FC<DragItemProps> = ({ index, images, className, children }) => {
8087
const count = images.length
81-
return <DragStyledLabel className={className}>{`${index + 1}/${count}`}</DragStyledLabel>
88+
return (
89+
<DragStyledLabel className={className}>{children ?? `${index + 1}/${count}`}</DragStyledLabel>
90+
)
8291
}
8392

84-
export const DragArrowRight: FC<DragItemProps> = ({ index, onIndexChange, images, className }) => {
93+
export const DragArrowRight: FC<DragItemProps> = ({
94+
index,
95+
onIndexChange,
96+
images,
97+
className,
98+
children,
99+
}) => {
85100
const count = images.length
86101
// 当前在最后一张
87102
const isLast = index === count - 1
@@ -91,7 +106,7 @@ export const DragArrowRight: FC<DragItemProps> = ({ index, onIndexChange, images
91106
}
92107
return (
93108
<DragStyledItem disabled={isLast} onClick={next} className={className}>
94-
<ArrowRightIcon />
109+
{children ?? <ArrowRightIcon />}
95110
</DragStyledItem>
96111
)
97112
}
@@ -100,74 +115,102 @@ export const DragSplit: FC<DragItemProps> = ({ className }) => {
100115
return <DragStyledSplit className={className} />
101116
}
102117

103-
export const DragZoomOut: FC<DragItemProps> = ({ scale, onScale, loading, className }) => {
118+
export const DragZoomOut: FC<DragItemProps> = ({
119+
scale,
120+
onScale,
121+
loading,
122+
className,
123+
children,
124+
}) => {
104125
const handleZoomOut = () => {
105126
onScale(scale - getScaleStep(scale, false))
106127
}
107128
return (
108129
<DragStyledItem disabled={loading} onClick={handleZoomOut} className={className}>
109-
<ZoomOutIcon />
130+
{children ?? <ZoomOutIcon />}
110131
</DragStyledItem>
111132
)
112133
}
113134

114-
export const DragScaleCount: FC<DragItemProps> = ({ scale, className }) => {
115-
return <DragStyledLabel className={className}>{`${Math.round(scale * 100)}%`}</DragStyledLabel>
135+
export const DragScaleCount: FC<DragItemProps> = ({ scale, className, children }) => {
136+
return (
137+
<DragStyledLabel className={className}>
138+
{children ?? `${Math.round(scale * 100)}%`}
139+
</DragStyledLabel>
140+
)
116141
}
117142

118-
export const DragZoomIn: FC<DragItemProps> = ({ scale, onScale, loading, className }) => {
143+
export const DragZoomIn: FC<DragItemProps> = ({ scale, onScale, loading, className, children }) => {
119144
const handleZoomIn = () => {
120145
onScale(scale + getScaleStep(scale))
121146
}
122147
return (
123148
<DragStyledItem disabled={loading} onClick={handleZoomIn} className={className}>
124-
<ZoomInIcon />
149+
{children ?? <ZoomInIcon />}
125150
</DragStyledItem>
126151
)
127152
}
128153

129-
export const DragOneToOne: FC<DragItemProps> = ({ onScale, loading, className }) => {
154+
export const DragOneToOne: FC<DragItemProps> = ({ onScale, loading, className, children }) => {
130155
const handleOneToOne = () => {
131156
onScale(1)
132157
}
133158
return (
134159
<DragStyledItem disabled={loading} onClick={handleOneToOne} className={className}>
135-
<OneToOneIcon />
160+
{children ?? <OneToOneIcon />}
136161
</DragStyledItem>
137162
)
138163
}
139164

140-
export const DragDownload: FC<DragItemProps> = ({ images, index, loading, className }) => {
165+
export const DragDownload: FC<DragItemProps> = ({
166+
images,
167+
index,
168+
loading,
169+
className,
170+
children,
171+
}) => {
141172
const handleDownload = () => {
142173
const { src } = images[index]
143174
if (!src) return
144175
download(src)
145176
}
146177
return (
147178
<DragStyledItem disabled={loading} onClick={handleDownload} className={className}>
148-
<DownloadIcon />
179+
{children ?? <DownloadIcon />}
149180
</DragStyledItem>
150181
)
151182
}
152183

153-
export const DragRotateLeft: FC<DragItemProps> = ({ rotate, onRotate, loading, className }) => {
184+
export const DragRotateLeft: FC<DragItemProps> = ({
185+
rotate,
186+
onRotate,
187+
loading,
188+
className,
189+
children,
190+
}) => {
154191
const handleRotateLeft = () => {
155192
onRotate(rotate - 90)
156193
}
157194
return (
158195
<DragStyledItem disabled={loading} onClick={handleRotateLeft} className={className}>
159-
<RotateLeftIcon />
196+
{children ?? <RotateLeftIcon />}
160197
</DragStyledItem>
161198
)
162199
}
163200

164-
export const DragRotateRight: FC<DragItemProps> = ({ rotate, onRotate, loading, className }) => {
201+
export const DragRotateRight: FC<DragItemProps> = ({
202+
rotate,
203+
onRotate,
204+
loading,
205+
className,
206+
children,
207+
}) => {
165208
const handleRotateRight = () => {
166209
onRotate(rotate + 90)
167210
}
168211
return (
169212
<DragStyledItem disabled={loading} onClick={handleRotateRight} className={className}>
170-
<RotateRightIcon />
213+
{children ?? <RotateRightIcon />}
171214
</DragStyledItem>
172215
)
173216
}

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface SlideToolbarProps extends OverlayRenderProps {
2323

2424
export interface SlideItemProps extends OverlayRenderProps {
2525
className?: string
26+
children?: React.ReactNode
2627
}
2728

2829
export const SlideArrowLeft: FC<SlideItemProps> = ({
@@ -32,6 +33,7 @@ export const SlideArrowLeft: FC<SlideItemProps> = ({
3233
onIndexChange,
3334
overlayVisible,
3435
className,
36+
children,
3537
}) => {
3638
const count = images.length
3739
const isFirst = index === 0
@@ -46,7 +48,7 @@ export const SlideArrowLeft: FC<SlideItemProps> = ({
4648

4749
return (
4850
<StyledArrowLeft visible={arrowLeftVisible} onClick={prev} className={className}>
49-
<ArrowLeftIcon />
51+
{children ?? <ArrowLeftIcon />}
5052
</StyledArrowLeft>
5153
)
5254
}
@@ -58,6 +60,7 @@ export const SlideArrowRight: FC<SlideItemProps> = ({
5860
onIndexChange,
5961
overlayVisible,
6062
className,
63+
children,
6164
}) => {
6265
const count = images.length
6366

@@ -74,26 +77,32 @@ export const SlideArrowRight: FC<SlideItemProps> = ({
7477

7578
return (
7679
<StyledArrowRight visible={arrowRightVisible} onClick={next} className={className}>
77-
<ArrowRightIcon />
80+
{children ?? <ArrowRightIcon />}
7881
</StyledArrowRight>
7982
)
8083
}
8184

82-
export const SlideCountText: FC<SlideItemProps> = ({ index, images, className }) => {
85+
export const SlideCountText: FC<SlideItemProps> = ({ index, images, className, children }) => {
8386
const count = images.length
8487
return (
8588
<div
8689
tw="absolute bottom-5 left-2 sm:left-3 md:left-4 lg:left-5 flex justify-center items-center z-30 text-white"
8790
className={className}
8891
>
89-
<label tw="px-2 py-0.5 text-lg sm:px-2.5 sm:py-1 sm:text-xl opacity-100 sm:opacity-90 md:opacity-75 hover:opacity-100 bg-gray-800/90 sm:bg-gray-800/60 md:bg-gray-800/30 disabled:cursor-not-allowed disabled:text-gray-600 rounded-md cursor-default my-0 mx-0 transition-opacity ease-linear delay-200">{`${
90-
index + 1
91-
}/${count}`}</label>
92+
<label tw="px-2 py-0.5 text-lg sm:px-2.5 sm:py-1 sm:text-xl opacity-100 sm:opacity-90 md:opacity-75 hover:opacity-100 bg-gray-800/90 sm:bg-gray-800/60 md:bg-gray-800/30 disabled:cursor-not-allowed disabled:text-gray-600 rounded-md cursor-default my-0 mx-0 transition-opacity ease-linear delay-200">
93+
{children ?? `${index + 1}/${count}`}
94+
</label>
9295
</div>
9396
)
9497
}
9598

96-
export const SlideDownload: FC<SlideItemProps> = ({ loading, images, index, className }) => {
99+
export const SlideDownload: FC<SlideItemProps> = ({
100+
loading,
101+
images,
102+
index,
103+
className,
104+
children,
105+
}) => {
97106
const handleDownload = () => {
98107
const { src } = images[index]
99108
if (!src) return
@@ -109,7 +118,7 @@ export const SlideDownload: FC<SlideItemProps> = ({ loading, images, index, clas
109118
onClick={handleDownload}
110119
tw="p-2 text-lg sm:p-2.5 sm:text-xl opacity-100 sm:opacity-90 md:opacity-75 hover:opacity-100 bg-gray-800/90 sm:bg-gray-800/60 md:bg-gray-800/30 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-600 disabled:hover:bg-transparent m-0 rounded-md transition-opacity ease-linear delay-200"
111120
>
112-
<DownloadIcon />
121+
{children ?? <DownloadIcon />}
113122
</button>
114123
</div>
115124
)

0 commit comments

Comments
 (0)