react-misc-toolbox/dist/FlexibleMenu.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

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

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _SVGMenu2 = _interopRequireDefault(_SVGMenu);

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

var _CTCPopover2 = _interopRequireDefault(_CTCPopover);

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

var _Button2 = _interopRequireDefault(_Button);

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

var FlexibleMenu = function FlexibleMenu(_ref) {
  var _ref$isHorizontal = _ref.isHorizontal,
      isHorizontal = _ref$isHorizontal === undefined ? false : _ref$isHorizontal,
      children = _ref.children,
      renderHorizontal = _ref.renderHorizontal,
      pivotFrom = _ref.pivotFrom,
      renderTrigger = _ref.renderTrigger,
      debugMode = _ref.debugMode;

  return _react2.default.createElement(
    _react.Fragment,
    null,
    isHorizontal ? _react2.default.createElement(HorizontalMenu, { children: children, renderHorizontal: renderHorizontal }) : _react2.default.createElement(DropdownMenu, {
      children: children,
      pivotFrom: pivotFrom,
      renderTrigger: renderTrigger,
      debugMode: debugMode
    })
  );
};

var HorizontalMenu = function HorizontalMenu(_ref2) {
  var children = _ref2.children,
      renderHorizontal = _ref2.renderHorizontal;
  return _react2.default.createElement(
    'div',
    {
      style: {
        display: 'flex'
      },
      className: 'flexiblemenu__horizontal'
    },
    renderHorizontal ? renderHorizontal() : children
  );
};

var DropdownMenu = function DropdownMenu(_ref3) {
  var children = _ref3.children,
      pivotFrom = _ref3.pivotFrom,
      _renderTrigger = _ref3.renderTrigger,
      debugMode = _ref3.debugMode;

  var triggerBaseClassName = 'flexiblemenu__trigger';
  var defaultRenderTrigger = function defaultRenderTrigger(_ref4) {
    var getTriggerProps = _ref4.getTriggerProps,
        isOn = _ref4.isOn;
    return _react2.default.createElement(
      _Button2.default,
      { type: 'menutoggle', isOn: isOn },
      function (_ref5) {
        var getButtonProps = _ref5.getButtonProps;
        return _react2.default.createElement(
          'div',
          (0, _extends3.default)({}, getButtonProps((0, _extends3.default)({}, getTriggerProps({ className: triggerBaseClassName })))),
          _react2.default.createElement(_SVGMenu2.default, null)
        );
      }
    );
  };
  return _react2.default.createElement(
    'div',
    { className: 'flexiblemenu__dropdown', style: { position: 'relative' } },
    _react2.default.createElement(
      _CTCPopover2.default,
      {
        debugMode: debugMode,
        pivotFrom: pivotFrom,
        renderTrigger: function renderTrigger(_ref6) {
          var _getTriggerProps = _ref6.getTriggerProps,
              isOn = _ref6.isOn;
          return _renderTrigger ? _renderTrigger({
            getTriggerProps: function getTriggerProps() {
              var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

              var className = _ref7.className,
                  props = (0, _objectWithoutProperties3.default)(_ref7, ['className']);
              return _getTriggerProps((0, _extends3.default)({
                className: className ? triggerBaseClassName : triggerBaseClassName + ' ' + className
              }, props));
            },
            isOn: isOn
          }) : defaultRenderTrigger({ getTriggerProps: _getTriggerProps, isOn: isOn });
        }
      },
      children
    )
  );
};

exports.default = FlexibleMenu;