From fb9ba04d87d47db495044e948564958e4efb42cd Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Thu, 18 Jul 2024 17:45:29 +0200 Subject: [PATCH] refactor: prefix internal props (#375) --- .../Card/CardMedia/Controls/FooterControls.js | 4 +- .../Card/CardMedia/Controls/PlaybackButton.js | 8 +- .../Controls/ProgressBar/Scrubber.js | 10 +-- .../CardMedia/Controls/ProgressBar/Tooltip.js | 18 ++--- .../CardMedia/Controls/ProgressBar/index.js | 52 ++++++------- .../Card/CardMedia/Controls/Spinner.js | 10 +-- .../Card/CardMedia/Controls/index.js | 74 +++++++++---------- .../src/components/Card/CardMedia/loader.js | 2 +- .../react/src/components/Card/CardWrap.js | 16 ++-- packages/react/src/index.js | 4 +- 10 files changed, 99 insertions(+), 99 deletions(-) diff --git a/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js b/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js index bff241b7..7f075343 100644 --- a/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js +++ b/packages/react/src/components/Card/CardMedia/Controls/FooterControls.js @@ -88,7 +88,7 @@ const PlaybackRateButton = styled(MediaButton).attrs({ ` const TimeLabel = styled('span').attrs({ className: classNames.progressTime })` - margin: ${({ right }) => (!right ? '0 auto 0 0' : '0 0 0 auto')}; + margin: ${({ $right }) => (!$right ? '0 auto 0 0' : '0 0 0 auto')}; font-family: ${font.mono}; font-size: 12px; padding: 0 16px; @@ -131,7 +131,7 @@ const FooterControls = ({ {playbackRate}x - {isLargeCard && {endTime}} + {isLargeCard && {endTime}} ) } diff --git a/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js b/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js index 332e9b12..e152fb7e 100644 --- a/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js +++ b/packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js @@ -59,14 +59,14 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({ } ` -const PlaybackButton = ({ isPlaying, ...props }) => { +const PlaybackButton = ({ $isPlaying, ...props }) => { const PlaybackComponent = useMemo( - () => (isPlaying ? Pause : Play), - [isPlaying] + () => ($isPlaying ? Pause : Play), + [$isPlaying] ) return ( - + ) diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js index 1b78e5a5..642e2a98 100644 --- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js +++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js @@ -9,12 +9,12 @@ const scrubberSizeScales = { normal: 0.8, small: 0.9 } const getScrubberSize = size => Math.floor(SCRUBBER_SIZE * (scrubberSizeScales[size] || 1)) -const Scrubber = styled('div').attrs(({ isVisible, positionX }) => ({ +const Scrubber = styled('div').attrs(({ $isVisible, $positionX }) => ({ style: { - left: positionX, - transform: `scale(${isVisible ? 1 : 0.5}) translate(-50%, -50%)`, - opacity: isVisible ? 1 : 0, - visibility: isVisible ? 'visible' : 'hidden' + left: $positionX, + transform: `scale(${$isVisible ? 1 : 0.5}) translate(-50%, -50%)`, + opacity: $isVisible ? 1 : 0, + visibility: $isVisible ? '$visible' : 'hidden' } }))` position: absolute; diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js index b78ed099..4274bdca 100644 --- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js +++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js @@ -9,13 +9,13 @@ const sizeScales = { normal: 0.8 } const getMarkerFontSize = size => BASE_FONT_SIZE * (sizeScales[size] || 1) const TooltipBase = styled('span').attrs( - ({ position, isDragging, visible }) => ({ + ({ position, $isDragging, $visible }) => ({ style: { left: `${position}px`, - top: visible ? '-4px' : '0px', - visibility: visible ? 'visible' : 'hidden', - opacity: visible ? 1 : 0, - transform: `translate(-50%, ${!isDragging ? -100 : -110}%)` + top: $visible ? '-4px' : '0px', + visibility: $visible ? '$visible' : 'hidden', + opacity: $visible ? 1 : 0, + transform: `translate(-50%, ${!$isDragging ? -100 : -110}%)` } }) )` @@ -35,14 +35,14 @@ const TooltipBase = styled('span').attrs( ` const Tooltip = forwardRef( - ({ isDragging, isVisible, label, positionX, size, ...props }, ref) => ( + ({ $isDragging, $isVisible, label, $positionX, size, ...props }, ref) => ( <> {label} diff --git a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js index 72f4cf3f..3fc9817f 100644 --- a/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js +++ b/packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js @@ -34,8 +34,8 @@ const OuterWrap = styled('div').attrs(() => ({ backface-visibility: hidden; ` -const BarsWrap = styled('div').attrs(({ $cardSize, isDragging }) => { - if (isDragging) { +const BarsWrap = styled('div').attrs(({ $cardSize, $isDragging }) => { + if ($isDragging) { const activeHeight = getProgressBarActiveHeight($cardSize) return { @@ -77,9 +77,9 @@ const ProgressLine = styled('div')` overflow: hidden; ` -const ProgressMask = styled('div').attrs(({ maskScale }) => ({ +const ProgressMask = styled('div').attrs(({ $maskScale }) => ({ style: { - transform: `scaleX(${maskScale})` + transform: `scaleX(${$maskScale})` } }))` position: absolute; @@ -93,12 +93,12 @@ const ProgressMask = styled('div').attrs(({ maskScale }) => ({ ` const ProgressHover = styled('div').attrs( - ({ cursorRatio, isHovering, progressPercent }) => ({ + ({ $cursorRatio, $isHovering, $progressPercent }) => ({ style: { - left: progressPercent, - transform: `scaleX(${cursorRatio})`, - opacity: isHovering ? 1 : 0, - visibility: isHovering ? 'visible' : 'hidden' + left: $progressPercent, + transform: `scaleX(${$cursorRatio})`, + opacity: $isHovering ? 1 : 0, + visibility: $isHovering ? '$visible' : 'hidden' } }) )` @@ -109,7 +109,7 @@ const ProgressHover = styled('div').attrs( background: rgba(255, 255, 255, 0.4); transform-origin: left center; transition: ${transition.short('opacity', 'visibility')}; - will-change: left, transform, opacity, visible; + will-change: left, transform, opacity, $visible; ` const BufferedChunk = styled('div').attrs(({ start, end }) => ({ @@ -129,8 +129,8 @@ const ProgressBar = ({ cursorX, duration, hoveredTime, - isDragging, - isHovering, + $isDragging, + $isHovering, onClick, onMouseDown, onMouseOver, @@ -158,12 +158,12 @@ const ProgressBar = ({ [duration, progress] ) - const progressPercent = useMemo( + const $progressPercent = useMemo( () => `${clampNumber(progressRatio * 100, 1, 99)}%`, [progressRatio] ) - const cursorRatio = useMemo(() => { + const $cursorRatio = useMemo(() => { if (wrapRef.current) { const wrapWidth = getWrapWidth() const startPoint = progressRatio * wrapWidth @@ -213,39 +213,39 @@ const ProgressBar = ({ ) const showAccessories = useMemo( - () => isDragging || isHovering, - [isDragging, isHovering] + () => $isDragging || $isHovering, + [$isDragging, $isHovering] ) return ( - + {bufferedMediaChunks.map(({ key, ...chunk }) => ( ))} - + {!isSmallCard && ( diff --git a/packages/react/src/components/Card/CardMedia/Controls/Spinner.js b/packages/react/src/components/Card/CardMedia/Controls/Spinner.js index 5ae92d38..db4a30f1 100644 --- a/packages/react/src/components/Card/CardMedia/Controls/Spinner.js +++ b/packages/react/src/components/Card/CardMedia/Controls/Spinner.js @@ -38,10 +38,10 @@ const dash = keyframes` } ` -const Wrap = styled(MediaButton).attrs(({ isVisible }) => ({ +const Wrap = styled(MediaButton).attrs(({ $isVisible }) => ({ style: { - opacity: isVisible ? 1 : 0, - visibility: isVisible ? 'visible' : 'hidden' + opacity: $isVisible ? 1 : 0, + visibility: $isVisible ? '$visible' : 'hidden' } }))(({ $cardSize }) => { const size = `${getSpinnerSize($cardSize)}px` @@ -73,8 +73,8 @@ const Circle = styled('circle')` will-change: stroke-dasharray, stroke-dashoffset; ` -const Spinner = ({ size, isVisible }) => ( - +const Spinner = ({ size, $isVisible }) => ( + diff --git a/packages/react/src/components/Card/CardMedia/Controls/index.js b/packages/react/src/components/Card/CardMedia/Controls/index.js index e8a06346..105218a1 100644 --- a/packages/react/src/components/Card/CardMedia/Controls/index.js +++ b/packages/react/src/components/Card/CardMedia/Controls/index.js @@ -45,18 +45,18 @@ const OuterWrap = styled('div').attrs({ className: classNames.mediaControls })` flex-direction: column; pointer-events: auto; - ${({ hasInteracted, isDragging, isPlaying }) => { + ${({ $hasInteracted, $isDragging, $isPlaying }) => { const bg = 'rgba(0, 0, 0, 0.35)' const dragBg = 'rgba(0, 0, 0, 0.2)' - const isPaused = hasInteracted && !isPlaying + const isPaused = $hasInteracted && !$isPlaying return css` .${classNames.main}:hover & { - background: ${!isDragging ? bg : dragBg}; + background: ${!$isDragging ? bg : dragBg}; } .${classNames.main}:not(:hover) & { - opacity: ${!hasInteracted || isPaused ? 1 : 0}; + opacity: ${!$hasInteracted || isPaused ? 1 : 0}; ${isPaused && `background: ${bg}`}; } ` @@ -78,8 +78,8 @@ const InnerWrap = styled('div')` const ControlsTop = styled('div')` flex: 1; - ${({ isVisible }) => - !isVisible && + ${({ $isVisible }) => + !$isVisible && css` *[class*='${classNames.mediaControls}']:not(.${classNames.progressTime}) { transition: ${transition.medium('opacity', 'visibility')}; @@ -111,13 +111,13 @@ const Controls = ({ MediaComponent, mediaProps }) => { const [buffered, setBuffered] = useState([]) const [cursorX, setCursorX] = useState(0) const [hoveredTime, setHoveredTime] = useState(0) - const [isPlaying, setIsPlaying] = useState(autoPlay) + const [$isPlaying, setIsPlaying] = useState(autoPlay) const [isMuted, setIsMuted] = useState(muted) const [isBuffering, setIsBuffering] = useState(false) - const [isHovering, setIsHovering] = useState(false) - const [isDragging, setIsDragging] = useState(false) + const [$isHovering, setIsHovering] = useState(false) + const [$isDragging, setIsDragging] = useState(false) const [playbackRate, setPlaybackRate] = useState(1) - const [hasInteracted, setHasInteracted] = useState(autoPlay) + const [$hasInteracted, setHasInteracted] = useState(autoPlay) const [pausedByDrag, setPausedByDrag] = useState(false) const mediaRef = useRef() @@ -173,7 +173,7 @@ const Controls = ({ MediaComponent, mediaProps }) => { const togglePlayback = useCallback(() => { if (mediaRef.current) { if (mediaRef.current.paused) { - if (!hasInteracted) { + if (!$hasInteracted) { setHasInteracted(true) } @@ -182,7 +182,7 @@ const Controls = ({ MediaComponent, mediaProps }) => { mediaRef.current.pause() } } - }, [hasInteracted]) + }, [$hasInteracted]) const jumpTo = useCallback(time => { if (mediaRef.current) { @@ -252,25 +252,25 @@ const Controls = ({ MediaComponent, mediaProps }) => { event.preventDefault() event.stopPropagation() - if (isDragging) { + if ($isDragging) { setIsDragging(false) } else { togglePlayback() } }, - [isDragging, togglePlayback] + [$isDragging, togglePlayback] ) const onWrapMouseMove = useCallback( event => { - if ((isDragging || isHovering) && mediaRef.current) { + if (($isDragging || $isHovering) && mediaRef.current) { event.preventDefault() const { cursor, time } = evaluateCursorPosition(event) setHoveredTime(time) setCursorX(cursor) - if (isDragging) { + if ($isDragging) { if (!mediaRef.current.paused) { mediaRef.current.pause() setPausedByDrag(true) @@ -280,21 +280,21 @@ const Controls = ({ MediaComponent, mediaProps }) => { } } }, - [evaluateCursorPosition, isDragging, isHovering, jumpTo] + [evaluateCursorPosition, $isDragging, $isHovering, jumpTo] ) const onWrapMouseOver = useCallback( event => { - if (isDragging && event.buttons === 0) { + if ($isDragging && event.buttons === 0) { setIsDragging(false) } }, - [isDragging] + [$isDragging] ) const onWrapKeyDown = useCallback( event => { - if (isDragging) { + if ($isDragging) { return } @@ -322,7 +322,7 @@ const Controls = ({ MediaComponent, mediaProps }) => { } } }, - [isDragging, jumpTo, togglePlayback] + [$isDragging, jumpTo, togglePlayback] ) const outerWrapEvents = useMemo( @@ -337,8 +337,8 @@ const Controls = ({ MediaComponent, mediaProps }) => { ) const outerWrapTitle = useMemo( - () => (hasInteracted ? { title: '' } : {}), - [hasInteracted] + () => ($hasInteracted ? { title: '' } : {}), + [$hasInteracted] ) const bufferedMedia = useMemo(() => { @@ -384,21 +384,21 @@ const Controls = ({ MediaComponent, mediaProps }) => { cursorX, duration, hoveredTime, - isDragging, - isHovering, + $isDragging, + $isHovering, onClick: onProgressBarClick, onMouseDown: onProgressBarMouseDown, onMouseOver: onProgressBarMouseOver, progress, - showTooltip: isDragging || isHovering + showTooltip: $isDragging || $isHovering }), [ bufferedMedia, cursorX, duration, hoveredTime, - isDragging, - isHovering, + $isDragging, + $isHovering, onProgressBarClick, onProgressBarMouseDown, onProgressBarMouseOver, @@ -408,7 +408,7 @@ const Controls = ({ MediaComponent, mediaProps }) => { useEffect(() => { if ( - !isDragging && + !$isDragging && pausedByDrag && mediaRef.current && mediaRef.current.paused @@ -416,7 +416,7 @@ const Controls = ({ MediaComponent, mediaProps }) => { mediaRef.current.play() setPausedByDrag(false) } - }, [pausedByDrag, isDragging]) + }, [pausedByDrag, $isDragging]) return ( <> @@ -433,20 +433,20 @@ const Controls = ({ MediaComponent, mediaProps }) => { - + - {!hasInteracted ? ( + {!$hasInteracted ? ( ) : ( <> - + {isNotSmall && ( { /> )} - + {isNotSmall && ( css` opacity: ${$isLoading ? 1 : 0}; - visibility: ${$isLoading ? 'visible' : 'hidden'}; + visibility: ${$isLoading ? '$visible' : 'hidden'}; `}; } ` diff --git a/packages/react/src/components/Card/CardWrap.js b/packages/react/src/components/Card/CardWrap.js index b2a46766..d72cdc08 100644 --- a/packages/react/src/components/Card/CardWrap.js +++ b/packages/react/src/components/Card/CardWrap.js @@ -7,8 +7,8 @@ import { media, isLarge } from '../../utils' const HEIGHT = '382px' -const contrastStyle = ({ backgroundColor, color }) => css` - background-color: ${backgroundColor}; +const contrastStyle = ({ $backgroundColor, color }) => css` + background-color: ${$backgroundColor}; border-color: ${color}; transition-property: filter; will-change: filter; @@ -72,10 +72,10 @@ const Element = styled('a')( ({ $isLoading, contrast }) => !$isLoading && !contrast && hoverStyle, ({ $cardSize }) => isLarge($cardSize) && largeStyle, ({ direction }) => direction === 'rtl' && rtlStyle, - ({ backgroundColor, color, contrast }) => - contrast && color && backgroundColor && contrastStyle, - ({ backgroundColor, color, contrast }) => - contrast && (!color || !backgroundColor) && hoverStyle + ({ $backgroundColor, color, contrast }) => + contrast && color && $backgroundColor && contrastStyle, + ({ $backgroundColor, color, contrast }) => + contrast && (!color || !$backgroundColor) && hoverStyle ) const CardWrap = forwardRef( @@ -90,14 +90,14 @@ const CardWrap = forwardRef( ref ) => { const { - state: { backgroundColor, color, title }, + state: { $backgroundColor, color, title }, props: { size: $cardSize } } = useContext(GlobalContext) return createElement(Element, { ...(as === 'a' ? { href, rel, target } : undefined), ...restProps, - backgroundColor, + $backgroundColor, $cardSize, color, ref, diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 2b4f012f..12573954 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -104,7 +104,7 @@ const Card = props => { } const imageUrl = getUrlPath(media) - const { color, background_color: backgroundColor } = media + const { color, background_color: $backgroundColor } = media updateState({ url, @@ -116,7 +116,7 @@ const Card = props => { audioUrl, isVideo, isAudio, - backgroundColor + $backgroundColor }) setLoading(false)