feat: enhance image properties with min/max height and new units

Author: yordan-st

packages/pluggableWidgets/image-web/src/Image.editorConfig.ts

@@ -72,12 +72,22 @@ export function getProperties(
         hidePropertyIn(defaultProperties, values, "defaultImageDynamic");
     }
 
-    if (values.heightUnit === "auto") {
+    if (values.widthUnit === "auto") {
+        hidePropertyIn(defaultProperties, values, "width");
+    }
+
+    if (values.heightUnit !== "auto") {
+        hidePropertiesIn(defaultProperties, values, ["minHeightUnit", "maxHeightUnit", "minHeight", "maxHeight"]);
+    } else {
         hidePropertyIn(defaultProperties, values, "height");
     }
 
-    if (values.widthUnit === "auto") {
-        hidePropertyIn(defaultProperties, values, "width");
+    if (values.minHeightUnit === "none") {
+        hidePropertyIn(defaultProperties, values, "minHeight");
+    }
+
+    if (values.maxHeightUnit === "none") {
+        hidePropertyIn(defaultProperties, values, "maxHeight");
     }
 
     if (values.datasource === "icon" && (values.imageIcon?.type === "glyph" || values.imageIcon?.type === "icon")) {

packages/pluggableWidgets/image-web/src/Image.tsx

@@ -2,6 +2,7 @@ import { ValueStatus } from "mendix";
 import { createElement, FunctionComponent, useCallback } from "react";
 import { ImageContainerProps } from "../typings/ImageProps";
 import { Image as ImageComponent, ImageType } from "./components/Image/Image";
+import { constructStyleObject } from "./utils/helpers";
 
 function getImageProps({
     datasource,
@@ -60,11 +61,22 @@ export const Image: FunctionComponent<ImageContainerProps> = props => {
     const { type, image } = getImageProps(props);
 
     const altText = props.alternativeText?.status === ValueStatus.Available ? props.alternativeText.value : undefined;
+    const styleObject = constructStyleObject(props);
+
+    const imageStyle = { ...props.style, ...styleObject };
+    console.warn("Image styling debug:", {
+        name: props.name,
+        heightUnit: props.heightUnit,
+        minHeightUnit: props.minHeightUnit,
+        minHeight: props.minHeight,
+        styleObject,
+        finalImageStyle: imageStyle
+    });
 
     return (
         <ImageComponent
             class={props.class}
-            style={props.style}
+            style={imageStyle}
             widthUnit={props.widthUnit}
             width={props.width}
             heightUnit={props.heightUnit}

packages/pluggableWidgets/image-web/src/Image.xml

@@ -88,12 +88,42 @@
                     <enumerationValues>
                         <enumerationValue key="auto">Auto</enumerationValue>
                         <enumerationValue key="pixels">Pixels</enumerationValue>
+                        <enumerationValue key="percentage">Percentage</enumerationValue>
+                        <enumerationValue key="viewport">Viewport</enumerationValue>
                     </enumerationValues>
                 </property>
                 <property key="height" type="integer" defaultValue="100">
                     <caption>Height</caption>
                     <description />
                 </property>
+                <property key="minHeightUnit" type="enumeration" defaultValue="none">
+                    <caption>Minimum Height unit</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="none">None</enumerationValue>
+                        <enumerationValue key="pixels">Pixels</enumerationValue>
+                        <enumerationValue key="percentage">Percentage</enumerationValue>
+                        <enumerationValue key="viewport">Viewport</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="minHeight" type="integer" required="true" defaultValue="0">
+                    <caption>Minimum height</caption>
+                    <description />
+                </property>
+                <property key="maxHeightUnit" type="enumeration" defaultValue="none">
+                    <caption>Maximum Height unit</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="none">None</enumerationValue>
+                        <enumerationValue key="pixels">Pixels</enumerationValue>
+                        <enumerationValue key="percentage">Percentage</enumerationValue>
+                        <enumerationValue key="viewport">Viewport</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="maxHeight" type="integer" required="true" defaultValue="0">
+                    <caption>Maximum height</caption>
+                    <description />
+                </property>
                 <property key="iconSize" type="integer" defaultValue="14">
                     <caption>Icon size</caption>
                     <description>The size of the icon in pixels.</description>

packages/pluggableWidgets/image-web/src/utils/helpers.ts

@@ -0,0 +1,30 @@
+import { CSSProperties } from "react";
+import { ImageContainerProps } from "typings/ImageProps";
+
+function getHeightScale(height: number, heightUnit: "pixels" | "percentage" | "viewport"): string {
+    return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "viewport" ? "vh" : "%"}`;
+}
+
+export function constructStyleObject(props: ImageContainerProps): CSSProperties {
+    const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight } = props;
+
+    const imageStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth"> = {};
+
+    imageStyle.width = `${width}${widthUnit === "pixels" ? "px" : "%"}`;
+    if (heightUnit === "auto") {
+        imageStyle.height = "auto";
+
+        if (minHeightUnit !== "none" && minHeight > 0) {
+            console.warn(minHeight);
+            imageStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
+        }
+
+        if (maxHeightUnit !== "none" && maxHeight > 0) {
+            imageStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
+        }
+    } else {
+        imageStyle.height = getHeightScale(height, heightUnit);
+    }
+
+    return imageStyle;
+}

packages/pluggableWidgets/image-web/typings/ImageProps.d.ts

@@ -12,7 +12,11 @@ export type OnClickTypeEnum = "action" | "enlarge";
 
 export type WidthUnitEnum = "auto" | "pixels" | "percentage";
 
-export type HeightUnitEnum = "auto" | "pixels";
+export type HeightUnitEnum = "auto" | "pixels" | "percentage" | "viewport";
+
+export type MinHeightUnitEnum = "none" | "pixels" | "percentage" | "viewport";
+
+export type MaxHeightUnitEnum = "none" | "pixels" | "percentage" | "viewport";
 
 export type DisplayAsEnum = "fullImage" | "thumbnail";
 
@@ -35,6 +39,10 @@ export interface ImageContainerProps {
     width: number;
     heightUnit: HeightUnitEnum;
     height: number;
+    minHeightUnit: MinHeightUnitEnum;
+    minHeight: number;
+    maxHeightUnit: MaxHeightUnitEnum;
+    maxHeight: number;
     iconSize: number;
     displayAs: DisplayAsEnum;
     responsive: boolean;
@@ -65,6 +73,10 @@ export interface ImagePreviewProps {
     width: number | null;
     heightUnit: HeightUnitEnum;
     height: number | null;
+    minHeightUnit: MinHeightUnitEnum;
+    minHeight: number | null;
+    maxHeightUnit: MaxHeightUnitEnum;
+    maxHeight: number | null;
     iconSize: number | null;
     displayAs: DisplayAsEnum;
     responsive: boolean;