Skip to content

Commit

Permalink
fix: linter warnings related with transient props (#330)
Browse files Browse the repository at this point in the history 
* refactor: rename cardSize → $cardSize

* refactor: rename isLoading → $isLoading

* refactor: rename useNanoClamp → $useNanoClamp
  • Loading branch information
@Kikobeats
Kikobeats authored Dec 2, 2023
1 parent 9ff59bb commit cebb363
Show file tree
Hide file tree
Showing 17 changed files with 105 additions and 106 deletions.
38 changes: 19 additions & 19 deletions packages/react/src/components/Card/CardContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ export const Content = styled('div').attrs({ className: classNames.content })`
padding: 10px 15px;
min-width: 0;
box-sizing: border-box;
${({ cardSize }) => css`
flex: ${!isLarge(cardSize) ? 1 : '0 0 125px'};
justify-content: ${!isSmall(cardSize) ? 'space-around' : 'space-between'};
flex-direction: ${!isSmall(cardSize) ? 'column' : 'row'};
align-items: ${!isSmall(cardSize) ? 'stretch' : 'center'};
${({ $cardSize }) => css`
flex: ${!isLarge($cardSize) ? 1 : '0 0 125px'};
justify-content: ${!isSmall($cardSize) ? 'space-around' : 'space-between'};
flex-direction: ${!isSmall($cardSize) ? 'column' : 'row'};
align-items: ${!isSmall($cardSize) ? 'stretch' : 'center'};
`};
`

Expand All @@ -46,11 +46,11 @@ const Header = styled('header').attrs({ className: classNames.title })`
font-weight: bold;
margin: 0;
width: 100%;
${({ cardSize }) => css`
flex-grow: ${!isSmall(cardSize) ? 1.2 : 0.8};
font-size: ${!isSmall(cardSize) ? '16px' : '15px'};
${({ $cardSize }) => css`
flex-grow: ${!isSmall($cardSize) ? 1.2 : 0.8};
font-size: ${!isSmall($cardSize) ? '16px' : '15px'};
${isSmall(cardSize) &&
${isSmall($cardSize) &&
css`
min-width: 0;
padding-right: 14px;
Expand All @@ -65,7 +65,7 @@ const Description = styled('div').attrs({ className: classNames.description })`
margin: auto 0;
line-height: 18px;
font-weight: normal;
${({ cardSize }) => !isLarge(cardSize) && mobileDescriptionStyle};
${({ $cardSize }) => !isLarge($cardSize) && mobileDescriptionStyle};
`

const Footer = styled('footer').attrs({ className: classNames.url })`
Expand All @@ -76,9 +76,9 @@ const Footer = styled('footer').attrs({ className: classNames.url })`
margin: 0;
flex-grow: 0;
font-weight: normal;
${({ cardSize }) => css`
font-size: ${!isSmall(cardSize) ? '12px' : '10px'};
${!isSmall(cardSize) && 'width: 100%;'}
${({ $cardSize }) => css`
font-size: ${!isSmall($cardSize) ? '12px' : '10px'};
${!isSmall($cardSize) && 'width: 100%;'}
`};
`

Expand Down Expand Up @@ -123,17 +123,17 @@ const CardContent = () => {
}, [])

return (
<Content cardSize={size}>
<Header cardSize={size}>
<CardText useNanoClamp={false}>{title}</CardText>
<Content $cardSize={size}>
<Header $cardSize={size}>
<CardText $useNanoClamp={false}>{title}</CardText>
</Header>
{!isSmallCard && (
<Description cardSize={size}>
<Description $cardSize={size}>
<CardText lines={2}>{description}</CardText>
</Description>
)}
<Footer cardSize={size}>
<Author useNanoClamp={false}>{formattedUrl}</Author>
<Footer $cardSize={size}>
<Author $useNanoClamp={false}>{formattedUrl}</Author>
<PoweredBy onClick={handleOnClick} />
</Footer>
</Content>
Expand Down
24 changes: 12 additions & 12 deletions packages/react/src/components/Card/CardEmpty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ const MediaEmpty = styled(CardImage)`
const HeaderEmpty = styled('span')`
opacity: 0.8;
height: 16px;
width: ${({ cardSize }) => (!isSmall(cardSize) ? '60%' : '75%')};
width: ${({ $cardSize }) => (!isSmall($cardSize) ? '60%' : '75%')};
display: block;
background: #e1e8ed;
margin: ${({ cardSize }) =>
!isSmall(cardSize) ? '2px 0 8px' : '0 20px 0 0'};
margin: ${({ $cardSize }) =>
!isSmall($cardSize) ? '2px 0 8px' : '0 20px 0 0'};
${emptyStateAnimation};
${({ cardSize }) =>
!isLarge(cardSize) &&
${({ $cardSize }) =>
!isLarge($cardSize) &&
`
height: 15px;
`};
Expand All @@ -47,8 +47,8 @@ const FooterEmpty = styled('span')`
display: block;
${emptyStateAnimation} animation-delay: .25s;
${({ cardSize }) =>
!isLarge(cardSize) &&
${({ $cardSize }) =>
!isLarge($cardSize) &&
`
height: 10px;
`};
Expand All @@ -62,14 +62,14 @@ const CardEmptyState = () => {

return (
<>
<MediaEmpty cardSize={size} />
<Content cardSize={size}>
<HeaderEmpty cardSize={size} />
<MediaEmpty $cardSize={size} />
<Content $cardSize={size}>
<HeaderEmpty $cardSize={size} />
{!isSmallCard ? (
<>
<DescriptionEmpty cardSize={size} />
<DescriptionEmpty $cardSize={size} />
<DescriptionEmpty
cardSize={size}
$cardSize={size}
style={{ marginBottom: '12px' }}
/>
</>
Expand Down
28 changes: 14 additions & 14 deletions packages/react/src/components/Card/CardMedia/Controls/FooterControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const VolumeUp = props => (
const BottomControls = styled('div')`
z-index: 2;
position: absolute;
bottom: ${({ cardSize }) => (isLarge(cardSize) ? 18 : 14)}px;
bottom: ${({ $cardSize }) => (isLarge($cardSize) ? 18 : 14)}px;
left: 0;
right: 0;
display: flex;
Expand All @@ -52,11 +52,11 @@ const VolumeButton = styled(MediaButton).attrs({
className: classNames.volumeControl
})`
${VolumeIcon} {
width: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
height: ${({ cardSize }) => (isLarge(cardSize) ? 16 : 14)}px;
width: ${({ $cardSize }) => (isLarge($cardSize) ? 16 : 14)}px;
height: ${({ $cardSize }) => (isLarge($cardSize) ? 16 : 14)}px;
${({ cardSize }) =>
!isLarge(cardSize) &&
${({ $cardSize }) =>
!isLarge($cardSize) &&
media.mobile`
width: 12px;
height: 12px;
Expand All @@ -67,8 +67,8 @@ const VolumeButton = styled(MediaButton).attrs({
const PlaybackRateButton = styled(MediaButton).attrs({
className: classNames.rateControl
})`
font-size: ${({ cardSize }) => (isLarge(cardSize) ? 12 : 10)}px;
min-width: ${({ cardSize }) => (isLarge(cardSize) ? 33 : 28)}px;
font-size: ${({ $cardSize }) => (isLarge($cardSize) ? 12 : 10)}px;
min-width: ${({ $cardSize }) => (isLarge($cardSize) ? 33 : 28)}px;
line-height: 1;
font-weight: bold;
border: 1.5px solid #fff;
Expand All @@ -78,8 +78,8 @@ const PlaybackRateButton = styled(MediaButton).attrs({
color: #fff;
margin-left: 10px;
${({ cardSize }) =>
!isLarge(cardSize) &&
${({ $cardSize }) =>
!isLarge($cardSize) &&
media.mobile`
font-size: 8px;
margin-left: 8px;
Expand All @@ -97,7 +97,7 @@ const TimeLabel = styled('span').attrs({ className: classNames.progressTime })`
`

const FooterControls = ({
cardSize,
$cardSize,
currentTime,
endTime,
isMuted,
Expand All @@ -109,23 +109,23 @@ const FooterControls = ({
() => (isMuted ? VolumeMute : VolumeUp),
[isMuted]
)
const isLargeCard = useMemo(() => isLarge(cardSize), [cardSize])
const isLargeCard = useMemo(() => isLarge($cardSize), [$cardSize])

return (
<BottomControls cardSize={cardSize}>
<BottomControls $cardSize={$cardSize}>
{isLargeCard && <TimeLabel>{currentTime}</TimeLabel>}

<VolumeButton
title={isMuted ? 'Unmute' : 'Mute'}
cardSize={cardSize}
$cardSize={$cardSize}
onClick={onMuteClick}
>
<VolumeIcon as={VolumeComponent} />
</VolumeButton>

<PlaybackRateButton
title='Playback Rate'
cardSize={cardSize}
$cardSize={$cardSize}
onClick={onPlaybackRateClick}
>
<span>{playbackRate}x</span>
Expand Down
12 changes: 6 additions & 6 deletions packages/react/src/components/Card/CardMedia/Controls/PlaybackButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ const PlaybackButtonWrap = styled(MediaButton).attrs({
className: classNames.playbackControl
})`
${PlaybackIcon} {
${({ cardSize }) => css`
width: ${iconSizes[cardSize]};
height: ${iconSizes[cardSize]};
padding: ${isLarge(cardSize) ? 0 : '8px'};
${({ $cardSize }) => css`
width: ${iconSizes[$cardSize]};
height: ${iconSizes[$cardSize]};
padding: ${isLarge($cardSize) ? 0 : '8px'};
${!isLarge(cardSize) &&
!isSmall(cardSize) &&
${!isLarge($cardSize) &&
!isSmall($cardSize) &&
media.mobile`
width: calc(${iconSizes.small} * 1.2);
height: calc(${iconSizes.small} * 1.2);
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Scrubber.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,8 @@ const Scrubber = styled('div').attrs(({ isVisible, positionX }) => ({
backface-visibility: hidden;
z-index: 3;
${({ cardSize }) => {
const scrubberSize = getScrubberSize(cardSize)
${({ $cardSize }) => {
const scrubberSize = getScrubberSize($cardSize)
return css`
height: ${scrubberSize}px;
width: ${scrubberSize}px;
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/Card/CardMedia/Controls/ProgressBar/Tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const TooltipBase = styled('span').attrs(
padding: 2px 3px;
border-radius: 4px;
font-family: ${font.mono};
font-size: ${({ cardSize }) => getMarkerFontSize(cardSize)}px;
font-size: ${({ $cardSize }) => getMarkerFontSize($cardSize)}px;
line-height: 1;
transition: ${transition.medium('opacity', 'visibility', 'transform')},
${transition.long('top')};
Expand All @@ -40,7 +40,7 @@ const Tooltip = forwardRef(
<TooltipBase
visible={isVisible}
position={positionX}
cardSize={size}
$cardSize={size}
ref={ref}
isDragging={isDragging}
{...props}
Expand Down
16 changes: 8 additions & 8 deletions packages/react/src/components/Card/CardMedia/Controls/ProgressBar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ const OuterWrap = styled('div').attrs(() => ({
backface-visibility: hidden;
`

const BarsWrap = styled('div').attrs(({ cardSize, isDragging }) => {
const BarsWrap = styled('div').attrs(({ $cardSize, isDragging }) => {
if (isDragging) {
const activeHeight = getProgressBarActiveHeight(cardSize)
const activeHeight = getProgressBarActiveHeight($cardSize)

return {
style: {
Expand All @@ -56,9 +56,9 @@ const BarsWrap = styled('div').attrs(({ cardSize, isDragging }) => {
pointer-events: none;
position: relative;
${({ cardSize }) => {
const height = getProgressBarHeight(cardSize)
const activeHeight = getProgressBarActiveHeight(cardSize)
${({ $cardSize }) => {
const height = getProgressBarHeight($cardSize)
const activeHeight = getProgressBarActiveHeight($cardSize)
return css`
height: ${height}px;
Expand Down Expand Up @@ -218,8 +218,8 @@ const ProgressBar = ({
)

return (
<OuterWrap cardSize={size} ref={wrapRef} {...mouseEvents}>
<BarsWrap cardSize={size} isDragging={isDragging}>
<OuterWrap $cardSize={size} ref={wrapRef} {...mouseEvents}>
<BarsWrap $cardSize={size} isDragging={isDragging}>
<ProgressLine>
<ProgressHover
cursorRatio={cursorRatio}
Expand All @@ -235,7 +235,7 @@ const ProgressBar = ({
</ProgressLine>

<Scrubber
cardSize={size}
$cardSize={size}
isVisible={showAccessories}
positionX={progressPercent}
/>
Expand Down
20 changes: 10 additions & 10 deletions packages/react/src/components/Card/CardMedia/Controls/SeekButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { styled } from 'styled-components'
import MediaButton from './MediaButton'
import { media, isLarge } from '../../../../utils'

const Backward = ({ cardSize, ...props }) => (
const Backward = ({ $cardSize, ...props }) => (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 29' {...props}>
<path
fill='#FFF'
Expand All @@ -17,7 +17,7 @@ const Backward = ({ cardSize, ...props }) => (
</svg>
)

const Forward = ({ cardSize, ...props }) => (
const Forward = ({ $cardSize, ...props }) => (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 29' {...props}>
<path
fill='#FFF'
Expand All @@ -32,22 +32,22 @@ const Forward = ({ cardSize, ...props }) => (

const SeekIcon = styled('svg')`
stroke: #fff;
width: ${({ cardSize }) => (isLarge(cardSize) ? 30 : 24)}px;
height: ${({ cardSize }) => (isLarge(cardSize) ? 30 : 24)}px;
width: ${({ $cardSize }) => (isLarge($cardSize) ? 30 : 24)}px;
height: ${({ $cardSize }) => (isLarge($cardSize) ? 30 : 24)}px;
${({ cardSize }) =>
!isLarge(cardSize) &&
${({ $cardSize }) =>
!isLarge($cardSize) &&
media.mobile`
width: 0;
height: 0;
`}
`

const SeekButtonWrap = styled(MediaButton)`
margin: 0 ${({ cardSize }) => (isLarge(cardSize) ? '28px' : '3px')};
margin: 0 ${({ $cardSize }) => (isLarge($cardSize) ? '28px' : '3px')};
`

const SeekButton = ({ type = 'rewind', cardSize, ...props }) => {
const SeekButton = ({ type = 'rewind', $cardSize, ...props }) => {
const IconComponent = useMemo(
() => (type === 'rewind' ? Backward : Forward),
[type]
Expand All @@ -56,10 +56,10 @@ const SeekButton = ({ type = 'rewind', cardSize, ...props }) => {
return (
<SeekButtonWrap
title={type === 'rewind' ? 'Rewind' : 'Forward'}
cardSize={cardSize}
$cardSize={$cardSize}
{...props}
>
<SeekIcon as={IconComponent} cardSize={cardSize} />
<SeekIcon as={IconComponent} $cardSize={$cardSize} />
</SeekButtonWrap>
)
}
Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/components/Card/CardMedia/Controls/Spinner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ const Wrap = styled(MediaButton).attrs(({ isVisible }) => ({
opacity: isVisible ? 1 : 0,
visibility: isVisible ? 'visible' : 'hidden'
}
}))(({ cardSize }) => {
const size = `${getSpinnerSize(cardSize)}px`
const offset = `${getSpinnerOffset(cardSize)}px`
}))(({ $cardSize }) => {
const size = `${getSpinnerSize($cardSize)}px`
const offset = `${getSpinnerOffset($cardSize)}px`

return css`
position: absolute;
Expand Down Expand Up @@ -74,7 +74,7 @@ const Circle = styled('circle')`
`

const Spinner = ({ size, isVisible }) => (
<Wrap cardSize={size} className={classNames.spinner} isVisible={isVisible}>
<Wrap $cardSize={size} className={classNames.spinner} isVisible={isVisible}>
<Svg viewBox='0 0 50 50'>
<Circle cx='25' cy='25' r='20' />
</Svg>
Expand Down
Loading

2 comments on commit cebb363

@vercel
Copy link

@vercel vercel bot commented on cebb363 Dec 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sdk-hover-vanilla – ./packages/hover-vanilla

sdk-hover-vanilla-microlink.vercel.app
sdk-hover-vanilla-git-master-microlink.vercel.app
sdk-hover-vanilla.vercel.app
sdk-hover-vanilla.microlink.io

@vercel
Copy link

@vercel vercel bot commented on cebb363 Dec 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sdk-hover-react – ./

sdk-hover-react-git-master-microlink.vercel.app
sdk-hover-react.vercel.app
sdk-hover-react-microlink.vercel.app
sdk-hover-react.microlink.io

Please sign in to comment.