From 0f32a4ea9c152250c469b1e81f6bafd337b58e2e Mon Sep 17 00:00:00 2001 From: Farzin Firoozi Date: Wed, 18 Jan 2023 11:32:38 +0330 Subject: [PATCH 1/2] lock background scroll --- README.md | 31 +++++++++--------- example/package.json | 78 ++++++++++++++++++++++---------------------- example/yarn.lock | 20 ++++++++++-- package.json | 2 +- src/index.tsx | 61 +++++++++++++++++++++++----------- 5 files changed, 116 insertions(+), 76 deletions(-) diff --git a/README.md b/README.md index 8aa8ada..fca4c77 100644 --- a/README.md +++ b/README.md @@ -70,21 +70,22 @@ export default App ## API -| api | type | required | default | value | desciption | -| -------------- | ------------------- | -------- | ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------- | -| direction | string | yes | "right" | "right" , "left" , "top","bottom" | Selecting the direction that drawer opens | -| open | boolean | yes | false | true , false | Select when to show drawer | -| onClose | function | no | ( )=>{ } | any executable function | This function is called when clicking on backdrop layer usually used for closing the drawer | -| size | number or string | no | 250 | integer or '{integer}px' or '{integer}vw' | Determines the size of drawer | -| style | React.CSSProperties | no | null | Normal stylings | Can be used for inline styles | -| duration | number | no | 300 | Any positive Integer | Determines the duration of opening the drawer | -| overlayOpacity | number | no | 0.4 | Number between 0 and 1 | Determines the opacity of overlay | -| overlayColor | string | no | "#000" | Any color code | Determines the color of overlay | -| enableOverlay | boolean | no | true | true , false | Determines whether to show the overlay | -| zIndex | number | no | 100 | Any positive Integer | Determines the zIndex of drawer | -| children | React.ReactNode | no | null | Any ReactNode | This is the same as props.children | -| className | string | no | undefined | - | normal regular classNames and stuff | -| customIdSuffix | string | no | A random string based on `Math.random()` | - | Used for making different ids for drawers, can be customized for special cases. | +| api | type | required | default | value | desciption | +| -------------------- | ------------------- | -------- | ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------- | +| direction | string | yes | "right" | "right" , "left" , "top","bottom" | Selecting the direction that drawer opens | +| open | boolean | yes | false | true , false | Select when to show drawer | +| onClose | function | no | ( )=>{ } | any executable function | This function is called when clicking on backdrop layer usually used for closing the drawer | +| size | number or string | no | 250 | integer or '{integer}px' or '{integer}vw' | Determines the size of drawer | +| style | React.CSSProperties | no | null | Normal stylings | Can be used for inline styles | +| duration | number | no | 300 | Any positive Integer | Determines the duration of opening the drawer | +| overlayOpacity | number | no | 0.4 | Number between 0 and 1 | Determines the opacity of overlay | +| overlayColor | string | no | "#000" | Any color code | Determines the color of overlay | +| enableOverlay | boolean | no | true | true , false | Determines whether to show the overlay | +| zIndex | number | no | 100 | Any positive Integer | Determines the zIndex of drawer | +| children | React.ReactNode | no | null | Any ReactNode | This is the same as props.children | +| className | string | no | undefined | - | normal regular classNames and stuff | +| customIdSuffix | string | no | A random string based on `Math.random()` | - | Used for making different ids for drawers, can be customized for special cases. | +| lockBackgroundScroll | boolean | no | false | - | Locks the body scroll when drawer is open. | ## Support diff --git a/example/package.json b/example/package.json index 272e8d8..053a188 100644 --- a/example/package.json +++ b/example/package.json @@ -1,41 +1,41 @@ { - "name": "react-modern-drawer-example", - "homepage": ".", - "version": "0.0.0", - "private": true, - "scripts": { - "start": "node ../node_modules/react-scripts/bin/react-scripts.js start", - "build": "node ../node_modules/react-scripts/bin/react-scripts.js build", - "test": "node ../node_modules/react-scripts/bin/react-scripts.js test", - "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject" - }, - "dependencies": { - "@types/node": "link:../node_modules/@types/node", - "@types/react": "link:../node_modules/@types/react", - "@types/react-dom": "link:../node_modules/@types/react-dom", - "eslint-config-react-app": "link:../node_modules/eslint-config-react-app", - "react": "link:../node_modules/react", - "react-dom": "link:../node_modules/react-dom", - "react-modern-drawer": "link:..", - "react-scripts": "link:../node_modules/react-scripts", - "typescript": "link:../node_modules/typescript" - }, - "devDependencies": { - "@babel/plugin-syntax-object-rest-spread": "^7.8.3" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } + "name": "react-modern-drawer-example", + "homepage": ".", + "version": "0.0.0", + "private": true, + "scripts": { + "start": "node ../node_modules/react-scripts/bin/react-scripts.js start", + "build": "node ../node_modules/react-scripts/bin/react-scripts.js build", + "test": "node ../node_modules/react-scripts/bin/react-scripts.js test", + "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject" + }, + "dependencies": { + "@types/node": "link:../node_modules/@types/node", + "@types/react": "link:../node_modules/@types/react", + "@types/react-dom": "link:../node_modules/@types/react-dom", + "eslint-config-react-app": "link:../node_modules/eslint-config-react-app", + "react": "link:../node_modules/react", + "react-dom": "link:../node_modules/react-dom", + "react-modern-drawer": "link:..", + "react-scripts": "link:../node_modules/react-scripts", + "typescript": "link:../node_modules/typescript" + }, + "devDependencies": { + "@babel/plugin-syntax-object-rest-spread": "^7.8.3" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } } diff --git a/example/yarn.lock b/example/yarn.lock index 08d17a0..174fd3a 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -4002,8 +4002,24 @@ escodegen@^2.0.0: source-map "~0.6.1" eslint-config-react-app@^7.0.0: - version "0.0.0" - uid "" + version "7.0.1" + resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4" + integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA== + dependencies: + "@babel/core" "^7.16.0" + "@babel/eslint-parser" "^7.16.3" + "@rushstack/eslint-patch" "^1.1.0" + "@typescript-eslint/eslint-plugin" "^5.5.0" + "@typescript-eslint/parser" "^5.5.0" + babel-preset-react-app "^10.0.1" + confusing-browser-globals "^1.0.11" + eslint-plugin-flowtype "^8.0.3" + eslint-plugin-import "^2.25.3" + eslint-plugin-jest "^25.3.0" + eslint-plugin-jsx-a11y "^6.5.1" + eslint-plugin-react "^7.27.1" + eslint-plugin-react-hooks "^4.3.0" + eslint-plugin-testing-library "^5.0.1" "eslint-config-react-app@link:../node_modules/eslint-config-react-app": version "0.0.0" diff --git a/package.json b/package.json index c8bd1bc..34db759 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-modern-drawer", - "version": "1.1.2", + "version": "1.2.0", "description": "Creating drawers in react made easy!", "author": "Farzin-Firoozi", "license": "MIT", diff --git a/src/index.tsx b/src/index.tsx index 3b2db9a..afd4889 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,10 +1,12 @@ -import * as React from 'react' +import React, { useEffect, useMemo, useRef } from 'react' +import type { CSSProperties } from 'react' import './styles.scss' type Props = { open: boolean onClose?: () => void direction: 'left' | 'right' | 'top' | 'bottom' + lockBackgroundScroll?: boolean children?: React.ReactNode duration?: number overlayOpacity?: number @@ -62,32 +64,53 @@ const getDirectionStyle = ( } } -const EZDrawer: React.FC = function ({ - open, - onClose = () => {}, - children, - style, - enableOverlay = true, - overlayColor = '#000', - overlayOpacity = 0.4, - zIndex = 100, - duration = 500, - direction, - size = 250, - className, - customIdSuffix, -}): JSX.Element { - const idSuffix = React.useMemo(() => { +const EZDrawer: React.FC = (props) => { + const { + open, + onClose = () => {}, + children, + style, + enableOverlay = true, + overlayColor = '#000', + overlayOpacity = 0.4, + zIndex = 100, + duration = 500, + direction, + size = 250, + className, + customIdSuffix, + lockBackgroundScroll = false, + } = props + + const bodyRef = useRef(null) + + useEffect(() => { + const updatePageScroll = () => { + bodyRef.current = window.document.querySelector('body') + + if (bodyRef.current && lockBackgroundScroll) { + if (open) { + bodyRef.current.style.overflow = 'hidden' + } else { + bodyRef.current.style.overflow = '' + } + } + } + + updatePageScroll() + }, [open]) + + const idSuffix = useMemo(() => { return customIdSuffix || (Math.random() + 1).toString(36).substring(7) }, [customIdSuffix]) - const overlayStyles: React.CSSProperties = { + const overlayStyles: CSSProperties = { backgroundColor: `${overlayColor}`, opacity: `${overlayOpacity}`, zIndex: zIndex, } - const drawerStyles: React.CSSProperties = { + const drawerStyles: CSSProperties = { zIndex: zIndex + 1, transitionDuration: `${duration}ms`, ...getDirectionStyle(direction, size), From ea71093ae747f8063c1df571fe0fbff8465de9e3 Mon Sep 17 00:00:00 2001 From: Farzin Firoozi Date: Wed, 18 Jan 2023 11:33:19 +0330 Subject: [PATCH 2/2] update readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fca4c77..ed2095e 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ [![NPM](https://img.shields.io/npm/v/react-modern-drawer.svg)](https://www.npmjs.com/package/react-modern-drawer) ![npm](https://img.shields.io/npm/dt/react-modern-drawer) ![npm](https://img.shields.io/npm/dw/react-modern-drawer) -![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-modern-drawer/1.1.2) -![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-modern-drawer/1.1.2) +![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-modern-drawer/1.2.0) +![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-modern-drawer/1.2.0) ![NPM](https://img.shields.io/npm/l/react-modern-drawer) ## low bundle size with fantastic performance