react-pure-modal 2.2.8 → 3.0.0

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

@@ -1,167 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*! !!../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-tracing.development.js */
-
-/*! ./cjs/scheduler.development.js */
-
-/*! ./content */
-
-/*! ./lib/ReactPropTypesSecret */
-
-/*! ./lib/has */
-
-/*! object-assign */
-
-/*! prop-types/checkPropTypes */
-
-/*! react */
-
-/*! react-dom */
-
-/*! scheduler */
-
-/*! scheduler/tracing */
-
-/*!****************************!*\
-  !*** ./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/scheduler/tracing.js ***!
-  \*******************************************/
-
-/*!********************************************!*\
-  !*** ./node_modules/prop-types/lib/has.js ***!
-  \********************************************/
-
-/*!*********************************************!*\
-  !*** ./node_modules/object-assign/index.js ***!
-  \*********************************************/
-
-/*!***************************************************!*\
-  !*** ./node_modules/prop-types/checkPropTypes.js ***!
-  \***************************************************/
-
-/*!*****************************************************!*\
-  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
-  \*****************************************************/
-
-/*!*****************************************************!*\
-  !*** ./node_modules/react/cjs/react.development.js ***!
-  \*****************************************************/
-
-/*!*************************************************************!*\
-  !*** ./node_modules/prop-types/lib/ReactPropTypesSecret.js ***!
-  \*************************************************************/
-
-/*!*************************************************************!*\
-  !*** ./node_modules/react-dom/cjs/react-dom.development.js ***!
-  \*************************************************************/
-
-/*!*************************************************************!*\
-  !*** ./node_modules/scheduler/cjs/scheduler.development.js ***!
-  \*************************************************************/
-
-/*!*********************************************************************!*\
-  !*** ./node_modules/scheduler/cjs/scheduler-tracing.development.js ***!
-  \*********************************************************************/
-
-/*!****************************************************************************!*\
-  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
-  \****************************************************************************/
-
-/*!*****************************************************************************!*\
-  !*** ./node_modules/css-loader/dist/cjs.js!./dist/react-pure-modal.min.css ***!
-  \*****************************************************************************/
-
-/**
- * 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
- */
-
-/** @license React v0.19.1
- * scheduler-tracing.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 v0.19.1
- * 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.
- */
-
-/** @license React v16.13.1
- * 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 v16.13.1
- * react.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.
- */

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;
-}