@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.78 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),e=require("styled-components"),r=require("@tidy-ui/commons");function t(n){return n&&n.__esModule?n:{default:n}}var a=/*#__PURE__*/t(n),o=function(){return o=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n},o.apply(this,arguments)};function i(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var l,s,c,u,d,f,h,p,y,m,g=r.css(s||(s=i(["\n border-radius: 50%;\n ","\n"],["\n border-radius: 50%;\n ","\n"])),function(n){var e=n.size;return r.css(l||(l=i(["\n height: ",";\n width: ",";\n "],["\n height: ",";\n width: ",";\n "])),e,e)}),b=r.css(c||(c=i(["\n height: 1em;\n"],["\n height: 1em;\n"]))),v=r.css(f||(f=i(["\n ","\n"],["\n ","\n"])),function(n){var e=n.theme.layout,t=n.isSharp;return r.css(d||(d=i(["\n ","\n "],["\n ","\n "])),!t&&r.css(u||(u=i(["\n border-radius: ",";\n "],["\n border-radius: ",";\n "])),e.radius))}),O=function(n){return e.keyframes(h||(h=i(["\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 "])),r.hsla(n.theme.isDark?r.color.gray[700]:r.color.gray[300]),n.theme.isDark?r.hsla(r.color.gray[700],.2):r.hsla(r.color.gray[200],.6))},w=r.styled.div(m||(m=i(["\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 e=n.isLoaded,t=n.variant;return r.css(y||(y=i(["\n ","\n ","\n ","\n ","\n "],["\n ","\n ","\n ","\n ","\n "])),!e&&r.css(p||(p=i(["\n animation: 0.8s linear 0s infinite alternate none running ",";\n "],["\n animation: 0.8s linear 0s infinite alternate none running ",";\n "])),O),"circle"===t&&g,"line"===t&&b,!t&&v)},r.applyStandardOverrideStyles),j=a.default.forwardRef(function(n,e){var r=n.children,t=function(n,e){var r={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&e.indexOf(t)<0&&(r[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(n);a<t.length;a++)e.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(n,t[a])&&(r[t[a]]=n[t[a]])}return r}(n,["children"]);return a.default.createElement(a.default.Fragment,null,a.default.createElement(a.default.Fragment,null,t.isLoaded?t.isWrapped?a.default.createElement(w,o({ref:e,role:"frame"},t),r):r:a.default.createElement(w,o({ref:e,role:"frame"},t))))});j.defaultProps={},j.displayName="Frame",exports.Frame=j;