diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx index 510c37d54..3ba79613f 100644 --- a/src/client/components/boardComponent.tsx +++ b/src/client/components/boardComponent.tsx @@ -6,6 +6,7 @@ import { IPropertyOption } from "../board" import { BoardTree } from "../boardTree" import { CardFilter } from "../cardFilter" import ViewMenu from "../components/viewMenu" +import MenuWrapper from "../widgets/menuWrapper" import { Constants } from "../constants" import { Menu as OldMenu } from "../menu" import { Mutator } from "../mutator" @@ -29,7 +30,6 @@ type Props = { type State = { isHoverOnCover: boolean isSearching: boolean - viewMenu: boolean } class BoardComponent extends React.Component { @@ -39,7 +39,7 @@ class BoardComponent extends React.Component { constructor(props: Props) { super(props) - this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false } + this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText()} } componentDidUpdate(prevPros: Props, prevState: State) { @@ -93,21 +93,20 @@ class BoardComponent extends React.Component {
{ mutator.changeTitle(activeView, text) }} /> -
this.setState({ viewMenu: true })} - > - {this.state.viewMenu && - this.setState({ viewMenu: false })} - mutator={mutator} - boardTree={boardTree} - showView={showView} - />} -
-
+ +
+
+
+ +
{ this.propertiesClicked(e) }}>Properties
{ this.groupByClicked(e) }}> diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx index a55508ae5..a2d00991a 100644 --- a/src/client/components/tableComponent.tsx +++ b/src/client/components/tableComponent.tsx @@ -6,6 +6,7 @@ import { IPropertyTemplate } from "../board" import { BoardTree } from "../boardTree" import { CsvExporter } from "../csvExporter" import ViewMenu from "../components/viewMenu" +import MenuWrapper from "../widgets/menuWrapper" import { Menu as OldMenu } from "../menu" import { Mutator } from "../mutator" import { IBlock } from "../octoTypes" @@ -90,21 +91,20 @@ class TableComponent extends React.Component {
{ mutator.changeTitle(activeView, text) }} /> -
this.setState({ viewMenu: true })} - > - {this.state.viewMenu && - this.setState({ viewMenu: false })} - mutator={mutator} - boardTree={boardTree} - showView={showView} - />} -
-
+ +
+
+
+ +
{ this.propertiesClicked(e) }}>Properties
{ this.filterClicked(e) }}>Filter
diff --git a/src/client/components/viewMenu.tsx b/src/client/components/viewMenu.tsx index e5b48c34f..08c1af2ee 100644 --- a/src/client/components/viewMenu.tsx +++ b/src/client/components/viewMenu.tsx @@ -11,7 +11,6 @@ type Props = { boardTree?: BoardTree board: Board, showView: (id: string) => void - onClose: () => void, } export default class ViewMenu extends React.Component { @@ -68,9 +67,9 @@ export default class ViewMenu extends React.Component { } render() { - const { onClose, boardTree } = this.props + const { boardTree } = this.props return ( - + {boardTree.views.map((view) => ())} {boardTree.views.length > 1 && } diff --git a/src/client/widgets/menu.tsx b/src/client/widgets/menu.tsx index 78de42a8c..8c12c12f0 100644 --- a/src/client/widgets/menu.tsx +++ b/src/client/widgets/menu.tsx @@ -40,7 +40,7 @@ class SubMenuOption extends React.Component {
{this.props.name}
{this.state.isOpen && - + {this.props.children} } @@ -113,7 +113,6 @@ class TextOption extends React.Component { type MenuProps = { children: React.ReactNode - onClose: () => void } export default class Menu extends React.Component { @@ -123,30 +122,6 @@ export default class Menu extends React.Component { static Separator = SeparatorOption static Text = TextOption - onBodyClick = (e: MouseEvent) => { - this.props.onClose() - } - - onBodyKeyDown = (e: KeyboardEvent) => { - // Ignore keydown events on other elements - if (e.target !== document.body) { return } - if (e.keyCode === 27) { - // ESC - this.props.onClose() - e.stopPropagation() - } - } - - componentDidMount() { - document.addEventListener("click", this.onBodyClick) - document.addEventListener("keydown", this.onBodyKeyDown) - } - - componentWillUnmount() { - document.removeEventListener("click", this.onBodyClick) - document.removeEventListener("keydown", this.onBodyKeyDown) - } - render() { return (
diff --git a/src/client/widgets/menuWrapper.tsx b/src/client/widgets/menuWrapper.tsx new file mode 100644 index 000000000..cbe9167c9 --- /dev/null +++ b/src/client/widgets/menuWrapper.tsx @@ -0,0 +1,94 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +type Props = { + children?: React.ReactNode; + onToggle?: (open: boolean) => void; + isDisabled?: boolean; + stopPropagationOnToggle?: boolean; +} + +type State = { + open: boolean; +} + +export default class MenuWrapper extends React.PureComponent { + private node: React.RefObject; + + public constructor(props: Props) { + super(props); + if (!Array.isArray(props.children) || props.children.length !== 2) { + throw new Error('MenuWrapper needs exactly 2 children'); + } + this.state = { + open: false, + }; + this.node = React.createRef(); + } + + public componentDidMount() { + document.addEventListener('click', this.closeOnBlur, true); + document.addEventListener('keyup', this.keyboardClose, true); + } + + public componentWillUnmount() { + document.removeEventListener('click', this.closeOnBlur, true); + document.removeEventListener('keyup', this.keyboardClose, true); + } + + private keyboardClose = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + this.close(); + } + + if (e.key === 'Tab') { + this.closeOnBlur(e); + } + } + + private closeOnBlur = (e: Event) => { + if (this.node && this.node.current && e.target && this.node.current.contains(e.target as Node)) { + return; + } + + this.close(); + } + + public close = () => { + if (this.state.open) { + this.setState({open: false}); + } + } + + toggle = (e: React.MouseEvent) => { + /** + * This is only here so that we can toggle the menus in the sidebar, because the default behavior of the mobile + * version (ie the one that uses a modal) needs propagation to close the modal after selecting something + * We need to refactor this so that the modal is explicitly closed on toggle, but for now I am aiming to preserve the existing logic + * so as to not break other things + **/ + if (this.props.stopPropagationOnToggle) { + e.preventDefault(); + e.stopPropagation(); + } + const newState = !this.state.open; + this.setState({open: newState}); + } + + public render() { + const {children} = this.props; + + return ( +
+ {children && !this.state.open ? Object.values(children)[0] : null} + {children && this.state.open ? Object.values(children)[1] : null} +
+ ); + } +}