react-misc-toolbox/dist/MercuryDrop.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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _recompose = require('recompose');

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

var _OutsideClickListener2 = _interopRequireDefault(_OutsideClickListener);

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

var MercuryDrop = function MercuryDrop(_ref) {
  var noOCListener = _ref.noOCListener,
      setIsOnTo = _ref.setIsOnTo,
      isOn = _ref.isOn,
      children = _ref.children,
      toggleIsOn = _ref.toggleIsOn;

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

    var className = _ref2.className,
        style = _ref2.style,
        _onClick = _ref2.onClick,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['className', 'style', 'onClick']);
    return (0, _extends3.default)({
      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();
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__container', 'show', 'hide') + ' ' + (className ? className : ''),
      style: style
    }, props);
  };

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

    var _onClick2 = _ref3.onClick,
        className = _ref3.className,
        style = _ref3.style,
        props = (0, _objectWithoutProperties3.default)(_ref3, ['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();
        toggleIsOn();
        _onClick2 && _onClick2.apply(undefined, [e].concat(args));
      },
      className: className ? (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__trigger', 'show', 'hide') + ' ' + (className ? className : '') : (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__trigger', 'show', 'hide'),
      style: style
    }, props);
  };

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

    var _onClick3 = _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 _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
          args[_key3 - 1] = arguments[_key3];
        }

        e.stopPropagation();
        _onClick3 && _onClick3.apply(undefined, [e].concat(args));
      },
      className: className ? (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__children', 'show', 'hide') + ' ' + (className ? className : '') : (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__children', 'show', 'hide'),
      style: style
    }, props);
  };

  var sharedProps = {
    getChildrenProps: getChildrenProps,
    getContainerProps: getContainerProps,
    getTriggerProps: getTriggerProps,
    isOn: isOn,
    setIsOnTo: setIsOnTo
  };
  var OCLRef = _react2.default.createRef();
  if (!noOCListener) {
    return _react2.default.createElement(
      _OutsideClickListener2.default,
      {
        containerRef: OCLRef,
        shouldCallHandler: isOn === true,
        handler: function handler() {
          return setIsOnTo(false);
        }
      },
      children((0, _extends3.default)({
        OCLRef: OCLRef
      }, sharedProps))
    );
  } else {
    return children((0, _extends3.default)({}, sharedProps));
  }
};

MercuryDrop.defaultProps = {
  openByDefault: true,
  connected: false
};

var enhance = (0, _recompose.compose)((0, _recompose.withStateHandlers)(function (_ref5) {
  var _ref5$openByDefault = _ref5.openByDefault,
      openByDefault = _ref5$openByDefault === undefined ? true : _ref5$openByDefault;
  return {
    isOn: openByDefault
  };
}, {
  toggleIsOn: function toggleIsOn(_ref6) {
    var isOn = _ref6.isOn;
    return function () {
      return { isOn: !isOn };
    };
  },
  setIsOnTo: function setIsOnTo() {
    return function (value) {
      return { isOn: value };
    };
  }
}), (0, _recompose.lifecycle)({
  componentDidUpdate: function 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);
      }
    }
  }
}), (0, _recompose.onlyUpdateForKeys)(['show', 'isOn', 'children']));

exports.default = enhance(MercuryDrop);