refactor(date-time-picker-web): hide properties and start editor config preview layout

Author: samuelreichert

packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts

@@ -1,140 +1,80 @@
+import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools";
+import {
+    container,
+    ContainerProps,
+    dropzone,
+    structurePreviewPalette,
+    StructurePreviewProps
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
 
-export type Platform = "web" | "desktop";
-
-export type Properties = PropertyGroup[];
-
-type PropertyGroup = {
-    caption: string;
-    propertyGroups?: PropertyGroup[];
-    properties?: Property[];
-};
-
-type Property = {
-    key: string;
-    caption: string;
-    description?: string;
-    objectHeaders?: string[]; // used for customizing object grids
-    objects?: ObjectProperties[];
-    properties?: Properties[];
-};
-
-type ObjectProperties = {
-    properties: PropertyGroup[];
-    captions?: string[]; // used for customizing object grids
-};
-
-export type Problem = {
-    property?: string; // key of the property, at which the problem exists
-    severity?: "error" | "warning" | "deprecation"; // default = "error"
-    message: string; // description of the problem
-    studioMessage?: string; // studio-specific message, defaults to message
-    url?: string; // link with more information about the problem
-    studioUrl?: string; // studio-specific link
-};
-
-type BaseProps = {
-    type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource";
-    grow?: number; // optionally sets a growth factor if used in a layout (default = 1)
-};
-
-type ImageProps = BaseProps & {
-    type: "Image";
-    document?: string; // svg image
-    data?: string; // base64 image
-    property?: object; // widget image property object from Values API
-    width?: number; // sets a fixed maximum width
-    height?: number; // sets a fixed maximum height
-};
-
-type ContainerProps = BaseProps & {
-    type: "Container" | "RowLayout";
-    children: PreviewProps[]; // any other preview element
-    borders?: boolean; // sets borders around the layout to visually group its children
-    borderRadius?: number; // integer. Can be used to create rounded borders
-    backgroundColor?: string; // HTML color, formatted #RRGGBB
-    borderWidth?: number; // sets the border width
-    padding?: number; // integer. adds padding around the container
-};
-
-type RowLayoutProps = ContainerProps & {
-    type: "RowLayout";
-    columnSize?: "fixed" | "grow"; // default is fixed
-};
+export function getProperties(values: DateTimePickerPreviewProps, defaultProperties: Properties): Properties {
+    if (values.type !== "date" && values.type !== "range") {
+        hidePropertiesIn(defaultProperties, values, ["dateFormat"]);
+    }
 
-type TextProps = BaseProps & {
-    type: "Text";
-    content: string; // text that should be shown
-    fontSize?: number; // sets the font size
-    fontColor?: string; // HTML color, formatted #RRGGBB
-    bold?: boolean;
-    italic?: boolean;
-};
+    if (values.type !== "time") {
+        hidePropertiesIn(defaultProperties, values, ["timeFormat"]);
+    }
 
-type DropZoneProps = BaseProps & {
-    type: "DropZone";
-    property: object; // widgets property object from Values API
-    placeholder: string; // text to be shown inside the dropzone when empty
-    showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource
-};
+    if (values.type !== "datetime") {
+        hidePropertiesIn(defaultProperties, values, ["dateTimeFormat"]);
+    }
 
-type SelectableProps = BaseProps & {
-    type: "Selectable";
-    object: object; // object property instance from the Value API
-    child: PreviewProps; // any type of preview property to visualize the object instance
-};
+    if (values.type !== "range") {
+        hidePropertiesIn(defaultProperties, values, ["endDateAttribute"]);
+    }
 
-type DatasourceProps = BaseProps & {
-    type: "Datasource";
-    property: object | null; // datasource property object from Values API
-    child?: PreviewProps; // any type of preview property component (optional)
-};
+    if (values.showLabel === false) {
+        hidePropertiesIn(defaultProperties, values, ["label"]);
+    }
 
-export type PreviewProps =
-    | ImageProps
-    | ContainerProps
-    | RowLayoutProps
-    | TextProps
-    | DropZoneProps
-    | SelectableProps
-    | DatasourceProps;
+    if (values.editable !== "conditionally") {
+        hidePropertiesIn(defaultProperties, values, ["editabilityCondition"]);
+    }
 
-export function getProperties(
-    _values: DateTimePickerPreviewProps,
-    defaultProperties: Properties /*, target: Platform*/
-): Properties {
-    // 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.validationType !== "custom") {
+        hidePropertiesIn(defaultProperties, values, ["customValidation"]);
     }
-    */
+
     return defaultProperties;
 }
 
-// export function check(_values: DateTimePickerPreviewProps): Problem[] {
-//     const errors: Problem[] = [];
-//     // 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;
-// }
-
-// export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean, version: number[]): PreviewProps {
-//     // Customize your pluggable widget appearance for Studio Pro.
-//     return {
-//         type: "Container",
-//         children: []
-//     }
-// }
+export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
+    const structurePreviewChildren: StructurePreviewProps[] = [];
+    let dropdownPreviewChildren: StructurePreviewProps[] = [];
+    let readOnly = values.readOnly;
+
+    if (structurePreviewChildren.length === 0) {
+        structurePreviewChildren.push({
+            type: "Text",
+            content: values.dateAttribute ? `[${values.dateAttribute}]` : "[Date time picker]",
+            fontColor: palette.text.data
+        });
+    }
 
-// export function getCustomCaption(values: DateTimePickerPreviewProps, platform: Platform): string {
-//     return "DateTimePicker";
-// }
+    return {
+        type: "Container",
+        children: [
+            {
+                type: "RowLayout",
+                columnSize: "grow",
+                borders: true,
+                borderWidth: 1,
+                borderRadius: 2,
+                backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container,
+                children: [
+                    {
+                        type: "Container",
+                        grow: 1,
+                        padding: 4,
+                        children: structurePreviewChildren
+                    },
+                    container({ grow: 0, padding: 4 })()
+                ]
+            },
+            ...dropdownPreviewChildren
+        ]
+    };
+}