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 12fcf1cceb
commit b9347e42c1
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
import React, { Component } from "react";
import { Motion, spring, presets } from "react-motion";
import PropTypes from "prop-types";
import document from "global/document";
import Observer from "react-intersection-observer";
import { css } from "@emotion/css";
import { createPortal } from "react-dom";
import React, { Component } from "react"
import { Motion, spring, presets } from "react-motion"
import PropTypes from "prop-types"
import document from "global/document"
import Observer from "react-intersection-observer"
import { css } from "@emotion/css"
import { createPortal } from "react-dom"
import {
isDirectionBottom,
@ -67,11 +67,16 @@ export default class Drawer extends Component {
listenersAttached: false
}
DESKTOP_MODE = false
DRAGGER_HEIGHT_SIZE = 100
MAX_NEGATIVE_SCROLL = 5
SCROLL_TO_CLOSE = 475
ALLOW_DRAWER_TRANSFORM = true
componentDidMount() {
this.DESKTOP_MODE = !window.isMobile
}
componentDidUpdate(prevProps, nextState) {
// in the process of closing the drawer
if (!this.props.open && prevProps.open) {
@ -333,6 +338,17 @@ export default class Drawer extends Component {
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()
stopPropagation = (event) => event.stopPropagation()
@ -392,7 +408,7 @@ export default class Drawer extends Component {
<div
id={id}
style={containerStyle}
onClick={this.props.onRequestClose}
onMouseDown={this.onClickOutside}
className={`${Container} ${containerElementClass} `}
ref={getContainerRef}
>