model-navigator-standalone
Version:
Standalone MDF graph model visualizer
236 lines • 7.46 kB
JavaScript
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.filter.js";
import "core-js/modules/esnext.iterator.for-each.js";
import "core-js/modules/esnext.iterator.map.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import { List, ListItem, ListItemText, ListItemIcon, Typography, createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material';
import withStyles from '@mui/styles/withStyles';
import FiberManualRecord from '@mui/icons-material/FiberManualRecord';
import { addHighlightingSpans } from '../../../Utils/highlightHelper';
const twoColumnsView = {
components: {
MuiList: {
styleOverrides: {
padding: {
paddingTop: '0px'
},
root: {
paddingBottom: '0',
fontWeight: '500',
listStyleType: 'disc',
WebkitColumns: 2,
MozColumns: 2,
columns: 2
}
}
},
MuiListItem: {
styleOverrides: {
root: {
paddingLeft: '0px',
paddingTop: '2px',
marginTop: '-9px',
paddingBottom: '0',
alignItems: 'inherit',
fontWeight: '300'
},
gutters: {
paddingLeft: '2px',
marginBottom: '1px'
}
}
}
}
};
const threeColumnsView = {
components: {
MuiList: {
styleOverrides: {
root: {
paddingBottom: '0',
fontWeight: '500',
listStyleType: 'disc',
WebkitColumns: 3,
MozColumns: 3,
columns: 3
},
padding: {
paddingTop: '0px',
marginTop: '-10px'
}
}
},
MuiListItemIcon: {
styleOverrides: {
root: {
paddingLeft: '0',
display: 'initial',
paddingTop: '4px',
minWidth: '10px',
color: '#00002dd9'
}
}
},
MuiListItem: {
styleOverrides: {
root: {
paddingLeft: '0px',
paddingTop: '2px',
marginTop: '-10px',
paddingBottom: '0',
alignItems: 'inherit',
fontWeight: '300'
},
gutters: {
margin: 'auto',
marginBottom: '-10px',
paddingLeft: '0px'
}
}
},
MuiListItemText: {
styleOverrides: {
root: {
padding: '4px',
marginTop: '-2px',
marginBottom: '3px'
}
}
}
}
};
const theme = {
components: {
MuiList: {
styleOverrides: {
padding: {
paddingTop: '2px'
}
}
},
MuiListItem: {
styleOverrides: {
root: {
paddingLeft: '0px',
paddingTop: '2px',
marginTop: '-10px',
paddingBottom: '0',
alignItems: 'inherit',
fontWeight: '300'
},
gutters: {
paddingLeft: '0'
}
}
},
MuiListItemIcon: {
styleOverrides: {
root: {
paddingLeft: '0',
paddingTop: '11px',
minWidth: '10px',
color: '#00002dd9'
}
}
},
MuiListItemText: {
styleOverrides: {
root: {
padding: '4px',
marginTop: '0px',
marginBottom: '0px'
}
}
}
}
};
const ListComponent = _ref => {
let {
classes,
enums,
maxNoOfItems,
maxNoOfItemDlgBox,
expand,
typeMatchList,
isSearchMode
} = _ref;
// const meanIndex = (length) => ((length % 2) ? length / 2 - 0.5 : length / 2);
// below is probably broken: see https://mui.com/material-ui/migration/v5-style-changes/#restructure-component-definitions
const customTheme = expand && enums.length > maxNoOfItemDlgBox + maxNoOfItems ? {
overrides: _objectSpread(_objectSpread({}, theme.overrides), threeColumnsView.overrides)
} : enums.length > maxNoOfItems ? {
overrides: _objectSpread(_objectSpread({}, theme.overrides), twoColumnsView.overrides)
} : theme;
const highlightMatchingProperties = enum_val => {
if (isSearchMode && typeMatchList && typeMatchList.length > 0) {
const matchItem = typeMatchList.map(prop => {
if (prop.value === enum_val) {
// so are the 'items' props or what?
return prop;
}
}).filter(c => c);
if (matchItem.length === 1) {
return /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement("span", {
className: classes.listItemText
}, enum_val.substring, addHighlightingSpans(enum_val, matchItem[0].indices, 'data-dictionary-property-table__span')));
}
}
return /*#__PURE__*/React.createElement(ListItemText, {
primary: /*#__PURE__*/React.createElement(Typography, {
className: classes.listItemText
}, enum_val)
});
};
return /*#__PURE__*/React.createElement(StyledEngineProvider, {
injectFirst: true
}, /*#__PURE__*/React.createElement(ThemeProvider, {
theme: createTheme(customTheme)
}, /*#__PURE__*/React.createElement(List, null, enums.map((enum_val, index) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
key: "".concat(index)
}, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(FiberManualRecord, {
style: {
fontSize: 8
}
})), highlightMatchingProperties(enum_val)))))));
};
const styles = () => ({
listItemText: {
fontWeight: '300',
fontSize: '14px',
whiteSpace: 'pre-wrap'
},
longText: {
fontSize: '13px',
fontWeight: '300',
marginBottom: '4px',
lineHeight: '1.3',
'@media not all and (min-resolution:.001dpcm)': {
lineHeight: '1'
}
},
listIcon: {
float: 'left',
paddingTop: '-5px',
height: '20px',
marginTop: '-35px'
},
label: {
paddingLeft: '15px',
display: 'block',
fontSize: '14px',
fontWeight: 300,
'@media not all and (min-resolution:.001dpcm)': {
marginBottom: '0px'
}
},
highLightText: {
color: 'var(--g3-color__highlight-orange)',
fontWeight: '600'
}
});
export default withStyles(styles)(ListComponent);