react-pure-modal 2.3.4 → 3.0.1

package/__tests__/__snapshots__/react-pure-modal-test.js.snap

@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Should be closed 1`] = `null`;
-
-exports[`Should contain width attribute 1`] = `
-<div
-  className="pure-modal-backdrop"
-  onMouseDown={[Function]}
->
-  <div
-    className="pure-modal 0.5"
-    style={
-      Object {
-        "transform": "translate(0px, 0px)",
-        "transition": "none",
-        "width": "400px",
-      }
-    }
-  >
-    <span>
-      Some content of modal
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Should show content 1`] = `
-<div
-  className="pure-modal-backdrop"
-  onMouseDown={[Function]}
->
-  <div
-    className="pure-modal 0.5"
-    style={
-      Object {
-        "transform": "translate(0px, 0px)",
-        "transition": "none",
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="panel panel-default "
-    >
-      <div
-        className="panel-heading"
-      />
-      <div
-        className="panel-body scrollable"
-      >
-        <span>
-          Some content of modal
-        </span>
-      </div>
-      <div
-        className="close"
-        onClick={[Function]}
-        style={
-          Object {
-            "margin": "",
-            "position": "absolute",
-          }
-        }
-      >
-        ×
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Should show only content 1`] = `
-<div
-  className="pure-modal-backdrop"
-  onMouseDown={[Function]}
->
-  <div
-    className="pure-modal 0.5"
-    style={
-      Object {
-        "transform": "translate(0px, 0px)",
-        "transition": "none",
-        "width": undefined,
-      }
-    }
-  >
-    <span>
-      Some content of modal
-    </span>
-  </div>
-</div>
-`;

package/__tests__/react-pure-modal-test.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import Modal from '../dist/react-pure-modal.min.js';
-import renderer from 'react-test-renderer';
-
-const mockMath = Object.create(global.Math);
-mockMath.random = () => 0.5;
-global.Math = mockMath;
-
-it('Should be null without props', () => {
-  const component = renderer.create(<Modal />);
-  expect(component.toJSON()).toBeNull();
-});
-
-it('Should be closed', () => {
-  const component = renderer.create(<Modal isOpen={false} />);
-  expect(component.toJSON()).toMatchSnapshot();
-});
-
-it('Should show content', () => {
-  const component = renderer.create(
-    <Modal isOpen>
-      <span>Some content of modal</span>
-    </Modal>
-  );
-  expect(component.toJSON()).toMatchSnapshot();
-});
-
-it('Should show only content', () => {
-  const component = renderer.create(
-    <Modal replace isOpen>
-      <span>Some content of modal</span>
-    </Modal>
-  );
-  expect(component.toJSON()).toMatchSnapshot();
-});
-
-it('Should contain width attribute', () => {
-  const component = renderer.create(
-    <Modal replace width="400px" isOpen>
-      <span>Some content of modal</span>
-    </Modal>
-  );
-  expect(component.toJSON()).toMatchSnapshot();
-});

package/dist/pure-modal-content.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import type { MouseOrTouch } from './types';
-declare 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;
-};
-declare function PureModalContent(props: Props): JSX.Element;
-declare namespace PureModalContent {
-    var defaultProps: {
-        closeButton: string;
-        closeButtonPosition: string;
-        replace: boolean;
-        draggable: boolean;
-    };
-}
-export default PureModalContent;

package/dist/react-pure-modal.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import './react-pure-modal.css';
-declare 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;
-};
-declare function PureModal(props: Props): React.JSX.Element | null;
-declare const _default: React.MemoExoticComponent<typeof PureModal>;
-export default _default;

package/dist/react-pure-modal.min.css

@@ -1 +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,.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 .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:#f0f0f0}.pure-modal .panel-title{padding:12px 45px 12px 15px;margin:0}.pure-modal .close{right:10px;top:10px;z-index:1;background:hsla(0,0%,94.1%,.8);width:30px;color:#8c8c8c;transition:color .1s ease-in-out;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:#f0f0f0}.pure-modal .panel-body,.pure-modal .panel-footer,.pure-modal .panel-title{word-break:break-all}.pure-modal-backdrop .additional-row,.pure-modal-backdrop:not(.scrollable) .additional-row{display:grid;grid-template-rows:min-content minmax(0,1fr) min-content min-content}

package/dist/react-pure-modal.min.js

@@ -1 +0,0 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","react-dom"],t);else{var o="object"==typeof exports?t(require("react"),require("react-dom")):t(e.react,e["react-dom"]);for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(this,((e,t)=>(()=>{var o={494:()=>{},156:t=>{"use strict";t.exports=e},111:e=>{"use strict";e.exports=t}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return o[e](r,r.exports,a),r.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{"use strict";a.r(r),a.d(r,{default:()=>s});var e=a(156),t=a.n(e),o=a(111);function n(e){const{children:o,replace:n,bodyClass:a,header:r,footer:c,onDragStart:l,onDragEnd:s,onClose:u,closeButton:i,closeButtonPosition:d}=e;return n?o:t().createElement("div",{className:"panel panel-default "+("bottom"===d?"additional-row":"")},t().createElement("div",{className:"panel-heading",onTouchStart:l,onMouseDown:l,onTouchEnd:s,onMouseUp:s},r&&t().createElement("h3",{className:"panel-title"},r)),t().createElement("div",{className:a},o),c&&t().createElement("div",{className:"panel-footer"},c),t().createElement("div",{className:"close",onClick:u,style:{position:"header"===d?"absolute":"static",margin:"bottom"===d?"10px auto":""}},i))}n.defaultProps={closeButton:"×",closeButtonPosition:"header",replace:!1,draggable:!1};const c=n;a(494);function l(n){const a=(0,e.useId)(),[r,l]=(0,e.useState)(!1),[s,u]=(0,e.useState)(null),[i,d]=(0,e.useState)(null),[p,m]=(0,e.useState)(0),[f,g]=(0,e.useState)(0),[v,h]=(0,e.useState)(0),[b,y]=(0,e.useState)(0),{isOpen:E,onClose:S}=n,T=(0,e.useCallback)((()=>{document.body.classList.remove("body-modal-fix")}),[]);(0,e.useEffect)((()=>(E&&(document.addEventListener("keydown",x),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),document.body.classList.add("body-modal-fix")),()=>{document.querySelector(".pure-modal")||(document.removeEventListener("keydown",x),T(),u(null),d(null),m(0),g(0),h(0),y(0))})),[E]);const x=(0,e.useCallback)((e=>{const t=document.querySelectorAll(".pure-modal"),o=t.length>1,n=t[t.length-1];return!(o&&!n.className.includes(a))&&(!("Escape"!==e.key||!document.activeElement)&&(P(e),!0))}),[P,a]);if(!E)return null;function P(e){e&&(e.stopPropagation(),e.preventDefault()),null==S||S({isPassive:Boolean(e)})}function j(e){return e instanceof TouchEvent&&e.changedTouches.length>0?{pageX:e.changedTouches[0].pageX,pageY:e.changedTouches[0].pageY}:e instanceof MouseEvent?{pageX:e.pageX,pageY:e.pageY}:{pageX:0,pageY:0}}function M(e){if(e instanceof TouchEvent&&e.changedTouches&&e.changedTouches.length>1)return B();e.preventDefault();const{pageX:t,pageY:o}=j(e);"number"==typeof s&&"number"==typeof i&&(m(t-s-v),g(o-i-b))}function B(){return l(!1)}const{children:D,replace:N=!1,className:k,header:w,footer:C,scrollable:X=!0,draggable:Y=!1,width:q,closeButton:L,closeButtonPosition:O,portal:_=!1}=n;let $=["pure-modal-backdrop"],A=["pure-modal",a],H=["panel-body"];k&&(A=A.concat(k)),X?H=H.concat("scrollable"):($=$.concat("scrollable"),A=A.concat("auto-height")),Y&&($=$.concat("backdrop-overflow-hidden"));const I=t().createElement("div",{className:$.join(" "),onMouseDown:function(e){if(e){if(!e.target.classList.contains("pure-modal-backdrop"))return;e.stopPropagation(),e.preventDefault()}P(e)},onTouchMove:r?M:void 0,onMouseMove:r?M:void 0},t().createElement("div",{className:A.join(" "),style:{transform:`translate(${p}px, ${f}px)`,transition:"none",width:q}},t().createElement(c,{replace:N,header:w,footer:C,onDragStart:Y?function(e){if(e instanceof TouchEvent&&e.changedTouches&&e.changedTouches.length>1)return;e.preventDefault();const{pageX:t,pageY:o}=j(e),{top:n,left:a}=e.currentTarget.getBoundingClientRect();l(!0),u("number"==typeof s?s:a),d("number"==typeof i?i:n),h(t-a),y(o-n)}:void 0,onDragEnd:Y?B:void 0,onClose:P,bodyClass:H.join(" "),closeButton:L,closeButtonPosition:O},D)));return _?(0,o.createPortal)(I,document.body):I}const s=t().memo(l)})(),r})()));

package/dist/types.d.ts

@@ -1 +0,0 @@
-export declare type MouseOrTouch = React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>;

package/example/content.ts

@@ -1,50 +0,0 @@
-export const smallContent = `
-  <p>
-    Ut bibendum dolor a mi ultrices venenatis ac a mi. Sed imperdiet ipsum sodales odio
-    scelerisque, vel lobortis est rutrum. Sed sagittis iaculis lorem id mattis. Sed ultricies
-    condimentum rhoncus. Phasellus rhoncus turpis nec odio egestas, quis pellentesque quam
-    aliquam. In sodales erat iaculis libero molestie, vel commodo nisl congue. Maecenas
-    scelerisque, ligula et elementum sagittis, felis dui semper tortor, eget euismod enim enim
-    vitae ante. Nullam suscipit accumsan mi non blandit. Curabitur viverra risus sed feugiat
-    aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
-    turpis egestas. Aliquam ipsum diam, pulvinar sit amet lectus at, congue vulputate eros.
-    Donec id libero quam.
-  </p>
-`;
-
-export const largeContent = `
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla ex a feugiat
-    blandit. Sed tempor placerat dui et hendrerit. Nunc fringilla vel orci at lacinia. Duis
-    vitae nulla sit amet justo faucibus ornare. Nunc nec lacinia dolor. Vestibulum egestas
-    condimentum ante, id semper sem facilisis eu. Sed aliquam eget est eget finibus. Quisque
-    vehicula massa et elit maximus, vel euismod erat lacinia. Morbi ut risus eget nunc feugiat
-    cursus.
-  </p>
-  <p>
-    Pellentesque quis metus eu urna feugiat auctor. Fusce accumsan mi nibh, porttitor lacinia
-    est egestas vel. Maecenas nibh odio, volutpat quis tincidunt eget, lacinia a lorem. Etiam
-    ullamcorper turpis a ultrices auctor. Cras quis tortor turpis. Class aptent taciti
-    sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam porta
-    sagittis congue. Maecenas volutpat lacus eu lectus dapibus, nec eleifend ipsum luctus.
-    Etiam ac lobortis ligula, id porta lectus. Curabitur eget leo ut sapien ullamcorper
-    sagittis.
-  </p>
-  <p>
-    Suspendisse commodo nisl in neque tempus pellentesque. Nullam magna turpis, fringilla
-    sollicitudin maximus non, consectetur ac quam. Ut sit amet tortor ornare, tincidunt ante
-    non, tempor mauris. Proin vestibulum purus vel felis pellentesque varius. Sed eget
-    volutpat dui. Curabitur quis nunc facilisis, euismod justo placerat, sagittis nunc.
-    Phasellus sagittis felis urna, sed sodales odio auctor sit amet. Etiam id metus quis velit
-    ullamcorper consequat. Fusce posuere ultricies felis, at vestibulum turpis egestas et.
-  </p>
-  <p>
-    In hac habitasse platea dictumst. Quisque fringilla elit vel ante tristique, quis commodo
-    turpis tincidunt. Phasellus mi sapien, lobortis sed blandit quis, suscipit ut odio.
-    Vivamus venenatis arcu nulla, non molestie ipsum ullamcorper eu. Duis suscipit
-    sollicitudin purus, eu consequat magna fringilla eget. Sed a varius dui. Donec at nisi
-    tortor. Vivamus ultrices risus eu maximus fermentum. Curabitur et tempus turpis. Curabitur
-    tincidunt porttitor imperdiet. Pellentesque hendrerit finibus mi, et rhoncus ex vestibulum
-    nec. Integer fermentum quis elit eget faucibus.
-  </p>
-`;