From 4a607df9e82ab402f3cc5420ec4404545d468c2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Wed, 14 Oct 2020 12:27:53 +0200 Subject: [PATCH 1/3] Sample implementation of the menu widget (some extra work needed) --- src/client/components/boardComponent.tsx | 122 ++++++++++++++--- src/client/widgets/menu.tsx | 159 +++++++++++++++++++++++ 2 files changed, 263 insertions(+), 18 deletions(-) create mode 100644 src/client/widgets/menu.tsx diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx index a2ead7735..9ea23b6c1 100644 --- a/src/client/components/boardComponent.tsx +++ b/src/client/components/boardComponent.tsx @@ -6,16 +6,87 @@ import { IPropertyOption } from "../board" import { BoardTree } from "../boardTree" import { CardFilter } from "../cardFilter" import { Constants } from "../constants" -import { Menu } from "../menu" +import Menu from "../widgets/menu" +import { Menu as OldMenu } from "../menu" import { Mutator } from "../mutator" import { IBlock, IPageController } from "../octoTypes" import { OctoUtils } from "../octoUtils" import { Utils } from "../utils" import { BoardCard } from "./boardCard" +import { Board } from "../board" +import { BoardView } from "../boardView" import { BoardColumn } from "./boardColumn" import { Button } from "./button" import { Editable } from "./editable" +type ViewMenuProps = { + mutator: Mutator, + boardTree?: BoardTree + pageController: IPageController, + board: Board, + onClose: () => void, +} +function ViewMenu({board, onClose, boardTree, mutator, pageController}: ViewMenuProps) { + const handleDeleteView = async (id: string) => { + Utils.log(`deleteView`) + const view = boardTree.activeView + const nextView = boardTree.views.find(o => o !== view) + await mutator.deleteBlock(view, "delete view") + pageController.showView(nextView.id) + } + + const handleViewClick = (id: string) => { + Utils.log(`view ` + id) + const view = boardTree.views.find(o => o.id === id) + pageController.showView(view.id) + } + + const handleAddViewBoard = async (id: string) => { + Utils.log(`addview-board`) + const view = new BoardView() + view.title = "Board View" + view.viewType = "board" + view.parentId = board.id + + const oldViewId = boardTree.activeView.id + + await mutator.insertBlock( + view, + "add view", + async () => { pageController.showView(view.id) }, + async () => { pageController.showView(oldViewId) }) + } + + const handleAddViewTable = async (id: string) => { + Utils.log(`addview-table`) + const view = new BoardView() + view.title = "Table View" + view.viewType = "table" + view.parentId = board.id + view.visiblePropertyIds = board.cardProperties.map(o => o.id) + + const oldViewId = boardTree.activeView.id + + await mutator.insertBlock( + view, + "add view", + async () => { pageController.showView(view.id) }, + async () => { pageController.showView(oldViewId) }) + } + + return ( + + {boardTree.views.map((view) => ())} + + {boardTree.views.length > 1 && } + + + + + + ); +} + type Props = { mutator: Mutator, boardTree?: BoardTree @@ -25,6 +96,7 @@ type Props = { type State = { isHoverOnCover: boolean isSearching: boolean + viewMenu: boolean } class BoardComponent extends React.Component { @@ -34,7 +106,7 @@ class BoardComponent extends React.Component { constructor(props: Props) { super(props) - this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() } + this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false} } componentDidUpdate(prevPros: Props, prevState: State) { @@ -88,7 +160,21 @@ class BoardComponent extends React.Component {
{ mutator.changeTitle(activeView, text) }} /> -
{ OctoUtils.showViewMenu(e, mutator, boardTree, pageController) }}>
+
this.setState({viewMenu: true})} + > + {this.state.viewMenu && + this.setState({viewMenu:false})} + mutator={mutator} + boardTree={boardTree} + pageController={pageController} + />} +
+
{ this.propertiesClicked(e) }}>Properties
{ this.groupByClicked(e) }}> @@ -202,11 +288,11 @@ class BoardComponent extends React.Component { const { mutator, boardTree } = this.props const { board } = boardTree - Menu.shared.options = [ + OldMenu.shared.options = [ { id: "random", name: "Random" }, { id: "remove", name: "Remove Icon" }, ] - Menu.shared.onMenuClicked = (optionId: string, type?: string) => { + OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => { switch (optionId) { case "remove": mutator.changeIcon(board, undefined, "remove icon") @@ -217,7 +303,7 @@ class BoardComponent extends React.Component { break } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } async showCard(card?: IBlock) { @@ -247,12 +333,12 @@ class BoardComponent extends React.Component { async valueOptionClicked(e: React.MouseEvent, option: IPropertyOption) { const { mutator, boardTree } = this.props - Menu.shared.options = [ + OldMenu.shared.options = [ { id: "delete", name: "Delete" }, { id: "", name: "", type: "separator" }, ...Constants.menuColors ] - Menu.shared.onMenuClicked = async (optionId: string, type?: string) => { + OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => { switch (optionId) { case "delete": console.log(`Delete property value: ${option.value}`) @@ -266,7 +352,7 @@ class BoardComponent extends React.Component { } } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } private filterClicked(e: React.MouseEvent) { @@ -277,13 +363,13 @@ class BoardComponent extends React.Component { private async optionsClicked(e: React.MouseEvent) { const { boardTree } = this.props - Menu.shared.options = [ + OldMenu.shared.options = [ { id: "exportBoardArchive", name: "Export board archive" }, { id: "testAdd100Cards", name: "TEST: Add 100 cards" }, { id: "testAdd1000Cards", name: "TEST: Add 1,000 cards" }, ] - Menu.shared.onMenuClicked = async (id: string) => { + OldMenu.shared.onMenuClicked = async (id: string) => { switch (id) { case "exportBoardArchive": { Archiver.exportBoardTree(boardTree) @@ -297,7 +383,7 @@ class BoardComponent extends React.Component { } } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } private async testAddCards(count: number) { @@ -325,12 +411,12 @@ class BoardComponent extends React.Component { const { activeView } = boardTree const selectProperties = boardTree.board.cardProperties - Menu.shared.options = selectProperties.map((o) => { + OldMenu.shared.options = selectProperties.map((o) => { const isVisible = activeView.visiblePropertyIds.includes(o.id) return { id: o.id, name: o.name, type: "switch", isOn: isVisible } }) - Menu.shared.onMenuToggled = async (id: string, isOn: boolean) => { + OldMenu.shared.onMenuToggled = async (id: string, isOn: boolean) => { const property = selectProperties.find(o => o.id === id) Utils.assertValue(property) Utils.log(`Toggle property ${property.name} ${isOn}`) @@ -343,20 +429,20 @@ class BoardComponent extends React.Component { } await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds) } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } private async groupByClicked(e: React.MouseEvent) { const { mutator, boardTree } = this.props const selectProperties = boardTree.board.cardProperties.filter(o => o.type === "select") - Menu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } }) - Menu.shared.onMenuClicked = async (command: string) => { + OldMenu.shared.options = selectProperties.map((o) => { return { id: o.id, name: o.name } }) + OldMenu.shared.onMenuClicked = async (command: string) => { if (boardTree.activeView.groupById === command) { return } await mutator.changeViewGroupById(boardTree.activeView, command) } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } async addGroupClicked() { diff --git a/src/client/widgets/menu.tsx b/src/client/widgets/menu.tsx new file mode 100644 index 000000000..78de42a8c --- /dev/null +++ b/src/client/widgets/menu.tsx @@ -0,0 +1,159 @@ +import React from 'react'; + +type MenuOptionProps = { + id: string, + name: string, + onClick?: (id: string) => void, +} + +function SeparatorOption() { + return (
) +} + +type SubMenuOptionProps = MenuOptionProps & { +} + +type SubMenuState = { + isOpen: boolean; +} + +class SubMenuOption extends React.Component { + state = { + isOpen: false + } + + handleMouseEnter = () => { + this.setState({isOpen: true}); + } + + close = () => { + this.setState({isOpen: false}); + } + + render() { + return ( +
+
{this.props.name}
+
+ {this.state.isOpen && + + {this.props.children} + + } +
+ ) + } +} + +type ColorOptionProps = MenuOptionProps & { + icon?: "checked" | "sortUp" | "sortDown" | undefined, +} + +class ColorOption extends React.Component { + render() { + const {name, icon} = this.props; + return ( +
+
{name}
+ {icon &&
} +
+
+ ) + } +} + +type SwitchOptionProps = MenuOptionProps & { + isOn: boolean, + icon?: "checked" | "sortUp" | "sortDown" | undefined, +} + +class SwitchOption extends React.Component { + handleOnClick = () => { + this.props.onClick(this.props.id) + } + render() { + const {name, icon, isOn} = this.props; + return ( +
+
{name}
+ {icon &&
} +
+
+
+
+ ); + } +} + +type TextOptionProps = MenuOptionProps & { + icon?: "checked" | "sortUp" | "sortDown" | undefined, +} +class TextOption extends React.Component { + handleOnClick = () => { + this.props.onClick(this.props.id) + } + + render() { + const {name, icon} = this.props; + return ( +
+
{name}
+ {icon &&
} +
+ ); + } +} + +type MenuProps = { + children: React.ReactNode + onClose: () => void +} + +export default class Menu extends React.Component { + static Color = ColorOption + static SubMenu = SubMenuOption + static Switch = SwitchOption + 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 ( +
+
+ {this.props.children} +
+
+ ) + } +} From bbf9fb10de26b97a10b84da2d500a6b2cf6d32dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Wed, 14 Oct 2020 12:39:41 +0200 Subject: [PATCH 2/3] Finishing the migration of viewMenu into a component --- src/client/components/boardComponent.tsx | 70 +------------------ src/client/components/tableComponent.tsx | 46 ++++++++----- src/client/components/viewMenu.tsx | 85 ++++++++++++++++++++++++ src/client/octoUtils.tsx | 69 ------------------- 4 files changed, 117 insertions(+), 153 deletions(-) create mode 100644 src/client/components/viewMenu.tsx diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx index 9ea23b6c1..d6803ac3b 100644 --- a/src/client/components/boardComponent.tsx +++ b/src/client/components/boardComponent.tsx @@ -6,7 +6,7 @@ import { IPropertyOption } from "../board" import { BoardTree } from "../boardTree" import { CardFilter } from "../cardFilter" import { Constants } from "../constants" -import Menu from "../widgets/menu" +import ViewMenu from "../components/viewMenu" import { Menu as OldMenu } from "../menu" import { Mutator } from "../mutator" import { IBlock, IPageController } from "../octoTypes" @@ -19,74 +19,6 @@ import { BoardColumn } from "./boardColumn" import { Button } from "./button" import { Editable } from "./editable" -type ViewMenuProps = { - mutator: Mutator, - boardTree?: BoardTree - pageController: IPageController, - board: Board, - onClose: () => void, -} -function ViewMenu({board, onClose, boardTree, mutator, pageController}: ViewMenuProps) { - const handleDeleteView = async (id: string) => { - Utils.log(`deleteView`) - const view = boardTree.activeView - const nextView = boardTree.views.find(o => o !== view) - await mutator.deleteBlock(view, "delete view") - pageController.showView(nextView.id) - } - - const handleViewClick = (id: string) => { - Utils.log(`view ` + id) - const view = boardTree.views.find(o => o.id === id) - pageController.showView(view.id) - } - - const handleAddViewBoard = async (id: string) => { - Utils.log(`addview-board`) - const view = new BoardView() - view.title = "Board View" - view.viewType = "board" - view.parentId = board.id - - const oldViewId = boardTree.activeView.id - - await mutator.insertBlock( - view, - "add view", - async () => { pageController.showView(view.id) }, - async () => { pageController.showView(oldViewId) }) - } - - const handleAddViewTable = async (id: string) => { - Utils.log(`addview-table`) - const view = new BoardView() - view.title = "Table View" - view.viewType = "table" - view.parentId = board.id - view.visiblePropertyIds = board.cardProperties.map(o => o.id) - - const oldViewId = boardTree.activeView.id - - await mutator.insertBlock( - view, - "add view", - async () => { pageController.showView(view.id) }, - async () => { pageController.showView(oldViewId) }) - } - - return ( - - {boardTree.views.map((view) => ())} - - {boardTree.views.length > 1 && } - - - - - - ); -} - type Props = { mutator: Mutator, boardTree?: BoardTree diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx index 4179aea1e..298f41a20 100644 --- a/src/client/components/tableComponent.tsx +++ b/src/client/components/tableComponent.tsx @@ -5,7 +5,8 @@ import { BlockIcons } from "../blockIcons" import { IPropertyTemplate } from "../board" import { BoardTree } from "../boardTree" import { CsvExporter } from "../csvExporter" -import { Menu } from "../menu" +import ViewMenu from "../components/viewMenu" +import { Menu as OldMenu } from "../menu" import { Mutator } from "../mutator" import { IBlock, IPageController } from "../octoTypes" import { OctoUtils } from "../octoUtils" @@ -23,6 +24,7 @@ type Props = { type State = { isHoverOnCover: boolean isSearching: boolean + viewMenu: boolean } class TableComponent extends React.Component { @@ -33,7 +35,7 @@ class TableComponent extends React.Component { constructor(props: Props) { super(props) - this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() } + this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false} } componentDidUpdate(prevPros: Props, prevState: State) { @@ -85,7 +87,21 @@ class TableComponent extends React.Component {
{ mutator.changeTitle(activeView, text) }} /> -
{ OctoUtils.showViewMenu(e, mutator, boardTree, pageController) }}>
+
this.setState({viewMenu: true})} + > + {this.state.viewMenu && + this.setState({viewMenu:false})} + mutator={mutator} + boardTree={boardTree} + pageController={pageController} + />} +
+
{ this.propertiesClicked(e) }}>Properties
{ this.filterClicked(e) }}>Filter
@@ -198,11 +214,11 @@ class TableComponent extends React.Component { const { mutator, boardTree } = this.props const { board } = boardTree - Menu.shared.options = [ + OldMenu.shared.options = [ { id: "random", name: "Random" }, { id: "remove", name: "Remove Icon" }, ] - Menu.shared.onMenuClicked = (optionId: string, type?: string) => { + OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => { switch (optionId) { case "remove": mutator.changeIcon(board, undefined, "remove icon") @@ -213,7 +229,7 @@ class TableComponent extends React.Component { break } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } private async propertiesClicked(e: React.MouseEvent) { @@ -221,12 +237,12 @@ class TableComponent extends React.Component { const { activeView } = boardTree const selectProperties = boardTree.board.cardProperties - Menu.shared.options = selectProperties.map((o) => { + OldMenu.shared.options = selectProperties.map((o) => { const isVisible = activeView.visiblePropertyIds.includes(o.id) return { id: o.id, name: o.name, type: "switch", isOn: isVisible } }) - Menu.shared.onMenuToggled = async (id: string, isOn: boolean) => { + OldMenu.shared.onMenuToggled = async (id: string, isOn: boolean) => { const property = selectProperties.find(o => o.id === id) Utils.assertValue(property) Utils.log(`Toggle property ${property.name} ${isOn}`) @@ -239,7 +255,7 @@ class TableComponent extends React.Component { } await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds) } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } private filterClicked(e: React.MouseEvent) { @@ -250,12 +266,12 @@ class TableComponent extends React.Component { private async optionsClicked(e: React.MouseEvent) { const { boardTree } = this.props - Menu.shared.options = [ + OldMenu.shared.options = [ { id: "exportCsv", name: "Export to CSV" }, { id: "exportBoardArchive", name: "Export board archive" }, ] - Menu.shared.onMenuClicked = async (id: string) => { + OldMenu.shared.onMenuClicked = async (id: string) => { switch (id) { case "exportCsv": { CsvExporter.exportTableCsv(boardTree) @@ -267,7 +283,7 @@ class TableComponent extends React.Component { } } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } private async headerClicked(e: React.MouseEvent, templateId: string) { @@ -288,8 +304,8 @@ class TableComponent extends React.Component { options.push({ id: "delete", name: "Delete" }) } - Menu.shared.options = options - Menu.shared.onMenuClicked = async (optionId: string, type?: string) => { + OldMenu.shared.options = options + OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => { switch (optionId) { case "sortAscending": { const newSortOptions = [ @@ -342,7 +358,7 @@ class TableComponent extends React.Component { } } } - Menu.shared.showAtElement(e.target as HTMLElement) + OldMenu.shared.showAtElement(e.target as HTMLElement) } async showCard(card: IBlock) { diff --git a/src/client/components/viewMenu.tsx b/src/client/components/viewMenu.tsx new file mode 100644 index 000000000..50fe51347 --- /dev/null +++ b/src/client/components/viewMenu.tsx @@ -0,0 +1,85 @@ +import React from "react" + +import { Mutator } from "../mutator" +import Menu from "../widgets/menu" +import { Board } from "../board" +import { BoardTree } from "../boardTree" +import { IPageController } from "../octoTypes" +import { Utils } from "../utils" +import { BoardView } from "../boardView" + +type Props = { + mutator: Mutator, + boardTree?: BoardTree + pageController: IPageController, + board: Board, + onClose: () => void, +} +export default class ViewMenu extends React.Component { + handleDeleteView = async (id: string) => { + const {board, boardTree, mutator, pageController} = this.props; + Utils.log(`deleteView`) + const view = boardTree.activeView + const nextView = boardTree.views.find(o => o !== view) + await mutator.deleteBlock(view, "delete view") + pageController.showView(nextView.id) + } + + handleViewClick = (id: string) => { + const {boardTree, pageController} = this.props; + Utils.log(`view ` + id) + const view = boardTree.views.find(o => o.id === id) + pageController.showView(view.id) + } + + handleAddViewBoard = async (id: string) => { + const {board, boardTree, mutator, pageController} = this.props; + Utils.log(`addview-board`) + const view = new BoardView() + view.title = "Board View" + view.viewType = "board" + view.parentId = board.id + + const oldViewId = boardTree.activeView.id + + await mutator.insertBlock( + view, + "add view", + async () => { pageController.showView(view.id) }, + async () => { pageController.showView(oldViewId) }) + } + + handleAddViewTable = async (id: string) => { + const {board, boardTree, mutator, pageController} = this.props; + + Utils.log(`addview-table`) + const view = new BoardView() + view.title = "Table View" + view.viewType = "table" + view.parentId = board.id + view.visiblePropertyIds = board.cardProperties.map(o => o.id) + + const oldViewId = boardTree.activeView.id + + await mutator.insertBlock( + view, + "add view", + async () => { pageController.showView(view.id) }, + async () => { pageController.showView(oldViewId) }) + } + + render() { + const {board, onClose, boardTree, mutator, pageController} = this.props; + return ( + + {boardTree.views.map((view) => ())} + + {boardTree.views.length > 1 && } + + + + + + ); + } +} diff --git a/src/client/octoUtils.tsx b/src/client/octoUtils.tsx index 0df9702e0..93e1f5c67 100644 --- a/src/client/octoUtils.tsx +++ b/src/client/octoUtils.tsx @@ -9,75 +9,6 @@ import { IBlock, IPageController } from "./octoTypes" import { Utils } from "./utils" class OctoUtils { - static async showViewMenu(e: React.MouseEvent, mutator: Mutator, boardTree: BoardTree, pageController: IPageController) { - const { board } = boardTree - - const options: MenuOption[] = boardTree.views.map(view => ({ id: view.id, name: view.title || "Untitled View" })) - options.push({ id: "", name: "", type: "separator" }) - if (boardTree.views.length > 1) { - options.push({ id: "__deleteView", name: "Delete View" }) - } - options.push({ id: "__addview", name: "Add View", type: "submenu" }) - - const addViewMenuOptions = [ - { id: "board", name: "Board" }, - { id: "table", name: "Table" } - ] - Menu.shared.subMenuOptions.set("__addview", addViewMenuOptions) - - Menu.shared.options = options - Menu.shared.onMenuClicked = async (optionId: string, type?: string) => { - switch (optionId) { - case "__deleteView": { - Utils.log(`deleteView`) - const view = boardTree.activeView - const nextView = boardTree.views.find(o => o !== view) - await mutator.deleteBlock(view, "delete view") - pageController.showView(nextView.id) - break - } - case "__addview-board": { - Utils.log(`addview-board`) - const view = new BoardView() - view.title = "Board View" - view.viewType = "board" - view.parentId = board.id - - const oldViewId = boardTree.activeView.id - - await mutator.insertBlock( - view, - "add view", - async () => { pageController.showView(view.id) }, - async () => { pageController.showView(oldViewId) }) - break - } - case "__addview-table": { - Utils.log(`addview-table`) - const view = new BoardView() - view.title = "Table View" - view.viewType = "table" - view.parentId = board.id - view.visiblePropertyIds = board.cardProperties.map(o => o.id) - - const oldViewId = boardTree.activeView.id - - await mutator.insertBlock( - view, - "add view", - async () => { pageController.showView(view.id) }, - async () => { pageController.showView(oldViewId) }) - break - } - default: { - const view = boardTree.views.find(o => o.id === optionId) - pageController.showView(view.id) - } - } - } - Menu.shared.showAtElement(e.target as HTMLElement) - } - static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate) { let displayValue: string switch (propertyTemplate.type) { From 83c040511d19984893aaaae0626e641e63162112 Mon Sep 17 00:00:00 2001 From: Chen-I Lim Date: Wed, 14 Oct 2020 12:39:34 -0700 Subject: [PATCH 3/3] Cleanup merge --- src/client/components/boardComponent.tsx | 6 +- src/client/components/rootPortal.tsx | 60 +++++------ src/client/components/tableComponent.tsx | 34 +++--- src/client/components/viewMenu.tsx | 129 +++++++++++------------ 4 files changed, 113 insertions(+), 116 deletions(-) diff --git a/src/client/components/boardComponent.tsx b/src/client/components/boardComponent.tsx index c5616bf8b..510c37d54 100644 --- a/src/client/components/boardComponent.tsx +++ b/src/client/components/boardComponent.tsx @@ -5,16 +5,14 @@ import { BlockIcons } from "../blockIcons" import { IPropertyOption } from "../board" import { BoardTree } from "../boardTree" import { CardFilter } from "../cardFilter" -import { Constants } from "../constants" import ViewMenu from "../components/viewMenu" +import { Constants } from "../constants" import { Menu as OldMenu } from "../menu" import { Mutator } from "../mutator" import { IBlock } from "../octoTypes" import { OctoUtils } from "../octoUtils" import { Utils } from "../utils" import { BoardCard } from "./boardCard" -import { Board } from "../board" -import { BoardView } from "../boardView" import { BoardColumn } from "./boardColumn" import Button from "./button" import { Editable } from "./editable" @@ -106,7 +104,7 @@ class BoardComponent extends React.Component { onClose={() => this.setState({ viewMenu: false })} mutator={mutator} boardTree={boardTree} - pageController={pageController} + showView={showView} />}
diff --git a/src/client/components/rootPortal.tsx b/src/client/components/rootPortal.tsx index aa5ddce90..f646523aa 100644 --- a/src/client/components/rootPortal.tsx +++ b/src/client/components/rootPortal.tsx @@ -1,44 +1,44 @@ // Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; -import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; +import React from 'react' +import ReactDOM from 'react-dom' +import PropTypes from 'prop-types' type Props = { - children: React.ReactNode + children: React.ReactNode } export default class RootPortal extends React.PureComponent { - el: HTMLDivElement + el: HTMLDivElement - static propTypes = { - children: PropTypes.node, - } + static propTypes = { + children: PropTypes.node, + } - constructor(props: Props) { - super(props); - this.el = document.createElement('div'); - } + constructor(props: Props) { + super(props) + this.el = document.createElement('div') + } - componentDidMount() { - const rootPortal = document.getElementById('root-portal'); - if (rootPortal) { - rootPortal.appendChild(this.el); - } - } + componentDidMount() { + const rootPortal = document.getElementById('root-portal') + if (rootPortal) { + rootPortal.appendChild(this.el) + } + } - componentWillUnmount() { - const rootPortal = document.getElementById('root-portal'); - if (rootPortal) { - rootPortal.removeChild(this.el); - } - } + componentWillUnmount() { + const rootPortal = document.getElementById('root-portal') + if (rootPortal) { + rootPortal.removeChild(this.el) + } + } - render() { - return ReactDOM.createPortal( - this.props.children, - this.el, - ); - } + render() { + return ReactDOM.createPortal( + this.props.children, + this.el, + ) + } } diff --git a/src/client/components/tableComponent.tsx b/src/client/components/tableComponent.tsx index a2a447fb6..a55508ae5 100644 --- a/src/client/components/tableComponent.tsx +++ b/src/client/components/tableComponent.tsx @@ -27,7 +27,7 @@ type Props = { type State = { isHoverOnCover: boolean isSearching: boolean - viewMenu: boolean + viewMenu: boolean } class TableComponent extends React.Component { @@ -38,7 +38,7 @@ class TableComponent 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(), viewMenu: false } } componentDidUpdate(prevPros: Props, prevState: State) { @@ -90,21 +90,21 @@ class TableComponent extends React.Component {
{ mutator.changeTitle(activeView, text) }} /> -
this.setState({viewMenu: true})} - > - {this.state.viewMenu && - this.setState({viewMenu:false})} - mutator={mutator} - boardTree={boardTree} - pageController={pageController} - />} -
-
+
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 50fe51347..e5b48c34f 100644 --- a/src/client/components/viewMenu.tsx +++ b/src/client/components/viewMenu.tsx @@ -1,85 +1,84 @@ import React from "react" - -import { Mutator } from "../mutator" -import Menu from "../widgets/menu" import { Board } from "../board" import { BoardTree } from "../boardTree" -import { IPageController } from "../octoTypes" -import { Utils } from "../utils" import { BoardView } from "../boardView" +import { Mutator } from "../mutator" +import { Utils } from "../utils" +import Menu from "../widgets/menu" type Props = { mutator: Mutator, boardTree?: BoardTree - pageController: IPageController, - board: Board, - onClose: () => void, + board: Board, + showView: (id: string) => void + onClose: () => void, } + export default class ViewMenu extends React.Component { - handleDeleteView = async (id: string) => { - const {board, boardTree, mutator, pageController} = this.props; - Utils.log(`deleteView`) - const view = boardTree.activeView - const nextView = boardTree.views.find(o => o !== view) - await mutator.deleteBlock(view, "delete view") - pageController.showView(nextView.id) - } + handleDeleteView = async (id: string) => { + const { board, boardTree, mutator, showView } = this.props + Utils.log(`deleteView`) + const view = boardTree.activeView + const nextView = boardTree.views.find(o => o !== view) + await mutator.deleteBlock(view, "delete view") + showView(nextView.id) + } - handleViewClick = (id: string) => { - const {boardTree, pageController} = this.props; - Utils.log(`view ` + id) - const view = boardTree.views.find(o => o.id === id) - pageController.showView(view.id) - } + handleViewClick = (id: string) => { + const { boardTree, showView } = this.props + Utils.log(`view ` + id) + const view = boardTree.views.find(o => o.id === id) + showView(view.id) + } - handleAddViewBoard = async (id: string) => { - const {board, boardTree, mutator, pageController} = this.props; - Utils.log(`addview-board`) - const view = new BoardView() - view.title = "Board View" - view.viewType = "board" - view.parentId = board.id + handleAddViewBoard = async (id: string) => { + const { board, boardTree, mutator, showView } = this.props + Utils.log(`addview-board`) + const view = new BoardView() + view.title = "Board View" + view.viewType = "board" + view.parentId = board.id - const oldViewId = boardTree.activeView.id + const oldViewId = boardTree.activeView.id - await mutator.insertBlock( - view, - "add view", - async () => { pageController.showView(view.id) }, - async () => { pageController.showView(oldViewId) }) - } + await mutator.insertBlock( + view, + "add view", + async () => { showView(view.id) }, + async () => { showView(oldViewId) }) + } - handleAddViewTable = async (id: string) => { - const {board, boardTree, mutator, pageController} = this.props; + handleAddViewTable = async (id: string) => { + const { board, boardTree, mutator, showView } = this.props - Utils.log(`addview-table`) - const view = new BoardView() - view.title = "Table View" - view.viewType = "table" - view.parentId = board.id - view.visiblePropertyIds = board.cardProperties.map(o => o.id) + Utils.log(`addview-table`) + const view = new BoardView() + view.title = "Table View" + view.viewType = "table" + view.parentId = board.id + view.visiblePropertyIds = board.cardProperties.map(o => o.id) - const oldViewId = boardTree.activeView.id + const oldViewId = boardTree.activeView.id - await mutator.insertBlock( - view, - "add view", - async () => { pageController.showView(view.id) }, - async () => { pageController.showView(oldViewId) }) - } + await mutator.insertBlock( + view, + "add view", + async () => { showView(view.id) }, + async () => { showView(oldViewId) }) + } - render() { - const {board, onClose, boardTree, mutator, pageController} = this.props; - return ( - - {boardTree.views.map((view) => ())} - - {boardTree.views.length > 1 && } - - - - - - ); - } + render() { + const { onClose, boardTree } = this.props + return ( + + {boardTree.views.map((view) => ())} + + {boardTree.views.length > 1 && } + + + + + + ) + } }