Skip to content

Commit

Permalink
Formatted code with Prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@LightFLP
LightFLP committed Jan 15, 2024
1 parent cb9575e commit 4798a87
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 98 deletions.
67 changes: 36 additions & 31 deletions src/viewer/structures/StructureDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from '@mui/material/IconButton';
import IconButton from "@mui/material/IconButton";
import StructureTable from "./StructureTable";
import { ContextMenuItem, Header, StructureDefinition, StructureEntry, Wildcard } from "../types";
import { StructureHeaderColumnType } from "../constants";
Expand Down Expand Up @@ -45,8 +45,8 @@ interface Props {
onStructureUpdate: () => void;
onNavigateStructureMatches: (isGoingForward: boolean) => void;
onMatchStructure: (expression: string) => void;
onStructureDefinitionSave:(structureDefinition: string) => void;
onStructureDefinitionLoad:() => void;
onStructureDefinitionSave: (structureDefinition: string) => void;
onStructureDefinitionLoad: () => void;
onExportStructureMatches: () => void;
onDefineSegment: (expression: string) => void;
}
Expand All @@ -62,7 +62,6 @@ interface State {
}

export default class StructureDialog extends React.Component<Props, State> {

constructor(props: Props) {
super(props);
const { logHeaderColumns, logHeaderColumnsTypes, logSelectedRows } = this.props;
Expand All @@ -88,17 +87,15 @@ export default class StructureDialog extends React.Component<Props, State> {
componentDidMount(): void {
// trigger manually, as update function isn't called for initial render.
// removing the trigger to keep persistence
//this.props.onStructureUpdate();
//this.props.onStructureUpdate();
}

shouldComponentUpdate(
nextProps: Readonly<Props>,
nextState: Readonly<State>,
_nextContext: any,
): boolean {
const isLoadingStructureDefinition = (
nextProps.loadedStructureDefinition !== null
);
const isLoadingStructureDefinition = nextProps.loadedStructureDefinition !== null;
const arelogHeaderColumnsUpdating = !isEqual(
this.props.logHeaderColumns,
nextProps.logHeaderColumns,
Expand Down Expand Up @@ -158,20 +155,20 @@ export default class StructureDialog extends React.Component<Props, State> {
}

componentDidUpdate(prevProps: Readonly<Props>, _prevState: Readonly<State>): void {
const {loadedStructureDefinition, logSelectedRows} = this.props;
const { loadedStructureDefinition, logSelectedRows } = this.props;

if(this.state.isLoadingStructureDefintion && loadedStructureDefinition !== null) {
if (this.state.isLoadingStructureDefintion && loadedStructureDefinition !== null) {
this.setState({
isLoadingStructureDefintion: false,
isStructureMatching: false,
structureHeaderColumns: loadedStructureDefinition.headerColumns,
structureHeaderColumnsTypes: loadedStructureDefinition.headerColumnsTypes,
structureEntries: loadedStructureDefinition.entries,
wildcards: loadedStructureDefinition.wildcards});

structureEntries: loadedStructureDefinition.entries,
wildcards: loadedStructureDefinition.wildcards,
});

this.props.onStructureUpdate();
}
else if (logSelectedRows !== prevProps.logSelectedRows) {
} else if (logSelectedRows !== prevProps.logSelectedRows) {
this.updateStructure();
}
}
Expand Down Expand Up @@ -492,18 +489,24 @@ export default class StructureDialog extends React.Component<Props, State> {
}

saveStructureDefinition() {
const {structureHeaderColumns, structureHeaderColumnsTypes, structureEntries, wildcards} = this.state;
const {onStructureDefinitionSave} = this.props;
const { structureHeaderColumns, structureHeaderColumnsTypes, structureEntries, wildcards } =
this.state;
const { onStructureDefinitionSave } = this.props;

const structureDefiniton: StructureDefinition = { headerColumns: structureHeaderColumns, headerColumnsTypes: structureHeaderColumnsTypes, entries: structureEntries, wildcards: wildcards};
const structureDefiniton: StructureDefinition = {
headerColumns: structureHeaderColumns,
headerColumnsTypes: structureHeaderColumnsTypes,
entries: structureEntries,
wildcards: wildcards,
};
const structureDefinitonJSON = JSON.stringify(structureDefiniton);

onStructureDefinitionSave(structureDefinitonJSON);
}

loadStructureDefinition() {
this.props.onStructureDefinitionLoad();
this.setState({isLoadingStructureDefintion:true});
this.setState({ isLoadingStructureDefintion: true });
}

render() {
Expand Down Expand Up @@ -545,7 +548,7 @@ export default class StructureDialog extends React.Component<Props, State> {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
justifyContent: "space-between",
}}
>
<CustomWidthTooltip
Expand Down Expand Up @@ -594,17 +597,19 @@ export default class StructureDialog extends React.Component<Props, State> {
>
<i className="codicon codicon-question" />
</CustomWidthTooltip>
<StructureSettingsDropdown
onStructureDefinitionSave={this.saveStructureDefinition}
onStructureDefinitionLoad={this.loadStructureDefinition}/>
<IconButton
id="close-button"
aria-label="close"
size="small"
style={{ flex: 1 }}
onClick={() => this.props.onClose()}>
<CloseIcon className="structure-dialog-icon" fontSize="small"/>
</IconButton>
<StructureSettingsDropdown
onStructureDefinitionSave={this.saveStructureDefinition}
onStructureDefinitionLoad={this.loadStructureDefinition}
/>
<IconButton
id="close-button"
aria-label="close"
size="small"
style={{ flex: 1 }}
onClick={() => this.props.onClose()}
>
<CloseIcon className="structure-dialog-icon" fontSize="small" />
</IconButton>
</div>
</div>
<StructureTable
Expand Down
139 changes: 72 additions & 67 deletions src/viewer/structures/StructureSettingsDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import SaveIcon from '@mui/icons-material/Save';
import FileOpenIcon from '@mui/icons-material/FileOpen';
import SettingsIcon from '@mui/icons-material/Settings';
import { createTheme } from '@mui/material/styles';
import { MenuList } from '@mui/material';
import * as React from "react";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import SaveIcon from "@mui/icons-material/Save";
import FileOpenIcon from "@mui/icons-material/FileOpen";
import SettingsIcon from "@mui/icons-material/Settings";
import { createTheme } from "@mui/material/styles";
import { MenuList } from "@mui/material";

// const theme = createTheme({
// palette: {
Expand All @@ -22,63 +22,68 @@ import { MenuList } from '@mui/material';
// });

interface StructureSettingsDropdownProps {
onStructureDefinitionSave: () => void;
onStructureDefinitionLoad: () => void;
onStructureDefinitionSave: () => void;
onStructureDefinitionLoad: () => void;
}

export const StructureSettingsDropdown: React.FunctionComponent<StructureSettingsDropdownProps> = ({onStructureDefinitionSave, onStructureDefinitionLoad}) => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = (action: string) => {
if (action === 'save')
onStructureDefinitionSave();
else if (action === 'load')
onStructureDefinitionLoad();
export const StructureSettingsDropdown: React.FunctionComponent<StructureSettingsDropdownProps> = ({
onStructureDefinitionSave,
onStructureDefinitionLoad,
}) => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = (action: string) => {
if (action === "save") onStructureDefinitionSave();
else if (action === "load") onStructureDefinitionLoad();

setAnchorEl(null);
};
setAnchorEl(null);
};

return (
<div>
<IconButton
id="settings-button"
size="small"
aria-label='settings'
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
>
<SettingsIcon className='structure-dialog-icon' fontSize="small"/>
</IconButton>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={() => handleClose('')}
MenuListProps={{
'aria-labelledby': 'basic-button',
sx: { py: 0 }
}}
>
<MenuList className='structure-settings-dropdown'>
<MenuItem onClick={() => handleClose('save')}>
<ListItemIcon>
<SaveIcon className='structure-settings-dropdown-item' fontSize="small" />
</ListItemIcon>
<ListItemText className='structure-settings-dropdown-item'>Save Structure Definition</ListItemText>
</MenuItem>
<MenuItem onClick={() => handleClose('load')}>
<ListItemIcon>
<FileOpenIcon className='structure-settings-dropdown-item' fontSize="small" />
</ListItemIcon>
<ListItemText className='structure-settings-dropdown-item'>Load Structure Definition</ListItemText>
</MenuItem>
</MenuList>
</Menu>
</div>
);
}
return (
<div>
<IconButton
id="settings-button"
size="small"
aria-label="settings"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
<SettingsIcon className="structure-dialog-icon" fontSize="small" />
</IconButton>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={() => handleClose("")}
MenuListProps={{
"aria-labelledby": "basic-button",
sx: { py: 0 },
}}
>
<MenuList className="structure-settings-dropdown">
<MenuItem onClick={() => handleClose("save")}>
<ListItemIcon>
<SaveIcon className="structure-settings-dropdown-item" fontSize="small" />
</ListItemIcon>
<ListItemText className="structure-settings-dropdown-item">
Save Structure Definition
</ListItemText>
</MenuItem>
<MenuItem onClick={() => handleClose("load")}>
<ListItemIcon>
<FileOpenIcon className="structure-settings-dropdown-item" fontSize="small" />
</ListItemIcon>
<ListItemText className="structure-settings-dropdown-item">
Load Structure Definition
</ListItemText>
</MenuItem>
</MenuList>
</Menu>
</div>
);
};

0 comments on commit 4798a87

Please sign in to comment.