react-pure-modal 2.3.4 → 3.0.1

package/example/example.min.js.LICENSE.txt

@@ -1,109 +0,0 @@
-/*! !!../node_modules/css-loader/dist/cjs.js!./react-pure-modal.min.css */
-
-/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */
-
-/*! ../dist/react-pure-modal.min.css */
-
-/*! ../dist/react-pure-modal.min.js */
-
-/*! ../node_modules/css-loader/dist/runtime/api.js */
-
-/*! ./cjs/react-dom.development.js */
-
-/*! ./cjs/react.development.js */
-
-/*! ./cjs/scheduler.development.js */
-
-/*! ./content */
-
-/*! react */
-
-/*! react-dom */
-
-/*! scheduler */
-
-/*!****************************!*\
-  !*** ./example/content.ts ***!
-  \****************************/
-
-/*!*****************************!*\
-  !*** ./example/example.tsx ***!
-  \*****************************/
-
-/*!*************************************!*\
-  !*** ./node_modules/react/index.js ***!
-  \*************************************/
-
-/*!**************************************!*\
-  !*** ./dist/react-pure-modal.min.js ***!
-  \**************************************/
-
-/*!***************************************!*\
-  !*** ./dist/react-pure-modal.min.css ***!
-  \***************************************/
-
-/*!*****************************************!*\
-  !*** ./node_modules/react-dom/index.js ***!
-  \*****************************************/
-
-/*!*****************************************!*\
-  !*** ./node_modules/scheduler/index.js ***!
-  \*****************************************/
-
-/*!*****************************************************!*\
-  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
-  \*****************************************************/
-
-/*!*****************************************************!*\
-  !*** ./node_modules/react/cjs/react.development.js ***!
-  \*****************************************************/
-
-/*!*************************************************************!*\
-  !*** ./node_modules/react-dom/cjs/react-dom.development.js ***!
-  \*************************************************************/
-
-/*!*************************************************************!*\
-  !*** ./node_modules/scheduler/cjs/scheduler.development.js ***!
-  \*************************************************************/
-
-/*!****************************************************************************!*\
-  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
-  \****************************************************************************/
-
-/*!*****************************************************************************!*\
-  !*** ./node_modules/css-loader/dist/cjs.js!./dist/react-pure-modal.min.css ***!
-  \*****************************************************************************/
-
-/**
- * @license React
- * react-dom.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Checks if an event is supported in the current execution environment.
- *
- * NOTE: This will not work correctly for non-generic events such as `change`,
- * `reset`, `load`, `error`, and `select`.
- *
- * Borrows from Modernizr.
- *
- * @param {string} eventNameSuffix Event name, e.g. "click".
- * @return {boolean} True if the event is supported.
- * @internal
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */

package/example/example.tsx

@@ -1,109 +0,0 @@
-import React, { useState } from 'react';
-import { render } from 'react-dom';
-import PureModal from '../dist/react-pure-modal.min.js';
-import { smallContent, largeContent } from './content';
-import '../dist/react-pure-modal.min.css';
-
-function ModalContainer() {
-  const [modal, setModal] = useState(false);
-  const [modalInnerScroll, setModalInnerScroll] = useState(false);
-  const [modalCenter, setModalCenter] = useState(false);
-  const [modalDrag, setModalDrag] = useState(false);
-  const [modalNoScrollable, setModalNoScrollable] = useState(false);
-
-  return (
-    <div>
-      <button type="button" className="button" onClick={() => setModal(true)}>
-        Open simple modal
-      </button>
-      <button type="button" className="button" onClick={() => setModalInnerScroll(true)}>
-        Open modal with inner scroll
-      </button>
-      <button type="button" className="button" onClick={() => setModalCenter(true)}>
-        Open small modal on center scrollable or not
-      </button>
-      <button type="button" className="button" onClick={() => setModalDrag(true)}>
-        Draggable
-      </button>
-      <button type="button" className="button" onClick={() => setModalNoScrollable(true)}>
-        Open large modal on center without scroll
-      </button>
-      <PureModal
-        header="Custom header with a lot of symbols. It's very important to have a dynamic header height and this modal supports it"
-        footer="Buttons?"
-        isOpen={modalInnerScroll}
-        closeButtonPosition="bottom"
-        onClose={() => {
-          setModalInnerScroll(false);
-          return true;
-        }}
-      >
-        <input type="text" placeholder="with input" value="" />
-        {largeContent}
-      </PureModal>
-      <PureModal
-        header="Custom heading"
-        footer="Buttons?"
-        width="800px"
-        scrollable={false}
-        isOpen={modal}
-        onClose={() => {
-          setModal(false);
-          return true;
-        }}
-      >
-        {largeContent}
-      </PureModal>
-      <PureModal
-        header="Custom heading"
-        footer="Buttons?"
-        scrollable={false}
-        isOpen={modalCenter}
-        closeButtonPosition="bottom"
-        portal
-        closeButton={<div>&#10007;</div>}
-        onClose={() => {
-          setModalCenter(false);
-          return true;
-        }}
-      >
-        <p>Center</p>
-      </PureModal>
-
-      <PureModal
-        header="Custom heading"
-        draggable
-        footer="Buttons?"
-        scrollable={false}
-        isOpen={modalDrag}
-        closeButtonPosition="bottom"
-        portal
-        closeButton={<div>&#10007;</div>}
-        onClose={() => {
-          setModalDrag(false);
-          return true;
-        }}
-      >
-        <p>Center</p>
-      </PureModal>
-
-      <PureModal
-        header="Custom heading"
-        footer="Buttons?"
-        isOpen={modalNoScrollable}
-        closeButtonPosition="bottom"
-        scrollable={false}
-        portal
-        closeButton={<div>&#10007;</div>}
-        onClose={() => {
-          setModalNoScrollable(false);
-          return true;
-        }}
-      >
-        {largeContent}
-      </PureModal>
-    </div>
-  );
-}
-
-render(<ModalContainer />, document.getElementById('js--modals'));

package/index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title></title>
-    <title>Example 1</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
-    <style>
-      .button {
-        padding: 10px 15px;
-        background-color: #ffd34f;
-        border: none;
-        margin: 20px;
-      }
-    </style>
-  </head>
-  <body style="height: 150vh">
-    <div id="js--modals"></div>
-    <script src="./example/example.min.js"></script>
-  </body>
-</html>

package/src/pure-modal-content.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import type { MouseOrTouch } from './types';
-
-type Props = {
-  replace: boolean;
-  children: JSX.Element;
-  onDragStart?: (event: MouseOrTouch) => unknown;
-  onDragEnd?: (event: MouseOrTouch) => unknown;
-  onClose?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  bodyClass?: string;
-  header?: JSX.Element | string;
-  footer?: JSX.Element | string;
-  closeButton: JSX.Element | string;
-  closeButtonPosition: string;
-  draggable: boolean;
-};
-
-const defaultProps = {
-  closeButton: '×',
-  closeButtonPosition: 'header',
-  replace: false,
-  draggable: false,
-};
-
-function PureModalContent(props: Props): JSX.Element {
-  const {
-    children,
-    replace,
-    bodyClass,
-    header,
-    footer,
-    onDragStart,
-    onDragEnd,
-    onClose,
-    closeButton,
-    closeButtonPosition,
-  } = props;
-
-  return replace ? (
-    children
-  ) : (
-    <div
-      className={`panel panel-default ${closeButtonPosition === 'bottom' ? 'additional-row' : ''}`}
-    >
-      <div
-        className="panel-heading"
-        onTouchStart={onDragStart}
-        onMouseDown={onDragStart}
-        onTouchEnd={onDragEnd}
-        onMouseUp={onDragEnd}
-      >
-        {header && <h3 className="panel-title">{header}</h3>}
-      </div>
-
-      <div className={bodyClass}>{children}</div>
-      {footer && <div className="panel-footer">{footer}</div>}
-      <div
-        className="close"
-        onClick={onClose}
-        style={{
-          position: closeButtonPosition === 'header' ? 'absolute' : 'static',
-          margin: closeButtonPosition === 'bottom' ? '10px auto' : '',
-        }}
-      >
-        {closeButton}
-      </div>
-    </div>
-  );
-}
-
-PureModalContent.defaultProps = defaultProps;
-
-export default PureModalContent;

package/src/react-pure-modal.css

@@ -1,123 +0,0 @@
-.body-modal-fix {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.pure-modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1040;
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.backdrop-overflow-hidden {
-  overflow: hidden !important;
-}
-
-.pure-modal-backdrop .pure-modal {
-  width: 300px;
-  max-width: 100%;
-  box-sizing: border-box;
-  transition: all 0.2s ease-in-out;
-  max-height: 100%;
-}
-
-.pure-modal.auto-height {
-  position: static;
-}
-
-.pure-modal-backdrop.scrollable {
-  overflow-y: auto;
-}
-
-.pure-modal-backdrop .panel {
-  display: grid;
-  grid-template-rows: repeat(3, min-content);
-}
-.pure-modal-backdrop:not(.scrollable) .panel {
-  grid-template-rows: min-content minmax(0, 1fr) min-content;
-  max-height: -moz-available;
-  max-height: -webkit-fill-available;
-  max-height: fill-available;
-  height: 100%;
-}
-
-.pure-modal > * > * {
-  flex: 0 0 auto;
-}
-
-.pure-modal > * > .scrollable {
-  overflow-x: hidden;
-  overflow-scrolling: touch;
-}
-
-@media (max-width: 480px) {
-  .pure-modal-backdrop .pure-modal {
-    width: 100%;
-  }
-}
-
-.pure-modal .panel-body {
-  background-color: #fff;
-}
-
-.pure-modal .panel-heading {
-  background: rgb(240, 240, 240);
-}
-
-.pure-modal .panel-title {
-  padding: 12px 45px 12px 15px;
-  margin: 0;
-}
-
-.pure-modal .close {
-  right: 10px;
-  top: 10px;
-  z-index: 1;
-  background: rgba(240, 240, 240, 0.8);
-  width: 30px;
-  color: rgb(140, 140, 140);
-  transition: color ease-in-out 0.1s;
-  height: 30px;
-  border-radius: 15px;
-  text-align: center;
-  line-height: 30px;
-  cursor: pointer;
-}
-
-.pure-modal .panel-heading .close:hover {
-  color: #000;
-}
-
-.pure-modal .panel-body {
-  padding: 15px;
-}
-
-.pure-modal .panel-footer {
-  padding: 12px 45px 12px 15px;
-  background: rgb(240, 240, 240);
-}
-
-.pure-modal .panel-body,
-.pure-modal .panel-footer,
-.pure-modal .panel-title {
-  word-break: break-all;
-}
-
-.pure-modal-backdrop .additional-row {
-  display: grid;
-  grid-template-rows: min-content minmax(0, 1fr) min-content min-content;
-}
-
-.pure-modal-backdrop:not(.scrollable) .additional-row {
-  display: grid;
-  grid-template-rows: min-content minmax(0, 1fr) min-content min-content;
-}

package/src/react-pure-modal.tsx

@@ -1,256 +0,0 @@
-import React, { useState, useEffect, useCallback, useId } from 'react';
-import { createPortal } from 'react-dom';
-
-// components
-import PureModalContent from './pure-modal-content';
-
-// types
-import type { MouseOrTouch } from './types';
-
-// styles
-import './react-pure-modal.css';
-
-type Props = {
-  children: JSX.Element;
-  replace?: boolean;
-  className?: string;
-  header?: JSX.Element | string;
-  footer?: JSX.Element | string;
-  scrollable?: boolean;
-  draggable?: boolean;
-  width?: string;
-  isOpen?: boolean;
-  onClose?: Function;
-  closeButton?: JSX.Element | string;
-  closeButtonPosition?: string;
-  portal?: boolean;
-};
-
-type CloseInteractionEvent = MouseOrTouch | KeyboardEvent;
-
-function PureModal(props: Props) {
-  const hash = useId();
-  const [isDragged, setIsDragged] = useState(false);
-  const [x, setX] = useState<number | null>(null);
-  const [y, setY] = useState<number | null>(null);
-  const [deltaX, setDeltaX] = useState(0);
-  const [deltaY, setDeltaY] = useState(0);
-  const [mouseOffsetX, setMouseOffsetX] = useState(0);
-  const [mouseOffsetY, setMouseOffsetY] = useState(0);
-
-  const { isOpen, onClose } = props;
-
-  const removeClassBody = useCallback(() => {
-    document.body.classList.remove('body-modal-fix');
-  }, []);
-
-  /**
-   * useEffect to setup popup OR perform a cleanup after popup was closed
-   */
-  useEffect(() => {
-    /**
-     * if popup was opened:
-     *  - add esc event listener
-     *  - add overflow fix class to body
-     *  - remove focus from focused element (e.g. remove focus from btn after click, cuz popup was opened)
-     */
-    if (isOpen) {
-      document.addEventListener('keydown', handleEsc);
-      if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
-      document.body.classList.add('body-modal-fix');
-    }
-
-    return () => {
-      /**
-       * if popup was closed:
-       *  - remove esc event listener
-       *  - remove overflow fix class from body
-       *  - reset popup states
-       */
-      if (!document.querySelector('.pure-modal')) {
-        document.removeEventListener('keydown', handleEsc);
-        removeClassBody();
-        setX(null);
-        setY(null);
-        setDeltaX(0);
-        setDeltaY(0);
-        setMouseOffsetX(0);
-        setMouseOffsetY(0);
-      }
-    };
-  }, [isOpen]);
-
-  const handleEsc = useCallback(
-    (event: KeyboardEvent) => {
-      const allModals = document.querySelectorAll('.pure-modal');
-      const isManyModalsOpen = allModals.length > 1; // open modal in modal
-      const firstModalData = allModals[allModals.length - 1];
-
-      if (isManyModalsOpen && !firstModalData.className.includes(hash)) {
-        return false; // closing only current modal
-      }
-
-      if (event.key === 'Escape' && document.activeElement) {
-        close(event);
-        return true;
-      }
-
-      return false;
-    },
-    [close, hash],
-  );
-
-  if (!isOpen) {
-    return null;
-  }
-
-  /**
-   * method that will be called when some of the closing elements are beeing interacted with
-   *
-   * click on close btn, click on backdrop, press on esc
-   */
-  function close(event?: CloseInteractionEvent) {
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-
-    onClose?.({ isPassive: Boolean(event) });
-  }
-
-  function getCoords(e: MouseOrTouch) {
-    if (e instanceof TouchEvent && e.changedTouches.length > 0) {
-      return {
-        pageX: e.changedTouches[0].pageX,
-        pageY: e.changedTouches[0].pageY,
-      };
-    }
-    if (e instanceof MouseEvent) {
-      return {
-        pageX: e.pageX,
-        pageY: e.pageY,
-      };
-    }
-    return {
-      pageX: 0,
-      pageY: 0,
-    };
-  }
-
-  function handleStartDrag(e: MouseOrTouch) {
-    if (e instanceof TouchEvent && e.changedTouches && e.changedTouches.length > 1) return;
-
-    e.preventDefault();
-
-    const { pageX, pageY } = getCoords(e);
-    const { top, left } = e.currentTarget.getBoundingClientRect();
-
-    setIsDragged(true);
-    setX(typeof x === 'number' ? x : left);
-    setY(typeof y === 'number' ? y : top);
-    setMouseOffsetX(pageX - left);
-    setMouseOffsetY(pageY - top);
-  }
-
-  function handleDrag(e: MouseOrTouch) {
-    if (e instanceof TouchEvent && e.changedTouches && e.changedTouches.length > 1) {
-      return handleEndDrag();
-    }
-
-    e.preventDefault();
-
-    const { pageX, pageY } = getCoords(e);
-
-    if (typeof x === 'number' && typeof y === 'number') {
-      setDeltaX(pageX - x - mouseOffsetX);
-      setDeltaY(pageY - y - mouseOffsetY);
-    }
-  }
-
-  function handleEndDrag() {
-    return setIsDragged(false);
-  }
-
-  function handleBackdropClick(event: MouseOrTouch) {
-    if (event) {
-      if (!(event.target as Element).classList.contains('pure-modal-backdrop')) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    close(event);
-  }
-
-  const {
-    children,
-    replace = false,
-    className,
-    header,
-    footer,
-    scrollable = true,
-    draggable = false,
-    width,
-    closeButton,
-    closeButtonPosition,
-    portal = false,
-  } = props;
-
-  let backdropclasses = ['pure-modal-backdrop'];
-  let modalclasses = ['pure-modal', hash];
-  let bodyClasses = ['panel-body'];
-
-  if (className) {
-    modalclasses = modalclasses.concat(className);
-  }
-
-  if (scrollable) {
-    bodyClasses = bodyClasses.concat('scrollable');
-  } else {
-    backdropclasses = backdropclasses.concat('scrollable');
-    modalclasses = modalclasses.concat('auto-height');
-  }
-
-  if (draggable) {
-    backdropclasses = backdropclasses.concat('backdrop-overflow-hidden');
-  }
-
-  const modalContent = (
-    <div
-      className={backdropclasses.join(' ')}
-      onMouseDown={handleBackdropClick}
-      onTouchMove={isDragged ? handleDrag : undefined}
-      onMouseMove={isDragged ? handleDrag : undefined}
-    >
-      <div
-        className={modalclasses.join(' ')}
-        style={{
-          transform: `translate(${deltaX}px, ${deltaY}px)`,
-          transition: 'none',
-          width,
-        }}
-      >
-        <PureModalContent
-          replace={replace}
-          header={header}
-          footer={footer}
-          onDragStart={draggable ? handleStartDrag : undefined}
-          onDragEnd={draggable ? handleEndDrag : undefined}
-          onClose={close}
-          bodyClass={bodyClasses.join(' ')}
-          closeButton={closeButton}
-          closeButtonPosition={closeButtonPosition}
-        >
-          {children}
-        </PureModalContent>
-      </div>
-    </div>
-  );
-
-  if (portal) {
-    return createPortal(modalContent, document.body);
-  }
-  return modalContent;
-}
-
-export default React.memo(PureModal);