Skip to content

Commit fb9ba04

Browse files
KikobeatsKikobeats
authored
refactor: prefix internal props (#375)
1 parent 4874c70 commit fb9ba04

File tree

10 files changed

+99
-99
lines changed

10 files changed

+99
-99
lines changed

‎packages/react/src/components/Card/CardMedia/Controls/FooterControls.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const PlaybackRateButton = styled(MediaButton).attrs({
8888
`
8989

9090
const TimeLabel = styled('span').attrs({ className: classNames.progressTime })`
91-
margin: ${({ right }) => (!right ? '0 auto 0 0' : '0 0 0 auto')};
91+
margin: ${({ $right }) => (!$right ? '0 auto 0 0' : '0 0 0 auto')};
9292
font-family: ${font.mono};
9393
font-size: 12px;
9494
padding: 0 16px;
@@ -131,7 +131,7 @@ const FooterControls = ({
131131
<span>{playbackRate}x</span>
132132
</PlaybackRateButton>
133133

134-
{isLargeCard && <TimeLabel right>{endTime}</TimeLabel>}
134+
{isLargeCard && <TimeLabel $right>{endTime}</TimeLabel>}
135135
</BottomControls>
136136
)
137137
}

‎packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,14 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
5959
}
6060
`
6161

62-
const PlaybackButton = ({ isPlaying, ...props }) => {
62+
const PlaybackButton = ({ $isPlaying, ...props }) => {
6363
const PlaybackComponent = useMemo(
64-
() => (isPlaying ? Pause : Play),
65-
[isPlaying]
64+
() => ($isPlaying ? Pause : Play),
65+
[$isPlaying]
6666
)
6767

6868
return (
69-
<PlaybackButtonWrap title={isPlaying ? 'Pause' : 'Play'} {...props}>
69+
<PlaybackButtonWrap title={$isPlaying ? 'Pause' : 'Play'} {...props}>
7070
<PlaybackIcon as={PlaybackComponent} />
7171
</PlaybackButtonWrap>
7272
)

‎packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ const scrubberSizeScales = { normal: 0.8, small: 0.9 }
99
const getScrubberSize = size =>
1010
Math.floor(SCRUBBER_SIZE * (scrubberSizeScales[size] || 1))
1111

12-
const Scrubber = styled('div').attrs(({ isVisible, positionX }) => ({
12+
const Scrubber = styled('div').attrs(({ $isVisible, $positionX }) => ({
1313
style: {
14-
left: positionX,
15-
transform: `scale(${isVisible ? 1 : 0.5}) translate(-50%, -50%)`,
16-
opacity: isVisible ? 1 : 0,
17-
visibility: isVisible ? 'visible' : 'hidden'
14+
left: $positionX,
15+
transform: `scale(${$isVisible ? 1 : 0.5}) translate(-50%, -50%)`,
16+
opacity: $isVisible ? 1 : 0,
17+
visibility: $isVisible ? '$visible' : 'hidden'
1818
}
1919
}))`
2020
position: absolute;

‎packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ const sizeScales = { normal: 0.8 }
99
const getMarkerFontSize = size => BASE_FONT_SIZE * (sizeScales[size] || 1)
1010

1111
const TooltipBase = styled('span').attrs(
12-
({ position, isDragging, visible }) => ({
12+
({ position, $isDragging, $visible }) => ({
1313
style: {
1414
left: `${position}px`,
15-
top: visible ? '-4px' : '0px',
16-
visibility: visible ? 'visible' : 'hidden',
17-
opacity: visible ? 1 : 0,
18-
transform: `translate(-50%, ${!isDragging ? -100 : -110}%)`
15+
top: $visible ? '-4px' : '0px',
16+
visibility: $visible ? '$visible' : 'hidden',
17+
opacity: $visible ? 1 : 0,
18+
transform: `translate(-50%, ${!$isDragging ? -100 : -110}%)`
1919
}
2020
})
2121
)`
@@ -35,14 +35,14 @@ const TooltipBase = styled('span').attrs(
3535
`
3636

3737
const Tooltip = forwardRef(
38-
({ isDragging, isVisible, label, positionX, size, ...props }, ref) => (
38+
({ $isDragging, $isVisible, label, $positionX, size, ...props }, ref) => (
3939
<>
4040
<TooltipBase
41-
visible={isVisible}
42-
position={positionX}
41+
$visible={$isVisible}
42+
position={$positionX}
4343
$cardSize={size}
4444
ref={ref}
45-
isDragging={isDragging}
45+
$isDragging={$isDragging}
4646
{...props}
4747
>
4848
{label}

‎packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js

+26-26
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ const OuterWrap = styled('div').attrs(() => ({
3434
backface-visibility: hidden;
3535
`
3636

37-
const BarsWrap = styled('div').attrs(({ $cardSize, isDragging }) => {
38-
if (isDragging) {
37+
const BarsWrap = styled('div').attrs(({ $cardSize, $isDragging }) => {
38+
if ($isDragging) {
3939
const activeHeight = getProgressBarActiveHeight($cardSize)
4040

4141
return {
@@ -77,9 +77,9 @@ const ProgressLine = styled('div')`
7777
overflow: hidden;
7878
`
7979

80-
const ProgressMask = styled('div').attrs(({ maskScale }) => ({
80+
const ProgressMask = styled('div').attrs(({ $maskScale }) => ({
8181
style: {
82-
transform: `scaleX(${maskScale})`
82+
transform: `scaleX(${$maskScale})`
8383
}
8484
}))`
8585
position: absolute;
@@ -93,12 +93,12 @@ const ProgressMask = styled('div').attrs(({ maskScale }) => ({
9393
`
9494

9595
const ProgressHover = styled('div').attrs(
96-
({ cursorRatio, isHovering, progressPercent }) => ({
96+
({ $cursorRatio, $isHovering, $progressPercent }) => ({
9797
style: {
98-
left: progressPercent,
99-
transform: `scaleX(${cursorRatio})`,
100-
opacity: isHovering ? 1 : 0,
101-
visibility: isHovering ? 'visible' : 'hidden'
98+
left: $progressPercent,
99+
transform: `scaleX(${$cursorRatio})`,
100+
opacity: $isHovering ? 1 : 0,
101+
visibility: $isHovering ? '$visible' : 'hidden'
102102
}
103103
})
104104
)`
@@ -109,7 +109,7 @@ const ProgressHover = styled('div').attrs(
109109
background: rgba(255, 255, 255, 0.4);
110110
transform-origin: left center;
111111
transition: ${transition.short('opacity', 'visibility')};
112-
will-change: left, transform, opacity, visible;
112+
will-change: left, transform, opacity, $visible;
113113
`
114114

115115
const BufferedChunk = styled('div').attrs(({ start, end }) => ({
@@ -129,8 +129,8 @@ const ProgressBar = ({
129129
cursorX,
130130
duration,
131131
hoveredTime,
132-
isDragging,
133-
isHovering,
132+
$isDragging,
133+
$isHovering,
134134
onClick,
135135
onMouseDown,
136136
onMouseOver,
@@ -158,12 +158,12 @@ const ProgressBar = ({
158158
[duration, progress]
159159
)
160160

161-
const progressPercent = useMemo(
161+
const $progressPercent = useMemo(
162162
() => `${clampNumber(progressRatio * 100, 1, 99)}%`,
163163
[progressRatio]
164164
)
165165

166-
const cursorRatio = useMemo(() => {
166+
const $cursorRatio = useMemo(() => {
167167
if (wrapRef.current) {
168168
const wrapWidth = getWrapWidth()
169169
const startPoint = progressRatio * wrapWidth
@@ -213,39 +213,39 @@ const ProgressBar = ({
213213
)
214214

215215
const showAccessories = useMemo(
216-
() => isDragging || isHovering,
217-
[isDragging, isHovering]
216+
() => $isDragging || $isHovering,
217+
[$isDragging, $isHovering]
218218
)
219219

220220
return (
221221
<OuterWrap $cardSize={size} ref={wrapRef} {...mouseEvents}>
222-
<BarsWrap $cardSize={size} isDragging={isDragging}>
222+
<BarsWrap $cardSize={size} $isDragging={$isDragging}>
223223
<ProgressLine>
224224
<ProgressHover
225-
cursorRatio={cursorRatio}
226-
isHovering={isHovering}
227-
progressPercent={progressPercent}
225+
$cursorRatio={$cursorRatio}
226+
$isHovering={$isHovering}
227+
$progressPercent={$progressPercent}
228228
/>
229229

230230
{bufferedMediaChunks.map(({ key, ...chunk }) => (
231231
<BufferedChunk key={key} {...chunk} />
232232
))}
233233

234-
<ProgressMask maskScale={progressRatio} />
234+
<ProgressMask $maskScale={progressRatio} />
235235
</ProgressLine>
236236

237237
<Scrubber
238238
$cardSize={size}
239-
isVisible={showAccessories}
240-
positionX={progressPercent}
239+
$isVisible={showAccessories}
240+
$positionX={$progressPercent}
241241
/>
242242

243243
{!isSmallCard && (
244244
<Tooltip
245-
isDragging={isDragging}
246-
isVisible={showAccessories}
245+
$isDragging={$isDragging}
246+
$isVisible={showAccessories}
247247
label={tooltipLabel}
248-
positionX={tooltipPositionX}
248+
$positionX={tooltipPositionX}
249249
ref={tooltipRef}
250250
size={size}
251251
/>

‎packages/react/src/components/Card/CardMedia/Controls/Spinner.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@ const dash = keyframes`
3838
}
3939
`
4040

41-
const Wrap = styled(MediaButton).attrs(({ isVisible }) => ({
41+
const Wrap = styled(MediaButton).attrs(({ $isVisible }) => ({
4242
style: {
43-
opacity: isVisible ? 1 : 0,
44-
visibility: isVisible ? 'visible' : 'hidden'
43+
opacity: $isVisible ? 1 : 0,
44+
visibility: $isVisible ? '$visible' : 'hidden'
4545
}
4646
}))(({ $cardSize }) => {
4747
const size = `${getSpinnerSize($cardSize)}px`
@@ -73,8 +73,8 @@ const Circle = styled('circle')`
7373
will-change: stroke-dasharray, stroke-dashoffset;
7474
`
7575

76-
const Spinner = ({ size, isVisible }) => (
77-
<Wrap $cardSize={size} className={classNames.spinner} isVisible={isVisible}>
76+
const Spinner = ({ size, $isVisible }) => (
77+
<Wrap $cardSize={size} className={classNames.spinner} $isVisible={$isVisible}>
7878
<Svg viewBox='0 0 50 50'>
7979
<Circle cx='25' cy='25' r='20' />
8080
</Svg>

0 commit comments

Comments
 (0)