@omnia/velcron 7.0.498-dev → 7.0.499-dev

package/models/VelcronDefinitions.d.ts

@@ -18,12 +18,13 @@ export interface BuiltInComponentRenderers {
     "WebView": any;
     "CustomComponent": any;
     "Dialog": any;
-    "Section": any;
+    "FlexView": any;
     "Icon": any;
 }
 export type DynamicViewModel = object;
 export interface OnItemRenderedHookResult {
-    cssClass: Object;
+    cssClass?: Object;
+    containerRenderer?: VelcronContainerRenderer;
 }
 export interface VelcronRenderContext {
     id?: string;
@@ -47,6 +48,11 @@ export interface VelcronRenderContextHooks {
     onItemSelected?: ((item: VelcronDefinition) => void);
     onItemRendered?: ((item: VelcronDefinition) => OnItemRenderedHookResult);
 }
+export interface VelcronContainerRenderer {
+    definition: VelcronDefinition;
+    renderContext: VelcronRenderContext;
+    component: JSX.Element;
+}
 export interface VelcronAction extends VelcronRenderContext {
     type: VelcronActionTypes;
 }
@@ -160,7 +166,8 @@ export interface VelcronImageDefinition extends VelcronDefinition {
 export interface VelcronButtonDefinition extends VelcronDefinition {
     type: "Button";
     text: string;
-    icon: VelcronIcon;
+    icon?: VelcronIcon;
+    disabled?: boolean;
     events?: VelcronOnPressEvent;
 }
 export interface VelcronTextInputDefinition extends VelcronDefinition {
@@ -191,15 +198,14 @@ export interface VelcronIconDefinition extends VelcronDefinition {
     size?: number;
     events?: VelcronOnPressEvent;
 }
-export interface VelcronSectionDefinition extends VelcronDefinition {
-    type: "Section";
-    columns: Array<VelcronSectionColumn>;
-    columnStyle?: object;
-}
-export interface VelcronSectionColumn extends VelcronDefinition {
+export interface VelcronFlexViewDefinition extends VelcronDefinition {
+    type: "FlexView";
+    column?: boolean;
     body: Array<VelcronDefinition>;
+    columnStyle?: object;
     horizontalAlignment?: VelcronHorizontalAlignments;
     verticalAlignment?: VerticalAlignments;
+    grow?: number;
     width?: "auto" | "stretch" | number | string;
 }
 export interface VelcronSectionColumnWidth {

package/models/VelcronDescriptors.d.ts

@@ -24,6 +24,7 @@ export interface VelcronComponentPropertyDescriptor {
     editor?: VelcronComponentPropertyEditors;
     required?: boolean;
     defaultValue?: VelcronPrimitiveType | VelcroncomponentArrayType;
+    disableRemovePropertyOnEmptyOrFalse?: boolean;
 }
 export interface VelcronComponentArrayPropertyDescriptor extends VelcronComponentPropertyDescriptor {
     type: VelcronDataTypes.componentArray;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnia/velcron",
   "license": "MIT",
-  "version": "7.0.498-dev",
+  "version": "7.0.499-dev",
   "description": "Provide Omnia Velcron Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/parser/VelcronConstants.d.ts

@@ -10,7 +10,7 @@ export declare const VelcronConstants: {
         progressCircle: string;
         webView: string;
         dialog: string;
-        section: string;
+        flexView: string;
         icon: string;
     };
     events: {

package/parser/VelcronConstants.js

@@ -13,7 +13,7 @@ exports.VelcronConstants = {
         progressCircle: "ProgressCircle",
         webView: "WebView",
         dialog: "Dialog",
-        section: "Section",
+        flexView: "FlexView",
         icon: "Icon"
     },
     events: {

package/parser/VelcronData.js

@@ -367,6 +367,9 @@ class VelcronData {
         return result;
     }
     static evaluateBoolean(template, renderContext) {
+        if (VelcronData.isUndefined(template)) {
+            return false;
+        }
         if (VelcronData.isBoolean(template)) {
             return template;
         }
@@ -418,7 +421,7 @@ class VelcronData {
         return !isNaN(value);
     }
     static isUndefined(value) {
-        return typeof value === undefined;
+        return typeof value === "undefined";
     }
     static isArray(obj) {
         return Array.isArray(obj);

package/parser/VelcronStyles.d.ts

@@ -1,8 +1,9 @@
-import { VelcronDefinition, VelcronSectionDefinition, VelcronSectionColumn, VelcronRenderContext } from "../models";
+import { VelcronDefinition, VelcronRenderContext } from "../models";
 export declare class VelcronStyles {
-    static component(definition: VelcronDefinition, renderCtx: VelcronRenderContext): any;
+    static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): any;
+    private static createStylesForText;
+    private static createStylesForImage;
+    private static createStylesForFlexbox;
+    private static createStylesForLayoutColumnComponent;
     private static dataBindStyles;
-    static section(sectionDef: VelcronSectionDefinition, renderCtx: VelcronRenderContext): any;
-    static layoutColumn(layoutDef: VelcronSectionDefinition, columnDef: VelcronSectionColumn, renderCtx: VelcronRenderContext): object;
-    static layoutColumnComponent(layoutDef: VelcronSectionDefinition, columnDef: VelcronSectionColumn, renderCtx: VelcronRenderContext): object;
 }

package/parser/VelcronStyles.js

@@ -5,117 +5,111 @@ const VelcronData_1 = require("./VelcronData");
 const models_1 = require("../models");
 const VelcronConstants_1 = require("./VelcronConstants");
 class VelcronStyles {
-    static component(definition, renderCtx) {
-        const bliblu = ";";
+    static create(definition, renderCtx) {
         let result = { ...definition.style };
-        // let result = {
-        //     //Margin
-        //     margin: definition?.style?.margin,
-        //     marginTop: definition?.style?.marginTop,
-        //     marginRight: definition?.style?.marginRight,
-        //     marginBottom: definition?.style?.marginBottom,
-        //     marginLeft: definition?.style?.marginLeft,
-        //     //Padding
-        //     padding: definition?.style?.padding,
-        //     paddingTop: definition?.style?.paddingTop,
-        //     paddingRight: definition?.style?.paddingRight,
-        //     paddingBottom: definition?.style?.paddingBottom,
-        //     paddingLeft: definition?.style?.paddingLeft,
-        //     height: definition.style?.height,
-        //     width: definition.style?.width
-        // }
         if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
-            //Set default width and height values on Images
-            if (!result.width) {
-                result.width = "100%";
-            }
-            if (!result.height) {
-                result.height = 400;
-            }
+            result = this.createStylesForImage(definition, result);
         }
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
-            const textDef = definition;
-            if (textDef.color) {
-                result["color"] = textDef.color;
-            }
-            if (textDef.size) {
-                result["fontSize"] = textDef.size + "px";
-            }
+            result = this.createStylesForText(definition, result);
         }
+        else if (definition.type === VelcronConstants_1.VelcronConstants.components.flexView) {
+            //result = this.createStylesForSection(definition as VelcronFlexBoxDefinition, result);
+            result = this.createStylesForFlexbox(definition, result);
+        }
+        // else if (definition.type === VelcronConstants.components.flexPanel) {
+        //     result = this.createStylesForColumn(definition as VelcronFlexBoxDefinition, result);
+        // }
         if (renderCtx) {
             result = VelcronStyles.dataBindStyles(result, renderCtx);
         }
         return result;
     }
-    static dataBindStyles(styles, renderCtx) {
-        Object.keys(styles).forEach((key) => {
-            const style = styles[key];
-            if (style && VelcronData_1.VelcronData.isString(style)) {
-                styles[key] = VelcronData_1.VelcronData.dataBind(renderCtx, style);
-            }
-        });
+    static createStylesForText(textDefinition, styles) {
+        if (textDefinition.color) {
+            styles["color"] = textDefinition.color;
+        }
+        if (textDefinition.size) {
+            styles["fontSize"] = textDefinition.size + "px";
+        }
         return styles;
     }
-    static section(sectionDef, renderCtx) {
-        let result = {
-            "display": "flex",
-            ...sectionDef.style,
-        };
-        result = VelcronStyles.dataBindStyles(result, renderCtx);
-        return result;
+    static createStylesForImage(imageDef, styles) {
+        if (!styles.width) {
+            styles.width = 200;
+        }
+        if (!styles.height) {
+            styles.height = 400;
+        }
+        styles.flex = "0 0 auto!important";
+        return styles;
     }
-    static layoutColumn(layoutDef, columnDef, renderCtx) {
-        //Default is stretch
-        const width = {};
-        width["flex"] = 1;
+    // private static createStylesForSection(sectionDef: VelcronFlexBoxDefinition, styles: any) {
+    //     styles.display = "flex";
+    //     styles.width = "100%";
+    //     styles["flex-direction"] = sectionDef.column ? "column" : "row";
+    //     return styles;
+    // }
+    static createStylesForFlexbox(columnDef, styles) {
+        const flexGrow = columnDef.grow ? columnDef.grow : 1;
+        const flextShrink = flexGrow;
+        styles.display = "flex";
+        styles.flex = `${flexGrow}`;
+        styles["max-width"] = "100%";
+        styles["flex-direction"] = columnDef.column ? "column" : "row";
         //Auto
         if (columnDef.width && columnDef.width === models_1.VelcronSectionColumnWidthTypes.auto) {
-            width["flex"] = "0 0 auto";
+            styles["flex"] = `${flexGrow} ${flextShrink} auto`;
         }
         //Pixels
         else if (columnDef.width && VelcronData_1.VelcronData.isString(columnDef.width) && columnDef.width.endsWith("px")) {
-            width["flex"] = `0 0 ${columnDef.width}`;
+            //width["flex"] = `${flexGrow} ${flextShrink} ${columnDef.width}`;
+            styles["max-width"] = columnDef.width;
         }
         //Percentage
         else if (columnDef.width && (isNaN(columnDef.width) === false)) {
-            width["flex"] = `0 0 ${columnDef.width}%`;
+            styles["flex"] = `${flexGrow} ${flextShrink} ${columnDef.width}%`;
         }
-        let result = {
-            "display": "flex",
-            ...width,
-            ...layoutDef.columnStyle,
-            ...columnDef.style
-        };
-        if (columnDef.horizontalAlignment && columnDef.horizontalAlignment !== models_1.VelcronHorizontalAlignments.left) {
+        // if (columnDef.horizontalAlignment && columnDef.horizontalAlignment !== VelcronHorizontalAlignments.left) {
+        //     //Need to add this to make horizontalAlignment work for child div
+        //     result["flex-direction"] = "column";
+        // }
+        if (columnDef.horizontalAlignment) {
             //Need to add this to make horizontalAlignment work for child div
-            result["flex-direction"] = "column";
+            styles["justify-content"] = columnDef.horizontalAlignment;
         }
         if (columnDef.verticalAlignment) {
             if (columnDef.verticalAlignment === models_1.VerticalAlignments.center) {
-                result["flex-direction"] = "column";
-                result["justify-content"] = "center";
+                //result["flex-direction"] = "column";
+                styles["align-items"] = "center";
             }
             else if (columnDef.verticalAlignment === models_1.VerticalAlignments.bottom) {
-                result["flex-direction"] = "column";
-                result["justify-content"] = "flex-end";
+                //result["flex-direction"] = "column";
+                styles["align-items"] = "flex-end";
             }
         }
-        result = VelcronStyles.dataBindStyles(result, renderCtx);
-        return result;
+        return styles;
     }
-    static layoutColumnComponent(layoutDef, columnDef, renderCtx) {
-        const result = {
-            "display": "flex",
-        };
+    static createStylesForLayoutColumnComponent(layoutDef, columnDef, styles) {
+        styles.display = "flex";
         if (columnDef.horizontalAlignment) {
             if (columnDef.horizontalAlignment === models_1.VelcronHorizontalAlignments.center) {
-                result["justify-content"] = "center";
+                styles["justify-content"] = "center";
             }
             else if (columnDef.horizontalAlignment === models_1.VelcronHorizontalAlignments.right) {
-                result["justify-content"] = "flex-end";
+                styles["justify-content"] = "flex-end";
             }
         }
-        return result;
+        return styles;
+    }
+    static dataBindStyles(styles, renderCtx) {
+        Object.keys(styles).forEach((key) => {
+            const style = styles[key];
+            if (style && VelcronData_1.VelcronData.isString(style)) {
+                styles[key] = VelcronData_1.VelcronData.dataBind(renderCtx, style);
+            }
+        });
+        return styles;
     }
 }
 exports.VelcronStyles = VelcronStyles;