ndla-ui/es/ContentLoader/index.js

UI component library for NDLA.

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

/**
 * Copyright (c) 2018-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { uuid } from 'ndla-util';

var ContentLoader = function ContentLoader(_ref) {
  var children = _ref.children,
      width = _ref.width,
      height = _ref.height,
      preserveAspectRatio = _ref.preserveAspectRatio,
      className = _ref.className,
      primaryColor = _ref.primaryColor,
      secondaryColor = _ref.secondaryColor,
      speed = _ref.speed,
      rest = _objectWithoutProperties(_ref, ['children', 'width', 'height', 'preserveAspectRatio', 'className', 'primaryColor', 'secondaryColor', 'speed']);

  var idClip = uuid();
  var idGradient = uuid();

  return React.createElement(
    'svg',
    _extends({
      viewBox: '0 0 ' + width + ' ' + height,
      version: '1.1',
      preserveAspectRatio: preserveAspectRatio,
      className: className
    }, rest),
    React.createElement('rect', {
      style: { fill: 'url(#' + idGradient + ')' },
      clipPath: 'url(#' + idClip + ')',
      x: '0',
      y: '0',
      width: width,
      height: height
    }),
    React.createElement(
      'defs',
      null,
      React.createElement(
        'clipPath',
        { id: idClip },
        children
      ),
      React.createElement(
        'linearGradient',
        { id: idGradient },
        React.createElement(
          'stop',
          { offset: '0%', stopColor: primaryColor },
          React.createElement('animate', {
            attributeName: 'offset',
            values: '-2; 1',
            dur: speed + 's',
            repeatCount: 'indefinite'
          })
        ),
        React.createElement(
          'stop',
          { offset: '50%', stopColor: secondaryColor },
          React.createElement('animate', {
            attributeName: 'offset',
            values: '-1.5; 1.5',
            dur: speed + 's',
            repeatCount: 'indefinite'
          })
        ),
        React.createElement(
          'stop',
          { offset: '100%', stopColor: primaryColor },
          React.createElement('animate', {
            attributeName: 'offset',
            values: '-1; 2',
            dur: speed + 's',
            repeatCount: 'indefinite'
          })
        )
      )
    )
  );
};

ContentLoader.propTypes = {
  children: PropTypes.node,
  speed: PropTypes.number,
  width: PropTypes.number,
  height: PropTypes.number,
  primaryColor: PropTypes.string,
  secondaryColor: PropTypes.string,
  preserveAspectRatio: PropTypes.string,
  className: PropTypes.string
};

ContentLoader.defaultProps = {
  speed: 2,
  width: 400,
  height: 130,
  primaryColor: '#f0f0f0',
  secondaryColor: '#e0e0e0',
  preserveAspectRatio: 'xMidYMid meet',
  className: ''
};
export default ContentLoader;