From b15b62c903ed5fb536cd3a8e7e1ae39b0b353acf Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 6 Jul 2023 11:42:50 +0300
Subject: [PATCH] Refactor #4602 - for Skeleton

---
 components/lib/skeleton/Skeleton.css    | 33 ----------------
 components/lib/skeleton/Skeleton.js     | 23 +++++------
 components/lib/skeleton/SkeletonBase.js | 52 +++++++++++++++++++++++++
 components/lib/skeleton/skeleton.d.ts   |  5 +++
 styles/primereact.css                   |  1 -
 5 files changed, 66 insertions(+), 48 deletions(-)
 delete mode 100644 components/lib/skeleton/Skeleton.css

diff --git a/components/lib/skeleton/Skeleton.css b/components/lib/skeleton/Skeleton.css
deleted file mode 100644
index 5d4f0448b3..0000000000
--- a/components/lib/skeleton/Skeleton.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.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%);
-    }
-}
\ No newline at end of file
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
index fa9daf5f19..3f91d009c3 100644
--- 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
index fbf2429714..f3661a2148 100644
--- 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
index 3912385c34..c0814d56a8 100644
--- 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
index 6eded1eab9..1725f28d00 100644
--- 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";