@geezee/react-ui/esm/shared/backdrop.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "styled-jsx/style";
import React, { useCallback } from 'react';
import withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
import CSSTransition from './css-transition';
import useCurrentState from '../utils/use-current-state';
var defaultProps = {
  onClick: function onClick() {},
  visible: false,
  offsetY: 0
};
var Backdrop = React.memo(function (_ref) {
  var children = _ref.children,
      onClick = _ref.onClick,
      visible = _ref.visible;
  var theme = useTheme();

  var _useCurrentState = useCurrentState(false),
      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
      setIsContentMouseDown = _useCurrentState2[1],
      IsContentMouseDownRef = _useCurrentState2[2];

  var clickHandler = function clickHandler(event) {
    if (IsContentMouseDownRef.current) return;
    onClick && onClick(event);
  };

  var childrenClickHandler = useCallback(function (event) {
    event.stopPropagation();
  }, []);

  var mouseUpHandler = function mouseUpHandler() {
    if (!IsContentMouseDownRef.current) return;
    var timer = setTimeout(function () {
      setIsContentMouseDown(false);
      clearTimeout(timer);
    }, 0);
  };

  return /*#__PURE__*/React.createElement(CSSTransition, {
    visible: visible,
    clearTime: 300
  }, /*#__PURE__*/React.createElement("div", {
    onClick: clickHandler,
    onMouseUp: mouseUpHandler,
    className: _JSXStyle.dynamic([["4214220055", [theme.expressiveness.portalOpacity]]]) + " " + "backdrop"
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["4214220055", [theme.expressiveness.portalOpacity]]]) + " " + "layer"
  }), /*#__PURE__*/React.createElement("div", {
    onClick: childrenClickHandler,
    onMouseDown: function onMouseDown() {
      return setIsContentMouseDown(true);
    },
    className: _JSXStyle.dynamic([["4214220055", [theme.expressiveness.portalOpacity]]]) + " " + "content"
  }, children), /*#__PURE__*/React.createElement("div", {
    onClick: childrenClickHandler,
    className: _JSXStyle.dynamic([["4214220055", [theme.expressiveness.portalOpacity]]]) + " " + "offset"
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4214220055",
    dynamic: [theme.expressiveness.portalOpacity]
  }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;height:100vh;width:100vw;overflow:auto;z-index:1000;}.content.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;z-index:1001;outline:none;}.offset.__jsx-style-dynamic-selector{height:0;opacity:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background-color:transparent;}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:".concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}"))));
});
export default withDefaults(Backdrop, defaultProps);