diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b387609..3edf6f98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Precise UI Changelog +## 2.1.12 + +- Fix the issue `The component Styled(styled.span) has been created dynamically` + ## 2.1.11 - fixed issue 373, passed onSizeChanged event as a prop to the Pagination component diff --git a/package.json b/package.json index 0bd0f850..698cf174 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "precise-ui", - "version": "2.1.11", + "version": "2.1.12", "description": "Precise UI React component library powered by Styled Components.", "keywords": [ "react", diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx index 91ec8e5b..b026ec72 100644 --- a/src/components/Skeleton/index.tsx +++ b/src/components/Skeleton/index.tsx @@ -61,32 +61,29 @@ const Span = styled.span` const randomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; +const formatValue = (value: string | number) => { + return typeof value === 'number' ? `${value}px` : value; +}; + +const StyledSpan = styled(Span)` + ${({ count, duration = 1.2, width = '100%', height = '100%', isCircle, isText, isPulsing = true }) => css` + animation: ${shine} ${duration}s infinite linear ${isPulsing ? 'running' : 'paused'}; + width: ${count > 1 && isText ? `${randomInt(80, 100)}%` : formatValue(width)}; + height: ${formatValue(height)}; + ${(height && width && isCircle && 'border-radius: 50%') || ''}; + `} +`; + /** * The `Sekeleton` component displays a low fidelity UI into which information will be gradually loaded. */ export const Skeleton: React.FC = props => { - const { count = 1, duration = 1.2, width = '100%', height = '100%', isCircle, isText, isPulsing = true } = props; + const { count = 1 } = props; const skeletons = []; for (let i = 0; i < count; i++) { - const StyledSpan = styled(Span)` - animation: ${shine} ${duration}s infinite linear ${!isPulsing ? 'paused' : 'running'}; - - ${count > 1 && isText - ? { width: `${randomInt(80, 100)}%` } - : { width: typeof width === 'number' ? `${width}px` : width }}; - - height: ${typeof height === 'number' ? `${height}px` : height}; - - ${height && - width && - isCircle && { - borderRadius: '50%', - }}; - `; - skeletons.push( - + , );