react-misc-toolbox/dist/Sidebar.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 _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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  position: fixed;\n  z-index:2;\n  left: 0;\n  /* width: ', '; */\n  width: ', ';\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n'], ['\n  position: fixed;\n  z-index:2;\n  left: 0;\n  /* width: ', '; */\n  width: ', ';\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  /* width: ', '; */\n  width: ', ';\n  justify-content: flex-start;\n'], ['\n  /* width: ', '; */\n  width: ', ';\n  justify-content: flex-start;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _SVGMenu = require('./svg/SVGMenu');

var _SVGMenu2 = _interopRequireDefault(_SVGMenu);

var _SVGCancel = require('./svg/SVGCancel');

var _SVGCancel2 = _interopRequireDefault(_SVGCancel);

var _ = require('.');

var _CTCPopover = require('./CTCPopover');

var _CTCPopover2 = _interopRequireDefault(_CTCPopover);

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

var SIDEBAR = (0, _styledComponents2.default)('div')(_templateObject, function (_ref) {
  var sidebarIsExpanded = _ref.sidebarIsExpanded;
  return sidebarIsExpanded ? '20rem' : '10rem';
}, function (_ref2) {
  var _ref2$width = _ref2.width,
      width = _ref2$width === undefined ? 20 : _ref2$width;
  return width + 'rem';
});

var BUTTON$ = (0, _styledComponents2.default)(_Button2.default)(_templateObject2, function (_ref3) {
  var sidebarIsExpanded = _ref3.sidebarIsExpanded;
  return sidebarIsExpanded ? '19rem' : '9rem';
}, function (_ref4) {
  var _ref4$width = _ref4.width,
      width = _ref4$width === undefined ? 19 : _ref4$width;
  return width + 'rem';
});

var defaultComponents = [{ tag: 'signup', title: 'Sign Up' }, { tag: 'about', title: 'About' }];
var Sidebar = function Sidebar(_ref5) {
  var sidebarIsExpanded = _ref5.sidebarIsExpanded,
      setSidebarIsExpandedTo = _ref5.setSidebarIsExpandedTo,
      _ref5$defaultComponen = _ref5.defaultComponent,
      defaultComponent = _ref5$defaultComponen === undefined ? '' : _ref5$defaultComponen,
      _ref5$components = _ref5.components,
      components = _ref5$components === undefined ? defaultComponents : _ref5$components,
      props = (0, _objectWithoutProperties3.default)(_ref5, ['sidebarIsExpanded', 'setSidebarIsExpandedTo', 'defaultComponent', 'components']);

  var _useState = (0, _react.useState)(defaultComponent),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      currentComponent = _useState2[0],
      setCurrentComponentTo = _useState2[1];

  return _react2.default.createElement(
    _CTCPopover2.default,
    (0, _extends3.default)({
      onShow: function onShow() {
        console.log('onShow');
        setSidebarIsExpandedTo(true);
      },
      onHide: function onHide() {
        console.log('onHide');
        setSidebarIsExpandedTo(false);
      },
      onToggle: function onToggle(value) {
        console.log('onToggle', value);
      },
      className: 'example__container',
      externalIsOn: sidebarIsExpanded,
      transitionType: ['fade'],
      connected: true,
      pivotFrom: 'DOWNRIGHT',
      renderTrigger: function renderTrigger(_ref6) {
        var getTriggerProps = _ref6.getTriggerProps,
            isOn = _ref6.isOn;
        return _react2.default.createElement(
          _Button2.default,
          (0, _extends3.default)({
            isOn: isOn
          }, getTriggerProps({
            style: { width: '4rem' }
            //onClick: () => {
            //  setSidebarIsExpandedTo(!sidebarIsExpanded)
            //},
          })),
          _react2.default.createElement(_SVGMenu2.default, null)
        );
      }
    }, props),
    function (_ref7) {
      var getChildrenProps = _ref7.getChildrenProps;
      return _react2.default.createElement(
        SIDEBAR,
        (0, _extends3.default)({}, getChildrenProps({
          //style: {
          //  width: `20rem`,
          //  height: `10rem`,
          //  background: `#ddd3`,
          //},
        })),
        components.map(function (c) {
          return _react2.default.createElement(
            BUTTON$,
            {
              type: 'mercurydrop',
              mercuryRatio: [20, 5],
              colors: 'darksmoke',
              subtype: 'right',
              size: 15,
              isOn: c.tag === currentComponent,
              onClick: function onClick() {
                setCurrentComponentTo(c.tag);
                c.onClick();
              },
              key: c.tag
            },
            c.title
          );
        })
      );
    }
  );
};

exports.default = Sidebar;