@potok/modal - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

components/Modal.jsx

 // @flow
-import React, { type Node } from 'react';
+import React, { Component, type Node } from 'react';
 import {
@@ -8,3 +8,2 @@ Gateway,
 import Modal2 from 'react-modal2';
-import Scrollbars from 'react-custom-scrollbars';
 
@@ -29,3 +28,3 @@ import CloseIcon from '@potok/icons/glyph/clear/close-1';
 
-const ModalGateway = ({ children }) => {
+const ModalGateway = ({ children }: any) => {
   return <Gateway into={MODAL_GATEWAY_NAME}>{children}</Gateway>;
@@ -42,37 +41,67 @@ };
 
-const Modal = ({
-  children,
-  title,
-  closeOnEsc,
-  closeOnBackdropClick,
-  onClose,
-}: Props) => (
-  <ModalGateway>
-    <ModalWrapper>
-      <Modal2
-        closeOnEsc={closeOnEsc}
-        closeOnBackdropClick={closeOnBackdropClick}
-        onClose={onClose}
-        backdropClassName={backdropClass}
-        modalClassName={modalClass}
-      >
-        <Scrollbars autoHeight autoHeightMax={'90vh'}>
-          <Header>{title !== '' && <Title>{title}</Title>}</Header>
-          <Close onClick={onClose}>
-            <CloseIcon primaryColor={colors.N500} />
-          </Close>
-          <div>{children}</div>
-        </Scrollbars>
-      </Modal2>
-    </ModalWrapper>
-  </ModalGateway>
-);
+function getScrollbarWidth() {
+  return window.innerWidth - document.documentElement.clientWidth;
+}
 
-Modal.defaultProps = {
-  title: '',
-  closeOnEsc: true,
-  closeOnBackdropClick: true,
-};
+class Modal extends Component<Props> {
+  bodyOverflow: string;
+  bodyMarginLeft: string;
 
+  static defaultProps = {
+    title: '',
+    closeOnEsc: true,
+    closeOnBackdropClick: true,
+  };
+
+  componentDidMount() {
+    // fix body jump
+
+    this.bodyOverflow = document.body.style.overflow;
+    this.bodyMarginLeft = document.body.style['margin-left'];
+    document.body.style['margin-left'] = `-${getScrollbarWidth()}px`;
+    document.body.style.overflow = 'hidden';
+    setTimeout(() => {
+      const modal = document.querySelector(`.${backdropClass}`);
+      if (modal) {
+        modal.scrollTo(0, 0);
+      }
+    }, 0);
+  }
+
+  componentWillUnmount() {
+    document.body.style.overflow = this.bodyOverflow;
+    document.body.style['margin-left'] = this.bodyMarginLeft;
+  }
+
+  render() {
+    const {
+      children,
+      title,
+      closeOnEsc,
+      closeOnBackdropClick,
+      onClose,
+    } = this.props;
+    return (
+      <ModalGateway>
+        <ModalWrapper>
+          <Modal2
+            closeOnEsc={closeOnEsc}
+            closeOnBackdropClick={closeOnBackdropClick}
+            onClose={onClose}
+            backdropClassName={backdropClass}
+            modalClassName={modalClass}
+          >
+            <Header>{title !== '' && <Title>{title}</Title>}</Header>
+            <Close onClick={onClose}>
+              <CloseIcon primaryColor={colors.N500} />
+            </Close>
+            <div>{children}</div>
+          </Modal2>
+        </ModalWrapper>
+      </ModalGateway>
+    );
+  }
+}
+
 export default Modal;
 export { ModalGateway, ModalGatewayDest, ModalGatewayProvider };

components/styled/index.js

@@ -33,2 +33,4 @@ import styled, { css } from 'styled-components';
     background: rgba(104, 104, 104, 0.5);
+    overflow-y: scroll;
+    padding: 20px;
   }
@@ -38,3 +40,3 @@
     position: relative;
-    padding: 25px 20px 20px;
+    padding: 30px;
     background: ${colors.N0};
@@ -44,2 +46,3 @@ color: ${colors.N600};
     outline: none;
+    margin: auto;
     ${switchProp('theme.device', {
@@ -46,0 +49,0 @@ [themeDevices.desktop]: css`

package.json

 {
   "name": "@potok/modal",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Potok.io UI Modal component",
@@ -14,3 +14,2 @@ "main": "./components/Modal.jsx",
   "dependencies": {
-    "react-custom-scrollbars": "^4.2.1",
     "react-gateway": "^3.0.0",
@@ -17,0 +16,0 @@ "react-modal2": "^5.0.0"

No alert changes

Improved metrics

Total package byte prevSize

6539

increased by13.96%

Dependency count

4

decreased by-20%

Lines of code

174

increased by18.37%

Dependency changes

• - Removedreact-custom-scrollbars@^4.2.1

• - Removedadd-px-to-style@1.0.0(transitive)

• - Removeddom-css@2.1.0(transitive)

• - Removedperformance-now@2.1.0(transitive)

• - Removedprefix-style@2.0.1(transitive)

• - Removedraf@3.4.1(transitive)

• - Removedreact-custom-scrollbars@4.2.1(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedscheduler@0.19.1(transitive)

• - Removedto-camel-case@1.0.0(transitive)

• - Removedto-no-case@1.0.2(transitive)

• - Removedto-space-case@1.0.0(transitive)