react-misc-toolbox/dist/CTCGeneric.js

- [ ] diagramexample | optimize creating from blank slate

"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 _OutsideClickListener = require("./OutsideClickListener");

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

var CTCGeneric = function CTCGeneric(_ref) {
  var uOCLHandlers = _ref.uOCLHandlers,
      _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,
      alwaysOn = _ref.alwaysOn,
      _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,
      setExternalIsOnTo = _ref.setExternalIsOnTo,
      _ref$defaultIsOn = _ref.defaultIsOn,
      defaultIsOn = _ref$defaultIsOn === undefined ? false : _ref$defaultIsOn,
      _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 || defaultIsOn
  }),
      _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();
    }

    setExternalIsOnTo && setExternalIsOnTo(!isOn);

    setState({ isOn: !isOn });
  };
  var setIsOnTo = function setIsOnTo(value) {
    onToggle(value);
    if (value === true) {
      onShow && onShow();
    }
    if (value === false) {
      onHide && onHide();
    }

    setExternalIsOnTo && setExternalIsOnTo(value);

    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.advancedMulti)({
        unflattenedBases: [className, "ctcgeneric__container"],
        flipVars: [[isOn, "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.advancedMulti)({
        unflattenedBases: [className, "ctcgeneric__trigger"],
        flipVars: [[isOn, "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.advancedMulti)({
        unflattenedBases: [className, "ctcgeneric__children"],
        flipVars: [[isOn, "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)({
      outsideHandler: function outsideHandler(el, e) {
        isOn === true && !alwaysOn && setIsOnTo(false);
        uOCLHandlers && uOCLHandlers.outsideHandler(el, e);
      },
      insideHandler: function insideHandler(el, e) {
        //   isOn === false && setIsOnTo(true)
        uOCLHandlers && uOCLHandlers.insideHandler(el, e);
      }
    }),
        elClickListenerRef = _useOutsideClickListe.elClickListenerRef;

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

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