refactor: prefix internal props (#375)

microlinkhq · Jul 18, 2024 · fb9ba04 · fb9ba04
1 parent 4874c70
commit fb9ba04
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 99 deletions.
diff --git 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 = ({
         <span>{playbackRate}x</span>
       </PlaybackRateButton>
 
-      {isLargeCard && <TimeLabel right>{endTime}</TimeLabel>}
+      {isLargeCard && <TimeLabel $right>{endTime}</TimeLabel>}
     </BottomControls>
   )
 }

diff --git 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 (
-    <PlaybackButtonWrap title={isPlaying ? 'Pause' : 'Play'} {...props}>
+    <PlaybackButtonWrap title={$isPlaying ? 'Pause' : 'Play'} {...props}>
       <PlaybackIcon as={PlaybackComponent} />
     </PlaybackButtonWrap>
   )

diff --git 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
@@ -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) => (
     <>
       <TooltipBase
-        visible={isVisible}
-        position={positionX}
+        $visible={$isVisible}
+        position={$positionX}
         $cardSize={size}
         ref={ref}
-        isDragging={isDragging}
+        $isDragging={$isDragging}
         {...props}
       >
         {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
@@ -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 (
     <OuterWrap $cardSize={size} ref={wrapRef} {...mouseEvents}>
-      <BarsWrap $cardSize={size} isDragging={isDragging}>
+      <BarsWrap $cardSize={size} $isDragging={$isDragging}>
         <ProgressLine>
           <ProgressHover
-            cursorRatio={cursorRatio}
-            isHovering={isHovering}
-            progressPercent={progressPercent}
+            $cursorRatio={$cursorRatio}
+            $isHovering={$isHovering}
+            $progressPercent={$progressPercent}
           />
 
           {bufferedMediaChunks.map(({ key, ...chunk }) => (
             <BufferedChunk key={key} {...chunk} />
           ))}
 
-          <ProgressMask maskScale={progressRatio} />
+          <ProgressMask $maskScale={progressRatio} />
         </ProgressLine>
 
         <Scrubber
           $cardSize={size}
-          isVisible={showAccessories}
-          positionX={progressPercent}
+          $isVisible={showAccessories}
+          $positionX={$progressPercent}
         />
 
         {!isSmallCard && (
           <Tooltip
-            isDragging={isDragging}
-            isVisible={showAccessories}
+            $isDragging={$isDragging}
+            $isVisible={showAccessories}
             label={tooltipLabel}
-            positionX={tooltipPositionX}
+            $positionX={tooltipPositionX}
             ref={tooltipRef}
             size={size}
           />

diff --git 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 }) => (
-  <Wrap $cardSize={size} className={classNames.spinner} isVisible={isVisible}>
+const Spinner = ({ size, $isVisible }) => (
+  <Wrap $cardSize={size} className={classNames.spinner} $isVisible={$isVisible}>
     <Svg viewBox='0 0 50 50'>
       <Circle cx='25' cy='25' r='20' />
     </Svg>