primereact/skeleton/skeleton.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{useMergeProps as o}from"primereact/hooks";import{classNames as i}from"primereact/utils";function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function s(e,t){if("object"!==a(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==a(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function l(e){var t=s(e,"string");return"symbol"===a(t)?t:String(t)}var p=n.extend({defaultProps:{__TYPE:"Skeleton",shape:"rectangle",size:null,width:"100%",height:"1rem",borderRadius:null,animation:"wave",style:null,className:null},css:{classes:{root:function(e){var t=e.props;return i("p-skeleton p-component",{"p-skeleton-circle":"circle"===t.shape,"p-skeleton-none":"none"===t.animation})}},inlineStyles:{root:{position:"relative"}},styles:'\n@layer primereact {\n    .p-skeleton {\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .p-skeleton::after {\n        content: "";\n        animation: p-skeleton-animation 1.2s infinite;\n        height: 100%;\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        transform: translateX(-100%);\n        z-index: 1;\n    }\n    \n    .p-skeleton-circle {\n        border-radius: 50%;\n    }\n    \n    .p-skeleton-none::after {\n        animation: none;\n    }\n}\n\n@keyframes p-skeleton-animation {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n'}});function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){var r,o,i;r=e,i=n[t],(o=l(o=t))in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var m=e.memo(e.forwardRef((function(n,a){var s=o(),l=e.useContext(t),c=p.getProps(n,l),m=p.setMetaData({props:c}),f=m.ptm,b=m.cx,y=m.sx;r(p.css.styles,m.isUnstyled,{name:"skeleton"});var d=e.useRef(null);e.useImperativeHandle(a,(function(){return{props:c,getElement:function(){return d.current}}}));var h=c.size?{width:c.size,height:c.size,borderRadius:c.borderRadius}:{width:c.width,height:c.height,borderRadius:c.borderRadius},v=s({ref:d,className:i(c.className,b("root")),style:u(u({},h),y("root")),"aria-hidden":!0},p.getOtherProps(c),f("root"));return e.createElement("div",v)})));m.displayName="Skeleton";export{m as Skeleton};