diff --git a/README.md b/README.md index 8cf5f13..87af50e 100644 --- a/README.md +++ b/README.md @@ -23,5 +23,6 @@ Any content with fixed position will be repeated on every page in the generated ## Usage - Place the widget on the page - Put your content in the header, body and footer drop zones +- If you only need a header **or** a footer, leave the unused drop zone empty and set the property to only use what you need - When the PDF is generated the header and footer are repeated on each page diff --git a/src/DocumentLayoutWidget.editorConfig.js b/src/DocumentLayoutWidget.editorConfig.js index 3b17b22..40fcec1 100644 --- a/src/DocumentLayoutWidget.editorConfig.js +++ b/src/DocumentLayoutWidget.editorConfig.js @@ -1,3 +1,5 @@ +import { hidePropertyIn } from "@mendix/pluggable-widgets-tools"; + /** * @typedef Property * @type {object} @@ -48,33 +50,61 @@ */ export function getProperties(values, defaultProperties, target) { // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally. - /* Example - if (values.myProperty === "custom") { - delete defaultProperties.properties.myOtherProperty; + if (values.headerFooter === "header") { + hidePropertyIn(defaultProperties, values, "footerContent"); + hidePropertyIn(defaultProperties, values, "footerHeight"); + } + if (values.headerFooter === "footer") { + hidePropertyIn(defaultProperties, values, "headerContent"); + hidePropertyIn(defaultProperties, values, "headerHeight"); } - */ return defaultProperties; } -// /** -// * @param {Object} values -// * @returns {Problem[]} returns a list of problems. -// */ -// export function check(values) { -// /** @type {Problem[]} */ -// const errors = []; -// // Add errors to the above array to throw errors in Studio and Studio Pro. -// /* Example -// if (values.myProperty !== "custom") { -// errors.push({ -// property: `myProperty`, -// message: `The value of 'myProperty' is different of 'custom'.`, -// url: "https://github.com/myrepo/mywidget" -// }); -// } -// */ -// return errors; -// } +/** + * @param {Object} values + * @returns {Problem[]} returns a list of problems. + */ +export function check(values) { + /** @type {Problem[]} */ + const errors = []; + + const headerHeightValue = values.headerHeight ? Number(values.headerHeight) : 0; + if (values.headerFooter === "both" || values.headerFooter === "header") { + if (!values.headerHeight || headerHeightValue <= 0) { + errors.push({ + property: "headerHeight", + message: "Header height must be set and positive" + }); + } + + if (!values.headerContent || values.headerContent.widgetCount === 0) { + errors.push({ + property: "headerContent", + message: "Place content in the header dropzone" + }); + } + } + + const footerHeightValue = values.footerHeight ? Number(values.footerHeight) : 0; + if (values.headerFooter === "both" || values.headerFooter === "footer") { + if (!values.footerHeight || footerHeightValue <= 0) { + errors.push({ + property: "footerHeight", + message: "Footer height must be set and positive" + }); + } + + if (!values.footerContent || values.footerContent.widgetCount === 0) { + errors.push({ + property: "footerContent", + message: "Place content in the footer dropzone" + }); + } + } + + return errors; +} // /** // * @param {object} values diff --git a/src/DocumentLayoutWidget.jsx b/src/DocumentLayoutWidget.jsx index 4583516..ab6a117 100644 --- a/src/DocumentLayoutWidget.jsx +++ b/src/DocumentLayoutWidget.jsx @@ -2,7 +2,7 @@ import "./ui/DocumentLayoutWidget.css"; import { createElement } from "react"; export function DocumentLayoutWidget(props) { - const { headerContent, bodyContent, footerContent, headerHeight, footerHeight } = props; + const { headerFooter, headerContent, bodyContent, footerContent, headerHeight, footerHeight } = props; const className = "document-layout-widget " + props.class; @@ -27,15 +27,17 @@ export function DocumentLayoutWidget(props) { return (
-
-
-
- |
-
+
+
+
+ |
+
@@ -43,22 +45,28 @@ export function DocumentLayoutWidget(props) { |
-
-
-
- |
-
+
+
+
+ |
+