model-navigator-standalone
Version:
Standalone MDF graph model visualizer
184 lines (183 loc) • 6.93 kB
JavaScript
import "core-js/modules/es.symbol.description.js";
import "core-js/modules/es.json.stringify.js";
import React, { useContext } from "react";
import withStyles from '@mui/styles/withStyles';
import { getPropertyNameFragment, getPropertyDescriptionFragment, getPropertyTypeFragment } from "../../../Utils/highlightHelper";
import ListComponent from "./ListComponent";
import ButtonComponent from "./ButtonComponent";
import KeyIconSvg from "../../../../assets/key_icon.svg";
import { ConfigContext } from '../../../../Config/ConfigContext';
import { controlVocabConfig as ctrlConfig } from "../../../../Config/nav.config";
import "../DataDictionaryPropertyTable.css";
// import DownloadFileTypeBtn from "./DownloadFileTypeBtn";
const TableRows = _ref => {
let {
classes,
onlyShowMatchedProperties,
matchedPropertiesSummary,
properties,
needHighlightSearchResult,
hideIsRequired,
openBoxHandler,
isSearchMode,
title
} = _ref;
const config = useContext(ConfigContext);
const required = (requiredFlag, preferredFlag) => /*#__PURE__*/React.createElement("span", {
className: requiredFlag ? classes.required : ""
}, requiredFlag ? "Required" : preferredFlag ? "Preferred" : "Optional");
const displayKeyProperty = propertyFragment => /*#__PURE__*/React.createElement("div", {
className: classes.keyProperty
}, propertyFragment, /*#__PURE__*/React.createElement("img", {
src: KeyIconSvg,
className: classes.keyPropertyIcon,
alt: "key-icon"
}));
const displayKeyPropsDescription = description => {
const lines = description.split("<br>");
return /*#__PURE__*/React.createElement("div", null, lines.map(line => /*#__PURE__*/React.createElement("span", null, line)));
};
let rowList = properties.map(prop => {
let nameMatch = null;
let descriptionMatch = null;
let typeMatchList = null;
if (needHighlightSearchResult && matchedPropertiesSummary.length > 0) {
const matchedSummaryItem = matchedPropertiesSummary.find(item => item.propertyKey === prop.handle);
if (matchedSummaryItem) {
nameMatch = matchedSummaryItem.nameMatch;
descriptionMatch = matchedSummaryItem.descriptionMatch;
typeMatchList = matchedSummaryItem.typeMatchList;
} else if (onlyShowMatchedProperties) {
return null;
}
}
let type = prop.type;
let enums = prop.valueSet ? prop.valueSet() : [];
let key = prop.is_key;
const isRequired = prop.tags('inclusion') === 'required';
const isPreferred = prop.tags('inclusion') === 'preferred';
const propertyNameFragment = getPropertyNameFragment(prop, nameMatch, "data-dictionary-property-table__span");
const propertyDescriptionFragment = getPropertyDescriptionFragment(prop, descriptionMatch, "data-dictionary-property-table__span");
const propertyTypeFragment = getPropertyTypeFragment(prop, typeMatchList, "data-dictionary-property-table__span");
return /*#__PURE__*/React.createElement("tr", {
key: prop.handle,
className: classes.row
}, /*#__PURE__*/React.createElement("td", {
className: classes.rowItem
}, key ? displayKeyProperty(propertyNameFragment) : propertyNameFragment), /*#__PURE__*/React.createElement("td", {
className: classes.rowItem
}, enums && enums.length > 0 ? /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
flexDirection: "column"
}
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("p", null, type), /*#__PURE__*/React.createElement("p", {
className: classes.acceptValue
}, "Acceptable Values:"), " ", enums.length > ctrlConfig.maxNoOfItems ? /*#__PURE__*/React.createElement(ListComponent, {
enums: enums.slice(0, ctrlConfig.maxNoOfItems),
isSearchMode: isSearchMode,
typeMatchList: typeMatchList
}) : /*#__PURE__*/React.createElement(ListComponent, {
enums: enums,
isSearchMode: isSearchMode,
typeMatchList: typeMatchList
})), enums.length > ctrlConfig.maxNoOfItems && /*#__PURE__*/React.createElement(ButtonComponent, {
label: "...show more",
openHandler: () => openBoxHandler(enums, typeMatchList, prop.handle)
})) : /*#__PURE__*/React.createElement(React.Fragment, null, isSearchMode ? /*#__PURE__*/React.createElement(React.Fragment, null, propertyTypeFragment) : /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(type)))), !hideIsRequired && /*#__PURE__*/React.createElement("td", {
className: classes.rowItem
}, required(isRequired, isPreferred)), /*#__PURE__*/React.createElement("td", {
className: classes.rowItem
}, key && !isSearchMode ? /*#__PURE__*/React.createElement("div", {
className: classes.description
}, displayKeyPropsDescription(prop.desc), prop.tags('Labeled') && /*#__PURE__*/React.createElement("div", {
className: classes.labeled
}, /*#__PURE__*/React.createElement("span", {
className: classes.labeledSpan
}, "DISPLAYED AS:"), " ", prop.tags('Labeled'))) : /*#__PURE__*/React.createElement("div", null, propertyDescriptionFragment, prop.tags('Labeled') && /*#__PURE__*/React.createElement("div", {
className: classes.labeled
}, /*#__PURE__*/React.createElement("span", {
className: classes.labeledSpan
}, "DISPLAYED AS:"), " ", prop.tags('Labeled')))));
});
return /*#__PURE__*/React.createElement(React.Fragment, null, rowList);
};
const styles = () => ({
rowItem: {
padding: "10px 10px 10px 19px",
"& p": {
margin: "auto"
},
"&:nth-child(2)": {
maxWidth: "300px",
minWidth: "100px",
wordWrap: "break-word"
},
"& span": {
"&:last-child:not(:first-child)": {
display: "block",
marginTop: "13px"
}
}
},
labeledSpan: {
fontWeight: "600"
},
labeled: {
marginTop: "2em"
},
row: {
padding: "10px 10px 10px 19px",
border: "0",
textAlign: "left",
fontFamily: "Raleway",
verticalAlign: "top",
"& p": {
margin: "auto"
},
"&:nth-child(2) > p": {
maxWidth: "300px",
minWidth: "100px",
wordWrap: "break-word"
},
"&:nth-child(odd)": {
background: "#fff"
},
"&:nth-child(even)": {
background: "#f4f5f5"
}
},
required: {
color: "#8D432A",
fontSize: "13px",
fontWeight: "900"
},
keyProperty: {
display: "inline-block",
minWidth: "220px",
fontWeight: "700",
color: "#0d71a3",
"& p": {
float: "left",
margin: "auto"
}
},
acceptValue: {
margin: "0",
minWidth: "130px"
},
keyPropertyIcon: {
width: "25px",
marginLeft: "8px",
paddingTop: "5px"
},
description: {
"& span": {
"&:last-child:not(:first-child)": {
display: "block",
marginTop: "13px"
}
}
}
});
export default withStyles(styles)(TableRows);