mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-26 23:04:55 +08:00
7facec3849
* feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import useTheme from '../use-theme'
|
|
|
|
interface Props {
|
|
opacity?: number
|
|
}
|
|
|
|
const defaultProps = {
|
|
opacity: 0.5,
|
|
}
|
|
|
|
export type ImageSkeletonProps = Props
|
|
|
|
const ImageSkeleton: React.FC<ImageSkeletonProps> = React.memo(
|
|
({ opacity, ...props }: ImageSkeletonProps & typeof defaultProps) => {
|
|
const theme = useTheme()
|
|
return (
|
|
<div className="skeleton" {...props}>
|
|
<style jsx>{`
|
|
.skeleton {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: linear-gradient(
|
|
270deg,
|
|
${theme.palette.accents_1},
|
|
${theme.palette.accents_2},
|
|
${theme.palette.accents_2},
|
|
${theme.palette.accents_1}
|
|
);
|
|
background-size: 400% 100%;
|
|
animation: loading 3s ease-in-out infinite;
|
|
opacity: ${opacity};
|
|
transition: opacity 300ms ease-out;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
|
|
ImageSkeleton.defaultProps = defaultProps
|
|
ImageSkeleton.displayName = 'GeistImageSkeleton'
|
|
export default ImageSkeleton
|