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

var _CTCGeneric2 = _interopRequireDefault(_CTCGeneric);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _RTGTransition2 = _interopRequireDefault(_RTGTransition);

var _defaultStyles = require('./defaultStyles');

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

var CTCMercury = function CTCMercury(_ref) {
  var _ref$maxHeight = _ref.maxHeight,
      maxHeight = _ref$maxHeight === undefined ? '100vh' : _ref$maxHeight,
      _ref$styleTemplate = _ref.styleTemplate,
      styleTemplate = _ref$styleTemplate === undefined ? _defaultStyles.CTCMercuryStyleTemplates.default : _ref$styleTemplate,
      _ref$buttonProps = _ref.buttonProps,
      buttonProps = _ref$buttonProps === undefined ? {} : _ref$buttonProps,
      _ref$transitionProps = _ref.transitionProps,
      transitionProps = _ref$transitionProps === undefined ? {} : _ref$transitionProps,
      _ref$triggerProps = _ref.triggerProps,
      triggerProps = _ref$triggerProps === undefined ? {} : _ref$triggerProps,
      _ref$containerProps = _ref.containerProps,
      containerProps = _ref$containerProps === undefined ? {} : _ref$containerProps,
      renderTrigger = _ref.renderTrigger,
      renderIcon = _ref.renderIcon,
      shouldRenderIcon = _ref.shouldRenderIcon,
      children = _ref.children,
      props = (0, _objectWithoutProperties3.default)(_ref, ['maxHeight', 'styleTemplate', 'buttonProps', 'transitionProps', 'triggerProps', 'containerProps', 'renderTrigger', 'renderIcon', 'shouldRenderIcon', 'children']);
  var getBarStyle = styleTemplate.getBarStyle,
      getSideBarsStyle = styleTemplate.getSideBarsStyle,
      getLeftBarStyle = styleTemplate.getLeftBarStyle,
      getRightBarStyle = styleTemplate.getRightBarStyle,
      getCenterBarStyle = styleTemplate.getCenterBarStyle,
      buttonColors = styleTemplate.buttonColors;

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

      var sharedStyle = (0, _extends3.default)({}, getBarStyle(isOn), getSideBarsStyle(isOn));
      return _react2.default.createElement(
        'div',
        (0, _extends3.default)({
          ref: elClickListenerRef
        }, getContainerProps((0, _extends3.default)({
          className: (0, _helperFunctions.flippyClass)(isOn, 'ctcmercury__container', 'show', 'hide')
        }, containerProps))),
        _react2.default.createElement(
          _Button2.default,
          {
            isOn: isOn,
            type: 'mercurydrop',
            colors: buttonColors,
            renderIcon: renderIcon,
            shouldRenderIcon: shouldRenderIcon
          },
          function (_ref3) {
            var getButtonProps = _ref3.getButtonProps,
                buttonRenderIcon = _ref3.renderIcon;
            return _react2.default.createElement(
              'div',
              (0, _extends3.default)({}, getButtonProps((0, _extends3.default)({
                style: { justifyContent: 'center', alignItems: 'center' }
              }, getTriggerProps((0, _extends3.default)({}, triggerProps))))),
              _react2.default.createElement('div', {
                style: (0, _extends3.default)({}, sharedStyle, getLeftBarStyle(isOn)),
                className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__left', 'collapsed', 'expanded')
              }),
              buttonRenderIcon(),
              _react2.default.createElement(
                'div',
                {
                  style: (0, _extends3.default)({
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'

                  }, getBarStyle(isOn), getCenterBarStyle(isOn)),
                  className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__center', 'collapsed', 'expanded')
                },
                renderTrigger && renderTrigger()
              ),
              buttonRenderIcon(),
              _react2.default.createElement('div', {
                style: (0, _extends3.default)({}, sharedStyle, getRightBarStyle(isOn)),
                className: (0, _helperFunctions.flippyClass)(isOn, 'mercurydrop__right', 'collapsed', 'expanded')
              })
            );
          }
        ),
        _react2.default.createElement(
          _RTGTransition2.default,
          (0, _extends3.default)({
            in: isOn,
            duration: 500,
            transitionType: 'height',
            maxHeight: maxHeight
          }, transitionProps),
          function (_ref4) {
            var transitionStyle = _ref4.style;
            return children({ getChildrenProps: getChildrenProps, transitionStyle: transitionStyle, isOn: isOn });
          }
        )
      );
    }
  );
};

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

exports.default = enhance(CTCMercury);