Refactor #4602 - for Skeleton

primefaces · Jul 6, 2023 · b15b62c · b15b62c
1 parent 87af55d
commit b15b62c
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 48 deletions.
diff --git a/components/lib/skeleton/Skeleton.css b/components/lib/skeleton/Skeleton.css
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
@@ -1,26 +1,21 @@
 import * as React from 'react';
-import { classNames, mergeProps } from '../utils/Utils';
-import { SkeletonBase } from './SkeletonBase';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
+import { mergeProps } from '../utils/Utils';
+import { SkeletonBase } from './SkeletonBase';
 
 export const Skeleton = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
+
+        useStyle(SkeletonBase.css.styles, { name: 'primereact_skeleton_style' });
+
         const props = SkeletonBase.getProps(inProps, context);
-        const { ptm } = SkeletonBase.setMetaData({
+        const { ptm, cx, sx } = SkeletonBase.setMetaData({
             props
         });
 
         const elementRef = React.useRef(null);
-        const style = props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius };
-        const className = classNames(
-            'p-skeleton p-component',
-            {
-                'p-skeleton-circle': props.shape === 'circle',
-                'p-skeleton-none': props.animation === 'none'
-            },
-            props.className
-        );
 
         React.useImperativeHandle(ref, () => ({
             props,
@@ -30,8 +25,8 @@ export const Skeleton = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className,
-                style
+                className: cx('root'),
+                style: sx('root')
             },
             SkeletonBase.getOtherProps(props),
             ptm('root')

diff --git a/components/lib/skeleton/SkeletonBase.js b/components/lib/skeleton/SkeletonBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const SkeletonBase = ComponentBase.extend({
     defaultProps: {
@@ -11,5 +12,56 @@ export const SkeletonBase = ComponentBase.extend({
         animation: 'wave',
         style: null,
         className: null
+    },
+    css: {
+        classes: {
+            root: ({ props }) =>
+                classNames(
+                    'p-skeleton p-component',
+                    {
+                        'p-skeleton-circle': props.shape === 'circle',
+                        'p-skeleton-none': props.animation === 'none'
+                    },
+                    props.className
+                )
+        },
+        inlineStyles: {
+            root: ({ props }) => (props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius })
+        },
+        styles: `
+        .p-skeleton {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .p-skeleton::after {
+            content: "";
+            animation: p-skeleton-animation 1.2s infinite;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            transform: translateX(-100%);
+            z-index: 1;
+        }
+        
+        .p-skeleton-circle {
+            border-radius: 50%;
+        }
+        
+        .p-skeleton-none::after {
+           animation: none;
+        }
+        
+        @keyframes p-skeleton-animation {
+            from {
+                transform: translateX(-100%);
+            }
+            to {
+                transform: translateX(100%);
+            }
+        }
+        `
     }
 });
diff --git a/components/lib/skeleton/skeleton.d.ts b/components/lib/skeleton/skeleton.d.ts
@@ -73,6 +73,11 @@ export interface SkeletonProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @type {SkeletonPassThroughOptions}
      */
     pt?: SkeletonPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -61,7 +61,6 @@
 @import "../components/lib/avatar/Avatar.css";
 @import "../components/lib/avatargroup/AvatarGroup.css";
 @import "../components/lib/tag/Tag.css";
-@import "../components/lib/skeleton/Skeleton.css";
 @import "../components/lib/divider/Divider.css";
 @import "../components/lib/knob/Knob.css";
 @import "../components/lib/splitter/Splitter.css";