@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
106 lines • 5.51 kB
JavaScript
import React from "react";
import useSketchProperties from "../hooks/useSketchProperties.js";
import { useTranslation } from "react-i18next";
import Card from "./Card.js";
export const SketchAttributesCard = ({ title, autoHide, mappings, }) => {
const titleStyle = {
fontSize: "1em",
fontWeight: 500,
color: "#6C7282",
marginBottom: "1.5em",
};
const [properties] = useSketchProperties();
const { t, i18n } = useTranslation();
const attributesLabel = t("Attributes");
if (autoHide === true && properties.userAttributes.length === 0) {
return null;
}
if (properties) {
return (React.createElement(Card, { titleStyle: titleStyle, title: title || attributesLabel },
React.createElement("table", { style: { width: "100%" } },
React.createElement("tbody", null, properties.userAttributes.map((attr) => {
let label; // label: "Designation"
let valueLabel; // valueLabel: "Fully Protected",
// seasketch legacy - has no valueLabel, need to generate it
if (!attr.valueLabel) {
// Use label directly
label = attr.label;
// there is valueLabel provided, it is just the attribute value unless there's a caller provided mapping
const value = attr && attr.value !== undefined && attr.value !== null
? attr.value
: t("(Not answered)");
valueLabel = value;
if (mappings &&
mappings[attr.exportId] &&
typeof value === "string") {
if (value[0] === "[") {
const listValues = JSON.parse(value);
const displayValues = listValues.map((listValue) => mappings[attr.exportId][listValue]);
valueLabel = displayValues
.map((v) => v.toString())
.join(", ");
}
else {
valueLabel = mappings[attr.exportId][value];
}
}
else if (Array.isArray(value)) {
// array no mapping
valueLabel = value.map((v) => v.toString()).join(", ");
}
else {
valueLabel = value.toString();
}
}
// seasketch next - has label and optional translation
if (attr.label) {
label = attr.label;
// If language not english, override with translation if available
if (i18n.language === "en") {
label = attr.label;
}
else if (attr.alternateLanguages &&
Object.keys(attr.alternateLanguages).includes(i18n.language)) {
// Swap in translation
label = attr.alternateLanguages[i18n.language].label;
}
}
// seasketch next - has valueLabel and optional translation
if (attr.valueLabel) {
valueLabel = attr.valueLabel;
// If language not english, override with translation if available
if (i18n.language !== "en" &&
attr.alternateLanguages &&
Object.keys(attr.alternateLanguages).includes(i18n.language)) {
// Swap in translation
valueLabel =
attr.alternateLanguages[i18n.language].valueLabel;
}
}
return (React.createElement("tr", { key: attr.exportId, style: { verticalAlign: "top" } },
React.createElement("td", { style: {
padding: 0,
paddingRight: 4,
borderBottom: "1px solid #f5f5f5",
paddingBottom: 6,
paddingTop: 6,
} }, label),
React.createElement("td", { style: {
borderBottom: "1px solid #f5f5f5",
paddingBottom: 6,
paddingTop: 6,
paddingLeft: 6,
} }, valueLabel
? Array.isArray(valueLabel)
? valueLabel.map((v, index) => (React.createElement("div", { key: index }, t(v))))
: t(valueLabel) /* i18next-extract-disable-line */
: "N/A")));
})))));
}
else {
return (React.createElement(Card, { titleStyle: titleStyle, title: title || attributesLabel },
React.createElement("p", null, t("No attributes found"))));
}
};
export default SketchAttributesCard;
//# sourceMappingURL=SketchAttributesCard.js.map