@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
76 lines • 3.63 kB
JavaScript
import React, { useState } from "react";
import { ReportContext, sampleSketchReportContextValue, } from "../../context/index.js";
import { LanguageSwitcher } from "../i18n/LanguageSwitcher.js";
import { ReportTextDirection } from "../i18n/ReportTextDirection.js";
const containerStyle = {
height: "auto",
border: "1px solid rgba(0,0,0,0.12)",
marginLeft: "auto",
marginRight: "auto",
borderRadius: 2,
position: "relative",
};
const styles = {
backgroundColor: "#efefef",
padding: 8,
margin: 0,
boxSizing: "border-box",
boxShadow: "0px 0px 0px transparent, 0px 4px 4px 0px rgba(0, 0, 0, 0.06) inset, 0px 0px 0px transparent, 0px 0px 0px transparent",
};
const headerStyle = {
fontFamily: "sans-serif",
padding: 10,
backgroundColor: "#f5f5f5",
zIndex: 2,
borderBottom: "1px solid rgba(0,0,0,0.13)",
};
/**
* Wraps a story to look and behave like a sketch report
* It also replicates much of the functionality of App.tx like setting text
* direction and loading ReportContext.
* The context value can be added to or overridden by passing a value prop
* Layout includes a language switcher (connected to the report context)
* and a report width selector
* The caller must wrap the story in a Translator component to provide translations
*/
export const ReportStoryLayout = ({ value = {}, children }) => {
const [width, setWidth] = useState(500);
const defaultContext = sampleSketchReportContextValue({
changeLanguage: (language) => {
setReportContext((prev) => {
const wasChanged = prev.language !== language;
return {
...prev,
language: wasChanged ? language : prev.language,
};
});
},
...value,
});
// Report context source of truth
const [reportContext, setReportContext] = useState(defaultContext);
return (React.createElement(ReportContext.Provider, { value: { ...reportContext } },
React.createElement("div", { style: { width, ...containerStyle } },
React.createElement("div", { style: headerStyle },
React.createElement("h1", { style: { fontSize: 18, fontWeight: 500 } }, "Sketch Name")),
React.createElement(ReportTextDirection, { style: { ...styles, width } }, children),
React.createElement("div", { className: "storyControls", style: {
position: "absolute",
bottom: -30,
display: "flex",
justifyContent: "space-evenly",
alignItems: "center",
width: "100%",
} },
React.createElement(LanguageSwitcher, null),
React.createElement("select", { value: width, onChange: (e) => setWidth(Number.parseInt(e.target.value)) },
React.createElement("option", { value: 500 }, "Desktop - Standard Size"),
React.createElement("option", { value: 800 }, "Desktop - Large"),
React.createElement("option", { value: 320 }, "iPhone 5"),
React.createElement("option", { value: 375 }, "iPhone 6, iPhone X"),
React.createElement("option", { value: 414 }, "iPhone 6 Plus, iPhone 8 Plus, iPhone XR"),
React.createElement("option", { value: 360 }, "Galaxy S5"),
React.createElement("option", { value: 412 }, "Nexus 5x"),
React.createElement("option", { value: 540 }, "Pixel"))))));
};
//# sourceMappingURL=ReportStoryLayout.js.map