react-misc-toolbox/dist/SlotfulCTCMercury.js

- [ ] diagramexample | optimize creating from blank slate

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  width: ', ';\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  font-size: 1.35rem;\n'], ['\n  width: ', ';\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  font-size: 1.35rem;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  width: 100%;\n  justify-content: flex-start;\n  align-items: center;\n'], ['\n  display: flex;\n  width: 100%;\n  justify-content: flex-start;\n  align-items: center;\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  width: ', ';\n  display: flex;\n  background: white;\n  justify-content: space-between;\n  @media (min-width: 600px) {\n    flex-direction: row;\n    /* border-bottom: 1px solid; */\n  }\n  @media (max-width: 600px) {\n    flex-direction: column;\n    /* border-bottom: 1px solid; */\n  }\n'], ['\n  width: ', ';\n  display: flex;\n  background: white;\n  justify-content: space-between;\n  @media (min-width: 600px) {\n    flex-direction: row;\n    /* border-bottom: 1px solid; */\n  }\n  @media (max-width: 600px) {\n    flex-direction: column;\n    /* border-bottom: 1px solid; */\n  }\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n\n  padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n  @media (min-width: 600px) {\n    margin-right: 0.5rem;\n  }\n  @media (max-width: 600px) {\n    /* border-right: 0.25rem solid; */\n  }\n'], ['\n  display: flex;\n\n  padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n  @media (min-width: 600px) {\n    margin-right: 0.5rem;\n  }\n  @media (max-width: 600px) {\n    /* border-right: 0.25rem solid; */\n  }\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n  display: flex;\n\n  /* padding: 0.25rem 0.5rem 0.25rem 0.25rem; */\n  background: #f1f1f1;\n  /* border-right: 0.25rem solid; */\n'], ['\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n  display: flex;\n\n  /* padding: 0.25rem 0.5rem 0.25rem 0.25rem; */\n  background: #f1f1f1;\n  /* border-right: 0.25rem solid; */\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ = require('.');

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var BUTTON = (0, _styledComponents2.default)(_.Button)(_templateObject, function (_ref) {
  var width = _ref.width;
  return width + 'rem';
});

var CONTAINER = _styledComponents2.default.div(_templateObject2);
var SLOT = _styledComponents2.default.div(_templateObject3, function (_ref2) {
  var width = _ref2.width;
  return width + 'rem';
});
var TITLE = _styledComponents2.default.div(_templateObject4);
var VALUE = _styledComponents2.default.div(_templateObject5);

var SlotfulCTCMercury = function SlotfulCTCMercury(_ref3) {
  var slots = _ref3.slots,
      onClick = _ref3.onClick,
      children = _ref3.children,
      _ref3$transitionProps = _ref3.transitionProps,
      transitionProps = _ref3$transitionProps === undefined ? {
    maxHeight: '300vh',
    duration: 0
  } : _ref3$transitionProps,
      _ref3$openByDefault = _ref3.openByDefault,
      openByDefault = _ref3$openByDefault === undefined ? false : _ref3$openByDefault,
      _ref3$noOCListener = _ref3.noOCListener,
      noOCListener = _ref3$noOCListener === undefined ? true : _ref3$noOCListener,
      _ref3$shouldRenderIco = _ref3.shouldRenderIcon,
      shouldRenderIcon = _ref3$shouldRenderIco === undefined ? false : _ref3$shouldRenderIco,
      buttons = _ref3.buttons,
      props = (0, _objectWithoutProperties3.default)(_ref3, ['slots', 'onClick', 'children', 'transitionProps', 'openByDefault', 'noOCListener', 'shouldRenderIcon', 'buttons']);

  return _react2.default.createElement(
    _.CTCMercury,
    (0, _extends3.default)({
      transitionProps: transitionProps,
      openByDefault: openByDefault,
      noOCListener: noOCListener,
      shouldRenderIcon: shouldRenderIcon,
      renderTrigger: function renderTrigger() {
        return _react2.default.createElement(
          CONTAINER,
          null,
          slots && slots.map(function (slot, i) {
            var _slot$show = slot.show,
                show = _slot$show === undefined ? true : _slot$show,
                width = slot.width,
                title = slot.title,
                style = slot.style,
                _slot$justify = slot.justify,
                justify = _slot$justify === undefined ? 'center' : _slot$justify,
                _slot$isButton = slot.isButton,
                isButton = _slot$isButton === undefined ? false : _slot$isButton,
                _slot$onClick = slot.onClick,
                _onClick = _slot$onClick === undefined ? function () {
              return null;
            } : _slot$onClick,
                value = slot.value,
                isOn = slot.isOn;

            return show ? isButton ? typeof value === 'function' ? _react2.default.createElement(
              BUTTON,
              {
                key: i + '_' + slot.value,
                isOn: isOn,
                width: width,
                style: (0, _extends3.default)({
                  justifyContent: justify
                }, style) || {},
                onClick: function onClick(e) {
                  return _onClick(e);
                }
              },
              value({ isOn: isOn })
            ) : _react2.default.createElement(
              BUTTON,
              {
                key: i + '_' + slot.value,
                isOn: isOn,
                width: width,
                style: (0, _extends3.default)({ justifyContent: justify }, style) || {},
                onClick: function onClick(e) {
                  return _onClick(e);
                }
              },
              value
            ) : _react2.default.createElement(
              SLOT,
              { width: width, key: i + '_' + slot.value },
              title && _react2.default.createElement(
                TITLE,
                null,
                title
              ),
              _react2.default.createElement(
                VALUE,
                null,
                value
              )
            ) : null;
          })
        );
      }
    }, props),
    function (_ref4) {
      var getChildrenProps = _ref4.getChildrenProps,
          transitionStyle = _ref4.transitionStyle;
      return children({ getChildrenProps: getChildrenProps, transitionStyle: transitionStyle });
    }
  );
};

exports.default = SlotfulCTCMercury;