model-navigator-standalone
Version:
Standalone MDF graph model visualizer
154 lines (153 loc) • 4.19 kB
JavaScript
import "core-js/modules/web.dom-collections.iterator.js";
// this is a popup window that displays all acceptable values for a property
import React, { useEffect, useState } from 'react';
import { DialogContent, IconButton, Backdrop, Dialog, createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material';
import withStyles from '@mui/styles/withStyles';
import CloseIcon from '@mui/icons-material/Close';
import ListComponent from './ListComponent';
import ButtonComponent from './ButtonComponent';
// import DownloadFileTypeBtn from './DownloadFileTypeBtn';
const theme = {
components: {
MuiDialog: {
styleOverrides: {
paper: {
borderRadius: '5px',
padding: '0px 0px 0px 20px',
boxShadow: 'none',
overflowX: 'hidden',
overflowY: 'hidden'
},
paperScrollPaper: {
maxHeight: '575px'
}
}
},
MuiDialogContent: {
styleOverrides: {
root: {
padding: '15px 25px 35px 15px'
}
}
},
MuiBackdrop: {
styleOverrides: {
root: {
backgroundColor: '#4a4a4a52'
}
}
},
MuiIconButton: {
styleOverrides: {
root: {
textTransform: 'none',
padding: 'none',
'&:hover': {
backgroundColor: 'transparent',
cursor: 'pointer'
}
}
}
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: '#0d71a3'
}
}
}
}
};
const DialogComponent = _ref => {
let {
classes,
display,
closeHandler,
items,
maxNoOfItems,
maxNoOfItemDlgBox,
isSearchMode,
typeMatchList,
node,
property
} = _ref;
const [open, setOpen] = useState(display);
const [expand, setExpand] = useState(true);
const [values, setValues] = useState([]);
const [boxSize, setBoxSize] = useState('sm');
useEffect(() => {
setOpen(display);
setValues(items);
if (items && items.length > maxNoOfItemDlgBox) {
// setValues(items.slice(0, maxNoOfItemDlgBox));
setExpand(true);
}
}, [display, open, items, maxNoOfItemDlgBox]);
const expandView = () => {
if (items.length > maxNoOfItemDlgBox + maxNoOfItems) {
setBoxSize('md');
}
setValues(items);
setExpand(true);
};
return /*#__PURE__*/React.createElement(StyledEngineProvider, {
injectFirst: true
}, /*#__PURE__*/React.createElement(ThemeProvider, {
theme: createTheme(theme)
}, /*#__PURE__*/React.createElement(Dialog, {
open: open,
onClose: closeHandler,
maxWidth: boxSize,
BackdropProps: {
timeout: 500
},
BackdropComponent: Backdrop
}, /*#__PURE__*/React.createElement("div", {
className: classes.titleContent
}, /*#__PURE__*/React.createElement("div", {
item: true,
xs: 1,
className: classes.closeBtn
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: closeHandler,
"aria-label": "Close Dialog",
size: "large"
}, /*#__PURE__*/React.createElement(CloseIcon, {
fontSize: "small"
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
className: classes.title
}, "Acceptable Values"))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(ListComponent, {
enums: values,
maxNoOfItems: maxNoOfItems,
maxNoOfItemDlgBox: maxNoOfItemDlgBox,
expand: expand,
isSearchMode: isSearchMode,
typeMatchList: typeMatchList
}), /*#__PURE__*/React.createElement("br", null), items.length > maxNoOfItemDlgBox && !expand && /*#__PURE__*/React.createElement(ButtonComponent, {
label: "...show more",
openHandler: expandView
})))));
};
const styles = () => ({
titleContent: {
width: '100%'
},
title: {
paddingLeft: '20px',
fontSize: '18px',
marginTop: '20px',
display: 'inherit',
fontWeight: '600',
color: '#0d71a3'
},
closeBtn: {
width: '225px',
padding: '20px',
textAlign: 'right',
float: 'right'
}
});
DialogComponent.defaultProps = {
maxNoOfItems: 30
};
export default withStyles(styles)(DialogComponent);