RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve clicking outside drawe

Browse Source
This commit is contained in:
SrGooglo 2023-06-05 10:50:31 +00:00
parent 28cba08b22
commit bbd75e2442
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/app/src/components/DraggableDrawer/index.jsx
View File

@ -1,11 +1,11 @@
// © Jack Hanford https://github.com/hanford/react-drag-drawer // © Jack Hanford https://github.com/hanford/react-drag-drawer
import React, { Component } from "react"; import React, { Component } from "react"
import { Motion, spring, presets } from "react-motion"; import { Motion, spring, presets } from "react-motion"
import PropTypes from "prop-types"; import PropTypes from "prop-types"
import document from "global/document"; import document from "global/document"
import Observer from "react-intersection-observer"; import Observer from "react-intersection-observer"
import { css } from "@emotion/css"; import { css } from "@emotion/css"
import { createPortal } from "react-dom"; import { createPortal } from "react-dom"
import { import {
isDirectionBottom, isDirectionBottom,
@ -67,11 +67,16 @@ export default class Drawer extends Component {
listenersAttached: false listenersAttached: false
} }
DESKTOP_MODE = false
DRAGGER_HEIGHT_SIZE = 100 DRAGGER_HEIGHT_SIZE = 100
MAX_NEGATIVE_SCROLL = 5 MAX_NEGATIVE_SCROLL = 5
SCROLL_TO_CLOSE = 475 SCROLL_TO_CLOSE = 475
ALLOW_DRAWER_TRANSFORM = true ALLOW_DRAWER_TRANSFORM = true
componentDidMount() {
this.DESKTOP_MODE = !window.isMobile
}
componentDidUpdate(prevProps, nextState) { componentDidUpdate(prevProps, nextState) {
// in the process of closing the drawer // in the process of closing the drawer
if (!this.props.open && prevProps.open) { if (!this.props.open && prevProps.open) {
@ -333,6 +338,17 @@ export default class Drawer extends Component {
this.ALLOW_DRAWER_TRANSFORM = inView this.ALLOW_DRAWER_TRANSFORM = inView
} }
onClickOutside = (event) => {
if (!this.props.allowClose) {
return false
}
// check if is clicking outside main component
if (this.drawer && !this.drawer.contains(event.target)) {
this.props.onRequestClose(this)
}
}
preventDefault = (event) => event.preventDefault() preventDefault = (event) => event.preventDefault()
stopPropagation = (event) => event.stopPropagation() stopPropagation = (event) => event.stopPropagation()
@ -392,7 +408,7 @@ export default class Drawer extends Component {
<div <div
id={id} id={id}
style={containerStyle} style={containerStyle}
onClick={this.props.onRequestClose} onMouseDown={this.onClickOutside}
className={`${Container} ${containerElementClass} `} className={`${Container} ${containerElementClass} `}
ref={getContainerRef} ref={getContainerRef}
> >