@geezee/react-ui/esm/skeleton/skeleton.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React from 'react';
var defaultSkeletonProps = {
  animation: 'wave',
  width: '',
  height: '',
  variant: 'text',
  style: {},
  className: ''
};
export var Skeleton = function Skeleton(_ref) {
  var outerClassName = _ref.className,
      children = _ref.children,
      animation = _ref.animation,
      variant = _ref.variant,
      width = _ref.width,
      height = _ref.height,
      style = _ref.style,
      others = _objectWithoutProperties(_ref, ["className", "children", "animation", "variant", "width", "height", "style"]);

  var hasChildren = Boolean(children);
  var className = "skeleton ".concat(outerClassName, " ").concat(variant || 'text');

  if (animation !== 'none') {
    className += ' ' + animation;
  }

  if (hasChildren) {
    className += ' withChildren';
  }

  if (hasChildren && !width) {
    className += ' fitContent';
  }

  if (hasChildren && !height) {
    className += ' heightAuto';
  }

  return /*#__PURE__*/React.createElement("div", _extends({
    style: _extends({
      width: width,
      height: height
    }, style)
  }, others, {
    className: "jsx-1945265349" + " " + (others && others.className != null && others.className || className || "")
  }), /*#__PURE__*/React.createElement("div", {
    className: "jsx-1945265349"
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1945265349"
  }, "@-webkit-keyframes pulse-jsx-1945265349{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:1;}}@keyframes pulse-jsx-1945265349{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:1;}}@-webkit-keyframes wave-jsx-1945265349{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}50%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes wave-jsx-1945265349{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}50%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}.skeleton.jsx-1945265349{display:block;background-color:#EFF2FA;height:1.5714rem;-webkit-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;}.skeleton.jsx-1945265349::after{border-left:1px solid #EFF2FA;}.skeleton.text.jsx-1945265349{margin-top:0;margin-bottom:0;border-radius:0.2857rem;}.skeleton.circle.jsx-1945265349{border-radius:50%;}.skeleton.pulse.jsx-1945265349{-webkit-animation:pulse-jsx-1945265349 1.5s ease-in-out 0.5s infinite;animation:pulse-jsx-1945265349 1.5s ease-in-out 0.5s infinite;}.skeleton.wave.jsx-1945265349{position:relative;overflow:hidden;}.skeleton.wave.jsx-1945265349::after{-webkit-animation:wave-jsx-1945265349 1.6s linear 0.5s infinite;animation:wave-jsx-1945265349 1.6s linear 0.5s infinite;background:linear-gradient(90deg,#EFF2FA,#E1E5EE,#EFF2FA);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}.skeleton.fitContent.jsx-1945265349{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;}.skeleton.heightAuto.jsx-1945265349{height:auto;}.skeleton.withChildren.jsx-1945265349>*{visibility:hidden;}"));
};
Skeleton.defaultProps = defaultSkeletonProps;
export default Skeleton;