react-misc-toolbox/dist/DropdownPopover.js

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

'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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _recompose = require('recompose');

var _withPopover = require('./withPopover');

var _withPopover2 = _interopRequireDefault(_withPopover);

var _OutsideClickListener = require('./OutsideClickListener');

var _OutsideClickListener2 = _interopRequireDefault(_OutsideClickListener);

var _RTGDropdown = require('./RTGDropdown');

var _RTGDropdown2 = _interopRequireDefault(_RTGDropdown);

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

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

var DropdownPopover = function DropdownPopover(_ref) {
  var children = _ref.children,
      style = _ref.style,
      pivotFrom = _ref.pivotFrom,
      transitionOptions = _ref.transitionOptions,
      toggle = _ref.toggle,
      switchOn = _ref.switchOn,
      basewidth = _ref.basewidth,
      triggerX = _ref.triggerX,
      _ref$paddingX = _ref.paddingX,
      paddingX = _ref$paddingX === undefined ? 0 : _ref$paddingX,
      switchOff = _ref.switchOff,
      isOn = _ref.isOn,
      debugMode = _ref.debugMode,
      renderTrigger = _ref.renderTrigger,
      _ref$parentName = _ref.parentName,
      parentName = _ref$parentName === undefined ? 'default' : _ref$parentName,
      shouldToggleOnHover = _ref.shouldToggleOnHover;

  var containerRef = _react2.default.createRef();
  var inputType = 'mouse';

  typeof window !== 'undefined' && (0, _helperFunctions.onUserInputChange)(function (type) {
    inputType = type;
  });

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

    var _onClick = _ref2.onClick,
        className = _ref2.className,
        style = _ref2.style,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'className', 'style']);
    return (0, _extends3.default)({
      //onClick: callAll(onClick, toggle),
      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();
        toggle();
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      style: style,
      className: className ? 'dropdownpopover__children ' + className : 'dropdownpopover__children'
    }, props);
  };
  var padding_x = paddingX;
  var trigger_x = triggerX;

  return _react2.default.createElement(
    _OutsideClickListener2.default,
    { containerRef: containerRef, shouldCallHandler: isOn, handler: toggle },
    function (_ref3) {
      var containerEl = _ref3.ref.current;

      var triggerWidth = containerEl && containerEl.firstElementChild.getBoundingClientRect().width;
      var optionWidth = containerEl && containerEl.lastElementChild.getBoundingClientRect().width;
      var defaultTriggerStyle = {
        cursor: 'pointer',
        width: (triggerX ? triggerX : triggerWidth) + 'rem'
      };

      var getTriggerProps = function getTriggerProps() {
        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();
            toggle();
            _onClick2 && _onClick2.apply(undefined, [e].concat(args));
          },
          style: (0, _extends3.default)({}, defaultTriggerStyle, style),
          className: className ? 'dropdownpopover__trigger ' + parentName + '__dropdownpopover__trigger ' + className : 'dropdownpopover__trigger ' + parentName + '__dropdownpopover__trigger'
        }, props);
      };
      var getStyle = function getStyle() {
        var shared = {
          position: 'absolute',
          background: 'rgb(226, 226, 226)',
          zIndex: 3,
          width: (basewidth ? basewidth : optionWidth) + 'rem'
        };

        if (pivotFrom === 'DOWNRIGHT' || !pivotFrom) {
          return (0, _extends3.default)({}, shared, { left: 0 });
        }
        if (pivotFrom === 'DOWNLEFT') {
          return (0, _extends3.default)({}, shared, { right: 0 });
        }
        if (pivotFrom === 'RIGHTDOWN') {
          return (0, _extends3.default)({}, shared, { left: trigger_x + 'rem', top: 0 });
        }
        if (pivotFrom === 'LEFTDOWN') {
          return (0, _extends3.default)({}, shared, { left: -basewidth + 'rem', top: 0 });
        }
        // if (pivotFrom === `RIGHTUP`) {
        //   return { ...shared, left: `${trigger_x}rem`, bottom: 0 }
        // }
        // if (pivotFrom === `LEFTUP`) {
        //   return { ...shared, left: `${-basewidth}rem`, bottom: 0 }
        // }
      };
      return _react2.default.createElement(
        'div',
        {
          ref: containerRef,
          style: (0, _extends3.default)({ position: 'relative', zIndex: isOn ? 2 : 1 }, style),
          className: 'dropdownpopover__container ' + parentName + '__dropdownpopover__container',
          onMouseEnter: function onMouseEnter() {
            return inputType === 'mouse' && shouldToggleOnHover && switchOn();
          },
          onMouseLeave: function onMouseLeave() {
            return inputType === 'mouse' && shouldToggleOnHover && switchOff();
          }
        },
        renderTrigger({ isOn: isOn, toggle: toggle, getTriggerProps: getTriggerProps }),
        _react2.default.createElement(
          _RTGDropdown2.default,
          {
            style: getStyle(),
            'in': debugMode && debugMode.alwaysOn ? true : isOn,
            transitionOptions: transitionOptions
          },
          function (_ref5) {
            var rtgStyle = _ref5.style;
            return typeof children === 'function' ? children({
              getChildrenProps: getChildrenProps,
              isOn: isOn,
              toggle: toggle,
              rtgStyle: rtgStyle,
              className: 'dropdownpopover__children ' + parentName + '__dropdownpopover__children'
            }) : _react2.default.createElement(
              'div',
              {
                style: rtgStyle,
                className: 'dropdownpopover__children ' + parentName + '__dropdownpopover__children'
              },
              children
            );
          }
        )
      );
    }
  );
};

DropdownPopover.propTypes = {
  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]).isRequired,
  parentName: _propTypes2.default.string.isRequired,
  renderTrigger: _propTypes2.default.func.isRequired,
  //
  toggle: _propTypes2.default.func.isRequired,
  switchOn: _propTypes2.default.func.isRequired,
  switchOff: _propTypes2.default.func.isRequired,
  isOn: _propTypes2.default.bool.isRequired
};

DropdownPopover.defaultProps = {
  isOn: false
};

var enhance = (0, _recompose.compose)(_withPopover2.default);

exports.default = enhance(DropdownPopover);