@age/quantum/Skeleton/Skeleton.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _SkeletonTypes = _interopRequireDefault(require("./SkeletonTypes"));

var _theme = require("../shared/theme");

var _subComponents = require("./sub-components");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Skeleton = function Skeleton(props) {
  var type = props.type,
      size = props.size,
      theme = props.theme,
      height = props.height,
      width = props.width;
  var rectProps = {
    height: height,
    width: width
  };
  var circleProps = {
    height: height,
    width: width
  };
  var textProps = {
    height: height,
    width: width
  };
  var buttonProps = {
    size: size,
    theme: theme,
    width: width
  };
  var tagProps = {
    size: size,
    theme: theme,
    width: width
  };
  return _react.default.createElement(_react.default.Fragment, null, type === 'rect' && _react.default.createElement(_subComponents.SkeletonRect, rectProps), type === 'circle' && _react.default.createElement(_subComponents.SkeletonCircle, circleProps), type === 'text' && _react.default.createElement(_subComponents.SkeletonText, textProps), type === 'button' && _react.default.createElement(_subComponents.SkeletonButton, buttonProps), type === 'tag' && _react.default.createElement(_subComponents.SkeletonTag, tagProps));
};

Skeleton.defaultProps = {
  type: 'rect',
  width: '100%',
  height: '14px',
  size: 'medium',
  theme: {
    baseFontSize: _theme.baseFontSize,
    spacing: _theme.spacing
  }
};
Skeleton.propTypes = {
  /** Sets the component behavior */
  type: _propTypes.default.oneOf(['rect', 'circle', 'text', 'button', 'tag']),
  width: _propTypes.default.string,

  /** Will affect only types that not uses the prop `size` */
  height: _propTypes.default.string,

  /** Will affect only `Tag` and `Button` types.  */
  size: _propTypes.default.oneOf(['xsmall', 'small', 'medium', 'large']),

  /** Used only for themification.  */
  theme: _propTypes.default.shape({
    spacing: _propTypes.default.object,
    baseFontSize: _propTypes.default.number
  })
}; // Types

Skeleton.Button = _SkeletonTypes.default.Button;
Skeleton.Circle = _SkeletonTypes.default.Circle;
Skeleton.Text = _SkeletonTypes.default.Text;
Skeleton.Tag = _SkeletonTypes.default.Tag;
var _default = Skeleton;
exports.default = _default;