Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MUI X update to v7 #457

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"@mui/icons-material": "^5.15.14",
"@mui/lab": "5.0.0-alpha.169",
"@mui/material": "^5.15.14",
"@mui/x-tree-view": "^7.5.0",
"ag-grid-community": "^31.0.0",
"ag-grid-react": "^31.2.0",
"notistack": "^3.0.1",
Expand All @@ -74,7 +75,7 @@
"@mui/icons-material": "^5.15.14",
"@mui/lab": "5.0.0-alpha.169",
"@mui/material": "^5.15.14",
"@mui/x-tree-view": "^6.17.0",
"@mui/x-tree-view": "^7.5.0",
"@react-hook/window-size": "^3.1.1",
"@types/autosuggest-highlight": "^3.2.3",
"@types/eslint": "^8.56.7",
Expand Down
5 changes: 2 additions & 3 deletions src/components/ReportViewer/report-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { PropsWithChildren, ReactNode, useContext } from 'react';
import { Box, Theme, Typography } from '@mui/material';
import { alpha, styled } from '@mui/system';
import { TreeItem, TreeItemProps } from '@mui/lab';
import { TreeItem, TreeItemProps } from '@mui/x-tree-view';
import { Label } from '@mui/icons-material';
import ReportTreeViewContext from './report-tree-view-context';

Expand Down Expand Up @@ -81,7 +81,6 @@ const styles = {
};

export interface ReportItemProps extends TreeItemProps {
nodeId: string;
labelText: ReactNode;
labelIconColor: string;
className?: any;
Expand All @@ -91,7 +90,7 @@ const ReportItem = (props: PropsWithChildren<ReportItemProps>) => {
// using a context because TreeItem uses useMemo on this. See report-viewer.js for the provider
const { isHighlighted } = useContext(ReportTreeViewContext);

const highlighted = isHighlighted ? isHighlighted(props.nodeId) : false;
const highlighted = isHighlighted ? isHighlighted(props.itemId) : false;

const { labelText, labelIconColor, className, ...other } = props;

Expand Down
34 changes: 20 additions & 14 deletions src/components/ReportViewer/report-viewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { Grid } from '@mui/material';
import LogTable from './log-table';
import ReportTreeViewContext from './report-tree-view-context';
import LogReportItem from './log-report-item';
import { TreeView } from '@mui/x-tree-view';
import { SimpleTreeView } from '@mui/x-tree-view';
import { Report } from './report.type';
import { LogSeverities } from './log-severity';

Expand All @@ -40,6 +40,10 @@ const styles = {
},
};

function EmptyIcon() {
return <div style={{ width: 24 }} />;
}

export interface ReportViewerProps {
jsonReport: Report;
maxSubReports?: number;
Expand Down Expand Up @@ -90,7 +94,7 @@ export default function ReportViewer({
labelIconColor={logReport.getHighestSeverity().colorName}
key={logReport.getId().toString()}
sx={styles.treeItem}
nodeId={logReport.getId().toString()}
itemId={logReport.getId().toString()}
>
{logReport
.getSubReports()
Expand Down Expand Up @@ -121,14 +125,14 @@ export default function ReportViewer({
}
};

const handleSelectNode = (event: SyntheticEvent, nodeId: string) => {
const handleSelectNode = (event: SyntheticEvent, nodeId: string | null) => {
selectNode(nodeId);
};

const selectNode = (nodeId: string) => {
const selectNode = (nodeId: string | null) => {
if (selectedNode !== nodeId) {
setSelectedNode(nodeId);
setLogs(allReports.current[nodeId].getAllLogs());
nodeId && setLogs(allReports.current[nodeId].getAllLogs());
setHighlightedReportId(null);
}
};
Expand Down Expand Up @@ -186,18 +190,20 @@ export default function ReportViewer({
accordingly */}
<ReportTreeViewContext.Provider value={isHighlighted}>
{/*TODO do we need to useMemo/useCallback these props to avoid rerenders ?*/}
<TreeView
<SimpleTreeView
sx={styles.treeView}
defaultCollapseIcon={<ArrowDropDownIcon />}
defaultExpandIcon={<ArrowRightIcon />}
defaultEndIcon={<div style={{ width: 24 }} />}
onNodeToggle={handleToggleNode}
onNodeSelect={handleSelectNode}
selected={selectedNode}
expanded={expandedNodes}
slots={{
expandIcon: ArrowRightIcon,
collapseIcon: ArrowDropDownIcon,
endIcon: EmptyIcon,
}}
onExpandedItemsChange={handleToggleNode}
onSelectedItemsChange={handleSelectNode}
selectedItems={selectedNode}
expandedItems={expandedNodes}
>
{treeView.current}
</TreeView>
</SimpleTreeView>
</ReportTreeViewContext.Provider>
</Grid>
<Grid item xs={12} sm={9} style={{ height: '95%' }}>
Expand Down
59 changes: 33 additions & 26 deletions src/components/TreeViewFinder/TreeViewFinder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,11 @@ import {
ModalProps,
} from '@mui/material';

import { TreeItem, TreeView, TreeViewClasses } from '@mui/x-tree-view';
import {
TreeItem,
SimpleTreeView,
SimpleTreeViewClasses,
} from '@mui/x-tree-view';
import {
Check as CheckIcon,
ChevronRight as ChevronRightIcon,
Expand Down Expand Up @@ -95,7 +99,7 @@ export interface TreeViewFinderProps {
selected?: string[];
expanded?: string[];
multiSelect?: boolean;
classes?: Partial<TreeViewClasses>;
classes?: Partial<SimpleTreeViewClasses>;
className?: string;

// dialog props
Expand Down Expand Up @@ -299,7 +303,7 @@ const TreeViewFinder = (props: TreeViewFinderProps) => {
/* User Interaction management */
const handleNodeSelect = (
_e: React.SyntheticEvent,
values: string | string[]
values: string | string[] | null
) => {
// Default management
if (multiSelect && Array.isArray(values)) {
Expand All @@ -309,7 +313,7 @@ const TreeViewFinder = (props: TreeViewFinderProps) => {
} else {
if (!Array.isArray(values)) {
// Toggle selection to allow unselection
if (selected?.includes(values)) {
if (!values || selected?.includes(values)) {
setSelected([]);
} else {
setSelected(
Expand Down Expand Up @@ -396,22 +400,24 @@ const TreeViewFinder = (props: TreeViewFinderProps) => {
return (
<TreeItem
key={node.id}
nodeId={node.id}
itemId={node.id}
label={renderTreeItemLabel(node)}
expandIcon={
showChevron(node) ? (
<ChevronRightIcon
className={composeClasses(classes, cssIcon)}
/>
) : null
}
collapseIcon={
showChevron(node) ? (
<ExpandMoreIcon
className={composeClasses(classes, cssIcon)}
/>
) : null
}
slots={{
expandIcon: showChevron(node)
? ChevronRightIcon
: undefined,
collapseIcon: showChevron(node)
? ExpandMoreIcon
: undefined,
}}
slotProps={{
expandIcon: {
className: composeClasses(classes, cssIcon),
},
collapseIcon: {
className: composeClasses(classes, cssIcon),
},
}}
ref={(element) => {
if (selectedProp?.includes(node.id)) {
scrollRef.current.push(element);
Expand All @@ -433,12 +439,13 @@ const TreeViewFinder = (props: TreeViewFinderProps) => {
if (!multiSelect) {
return {
multiSelect: false as const,
selected: selected && selected.length > 0 ? selected.at(0) : '',
selectedItems:
selected && selected.length > 0 ? selected.at(0) : '',
};
}
return {
multiSelect: true as const,
selected: selected ?? [],
selectedItems: selected ?? [],
};
};

Expand Down Expand Up @@ -475,12 +482,12 @@ const TreeViewFinder = (props: TreeViewFinderProps) => {
)}
</DialogContentText>

<TreeView
<SimpleTreeView
// Controlled props
expanded={expanded}
expandedItems={expanded}
// events
onNodeToggle={handleNodeToggle}
onNodeSelect={handleNodeSelect}
onExpandedItemsChange={handleNodeToggle}
onSelectedItemsChange={handleNodeSelect}
// Uncontrolled props
{...getTreeViewSelectionProps()}
>
Expand All @@ -489,7 +496,7 @@ const TreeViewFinder = (props: TreeViewFinderProps) => {
.sort(sortMethod)
.map((child) => renderTree(child))
: null}
</TreeView>
</SimpleTreeView>
</DialogContent>
<DialogActions>
<CancelButton
Expand Down
Loading