react-misc-toolbox/dist/CTCGeneric.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 _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _recompose = require('recompose');

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

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

var CTCGeneric = function CTCGeneric(_ref) {
  var _ref$onShow = _ref.onShow,
      onShow = _ref$onShow === undefined ? function () {
    return null;
  } : _ref$onShow,
      _ref$onHide = _ref.onHide,
      onHide = _ref$onHide === undefined ? function () {
    return null;
  } : _ref$onHide,
      _ref$onToggle = _ref.onToggle,
      onToggle = _ref$onToggle === undefined ? function () {
    return null;
  } : _ref$onToggle,
      _ref$cover = _ref.cover,
      cover = _ref$cover === undefined ? false : _ref$cover,
      _ref$pivotFrom = _ref.pivotFrom,
      pivotFrom = _ref$pivotFrom === undefined ? 'DOWNRIGHT' : _ref$pivotFrom,
      _ref$horizontalOffset = _ref.horizontalOffset,
      horizontalOffset = _ref$horizontalOffset === undefined ? '0rem' : _ref$horizontalOffset,
      _ref$verticalOffset = _ref.verticalOffset,
      verticalOffset = _ref$verticalOffset === undefined ? '0rem' : _ref$verticalOffset,
      _ref$switchOnHover = _ref.switchOnHover,
      switchOnHover = _ref$switchOnHover === undefined ? false : _ref$switchOnHover,
      _ref$useOCL = _ref.useOCL,
      useOCL = _ref$useOCL === undefined ? false : _ref$useOCL,
      children = _ref.children,
      externalIsOn = _ref.externalIsOn,
      _ref$connected = _ref.connected,
      connected = _ref$connected === undefined ? false : _ref$connected,
      _ref$openByDefault = _ref.openByDefault,
      openByDefault = _ref$openByDefault === undefined ? false : _ref$openByDefault;

  var baseContainerStyle = {
    position: 'relative'
  };

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, {
    isOn: openByDefault
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var isOn = state.isOn;


  var toggleIsOn = function toggleIsOn() {
    onToggle(!isOn);
    if (isOn === false) {
      onShow && onShow();
    }
    if (isOn === true) {
      onHide && onHide();
    }
    setState({ isOn: !isOn });
  };
  var setIsOnTo = function setIsOnTo(value) {
    onToggle(value);
    if (value === true) {
      onShow && onShow();
    }
    if (value === false) {
      onHide && onHide();
    }
    setState({ isOn: value });
  };
  (0, _react.useEffect)(function () {
    if (connected === true && isOn !== externalIsOn) {
      setIsOnTo(externalIsOn);
    }
  }, [externalIsOn]);

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

    var className = _ref2.className,
        style = _ref2.style,
        _onClick = _ref2.onClick,
        _onMouseEnter = _ref2.onMouseEnter,
        _onMouseLeave = _ref2.onMouseLeave,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['className', 'style', 'onClick', 'onMouseEnter', 'onMouseLeave']);
    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));
      },
      onMouseEnter: function onMouseEnter(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();
        switchOnHover && setIsOnTo(true);
        _onMouseEnter && _onMouseEnter.apply(undefined, [e].concat(args));
      },
      onMouseLeave: function onMouseLeave(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();
        switchOnHover && setIsOnTo(false);
        _onMouseLeave && _onMouseLeave.apply(undefined, [e].concat(args));
      },
      className: (0, _helperFunctions.flippyMultiBase)(isOn, [className, 'ctcgeneric__container'], 'on', 'off'),
      style: (0, _extends3.default)({}, baseContainerStyle, style)
    }, props);
  };

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

    var className = _ref3.className,
        _ref3$style = _ref3.style,
        style = _ref3$style === undefined ? {} : _ref3$style,
        _onClick2 = _ref3.onClick,
        props = (0, _objectWithoutProperties3.default)(_ref3, ['className', 'style', 'onClick']);
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
          args[_key4 - 1] = arguments[_key4];
        }

        e.stopPropagation();
        toggleIsOn();

        _onClick2 && _onClick2.apply(undefined, [e].concat(args));
      },
      className: (0, _helperFunctions.flippyMultiBase)(isOn, [className, 'ctcgeneric__trigger'], 'on', 'off'),
      style: (0, _extends3.default)({}, baseTriggerStyle, style)
    }, props);
  };

  var getChildrenStyle = function getChildrenStyle() {
    var shared = {
      position: 'absolute'
    };

    var getCoverStyle = function getCoverStyle() {
      if (cover === true) {
        switch (pivotFrom) {
          case 'RIGHTDOWN':
            return { left: horizontalOffset };
          case 'RIGHTUP':
            return { left: horizontalOffset };
          case 'LEFTDOWN':
            return { right: horizontalOffset };
          case 'LEFTUP':
            return { right: horizontalOffset };
          case 'UPRIGHT':
            return { bottom: verticalOffset };
          case 'UPLEFT':
            return { bottom: verticalOffset };
          case 'DOWNLEFT':
            return { top: verticalOffset };
          case 'DOWNRIGHT':
            return { top: verticalOffset };
          default:
            return {};
        }
      }
    };
    var getBaseStyle = function getBaseStyle() {
      switch (pivotFrom) {
        case 'RIGHTDOWN':
          return {
            left: 'calc(100% + ' + horizontalOffset + ')',
            top: verticalOffset
          };
        case 'RIGHTUP':
          return {
            left: 'calc(100% + ' + horizontalOffset + ')',
            bottom: verticalOffset
          };
        case 'LEFTDOWN':
          return {
            right: 'calc(100% + ' + horizontalOffset + ')',
            top: verticalOffset
          };
        case 'LEFTUP':
          return {
            right: 'calc(100% + ' + horizontalOffset + ')',
            bottom: verticalOffset
          };
        case 'UPRIGHT':
          return { bottom: 'calc(100% + ' + verticalOffset + ')' };
        case 'UPLEFT':
          return {
            right: horizontalOffset,
            bottom: 'calc(100% + ' + verticalOffset + ')'
          };
        case 'DOWNLEFT':
          return { right: horizontalOffset };
        case 'DOWNRIGHT':
          return { left: horizontalOffset };
        default:
          return {};
      }
    };
    return (0, _extends3.default)({}, shared, getBaseStyle(), getCoverStyle());
  };
  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 _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
          args[_key5 - 1] = arguments[_key5];
        }

        e.stopPropagation();
        _onClick3 && _onClick3.apply(undefined, [e].concat(args));
      },
      className: (0, _helperFunctions.flippyMultiBase)(isOn, [className, 'ctcgeneric__children'], 'on', 'off'),
      style: (0, _extends3.default)({}, getChildrenStyle(), style)
    }, props);
  };

  var sharedProps = {
    getChildrenProps: getChildrenProps,
    getContainerProps: getContainerProps,
    getTriggerProps: getTriggerProps,
    isOn: isOn,
    setIsOnTo: setIsOnTo,
    toggleIsOn: toggleIsOn
  };
  if (useOCL) {
    var _useOutsideClickListe = (0, _OutsideClickListener.useOutsideClickListener)({
      shouldCallHandler: isOn === true,
      outsideHandler: function outsideHandler() {
        return setIsOnTo(false);
      }
    }),
        elClickListenerRef = _useOutsideClickListe.elClickListenerRef;

    return children((0, _extends3.default)({
      elClickListenerRef: elClickListenerRef
    }, sharedProps));
  } else {
    return children((0, _extends3.default)({}, sharedProps));
  }
};

exports.default = _react2.default.memo(CTCGeneric);