apeman-react-image/lib/ap_image_style.js

apeman react package for image component.

/**
 * Style for ApImage.
 * @class ApImageStyle
 */

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _apemanReactStyle = require('apeman-react-style');

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

/** @lends ApImageStyle */
var ApImageStyle = _react2.default.createClass({
  displayName: 'ApImageStyle',

  propTypes: {

    style: _react.PropTypes.object,
    backgroundColor: _react.PropTypes.string
  },
  getDefaultProps: function getDefaultProps() {
    return {

      style: {},
      backgroundColor: '#DDD',
      spinColor: 'rgba(255,255,255,0.5)'
    };
  },
  render: function render() {
    var s = this;
    var props = s.props;
    var backgroundColor = props.backgroundColor;
    var spinColor = props.spinColor;


    var transitionDuration = 100;

    var data = {
      '.ap-image': {
        backgroundColor: '' + backgroundColor,
        overflow: 'hidden',
        textAlign: 'center',
        display: 'inline-block',
        position: 'relative'
      },
      '.ap-image img': {
        opacity: 0,
        transition: 'width ' + transitionDuration + 'ms, opacity ' + transitionDuration + 'ms'
      },
      '.ap-image-ready img': {
        opacity: 1
      },
      '.ap-image-content': {
        position: 'absolute',
        display: 'inline-block'
      },
      '.ap-image-spinner': {
        position: 'absolute',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        textAlign: 'center',
        display: 'inline-flex',
        zIndex: 8,
        backgroundColor: 'rgba(0,0,0,0.1)',
        color: '' + spinColor,
        justifyContent: 'center',
        alignItems: 'center'
      },
      '.ap-image-notfound': {
        display: 'block',
        textAlign: 'center',
        color: 'rgba(0,0,0,0.1)',
        fontFamily: 'monospace'
      }
    };
    var smallMediaData = {};
    var mediumMediaData = {};
    var largeMediaData = {};
    return _react2.default.createElement(
      _apemanReactStyle.ApStyle,
      {
        data: Object.assign(data, props.style),
        smallMediaData: smallMediaData,
        mediumMediaData: mediumMediaData,
        largeMediaData: largeMediaData
      },
      props.children
    );
  }
});

exports.default = ApImageStyle;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwX2ltYWdlX3N0eWxlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUtBOzs7Ozs7QUFFQTs7OztBQUNBOzs7OztBQUdBLElBQU0sZUFBZSxnQkFBTSxXQUFOLENBQWtCO0FBQUE7O0FBQ3JDLGFBQVc7O0FBRVQsV0FBTyxpQkFBTSxNQUZKO0FBR1QscUJBQWlCLGlCQUFNO0FBSGQsR0FEMEI7QUFNckMsaUJBTnFDLDZCQU1sQjtBQUNqQixXQUFPOztBQUVMLGFBQU8sRUFGRjtBQUdMLHVCQUFpQixNQUhaO0FBSUwsaUJBQVc7QUFKTixLQUFQO0FBTUQsR0Fib0M7QUFjckMsUUFkcUMsb0JBYzNCO0FBQ1IsUUFBTSxJQUFJLElBQVY7QUFEUSxRQUVGLEtBRkUsR0FFUSxDQUZSLENBRUYsS0FGRTtBQUFBLFFBSUYsZUFKRSxHQUk2QixLQUo3QixDQUlGLGVBSkU7QUFBQSxRQUllLFNBSmYsR0FJNkIsS0FKN0IsQ0FJZSxTQUpmOzs7QUFNUixRQUFJLHFCQUFxQixHQUF6Qjs7QUFFQSxRQUFJLE9BQU87QUFDVCxtQkFBYTtBQUNYLDhCQUFvQixlQURUO0FBRVgsa0JBQVUsUUFGQztBQUdYLG1CQUFXLFFBSEE7QUFJWCxpQkFBUyxjQUpFO0FBS1gsa0JBQVU7QUFMQyxPQURKO0FBUVQsdUJBQWlCO0FBQ2YsaUJBQVMsQ0FETTtBQUVmLCtCQUFxQixrQkFBckIsb0JBQXNELGtCQUF0RDtBQUZlLE9BUlI7QUFZVCw2QkFBdUI7QUFDckIsaUJBQVM7QUFEWSxPQVpkO0FBZVQsMkJBQXFCO0FBQ25CLGtCQUFVLFVBRFM7QUFFbkIsaUJBQVM7QUFGVSxPQWZaO0FBbUJULDJCQUFxQjtBQUNuQixrQkFBVSxVQURTO0FBRW5CLGNBQU0sQ0FGYTtBQUduQixhQUFLLENBSGM7QUFJbkIsZUFBTyxDQUpZO0FBS25CLGdCQUFRLENBTFc7QUFNbkIsbUJBQVcsUUFOUTtBQU9uQixpQkFBUyxhQVBVO0FBUW5CLGdCQUFRLENBUlc7QUFTbkIseUJBQWlCLGlCQVRFO0FBVW5CLG9CQUFVLFNBVlM7QUFXbkIsd0JBQWdCLFFBWEc7QUFZbkIsb0JBQVk7QUFaTyxPQW5CWjtBQWlDVCw0QkFBc0I7QUFDcEIsaUJBQVMsT0FEVztBQUVwQixtQkFBVyxRQUZTO0FBR3BCLGVBQU8saUJBSGE7QUFJcEIsb0JBQVk7QUFKUTtBQWpDYixLQUFYO0FBd0NBLFFBQUksaUJBQWlCLEVBQXJCO0FBQ0EsUUFBSSxrQkFBa0IsRUFBdEI7QUFDQSxRQUFJLGlCQUFpQixFQUFyQjtBQUNBLFdBQ0U7QUFBQTtNQUFBO0FBQ0UsY0FBTyxPQUFPLE1BQVAsQ0FBYyxJQUFkLEVBQW9CLE1BQU0sS0FBMUIsQ0FEVDtBQUVFLHdCQUFpQixjQUZuQjtBQUdFLHlCQUFrQixlQUhwQjtBQUlFLHdCQUFpQjtBQUpuQjtNQUtHLE1BQU07QUFMVCxLQURGO0FBUUQ7QUF6RW9DLENBQWxCLENBQXJCOztrQkE0RWUsWSIsImZpbGUiOiJhcF9pbWFnZV9zdHlsZS5qcyIsInNvdXJjZVJvb3QiOiIvVXNlcnMvb2t1bmlzaGluaXNoaS9Qcm9qZWN0cy9hcGVtYW4tcHJvamVjdHMvYXBlbWFuLXJlYWN0LWltYWdlL2xpYiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogU3R5bGUgZm9yIEFwSW1hZ2UuXG4gKiBAY2xhc3MgQXBJbWFnZVN0eWxlXG4gKi9cblxuJ3VzZSBzdHJpY3QnXG5cbmltcG9ydCBSZWFjdCwge1Byb3BUeXBlcyBhcyB0eXBlc30gZnJvbSAncmVhY3QnXG5pbXBvcnQge0FwU3R5bGV9IGZyb20gJ2FwZW1hbi1yZWFjdC1zdHlsZSdcblxuLyoqIEBsZW5kcyBBcEltYWdlU3R5bGUgKi9cbmNvbnN0IEFwSW1hZ2VTdHlsZSA9IFJlYWN0LmNyZWF0ZUNsYXNzKHtcbiAgcHJvcFR5cGVzOiB7XG5cbiAgICBzdHlsZTogdHlwZXMub2JqZWN0LFxuICAgIGJhY2tncm91bmRDb2xvcjogdHlwZXMuc3RyaW5nXG4gIH0sXG4gIGdldERlZmF1bHRQcm9wcyAoKSB7XG4gICAgcmV0dXJuIHtcblxuICAgICAgc3R5bGU6IHt9LFxuICAgICAgYmFja2dyb3VuZENvbG9yOiAnI0RERCcsXG4gICAgICBzcGluQ29sb3I6ICdyZ2JhKDI1NSwyNTUsMjU1LDAuNSknXG4gICAgfVxuICB9LFxuICByZW5kZXIgKCkge1xuICAgIGNvbnN0IHMgPSB0aGlzXG4gICAgbGV0IHsgcHJvcHMgfSA9IHNcblxuICAgIGxldCB7IGJhY2tncm91bmRDb2xvciwgc3BpbkNvbG9yIH0gPSBwcm9wc1xuXG4gICAgbGV0IHRyYW5zaXRpb25EdXJhdGlvbiA9IDEwMFxuXG4gICAgbGV0IGRhdGEgPSB7XG4gICAgICAnLmFwLWltYWdlJzoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGAke2JhY2tncm91bmRDb2xvcn1gLFxuICAgICAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gICAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJ1xuICAgICAgfSxcbiAgICAgICcuYXAtaW1hZ2UgaW1nJzoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICB0cmFuc2l0aW9uOiBgd2lkdGggJHt0cmFuc2l0aW9uRHVyYXRpb259bXMsIG9wYWNpdHkgJHt0cmFuc2l0aW9uRHVyYXRpb259bXNgXG4gICAgICB9LFxuICAgICAgJy5hcC1pbWFnZS1yZWFkeSBpbWcnOiB7XG4gICAgICAgIG9wYWNpdHk6IDFcbiAgICAgIH0sXG4gICAgICAnLmFwLWltYWdlLWNvbnRlbnQnOiB7XG4gICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJ1xuICAgICAgfSxcbiAgICAgICcuYXAtaW1hZ2Utc3Bpbm5lcic6IHtcbiAgICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgcmlnaHQ6IDAsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICAgICAgZGlzcGxheTogJ2lubGluZS1mbGV4JyxcbiAgICAgICAgekluZGV4OiA4LFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICdyZ2JhKDAsMCwwLDAuMSknLFxuICAgICAgICBjb2xvcjogYCR7c3BpbkNvbG9yfWAsXG4gICAgICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcidcbiAgICAgIH0sXG4gICAgICAnLmFwLWltYWdlLW5vdGZvdW5kJzoge1xuICAgICAgICBkaXNwbGF5OiAnYmxvY2snLFxuICAgICAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICAgICAgICBjb2xvcjogJ3JnYmEoMCwwLDAsMC4xKScsXG4gICAgICAgIGZvbnRGYW1pbHk6ICdtb25vc3BhY2UnXG4gICAgICB9XG4gICAgfVxuICAgIGxldCBzbWFsbE1lZGlhRGF0YSA9IHt9XG4gICAgbGV0IG1lZGl1bU1lZGlhRGF0YSA9IHt9XG4gICAgbGV0IGxhcmdlTWVkaWFEYXRhID0ge31cbiAgICByZXR1cm4gKFxuICAgICAgPEFwU3R5bGVcbiAgICAgICAgZGF0YT17IE9iamVjdC5hc3NpZ24oZGF0YSwgcHJvcHMuc3R5bGUpIH1cbiAgICAgICAgc21hbGxNZWRpYURhdGE9eyBzbWFsbE1lZGlhRGF0YSB9XG4gICAgICAgIG1lZGl1bU1lZGlhRGF0YT17IG1lZGl1bU1lZGlhRGF0YSB9XG4gICAgICAgIGxhcmdlTWVkaWFEYXRhPXsgbGFyZ2VNZWRpYURhdGEgfVxuICAgICAgPnsgcHJvcHMuY2hpbGRyZW4gfTwvQXBTdHlsZT5cbiAgICApXG4gIH1cbn0pXG5cbmV4cG9ydCBkZWZhdWx0IEFwSW1hZ2VTdHlsZVxuIl19