@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
72 lines • 3.16 kB
JavaScript
import React from "react";
import { RbcsMpaObjectiveStatus } from "./RbcsMpaObjectiveStatus.js";
import { ReportDecorator, CardDecorator, } from "../../components/storybook/index.js";
import { percentWithEdge, getKeys } from "../../helpers/index.js";
import { OBJECTIVE_YES, OBJECTIVE_NO } from "../../types/index.js";
export default {
component: RbcsMpaObjectiveStatus,
title: "Components/Rbcs/RbcsMpaObjective",
decorators: [CardDecorator, ReportDecorator],
};
const objective = {
objectiveId: "eez",
shortDesc: "30% protected",
target: 0.3,
countsToward: {
"Fully Protected Area": "yes",
"Highly Protected Area": "yes",
"Moderately Protected Area": "maybe",
"Poorly Protected Area": "no",
"Unprotected Area": "no",
},
};
export const simple = () => {
const levels = getKeys(objective.countsToward);
return (React.createElement(React.Fragment, null,
React.createElement("p", null,
"Based on the following objective ",
JSON.stringify(objective),
":"),
levels.map((level, index) => (React.createElement("div", { key: index },
React.createElement("p", null, `If MPA has protection level: ${level}`),
React.createElement(RbcsMpaObjectiveStatus, { level: level, objective: objective }))))));
};
export const customMessageRenderProp = () => {
const levels = getKeys(objective.countsToward);
return (React.createElement(React.Fragment, null,
React.createElement("p", null,
"Based on the following objective ",
JSON.stringify(objective),
":"),
levels.map((level, index) => (React.createElement("div", { key: index },
React.createElement("p", null, `If MPA has protection level: ${level}`),
React.createElement(RbcsMpaObjectiveStatus, { level: level, objective: objective, renderMsg: () => customRenderMsg(objective, level) }))))));
};
const customRenderMsg = (objective, level) => {
if (objective.countsToward[level] === OBJECTIVE_YES) {
return (React.createElement(React.Fragment, null,
"This most definitely counts towards protecting",
" ",
React.createElement("b", null, percentWithEdge(objective.target)),
" of Lunar waters \uD83C\uDF19."));
}
else if (objective.countsToward[level] === OBJECTIVE_NO) {
return (React.createElement(React.Fragment, null,
"This most definitely ",
React.createElement("b", null, "does not"),
" count towards protecting",
" ",
React.createElement("b", null, percentWithEdge(objective.target)),
" of Lunar waters \uD83C\uDF19."));
}
else {
return (React.createElement(React.Fragment, null,
"This most definitely ",
React.createElement("b", null, "may"),
" count towards protecting",
" ",
React.createElement("b", null, percentWithEdge(objective.target)),
" of Lunar waters \uD83C\uDF19."));
}
};
//# sourceMappingURL=RbcsMpaObjectiveStatus.stories.js.map