react-pure-modal 2.2.7 → 3.0.0

package/src/react-pure-modal.tsx

@@ -1,254 +0,0 @@
-import React, { useState, useEffect, useCallback } 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;
-};
-
-function PureModal(props: Props) {
-  let hash = Math.random().toString();
-  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 => {
-      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?: MouseOrTouch) {
-    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);

package/src/types.ts

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

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "include": ["src/*.tsx"],
-  "compilerOptions": {
-    "outDir": "./dist",
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "commonjs",
-    "target": "es2016",
-    "jsx": "react",
-    "lib": ["es2018", "dom"],
-    "esModuleInterop": true,
-    "strict": true,
-    "importsNotUsedAsValues": "error",
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
-    "typeRoots": ["./@types/**", "./node_modules/@types"],
-    "types": ["node", "jest"]
-  }
-}

package/webpack.config.dev.js

@@ -1,65 +0,0 @@
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const path = require('path');
-const webpack = require('webpack');
-
-const config = {
-  mode: process.env.NODE_ENV || 'development',
-  optimization: {
-    minimize: process.env.NODE_ENV !== 'development',
-    minimizer:
-      process.env.NODE_ENV !== 'development'
-        ? [
-            new TerserPlugin({
-              cache: true,
-              parallel: true,
-              sourceMap: true, // Must be set to true if using source-maps in production
-              terserOptions: {},
-            }),
-            new CssMinimizerPlugin(),
-          ]
-        : [],
-  },
-  entry: {
-    example: path.join(__dirname, 'example/example.tsx'),
-  },
-  devtool: process.env.NODE_ENV !== 'development' ? false : 'inline-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts|tsx)$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.css$/,
-        exclude: /(node_modules)/,
-        use: ['style-loader', 'css-loader'],
-      },
-    ],
-  },
-  devServer: {
-    contentBase: path.resolve(__dirname, 'examples/'),
-    compress: true,
-    port: 8000,
-    stats: 'errors-only',
-    open: true,
-  },
-  output: {
-    path: path.join(__dirname, 'example/'),
-    filename: '[name].min.js',
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
-    }),
-  ],
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-    modules: [path.join(__dirname, './src'), path.join(__dirname, './node_modules')],
-  },
-};
-
-module.exports = config;

package/webpack.config.js

@@ -1,62 +0,0 @@
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const path = require('path');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const config = {
-  mode: 'production',
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true, // Must be set to true if using source-maps in production
-        terserOptions: {},
-      }),
-      new CssMinimizerPlugin(),
-    ],
-  },
-  entry: {
-    'react-pure-modal': path.join(__dirname, './src/react-pure-modal.tsx'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx|tsx|ts)$/,
-        exclude: /(node_modules|dist)/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.css$/,
-        exclude: /(node_modules|dist)/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
-    ],
-  },
-  output: {
-    path: path.join(__dirname, 'dist/'),
-    filename: '[name].min.js',
-    libraryTarget: 'umd',
-    globalObject: 'this',
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
-    }),
-    new MiniCssExtractPlugin({ filename: '[name].min.css' }),
-  ],
-  resolve: {
-    modules: ['node_modules'],
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  externals: {
-    react: 'umd react',
-    'react-dom': 'umd react-dom',
-  },
-};
-
-module.exports = config;