二货爱吃白萝卜
1 year ago
committed by
GitHub
GitHub
16 changed files with 288 additions and 41 deletions
@ -0,0 +1,119 @@ |
|||
// 用于 color.md 中的颜色对比
|
|||
import React from 'react'; |
|||
import classNames from 'classnames'; |
|||
import { theme, Space } from 'antd'; |
|||
import { TinyColor } from '@ctrl/tinycolor'; |
|||
import tokenMeta from 'antd/es/version/token-meta.json'; |
|||
import { createStyles } from 'antd-style'; |
|||
import useLocale from '../../../hooks/useLocale'; |
|||
|
|||
const useStyle = createStyles(({ token, css }) => { |
|||
const height = token.controlHeightLG; |
|||
const dotSize = height / 5; |
|||
|
|||
return { |
|||
container: css` |
|||
background: #fff; |
|||
border-radius: ${token.borderRadiusLG}px; |
|||
overflow: hidden; |
|||
`,
|
|||
|
|||
row: css` |
|||
display: flex; |
|||
align-items: center; |
|||
`,
|
|||
|
|||
col: css` |
|||
flex: 1 1 33%; |
|||
height: ${height}px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
`,
|
|||
|
|||
colDark: css` |
|||
background: #000; |
|||
color: #fff; |
|||
`,
|
|||
|
|||
dot: css` |
|||
border-radius: 100%; |
|||
width: ${dotSize}px; |
|||
height: ${dotSize}px; |
|||
background: #000; |
|||
box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.25); |
|||
`,
|
|||
|
|||
dotColor: css` |
|||
width: ${token.fontSize * 6}px; |
|||
white-space: nowrap; |
|||
`,
|
|||
}; |
|||
}); |
|||
|
|||
function color2Rgba(color: string) { |
|||
return `#${new TinyColor(color).toHex8().toUpperCase()}`; |
|||
} |
|||
|
|||
interface ColorCircleProps { |
|||
color?: string; |
|||
} |
|||
|
|||
function ColorCircle({ color }: ColorCircleProps) { |
|||
const { styles } = useStyle(); |
|||
|
|||
return ( |
|||
<Space size={4}> |
|||
<div className={styles.dot} style={{ background: color }} /> |
|||
<div className={styles.dotColor}>{color}</div> |
|||
</Space> |
|||
); |
|||
} |
|||
|
|||
export interface TokenCompareProps { |
|||
tokenNames?: string; |
|||
} |
|||
|
|||
export default function TokenCompare(props: TokenCompareProps) { |
|||
const { tokenNames = '' } = props; |
|||
const [, lang] = useLocale({}); |
|||
const { styles } = useStyle(); |
|||
|
|||
const tokenList = React.useMemo(() => { |
|||
const list = tokenNames.split('|'); |
|||
|
|||
const lightTokens = theme.getDesignToken(); |
|||
const darkTokens = theme.getDesignToken({ |
|||
algorithm: theme.darkAlgorithm, |
|||
}); |
|||
|
|||
return list.map((tokenName) => { |
|||
const meta = tokenMeta.global[tokenName]; |
|||
const name = lang === 'cn' ? meta.name : meta.nameEn; |
|||
|
|||
return { |
|||
name: name.replace('颜色', '').replace('色', '').replace('Color', '').trim(), |
|||
light: color2Rgba(lightTokens[tokenName]), |
|||
dark: color2Rgba(darkTokens[tokenName]), |
|||
}; |
|||
}); |
|||
}, [tokenNames]); |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
{tokenList.map((data) => ( |
|||
<div key={data.name} className={styles.row}> |
|||
<div className={styles.col}>{data.name}</div> |
|||
<div className={styles.col}> |
|||
<ColorCircle color={data.light} /> |
|||
</div> |
|||
<div className={classNames(styles.col, styles.colDark)}> |
|||
<ColorCircle color={data.dark} /> |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,77 @@ |
|||
import React from 'react'; |
|||
import { createStyles, css } from 'antd-style'; |
|||
import classNames from 'classnames'; |
|||
import { PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons'; |
|||
|
|||
const useStyles = createStyles(({ cx, token }) => { |
|||
const play = css` |
|||
position: absolute; |
|||
right: ${token.paddingLG}px; |
|||
bottom: ${token.paddingLG}px; |
|||
font-size: 64px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
opacity: 0; |
|||
transition: opacity ${token.motionDurationSlow}; |
|||
`;
|
|||
|
|||
return { |
|||
container: css` |
|||
position: relative; |
|||
`,
|
|||
|
|||
holder: css` |
|||
position: relative; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
.${cx(play)} { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
`,
|
|||
|
|||
video: css` |
|||
width: 100%; |
|||
`,
|
|||
|
|||
play, |
|||
}; |
|||
}); |
|||
|
|||
export default function VideoPlayer({ |
|||
className, |
|||
...restProps |
|||
}: React.HtmlHTMLAttributes<HTMLVideoElement>) { |
|||
const { styles } = useStyles(); |
|||
const videoRef = React.useRef<HTMLVideoElement>(null); |
|||
const [playing, setPlaying] = React.useState(false); |
|||
|
|||
React.useEffect(() => { |
|||
if (playing) { |
|||
videoRef.current?.play(); |
|||
} else { |
|||
videoRef.current?.pause(); |
|||
} |
|||
}, [playing]); |
|||
|
|||
return ( |
|||
<div |
|||
className={classNames(styles.container, className)} |
|||
tabIndex={0} |
|||
role="button" |
|||
title="play or pause" |
|||
onClick={() => { |
|||
setPlaying(!playing); |
|||
}} |
|||
> |
|||
<div className={classNames(styles.holder)}> |
|||
<video ref={videoRef} className={styles.video} muted loop {...restProps} /> |
|||
|
|||
<div className={styles.play}>{playing ? <PauseCircleFilled /> : <PlayCircleFilled />}</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
Loading…
Reference in new issue