From 2e27095f30133cf9e4bac144384746c42dc5691e Mon Sep 17 00:00:00 2001 From: MariyaVdovenko <44616573+MariyaVdovenko@users.noreply.github.com> Date: Sat, 28 Dec 2019 18:52:57 +0200 Subject: [PATCH] [Skeleton] Add wave animation support --- docs/pages/api/skeleton.md | 5 ++- .../pages/components/skeleton/Animations.js | 20 +++++++++ .../pages/components/skeleton/Animations.tsx | 20 +++++++++ .../src/pages/components/skeleton/skeleton.md | 8 +++- .../src/Skeleton/Skeleton.d.ts | 2 +- .../material-ui-lab/src/Skeleton/Skeleton.js | 45 ++++++++++++++----- 6 files changed, 86 insertions(+), 14 deletions(-) create mode 100644 docs/src/pages/components/skeleton/Animations.js create mode 100644 docs/src/pages/components/skeleton/Animations.tsx diff --git a/docs/pages/api/skeleton.md b/docs/pages/api/skeleton.md index 4a086926ebb507..3d19574440a630 100644 --- a/docs/pages/api/skeleton.md +++ b/docs/pages/api/skeleton.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| animation | 'pulse'
| 'wave'
| false | 'pulse' | The animation. If `false` the animation effect is disabled. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| disableAnimate | bool | false | If `true` the animation effect is disabled. | | height | number
| string | | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | | variant | 'text'
| 'rect'
| 'circle' | 'text' | The type of content that will be rendered. | | width | number
| string | | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | @@ -46,7 +46,8 @@ Any other props supplied will be provided to the root element (native element). | text | .MuiSkeleton-text | Styles applied to the root element if `variant="text"`. | rect | .MuiSkeleton-rect | Styles applied to the root element if `variant="rect"`. | circle | .MuiSkeleton-circle | Styles applied to the root element if `variant="circle"`. -| animate | .MuiSkeleton-animate | Styles applied to the root element if `disabledAnimate={false}`. +| pulse | .MuiSkeleton-pulse | Styles applied to the root element if `animation="pulse"`. +| wave | .MuiSkeleton-wave | Styles applied to the root element if `animation="wave"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/src/pages/components/skeleton/Animations.js b/docs/src/pages/components/skeleton/Animations.js new file mode 100644 index 00000000000000..a23dfa34578b75 --- /dev/null +++ b/docs/src/pages/components/skeleton/Animations.js @@ -0,0 +1,20 @@ +import React from 'react'; +import Skeleton from '@material-ui/lab/Skeleton'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles({ + root: { + width: 300, + }, +}); + +export default function Animations() { + const classes = useStyles(); + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/components/skeleton/Animations.tsx b/docs/src/pages/components/skeleton/Animations.tsx new file mode 100644 index 00000000000000..70d24380d66611 --- /dev/null +++ b/docs/src/pages/components/skeleton/Animations.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import Skeleton from '@material-ui/lab/Skeleton'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles({ + root: { + width: 300, + }, +}) + +export default function Animations() { + const classes = useStyles(); + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md index 8429da1cfb92b0..36fa8f08141722 100644 --- a/docs/src/pages/components/skeleton/skeleton.md +++ b/docs/src/pages/components/skeleton/skeleton.md @@ -22,10 +22,16 @@ For instance: ## Variants -The component supports 3 variants. +The component supports 3 shape variants. {{"demo": "pages/components/skeleton/Variants.js"}} +## Animations + +By default, the skeleton pulsate, but you can change the animation for a wave or disable it entirely. + +{{"demo": "pages/components/skeleton/Animations.js"}} + ## YouTube example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts index 72b8abdfd13edb..1401fec029442b 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts @@ -3,7 +3,7 @@ import { OverridableComponent, OverrideProps } from '@material-ui/core/Overridab export interface SkeletonTypeMap

{ props: P & { - disableAnimate?: boolean; + animation?: 'pulse' | 'wave' | false; height?: number | string; variant?: 'text' | 'rect' | 'circle'; width?: number | string; diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index a24bdb36e877a9..c4696edc76d578 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -28,11 +28,11 @@ export const styles = theme => ({ circle: { borderRadius: '50%', }, - /* Styles applied to the root element if `disabledAnimate={false}`. */ - animate: { - animation: '$animate 1.5s ease-in-out 0.5s infinite', + /* Styles applied to the root element if `animation="pulse"`. */ + pulse: { + animation: '$pulse 1.5s ease-in-out 0.5s infinite', }, - '@keyframes animate': { + '@keyframes pulse': { '0%': { opacity: 1, }, @@ -43,14 +43,38 @@ export const styles = theme => ({ opacity: 1, }, }, + /* Styles applied to the root element if `animation="wave"`. */ + wave: { + position: 'relative', + overflow: 'hidden', + '&::after': { + animation: '$wave 1.5s linear 0.5s infinite', + background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)', + content: '""', + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + top: 0, + zIndex: 1, + }, + }, + '@keyframes wave': { + '0%': { + transform: 'translateX(-100%)', + }, + '100%': { + transform: 'translateX(100%)', + }, + }, }); const Skeleton = React.forwardRef(function Skeleton(props, ref) { const { + animation = 'pulse', classes, className, component: Component = 'div', - disableAnimate = false, height, variant = 'text', width, @@ -64,7 +88,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { classes.root, classes[variant], { - [classes.animate]: !disableAnimate, + [classes[animation]]: animation !== false, }, className, )} @@ -79,6 +103,11 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { }); Skeleton.propTypes = { + /** + * The animation. + * If `false` the animation effect is disabled. + */ + animation: PropTypes.oneOf(['pulse', 'wave', false]), /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. @@ -93,10 +122,6 @@ Skeleton.propTypes = { * Either a string to use a DOM element or a component. */ component: PropTypes.elementType, - /** - * If `true` the animation effect is disabled. - */ - disableAnimate: PropTypes.bool, /** * Height of the skeleton. * Useful when you don't want to adapt the skeleton to a text element but for instance a card.