react-animation-presets/lib/components/layout/Image.js

Welcome to the React animation presets project. This project will give an overview of reusable animations used within Oberon projects.

'use strict';

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

var _templateObject = _taggedTemplateLiteral(['\n    position: relative;\n    overflow: hidden;\n    top: 0;\n    left: 0;\n    margin: 0;\n    width: 100%;\n    height: ', ';\n    \n    &:before {\n        content: \'\';\n        display: block;\n        padding-bottom: ', ';\n    }\n\n    ', ';\n'], ['\n    position: relative;\n    overflow: hidden;\n    top: 0;\n    left: 0;\n    margin: 0;\n    width: 100%;\n    height: ', ';\n    \n    &:before {\n        content: \'\';\n        display: block;\n        padding-bottom: ', ';\n    }\n\n    ', ';\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    object-fit: ', ';\n    top: 0;\n    left: 0;\n    transform: scale(1);\n    transition: transform 1s ease-in-out;\n'], ['\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    object-fit: ', ';\n    top: 0;\n    left: 0;\n    transform: scale(1);\n    transition: transform 1s ease-in-out;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var ImageWrapper = _styledComponents2.default.figure(_templateObject, function (_ref) {
    var imageFill = _ref.imageFill;
    return imageFill ? '100%' : 'initial';
}, function (_ref2) {
    var ratio = _ref2.ratio,
        imageFill = _ref2.imageFill;

    if (imageFill) {
        return 0;
    }
    return ratio ? 100 / ratio + '%' : '100%';
}, function (_ref3) {
    var hover = _ref3.hover;

    if (hover) {
        return '\n                &:hover {\n                    > img {\n                        transform: scale(1.05);\n                    }\n                }\n            ';
    }
    return '';
});

var Img = _styledComponents2.default.img(_templateObject2, function (_ref4) {
    var contain = _ref4.contain;
    return contain ? 'contain' : 'cover';
});

var Image = function Image(_ref5) {
    var src = _ref5.src,
        src2x = _ref5.src2x,
        ratio = _ref5.ratio,
        alt = _ref5.alt,
        fill = _ref5.fill,
        onLoad = _ref5.onLoad,
        onError = _ref5.onError;

    var image = null;
    var imageWrapper = null;

    var onImageLoad = function onImageLoad() {
        image.style.opacity = 1;
        onLoad && onLoad({ imageWrapper: imageWrapper, image: image });
    };

    var onImageError = function onImageError(e) {
        onError && onError(e);
    };

    return _react2.default.createElement(
        ImageWrapper,
        {
            innerRef: function innerRef(ref) {
                imageWrapper = ref;
            },
            ratio: ratio,
            imageFill: fill,
            hover: true
        },
        _react2.default.createElement(Img, {
            innerRef: function innerRef(ref) {
                image = ref;
            },
            onLoad: onImageLoad,
            onError: onImageError,
            srcSet: src + ' 1x, ' + (src2x || src) + ' 2x',
            alt: alt
        })
    );
};

exports.default = Image;