diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx | 63 |
1 files changed, 28 insertions, 35 deletions
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx index b0e962daa..954c074c1 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx @@ -15,42 +15,38 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from "react"; -import { Theme } from '@mui/material/styles'; +import React from 'react'; +import Breadcrumbs from '@mui/material/Breadcrumbs'; +import Link from '@mui/material/Link'; +import { Theme } from '@mui/material/styles'; import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; - +import withStyles from '@mui/styles/withStyles'; +import { RouteComponentProps } from 'react-router-dom'; +import { SearchMode, TreeView, TreeViewCtorType } from '../../../../framework/src/components/material-ui/treeView'; import { renderObject } from '../../../../framework/src/components/objectDump'; import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { TreeView, TreeViewCtorType, SearchMode } from '../../../../framework/src/components/material-ui/treeView'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; - -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Link from '@mui/material/Link'; - -import { updateInventoryTreeAsyncAction, selectInventoryNodeAsyncAction, UpdateSelectedNodeAction, UpdateExpandedNodesAction, setSearchTermAction } from "../actions/inventoryTreeActions"; -import { TreeDemoItem } from "../models/inventory"; - -import { RouteComponentProps } from 'react-router-dom'; +import { selectInventoryNodeAsyncAction, setSearchTermAction, UpdateExpandedNodesAction, updateInventoryTreeAsyncAction, UpdateSelectedNodeAction } from '../actions/inventoryTreeActions'; +import { TreeDemoItem } from '../models/inventory'; const styles = (theme: Theme) => createStyles({ root: { - flex: "1 0 0%", - display: "flex", - flexDirection: "row", + flex: '1 0 0%', + display: 'flex', + flexDirection: 'row', }, tree: { - flex: "1 0 0%", - minWidth: "250px", - padding: `0px ${theme.spacing(1)}` + wordWrap: 'break-word', + minWidth: '250px', + padding: `0px ${theme.spacing(1)}`, }, details: { - flex: "5 0 0%", - padding: `0px ${theme.spacing(1)}` - } + flex: '5 0 0%', + padding: `0px ${theme.spacing(1)}`, + }, }); const mapProps = (state: IApplicationStoreState) => ({ @@ -68,19 +64,19 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ setSearchTerm: (searchTerm: string) => dispatcher.dispatch(setSearchTermAction(searchTerm)), }); -const propsChache = Symbol("PropsCache"); +const propsChache = Symbol('PropsCache'); const InventoryTree = TreeView as any as TreeViewCtorType<string>; -type TreeviewComponentProps = RouteComponentProps<{ mountId: string }> & WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch> +type TreeviewComponentProps = RouteComponentProps<{ mountId: string }> & WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch>; type TreeviewComponentState = { [propsChache]: { rootNodes?: TreeDemoItem[]; }; rootNodes: TreeDemoItem[]; -} +}; class DashboardComponent extends React.Component<TreeviewComponentProps, TreeviewComponentState> { @@ -96,14 +92,15 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie static getDerivedStateFromProps(props: TreeviewComponentProps, state: TreeviewComponentState) { if (state[propsChache].rootNodes != props.rootNodes) { - state = { ...state, rootNodes: props.rootNodes } + // eslint-disable-next-line no-param-reassign + state = { ...state, rootNodes: props.rootNodes }; } return state; } render() { const { classes, updateInventoryTree, updateExpendedNodes, expendedItems, selectedNode, selectTreeNode, searchTerm, match: { params: { mountId } } } = this.props; - const scrollbar = { overflow: "auto", paddingRight: "20px" } + const scrollbar = { overflow: 'auto', paddingRight: '20px' }; let filteredDashboardPath = `/inventory/dashboard/${this.props.match.params.mountId}`; let basePath = `/inventory/${this.props.match.params.mountId}`; @@ -128,6 +125,7 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie <br /> <div style={scrollbar} className={classes.root}> <InventoryTree className={classes.tree} items={this.state.rootNodes} enableSearchBar initialSearchTerm={searchTerm} searchMode={SearchMode.OnEnter} searchTerm={searchTerm} + // eslint-disable-next-line @typescript-eslint/no-shadow onSearch={(searchTerm) => updateInventoryTree(mountId, searchTerm)} expandedItems={expendedItems} onFolderClick={(item) => { const indexOfItemToToggle = expendedItems.indexOf(item); if (indexOfItemToToggle === -1) { @@ -141,20 +139,15 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie }} onItemClick={(elm) => selectTreeNode(elm.value)} /> <div className={classes.details}>{ - selectedNode && renderObject(selectedNode, "tree-view") || null + selectedNode && renderObject(selectedNode, 'tree-view') || null }</div> </div> </div> ); } - componentDidMount() { - const { updateInventoryTree, searchTerm, match: { params: { mountId } } } = this.props; - updateInventoryTree(mountId, searchTerm); - } - componentWillUnmount() { - this.props.setSearchTerm("*"); + this.props.setSearchTerm('*'); } } |