From 1a6b10086b57a0d674b3cff0e38f47c899ba82b8 Mon Sep 17 00:00:00 2001 From: gitstart Date: Wed, 6 Sep 2023 09:55:52 +0000 Subject: [PATCH] fix: refactor code Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com> --- .../material/components/skeleton/Facebook.js | 7 +- .../material/components/skeleton/Facebook.tsx | 7 +- .../components/skeleton/Shapes.tsx.preview | 2 +- .../material/components/skeleton/Sizes.js | 2 +- .../material/components/skeleton/Sizes.tsx | 2 +- .../components/skeleton/Sizes.tsx.preview | 2 + .../skeleton/SkeletonColor.tsx.preview | 2 +- .../mui-material/src/Skeleton/Skeleton.js | 84 +++++++++---------- 8 files changed, 56 insertions(+), 52 deletions(-) diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js index da648263d9bd32..aa5cdd934282ab 100644 --- a/docs/data/material/components/skeleton/Facebook.js +++ b/docs/data/material/components/skeleton/Facebook.js @@ -60,7 +60,12 @@ function Media(props) { } /> {loading ? ( - + ) : ( {loading ? ( - + ) : ( + \ No newline at end of file diff --git a/docs/data/material/components/skeleton/Sizes.js b/docs/data/material/components/skeleton/Sizes.js index c916b9d27b4696..38fcfdc8d7439c 100644 --- a/docs/data/material/components/skeleton/Sizes.js +++ b/docs/data/material/components/skeleton/Sizes.js @@ -7,7 +7,7 @@ export default function Sizes() { {/* For size="text", adjust the height via font-size */} - {/* For other size="box" adjust height base on bounding box */} + {/* For size="box", adjust height based on bounding box */} ); diff --git a/docs/data/material/components/skeleton/Sizes.tsx b/docs/data/material/components/skeleton/Sizes.tsx index c916b9d27b4696..38fcfdc8d7439c 100644 --- a/docs/data/material/components/skeleton/Sizes.tsx +++ b/docs/data/material/components/skeleton/Sizes.tsx @@ -7,7 +7,7 @@ export default function Sizes() { {/* For size="text", adjust the height via font-size */} - {/* For other size="box" adjust height base on bounding box */} + {/* For size="box", adjust height based on bounding box */} ); diff --git a/docs/data/material/components/skeleton/Sizes.tsx.preview b/docs/data/material/components/skeleton/Sizes.tsx.preview index 46175169b69531..bd2e9812c47488 100644 --- a/docs/data/material/components/skeleton/Sizes.tsx.preview +++ b/docs/data/material/components/skeleton/Sizes.tsx.preview @@ -1,2 +1,4 @@ +{/* For size="text", adjust the height via font-size */} +{/* For size="box", adjust height based on bounding box */} \ No newline at end of file diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview index 47ff5795e47d3c..e0113f1c4f0997 100644 --- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview +++ b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js index 3ed7cb6ee642ad..a9a30cf03561a9 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.js +++ b/packages/mui-material/src/Skeleton/Skeleton.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import { keyframes, css } from '@mui/system'; import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; -import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles'; +import { alpha } from '../styles'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; import { getSkeletonUtilityClass } from './skeletonClasses'; @@ -63,8 +63,8 @@ const SkeletonRoot = styled('span', { const { ownerState } = props; return [ styles.root, - styles[ownerState.shape], - styles[ownerState.size], + ownerState.shape && styles[ownerState.shape], + ownerState.size && styles[ownerState.size], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, @@ -72,51 +72,43 @@ const SkeletonRoot = styled('span', { ]; }, })( - ({ theme, ownerState }) => { - const radiusUnit = getUnit(theme.shape.borderRadius) || 'px'; - const radiusValue = toUnitless(theme.shape.borderRadius); - - return { - display: 'block', - // Create a "on paper" color with sufficient contrast retaining the color - backgroundColor: theme.vars - ? theme.vars.palette.Skeleton.bg - : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), - height: '1.2em', - ...(ownerState.size === 'text' && { - marginTop: 0, - marginBottom: 0, - height: 'auto', - transformOrigin: '0 55%', - transform: 'scale(1, 0.60)', - borderRadius: `${radiusValue}${radiusUnit}/${ - Math.round((radiusValue / 0.6) * 10) / 10 - }${radiusUnit}`, - '&:empty:before': { - content: '"\\00a0"', - }, - }), - ...(ownerState.shape === 'circular' && { - borderRadius: '50%', + ({ theme, ownerState }) => ({ + display: 'block', + // Create a "on paper" color with sufficient contrast retaining the color + backgroundColor: theme.vars + ? theme.vars.palette.Skeleton.bg + : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), + height: '1.2em', + ...(ownerState.size === 'text' && { + marginTop: 0, + marginBottom: 0, + height: 'auto', + transformOrigin: '0 55%', + transform: 'scale(1, 0.60)', + '&:empty:before': { + content: '"\\00a0"', + }, + }), + ...(ownerState.shape === 'circular' && { + borderRadius: '50%', + }), + ...(ownerState.shape === 'rounded' && { + borderRadius: (theme.vars || theme).shape.borderRadius, + }), + ...(ownerState.hasChildren && { + '& > *': { + visibility: 'hidden', + }, + }), + ...(ownerState.hasChildren && + !ownerState.width && { + maxWidth: 'fit-content', }), - ...(ownerState.shape === 'rounded' && { - borderRadius: (theme.vars || theme).shape.borderRadius, - }), - ...(ownerState.hasChildren && { - '& > *': { - visibility: 'hidden', - }, + ...(ownerState.hasChildren && + !ownerState.height && { + height: 'auto', }), - ...(ownerState.hasChildren && - !ownerState.width && { - maxWidth: 'fit-content', - }), - ...(ownerState.hasChildren && - !ownerState.height && { - height: 'auto', - }), - }; - }, + }), ({ ownerState }) => ownerState.animation === 'pulse' && css`