@evg-b/evg-ui/dist/Skeleton/Skeleton.js

EVG-UI library inspired by Material Design.

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var styles = {
  base: {
    display: 'block',
    height: '1.2em',
    backgroundColor: 'rgba(0,0,0,.15)'
  },
  text: {
    transform: 'scale(1, 0.60)',
    width: '100%',
    borderRadius: '6px',
    height: '1em'
  },
  h1: {
    height: '2em'
  },
  h2: {
    height: '1.5em'
  },
  h3: {
    height: '1.17em'
  },
  h4: {
    height: '1em'
  },
  h5: {
    height: '.83em'
  },
  h6: {
    height: '.67em'
  },
  avatar: {
    borderRadius: '50%'
  },
  wave: {
    position: 'relative',
    overflow: 'hidden',
    '&::after': {
      content: '""',
      position: 'absolute',
      background: "linear-gradient(90deg, rgba(0, 0, 0, 0),rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0))",
      bottom: 0,
      left: 0,
      right: 0,
      top: 0,
      transform: 'translateX(-100%)',
      animation: '$wave 1200ms linear 200ms infinite'
    }
  },
  '@keyframes wave': {
    '0%': {
      transform: 'translateX(-100%)'
    },
    '80%': {
      transform: 'translateX(100%)'
    },
    '100%': {
      transform: 'translateX(100%)'
    }
  }
};
/**
 * Скелет интерфейса дает понять пользователю что контент еще загружается. 
 * При этом знакомя пользователя к предварительному расположению элементов на странице.
*/

var Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(props, ref) {
  var classes = props.classes,
      className = props.className;
      props.children;
      var _props$component = props.component,
      Component = _props$component === void 0 ? 'span' : _props$component,
      type = props.type,
      width = props.width,
      height = props.height,
      size = props.size,
      animation = props.animation,
      borderRadius = props.borderRadius,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "component", "type", "width", "height", "size", "animation", "borderRadius"]);

  var sizeStyle = {
    width: width,
    height: height,
    borderRadius: borderRadius
  };

  if (size != 0) {
    sizeStyle.width = size;
    sizeStyle.height = size;
  }

  if (type.includes('avatar')) {
    delete sizeStyle.borderRadius;
  }

  if (type.includes('text')) {
    delete sizeStyle.height;
    delete sizeStyle.borderRadius;
  }

  var classesList = type.split(',').map(function (val) {
    return classes[val];
  });
  return /*#__PURE__*/React.createElement(Component, {
    red: ref,
    className: classNames.apply(void 0, [classes.base].concat(_toConsumableArray(classesList), [_defineProperty({}, classes.wave, animation), className])),
    style: _objectSpread(_objectSpread({}, sizeStyle), otherProps)
  });
});
Skeleton.propTypes = {
  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Это свойство не реализуется.
  */
  children: PropTypes.any,

  /**
   * Корневой узел. Это HTML элемент или компонент.
  */
  component: PropTypes.elementType,

  /**
   * Тип avatar,text,h1-h6. Можно несколько пример: 'text,h2'
  */
  type: PropTypes.string,

  /**
   * Ширина компонента.
  */
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /**
   * Высота компонента.
  */
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /**
   * Размер компонента.
  */
  size: PropTypes.number,

  /**
   * Если true, анимация будет включена.
  */
  animation: PropTypes.bool,

  /**
   * Style css border-radius
  */
  borderRadius: PropTypes.number
};
Skeleton.defaultProps = {
  component: 'span',
  type: '',
  width: 80,
  height: 80,
  size: 0,
  borderRadius: 0,
  animation: true
};
Skeleton.displayName = 'SkeletonEVG';
var Skeleton$1 = withStyles(styles)(Skeleton);

export default Skeleton$1;