react-misc-toolbox/dist/CTCPopover.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 _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)([''], ['']);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _recompose = require('recompose');

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

var _RTGTransition = require('./RTGTransition');

var _RTGTransition2 = _interopRequireDefault(_RTGTransition);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _CTCGeneric = require('./CTCGeneric');

var _CTCGeneric2 = _interopRequireDefault(_CTCGeneric);

var _ = require('.');

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

var Container = _styledComponents2.default.div(_templateObject);

var CTCPopover = function CTCPopover(_ref) {
  var transitionType = _ref.transitionType,
      useOCL = _ref.useOCL,
      children = _ref.children,
      transitionProps = _ref.transitionProps,
      debugMode = _ref.debugMode,
      renderTrigger = _ref.renderTrigger,
      className = _ref.className,
      style = _ref.style,
      onClick = _ref.onClick,
      props = (0, _objectWithoutProperties3.default)(_ref, ['transitionType', 'useOCL', 'children', 'transitionProps', 'debugMode', 'renderTrigger', 'className', 'style', 'onClick']);

  return _react2.default.createElement(
    _CTCGeneric2.default,
    (0, _extends3.default)({}, props, { useOCL: useOCL }),
    function (_ref2) {
      var _getChildrenProps = _ref2.getChildrenProps,
          elClickListenerRef = _ref2.elClickListenerRef,
          getContainerProps = _ref2.getContainerProps,
          _getTriggerProps = _ref2.getTriggerProps,
          isOn = _ref2.isOn,
          setIsOnTo = _ref2.setIsOnTo,
          toggleIsOn = _ref2.toggleIsOn;

      var defaultContainerClassName = (0, _helperFunctions.flippyClass)(isOn, 'ctcpopover__container', 'show', 'hide');
      return _react2.default.createElement(
        Container,
        (0, _extends3.default)({
          ref: elClickListenerRef
        }, getContainerProps({
          className: className ? defaultContainerClassName + ' ' + className : defaultContainerClassName,
          style: style
        })),
        typeof renderTrigger === 'function' ? renderTrigger({
          isOn: isOn,
          setIsOnTo: setIsOnTo,
          toggleIsOn: toggleIsOn,
          getTriggerProps: function getTriggerProps() {
            var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

            var className = _ref3.className,
                props = (0, _objectWithoutProperties3.default)(_ref3, ['className']);
            return _getTriggerProps((0, _extends3.default)({
              className: ['ctcpopover__trigger', className]
            }, props));
          }
        }) : _react2.default.createElement(
          _.Button,
          (0, _extends3.default)({}, _getTriggerProps({
            className: (0, _helperFunctions.flippyClass)(isOn, 'ctcpopover__trigger', 'on', 'off'),
            onClick: onClick
          }), {

            isOn: isOn
          }),
          renderTrigger
        ),
        _react2.default.createElement(
          _RTGTransition2.default,
          {
            transitionType: transitionType,
            in: debugMode && debugMode.alwaysOn ? true : isOn,
            transitionProps: transitionProps
          },
          function (_ref4) {
            var transitionStyle = _ref4.style;

            var defaultChildrenClassName = (0, _helperFunctions.flippyClass)(isOn, 'ctcpopover__children', 'show', 'hide');
            return typeof children === 'function' ? children({
              getChildrenProps: function getChildrenProps() {
                var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

                var className = _ref5.className,
                    style = _ref5.style,
                    props = (0, _objectWithoutProperties3.default)(_ref5, ['className', 'style']);
                return _getChildrenProps((0, _extends3.default)({
                  className: className ? defaultChildrenClassName + ' ' + className : defaultChildrenClassName,
                  style: (0, _extends3.default)({}, transitionStyle, style)
                }, props));
              },
              isOn: isOn,
              setIsOnTo: setIsOnTo,
              toggleIsOn: toggleIsOn
            }) : _react2.default.createElement(
              'div',
              (0, _extends3.default)({}, _getChildrenProps({
                className: defaultChildrenClassName,
                style: transitionStyle
              })),
              children
            );
          }
        )
      );
    }
  );
};

CTCPopover.propTypes = {
  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func]).isRequired,
  renderTrigger: _propTypes2.default.func.isRequired
};

var enhance = (0, _recompose.compose)((0, _recompose.defaultProps)({
  isOn: false,
  transitionType: 'fade',
  useOCL: true,
  style: {},
  onClick: function onClick() {
    return null;
  }
}), (0, _recompose.onlyUpdateForKeys)(['children']));

exports.default = enhance(CTCPopover);