impaktapps-ui-builder 1.0.71 → 1.0.72

package/dist/src/impaktapps-ui-builder/builder/build/buildImage.d.ts

@@ -0,0 +1 @@
+export declare const buildImage: (config: any, componentScope: any) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "1.0.71",
+    "version": "1.0.72",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-ui-builder/builder/build/buildImage.ts

@@ -0,0 +1,44 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+const imageUiSchema = {
+  type: "Control",
+  scope: "#/properties/Logo",
+
+  options: {
+    widget: "Image",
+  },
+  config: {
+  layout: 3,
+    main: {
+      url: "",
+    },
+    style: {
+    //   imageStyle: { width: 300 },
+
+    //   containerStyle: {
+    //     display: "flex",
+    //     justifyContent: "center",
+    //     alignItems: "center",
+    //     marginLeft: "32px",
+    //     marginTop: 2,
+    //   },
+    },
+  },
+};
+
+export const buildImage = (config, componentScope) => {
+  const image: any = _.cloneDeep(imageUiSchema);
+  image.scope = componentScope;
+  image.config.main.url = config.imageUrl;
+  if (config.layout) {
+    image.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.style) {
+    image.config.style = JSON.parse(config.style);
+  }
+  if (config.height) {
+    image.config.style.imageStyle = {...image.config.style.imageStyle, height: config.height}
+  }
+  return image;
+};

package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts

@@ -41,6 +41,7 @@ import { buildInputSlider } from "./buildInputSlider";
 import { buildTreeMap } from "./buildTreeMap";
 import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
 import { buildHorizontalLayout } from "./buildHorizontalLayout";
+import { buildImage } from "./buildImage";
 export let schema = {
   type: "object",
   properties: {},
@@ -311,6 +312,8 @@ const buildUiSchema = (config: any, store?: any) => {
     case "Thought":
       elements = buildThoughtOfTheDay(config, componentScope);
       break;
+    case "Image":
+      elements = buildImage(config, componentScope);
       break;
     default:
       schema = {

package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts

@@ -539,6 +539,13 @@ export const buildPropertiesSection = function (type: String) {
         getTextArea("thought", "Today's thought", false),
       ]
       break;
+    case "Image":
+      uiSchema.elements = [
+        getInputField("imageUrl", "Image URL"),
+        getInputField("height", "Image Height"),
+        emptyBox("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 }),
+      ]
+      break;
   }
   return uiSchema;
 };

package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts

@@ -18,6 +18,7 @@ export const ComponentSchema: any = {
         { title: "Empty Box", const: "EmptyBox" },
         { title: "File Handler", const: "FileInput" },
         { title: "Graph", const: "Graph" },
+        { title: "Image", const: "Image" },
         { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
         { title: "Leaderboard", const: "LeaderBoard" },

package/src/impaktapps-ui-builder/builder/services/component.ts

@@ -42,7 +42,8 @@ const sectionLabels = {
   ColumnGroup: ["Core", "Components"],
   Thought: ["Core", "Properties", "Events", "Style", "Validation"],
   Date: ["Core", "Properties", "Events", "Style", "Validation"],
-  DateTime: ["Core", "Properties", "Events", "Style", "Validation"]
+  DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
+  Image: ["Core", "Properties","Style"],
 }
 
 export function refreshPage(type: string, store: any) {