react-misc-toolbox/dist/ShowToggle.js

'use strict';

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

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

var _SVGFullscreen = require('../svg/SVGFullscreen');

var _SVGFullscreen2 = _interopRequireDefault(_SVGFullscreen);

var _SVGFullscreenExit = require('../svg/SVGFullscreenExit');

var _SVGFullscreenExit2 = _interopRequireDefault(_SVGFullscreenExit);

var _recompose = require('recompose');

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

var ShowToggle = function ShowToggle(_ref) {
  var renderBow = _ref.renderBow,
      renderStern = _ref.renderStern,
      renderAnchor = _ref.renderAnchor,
      renderDeck = _ref.renderDeck,
      _ref$expandedBodyStyl = _ref.expandedBodyStyle,
      expandedBodyStyle = _ref$expandedBodyStyl === undefined ? {} : _ref$expandedBodyStyl,
      _ref$collapsedBodySty = _ref.collapsedBodyStyle,
      collapsedBodyStyle = _ref$collapsedBodySty === undefined ? {} : _ref$collapsedBodySty,
      text = _ref.text,
      icon = _ref.icon,
      small = _ref.small,
      special = _ref.special,
      noRight = _ref.noRight,
      noLeft = _ref.noLeft,
      noChevron = _ref.noChevron,
      childName = _ref.childName,
      isOn = _ref.isOn,
      children = _ref.children,
      callback = _ref.callback,
      toggleIsOn = _ref.toggleIsOn,
      CSSContainerClass = _ref.CSSContainerClass,
      renderNoPropagationDeck = _ref.renderNoPropagationDeck;

  var onToggle = function onToggle() {
    callback();
    toggleIsOn();
  };
  // shouldComponentUpdate = (props, nextProps) => {
  //   return props.show !== nextProps.show
  // }

  var topLeftClass = (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__left', 'collapsed', 'expanded');
  var topRightClass = (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__right', 'collapsed', 'expanded');
  var titleClass = (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__title', 'expanded', 'collapsed');
  var childClass = (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__child', 'show', 'hide');
  var bowClass = (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__bow', 'show', 'hide');
  var sternClass = (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__stern', 'show', 'hide');
  var anchorClass = (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__anchor', 'show', 'hide');
  var titleCustomClass = (0, _helperFunctions.flippyClass)(isOn, childName + '__showtoggle__title', 'expanded', 'collapsed');
  var childCustomClass = (0, _helperFunctions.flippyClass)(isOn, childName + '__showtoggle__child', 'show', 'hide');
  var containerClass = '\n      ' + (0, _helperFunctions.flippyClass)(isOn, 'showtoggle__container', 'show', 'hide') + '\n      ' + childName + '__showtoggle__container ' + CSSContainerClass + ' ' + (special === true ? 'showtoggle__container--special' : '') + ' ' + (small === true ? 'showtoggle__container--small' : '') + '    \n    ';

  return React.createElement(
    'div',
    { className: containerClass },
    React.createElement(
      'div',
      {
        onClick: onToggle,
        style: isOn ? expandedBodyStyle : collapsedBodyStyle,
        id: 'showtoggle__' + childName,
        className: 'showtoggle__body'
      },
      !noLeft && React.createElement(
        'div',
        { className: topLeftClass },
        '\xA0'
      ),
      !noLeft && !noChevron && React.createElement(
        'div',
        null,
        isOn ? React.createElement(_SVGFullscreenExit2.default, null) : React.createElement(_SVGFullscreen2.default, null)
      ),
      renderNoPropagationDeck && React.createElement(
        'div',
        {
          onClick: function onClick(e) {
            console.log('clicked');
            e.stopPropagation();
          }
        },
        renderNoPropagationDeck()
      ),
      React.createElement(
        'div',
        { className: titleClass + ' ' + titleCustomClass },
        renderDeck && renderDeck(),
        icon && React.createElement('img', { src: icon }),
        text && text
      ),
      !noRight && !noChevron && React.createElement(
        'div',
        null,
        isOn ? React.createElement(_SVGFullscreenExit2.default, null) : React.createElement(_SVGFullscreen2.default, null)
      ),
      !noRight && React.createElement(
        'div',
        { className: topRightClass },
        '\xA0'
      )
    ),
    React.createElement(
      'div',
      { className: bowClass },
      renderBow && renderBow()
    ),
    React.createElement(
      'div',
      { className: childClass + ' ' + childCustomClass },
      children(isOn)
    ),
    React.createElement(
      'div',
      { className: sternClass },
      renderStern && renderStern()
    ),
    React.createElement(
      'div',
      { className: anchorClass },
      renderAnchor && renderAnchor()
    )
  );
};

ShowToggle.defaultProps = {
  callback: function callback() {
    return null;
  },
  openByDefault: true,
  connected: false,
  special: false,
  CSSContainerClass: ''
};

var enhance = (0, _recompose.compose)((0, _recompose.withStateHandlers)(function (_ref2) {
  var _ref2$openByDefault = _ref2.openByDefault,
      openByDefault = _ref2$openByDefault === undefined ? true : _ref2$openByDefault;
  return {
    isOn: openByDefault
  };
}, {
  toggleIsOn: function toggleIsOn(_ref3) {
    var isOn = _ref3.isOn;
    return function () {
      return { isOn: !isOn };
    };
  },
  setIsOnTo: function setIsOnTo(_ref4) {
    var isOn = _ref4.isOn;
    return function (value) {
      return { isOn: value };
    };
  }
}), (0, _recompose.lifecycle)({
  componentDidUpdate: function componentDidUpdate() {
    //console.log(`ShowToggle: componentDidUpdate`)
    var _props = this.props,
        connected = _props.connected,
        show = _props.show,
        isOn = _props.isOn,
        setIsOnTo = _props.setIsOnTo;

    if (connected === true) {
      if (isOn !== show) {
        setIsOnTo(show);
      }
    }
  }
}),
//pure
(0, _recompose.onlyUpdateForKeys)(['show', 'isOn', 'children']));

exports.default = enhance(ShowToggle);