@tidy-ui/frame
Version:
The Frame component is a dynamic placeholder that adds a stylish touch while your content loads. It features various styles like circular for profile pics, linear for paragraphs, and defaults to rectangular. Easily adjust sizes and transition from loading
2 lines (1 loc) • 2.56 kB
JavaScript
import n from"react";import{keyframes as r}from"styled-components";import{css as e,styled as t,applyStandardOverrideStyles as o,hsla as a,color as i}from"@tidy-ui/commons";var l=function(){return l=Object.assign||function(n){for(var r,e=1,t=arguments.length;e<t;e++)for(var o in r=arguments[e])Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o]);return n},l.apply(this,arguments)};function c(n,r){return Object.defineProperty?Object.defineProperty(n,"raw",{value:r}):n.raw=r,n}var u,d,f,m,s,p,h,y,g,b,v=e(d||(d=c(["\n border-radius: 50%;\n ","\n"],["\n border-radius: 50%;\n ","\n"])),function(n){var r=n.size;return e(u||(u=c(["\n height: ",";\n width: ",";\n "],["\n height: ",";\n width: ",";\n "])),r,r)}),O=e(f||(f=c(["\n height: 1em;\n"],["\n height: 1em;\n"]))),w=e(p||(p=c(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme.layout,t=n.isSharp;return e(s||(s=c(["\n ","\n "],["\n ","\n "])),!t&&e(m||(m=c(["\n border-radius: ",";\n "],["\n border-radius: ",";\n "])),r.radius))}),j=function(n){return r(h||(h=c(["\n from {\n background-color: ",";\n }\n to {\n background-color: ",";\n }\n "],["\n from {\n background-color: ",";\n }\n to {\n background-color: ",";\n }\n "])),a(n.theme.isDark?i.gray[700]:i.gray[300]),n.theme.isDark?a(i.gray[700],.2):a(i.gray[200],.6))},P=t.div(b||(b=c(["\n display: flex;\n height: 100%;\n width: 100%;\n ","\n ","\n"],["\n display: flex;\n height: 100%;\n width: 100%;\n ","\n ","\n"])),function(n){var r=n.isLoaded,t=n.variant;return e(g||(g=c(["\n ","\n ","\n ","\n ","\n "],["\n ","\n ","\n ","\n ","\n "])),!r&&e(y||(y=c(["\n animation: 0.8s linear 0s infinite alternate none running ",";\n "],["\n animation: 0.8s linear 0s infinite alternate none running ",";\n "])),j),"circle"===t&&v,"line"===t&&O,!t&&w)},o),k=n.forwardRef(function(r,e){var t=r.children,o=function(n,r){var e={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&r.indexOf(t)<0&&(e[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(n);o<t.length;o++)r.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(n,t[o])&&(e[t[o]]=n[t[o]])}return e}(r,["children"]);return n.createElement(n.Fragment,null,n.createElement(n.Fragment,null,o.isLoaded?o.isWrapped?n.createElement(P,l({ref:e,role:"frame"},o),t):t:n.createElement(P,l({ref:e,role:"frame"},o))))});k.defaultProps={},k.displayName="Frame";export{k as Frame};