react-elegant-ui/esm/components/Modal/__examples__/common.example.js

Elegant UI components, made by BEM best practices for react

var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
import React, { useRef, useState } from 'react';
import { Button } from '../../Button/Button.bundle/desktop';
import { ComplexPopup } from '../../LayerManager/__examples__/common.example';
import { Modal } from '../Modal.bundle/desktop';
import { ModalStackContext } from '../_renderToStack/Modal_renderToStack';
export var BasicExample = function () {
  var _a = __read(useState(false), 2),
    isVisible = _a[0],
    setIsVisible = _a[1];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onPress: function () {
      return setIsVisible(true);
    }
  }, "Open modal window"), /*#__PURE__*/React.createElement(Modal, {
    visible: isVisible,
    view: "default",
    zIndex: 1,
    onClose: function () {
      return setIsVisible(false);
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem'
    }
  }, "Lorem ipsum dolor sit amet.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
    onPress: function () {
      return setIsVisible(false);
    }
  }, "Close window"))));
};
export var ComplexExample = function () {
  var _a = __read(useState(false), 2),
    isVisible = _a[0],
    setIsVisible = _a[1];
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    onPress: function () {
      return setIsVisible(true);
    }
  }, "Open modal window"), /*#__PURE__*/React.createElement(Modal, {
    visible: isVisible,
    view: "default",
    zIndex: 1,
    onClose: function () {
      return setIsVisible(false);
    },
    keepMounted: true,
    preventBodyScroll: true
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem'
    }
  }, "Lorem ipsum dolor sit amet.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ComplexPopup, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
    onPress: function () {
      return setIsVisible(false);
    }
  }, "Close window"))));
};
export var RenderToScope = function () {
  var _a = __read(useState(false), 2),
    isVisible1 = _a[0],
    setIsVisible1 = _a[1];
  var _b = __read(useState(false), 2),
    isVisible2 = _b[0],
    setIsVisible2 = _b[1];
  var _c = __read(useState(false), 2),
    isVisible3 = _c[0],
    setIsVisible3 = _c[1];
  var containerRef = useRef(null);
  var modalsRef = useRef(null);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("div", {
    ref: containerRef
  }), /*#__PURE__*/React.createElement("div", {
    ref: modalsRef
  }), /*#__PURE__*/React.createElement(Button, {
    onPress: function () {
      return setIsVisible1(true);
    }
  }, "Open modal window"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
    onPress: function () {
      return setIsVisible2(true);
    }
  }, "Open modal window 1 to modals stack"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
    onPress: function () {
      return setIsVisible3(true);
    }
  }, "Open modal window 2 to modals stack"), /*#__PURE__*/React.createElement(ModalStackContext.Provider, {
    value: modalsRef
  }, /*#__PURE__*/React.createElement(Modal, {
    visible: isVisible1,
    view: "default",
    onClose: function () {
      return setIsVisible1(false);
    },
    scope: containerRef
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem'
    }
  }, "Et consequatur corrupti.")), /*#__PURE__*/React.createElement(Modal, {
    visible: isVisible2,
    view: "default",
    onClose: function () {
      return setIsVisible2(false);
    },
    renderToStack: true
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem'
    }
  }, "Modal window context #1")), /*#__PURE__*/React.createElement(Modal, {
    visible: isVisible3,
    view: "default",
    onClose: function () {
      return setIsVisible3(false);
    },
    renderToStack: true
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem'
    }
  }, "Modal window context #2"))));
};