react-misc-toolbox/dist/StyledGridbox.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.STARBOARD = exports.ITEM = exports.IMAGE = exports.DECK = exports.STERN = exports.CONTAINER = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var CONTAINER = (0, _styledComponents2.default)('div')({
  display: 'flex',
  flexWrap: 'wrap'
});

var STERN = (0, _styledComponents2.default)('div')({
  zIndex: '1',
  margin: '0.375rem 0',
  background: 'rgba(246, 246, 246, 0.5)',
  borderRadius: '0.5rem',
  width: '100%'
});

var DECK = (0, _styledComponents2.default)('div')({
  display: 'flex',
  justifyContent: 'space-between'
});

var IMAGE = (0, _styledComponents2.default)('div')(function (_ref) {
  var heightImageM = _ref.heightImageM,
      heightImageL = _ref.heightImageL,
      widthImageM = _ref.widthImageM,
      widthImageL = _ref.widthImageL,
      sizeSpeed = _ref.sizeSpeed,
      itemSize = _ref.itemSize,
      imageSrc = _ref.imageSrc;

  var height = void 0,
      width = void 0;
  if (itemSize === 'm') {
    height = '' + heightImageM;
    width = '' + widthImageM;
  }
  if (itemSize === 'l') {
    height = '' + heightImageL;
    width = '' + widthImageL;
  }
  return {
    backgroundImage: 'url(' + imageSrc + ')',
    alignSelf: 'flex-start',
    justifySelf: 'center',
    cursor: 'pointer',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    objectFit: 'contain',
    transition: 'transform 0.25s ease-in-out, width ' + sizeSpeed + ' ease-in-out, height ' + sizeSpeed + ' ease-in-out',
    height: height + 'px',
    width: width + 'px'
  };
});

var ITEM = (0, _styledComponents2.default)('div')(function (_ref2) {
  var heightItemM = _ref2.heightItemM,
      heightItemL = _ref2.heightItemL,
      widthItemM = _ref2.widthItemM,
      widthItemL = _ref2.widthItemL,
      widthStarboardM = _ref2.widthStarboardM,
      widthStarboardL = _ref2.widthStarboardL,
      itemSize = _ref2.itemSize,
      showStarboard = _ref2.showStarboard,
      show = _ref2.show,
      sizeSpeed = _ref2.sizeSpeed;

  {
    var height = void 0,
        width = void 0;
    if (itemSize === 'm' && showStarboard === true) {
      height = '' + heightItemM;
      width = '' + (widthItemM + widthStarboardM);
    }
    if (itemSize === 'm' && showStarboard === false) {
      height = '' + heightItemM;
      width = '' + widthItemM;
    }
    if (itemSize === 'l' && showStarboard === true) {
      height = '' + heightItemL;
      width = '' + (widthItemL + widthStarboardL);
    }
    if (itemSize === 'l' && showStarboard === false) {
      height = '' + heightItemL;
      width = '' + widthItemL;
    }
    var other = void 0;
    if (show) {
      other = {
        opacity: 1
      };
    } else {
      other = {
        opacity: '0',
        height: '0',
        padding: '0',
        overflow: 'hidden'
      };
    }
    return (0, _extends3.default)({
      marginBottom: '1rem',
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      alignSelf: 'center',
      justifySelf: 'center',

      transition: 'width ' + sizeSpeed + ' ease-in-out, height ' + sizeSpeed + ' ease-in-out',
      height: height + 'px',
      width: width + 'px'
    }, other);
  }
});

var STARBOARD = (0, _styledComponents2.default)('div')(function (_ref3) {
  var itemSize = _ref3.itemSize,
      showStarboard = _ref3.showStarboard,
      widthStarboardM = _ref3.widthStarboardM,
      widthStarboardL = _ref3.widthStarboardL,
      heightImageM = _ref3.heightImageM,
      heightImageL = _ref3.heightImageL,
      moveSpeed = _ref3.moveSpeed;

  var shared = {
    transition: 'transform ' + moveSpeed + ' ease-in-out, opacity ' + moveSpeed + ' ease-in-out'
  };
  if (showStarboard) {
    if (itemSize === 'm') {
      return (0, _extends3.default)({
        width: widthStarboardM,
        height: heightImageM,
        marginLeft: '2px',
        transform: 'translateX(0)',
        opacity: '1'
      }, shared);
    }
    if (itemSize === 'l') {
      return (0, _extends3.default)({
        width: widthStarboardL,
        height: heightImageL,
        marginLeft: '2px',
        transform: 'translateX(0)',
        opacity: '1'
      }, shared);
    }
  }
  return (0, _extends3.default)({
    width: '0px',
    height: '0px',
    transform: 'translateX(-30px)',
    opacity: '0',
    zIndex: '-9999'
  }, shared);
});

exports.CONTAINER = CONTAINER;
exports.STERN = STERN;
exports.DECK = DECK;
exports.IMAGE = IMAGE;
exports.ITEM = ITEM;
exports.STARBOARD = STARBOARD;