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>