@r3l/app/lib/modules/ui/web/popup.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Popup = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _styled = require("../../styled");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var Popup = function Popup(_ref) {
  var options = _ref.options,
      children = _ref.children;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var popupEl = (0, _react.useRef)(null);

  var hidePopup = function hidePopup(ev) {
    if (popupEl.current === ev.target) return;

    if (visible) {
      setVisible(false);
    }
  };

  (0, _react.useEffect)(function () {
    window.addEventListener('click', hidePopup);
    return window.removeEventListener('click', hidePopup);
  }, []);
  var popupOptions = visible ? /*#__PURE__*/_react.default.createElement(_styled.Box, {
    sx: {
      zIndex: 1000,
      minWidth: '140px',
      top: '25px',
      right: '5px',
      cursor: 'pointer',
      position: 'absolute',
      backgroundColor: 'white',
      textAlign: 'center',
      variant: 'borders.popupBorder'
    }
  }, options.map(function (option, i) {
    return /*#__PURE__*/_react.default.createElement(_styled.HoverEl, {
      bgHover: 'lightGreyBg',
      key: option.text
    }, /*#__PURE__*/_react.default.createElement(_styled.Box, {
      sx: {
        paddingX: 2,
        paddingY: '8px',
        variant: i < options.length - 1 ? 'borders.shadowBorderBottom' : 'none',
        marginBottom: '1px'
      } // @ts-ignore
      ,
      onClick: function onClick() {
        setVisible(false);
        option === null || option === void 0 ? void 0 : option.action();
      }
    }, /*#__PURE__*/_react.default.createElement(_styled.BodyText, {
      sx: {
        color: 'blue'
      }
    }, option.text)));
  })) : null;
  return /*#__PURE__*/_react.default.createElement(_styled.View // @ts-ignore
  , {
    onClick: function onClick(e) {
      setVisible(!visible);
      e.preventDefault();
      e.stopPropagation();
    }
  }, visible ? /*#__PURE__*/_react.default.createElement(_styled.View, {
    sx: {
      // This overlay only covers the post and menu
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 100
    }
  }) : null, /*#__PURE__*/_react.default.createElement(_styled.Box, {
    ref: popupEl,
    sx: {
      position: 'relative',
      userSelect: 'none',
      zIndex: 1,
      cursor: 'pointer'
    }
  }, children), popupOptions);
};

exports.Popup = Popup;
var _default = Popup;
exports.default = _default;
//# sourceMappingURL=popup.js.map