react-misc-toolbox/dist/Gridbox.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

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

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _from = require('babel-runtime/core-js/array/from');

var _from2 = _interopRequireDefault(_from);

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

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _helperFunctions = require('./helperFunctions');

var _StyledGridbox = require('./StyledGridbox');

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

var defaultRenderItem = function defaultRenderItem(_ref) {
  var item = _ref.item,
      getWrapperProps = _ref.getWrapperProps,
      getSternProps = _ref.getSternProps,
      getStarboardProps = _ref.getStarboardProps,
      getImageProps = _ref.getImageProps;
  return _react2.default.createElement(
    _StyledGridbox.ITEM,
    (0, _extends3.default)({
      key: item.id
    }, getWrapperProps()),
    _react2.default.createElement(
      _StyledGridbox.DECK,
      null,
      _react2.default.createElement(
        _StyledGridbox.IMAGE,
        (0, _extends3.default)({}, getImageProps(), {
          imageSrc: item.imageS
        }),
        'IMAGE'
      ),
      _react2.default.createElement(
        _StyledGridbox.STARBOARD,
        (0, _extends3.default)({}, getStarboardProps({
          style: {
            writingMode: 'vertical-rl'
          }
        })),
        'STARBOARD'
      )
    ),
    _react2.default.createElement(
      _StyledGridbox.STERN,
      (0, _extends3.default)({}, getSternProps()),
      'STERN || ',
      item.title
    )
  );
};

var defaultItems = (0, _from2.default)({ length: 30 }, function (_, i) {
  return {
    title: 'item' + i,
    id: i,
    imageS: 'http://via.placeholder.com/210x300'
  };
});

var GridBox = function GridBox(_ref2) {
  var _ref2$className = _ref2.className,
      className = _ref2$className === undefined ? '' : _ref2$className,
      style = _ref2.style,
      _ref2$renderItem = _ref2.renderItem,
      renderItem = _ref2$renderItem === undefined ? defaultRenderItem : _ref2$renderItem,
      _ref2$itemSize = _ref2.itemSize,
      itemSize = _ref2$itemSize === undefined ? 'm' : _ref2$itemSize,
      _ref2$showStarboard = _ref2.showStarboard,
      showStarboard = _ref2$showStarboard === undefined ? false : _ref2$showStarboard,
      _ref2$items = _ref2.items,
      items = _ref2$items === undefined ? defaultItems : _ref2$items,
      _ref2$show = _ref2.show,
      show = _ref2$show === undefined ? true : _ref2$show,
      settings = _ref2.settings;

  var getAreaClass = function getAreaClass(area) {
    return (0, _helperFunctions.advancedMulti)({
      hideBase: true,
      unflattenedBases: ['gridbox', '' + className],
      suffixes: ['__' + area, '__' + area + '__' + itemSize],
      flipVars: [[showStarboard, 'showstarboard', 'hidestarboard'], [show, 'on', 'off']]
    });
  };

  var containerClass = getAreaClass('container');
  var wrapperClass = getAreaClass('item');
  var starboardClass = getAreaClass('starboard');
  var sternClass = getAreaClass('stern');
  var imageClass = getAreaClass('image');

  var defaultStyle = (0, _extends3.default)({
    factorM: 1,
    factorL: 1,
    heightBaseM: 210,
    heightBaseL: 300,
    aspectRatioM: 2 / 3,
    aspectRatioL: 2 / 3,
    marginItemM: 30,
    marginItemL: 50,
    widthStarboardM: 30,
    widthStarboardL: 30,

    sizeSpeed: '1s',
    moveSpeed: '0.25s'
  }, settings);
  var factorM = defaultStyle.factorM,
      factorL = defaultStyle.factorL,
      heightBaseM = defaultStyle.heightBaseM,
      heightBaseL = defaultStyle.heightBaseL,
      aspectRatioM = defaultStyle.aspectRatioM,
      aspectRatioL = defaultStyle.aspectRatioL,
      marginItemM = defaultStyle.marginItemM,
      marginItemL = defaultStyle.marginItemL,
      widthStarboardM = defaultStyle.widthStarboardM,
      widthStarboardL = defaultStyle.widthStarboardL,
      sizeSpeed = defaultStyle.sizeSpeed,
      moveSpeed = defaultStyle.moveSpeed;


  var heightM = heightBaseM * factorM;
  var heightItemM = heightM + marginItemM;
  var heightImageM = heightM;
  var widthM = heightM * aspectRatioM * factorM;
  var widthItemM = widthM;
  var widthImageM = widthM;
  var heightL = heightBaseL * factorL;
  var heightItemL = heightL + marginItemL;
  var heightImageL = heightL;
  var widthL = heightL * aspectRatioL * factorL;
  var widthItemL = widthL;
  var widthImageL = widthL;

  var getImageProps = function getImageProps() {
    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick = _ref3.onClick,
        className = _ref3.className,
        style = _ref3.style,
        props = (0, _objectWithoutProperties3.default)(_ref3, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation();
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      style: style,
      className: imageClass,

      itemSize: itemSize,
      heightImageM: heightImageM,
      heightImageL: heightImageL,
      widthImageL: widthImageL,
      widthImageM: widthImageM,
      sizeSpeed: sizeSpeed

    }, props);
  };
  var getSternProps = function getSternProps() {
    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick2 = _ref4.onClick,
        className = _ref4.className,
        style = _ref4.style,
        props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }

        e.stopPropagation();
        _onClick2 && _onClick2.apply(undefined, [e].concat(args));
      },
      style: style,
      className: sternClass
    }, props);
  };
  var getWrapperProps = function getWrapperProps() {
    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick3 = _ref5.onClick,
        className = _ref5.className,
        style = _ref5.style,
        props = (0, _objectWithoutProperties3.default)(_ref5, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
          args[_key3 - 1] = arguments[_key3];
        }

        e.stopPropagation();
        _onClick3 && _onClick3.apply(undefined, [e].concat(args));
      },
      style: style,
      className: wrapperClass,
      sizeSpeed: sizeSpeed,
      heightItemM: heightItemM,
      heightItemL: heightItemL,
      widthItemM: widthItemM,
      widthItemL: widthItemL,
      widthStarboardM: widthStarboardM,
      widthStarboardL: widthStarboardL,
      itemSize: itemSize,
      showStarboard: showStarboard,
      show: show
    }, props);
  };
  var getStarboardProps = function getStarboardProps() {
    var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var _onClick4 = _ref6.onClick,
        className = _ref6.className,
        style = _ref6.style,
        props = (0, _objectWithoutProperties3.default)(_ref6, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
          args[_key4 - 1] = arguments[_key4];
        }

        e.stopPropagation();
        _onClick4 && _onClick4.apply(undefined, [e].concat(args));
      },
      style: style,
      className: starboardClass,
      itemSize: itemSize,
      showStarboard: showStarboard,
      widthStarboardM: widthStarboardM,
      widthStarboardL: widthStarboardL,
      heightImageM: heightImageM,
      heightImageL: heightImageL,
      moveSpeed: moveSpeed
    }, props);
  };
  return _react2.default.createElement(
    _StyledGridbox.CONTAINER,
    { className: containerClass, style: style },
    items.map(function (item) {
      return renderItem({
        item: item,
        getSternProps: getSternProps,
        getImageProps: getImageProps,
        getStarboardProps: getStarboardProps,
        getWrapperProps: getWrapperProps
      });
    })
  );
};

exports.default = GridBox;