impaktapps-ui-builder 0.0.382456 → 0.0.382460

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

@@ -1,80 +1,27 @@
-export const componentBasicUiSchema: any = {
+export const componentBasicUiSchema: any = (theme)=>{
+  const uiSchema = {
   type: "HorizontalLayout",
+  heading: "Component",
   elements: [
     {
-      type: "WrapperLayout",
+      type: "Control",
+      scope: "#/properties/pageName",
+     
+      options: {
+        widget: "Box",
+      },
       config: {
+        layout: 12,
         main: {
-          rowSpacing: 1,
-          header:true
+          heading: " ",
         },
-        defaultStyle:true
-      },
-      elements: [
-     
-        {
-          type: "Control",
-          scope: "#/properties/Component",
-
-          options: {
-            widget: "Box",
-          },
-          config: {
-            layout: {xs:12,sm:12,md:2},
-            main: {
-              heading: "Component",
-            },
-            style:{
-              "float":"left",
-            }
-          },
-        },
-       
-        {
-          type: "Control",
-          scope: "#/properties/pageName",
-         
-          options: {
-            widget: "Box",
-          },
-          config: {
-            layout: {xs:7,sm:7,md:9},
-            main: {
-              heading: " ",
-            },
-            style: {
-              float: "right",
-              width:"auto",
-              fontSize:"12px",
-              color:"gray",
-              paddingTop:"10px"
-            },
-          },
-        },
-      
-        {
-          type: "Control",
-          scope: "#/properties/Back_Button",
-         
-          options: {
-            widget: "IconButton",
-          },
-          config: {
-            layout: {xs:2,sm:2,md:0.5},
-            main: {
-              icon: "BackIcon",
-              styleDefault: true,
-              size: "small",
-              onClick: "backHandler",
-              tooltipMessage: "Back",
-            },
-            style: {
-              float: "right",
-            },
-          },
+        style: {
+          marginLeft: theme.spacing(3),
+          width:"auto",
+          fontSize:"12px",
+          color:"gray",
         },
-        
-      ],
+      },
     },
     {
       type: "TabLayout",
@@ -98,7 +45,7 @@ export const componentBasicUiSchema: any = {
                 widget: "SelectInputField",
               },
               config: {
-                layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Type",
                 },
@@ -112,12 +59,7 @@ export const componentBasicUiSchema: any = {
                 widget: "InputField",
               },
               config: {
-                layout: {
-                  xs: 12,
-                  sm: 12,
-                  md: 6,
-                  lg: 6,
-                },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Name",
                   options: [],
@@ -134,12 +76,7 @@ export const componentBasicUiSchema: any = {
                 widget: "InputField",
               },
               config: {
-                layout: {
-                  xs: 12,
-                  sm: 12,
-                  md: 6,
-                  lg: 6,
-                },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Label",
                   options: [],
@@ -148,12 +85,35 @@ export const componentBasicUiSchema: any = {
                 },
               },
             },
-          
+            {
+              type: "Control",
+              scope: "#/properties/columnFormat",
+              options: {
+                widget: "SelectInputField",
+              },
+              config: {
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                main: {
+                  label: "Column Format",
+        
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/proc",
+              config: {
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+              },
+              options: {
+                widget: "EmptyBox",
+              },
+            },
             {
               type: "Control",
               scope: "#/properties/proc",
               config: {
-                layout: { xs: 11, sm: 11, md: 6, lg: 6 },
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
               },
               options: {
                 widget: "EmptyBox",
@@ -162,7 +122,7 @@ export const componentBasicUiSchema: any = {
             {
               type: "Control",
               scope: "#/properties/layout",
-              layout: 11.5,
+              layout: 12,
               options: {
                 detail: {
                   type: "HorizontalLayout",
@@ -174,12 +134,7 @@ export const componentBasicUiSchema: any = {
                         widget: "SelectInputField",
                       },
                       config: {
-                        layout: {
-                          xs: 11,
-                          sm: 11,
-                          md: 5.5,
-                          lg: 5.5,
-                        },
+                        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                         main: {
                           label: "Screen Size",
                         
@@ -194,12 +149,7 @@ export const componentBasicUiSchema: any = {
                         widget: "InputField",
                       },
                       config: {
-                        layout: {
-                          xs: 11,
-                          sm: 11,
-                          md: 5.5,
-                          lg: 5.5,
-                        },
+                        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                         main: {
                           label: "Value",
                           type:"number",
@@ -210,6 +160,16 @@ export const componentBasicUiSchema: any = {
                         },
                       },
                     },
+                    {
+                      type: "Control",
+                      scope: "#/properties/proc",
+                      config: {
+                        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+                      },
+                      options: {
+                        widget: "EmptyBox",
+                      },
+                    },
                   ],
                 },
               },
@@ -218,16 +178,367 @@ export const componentBasicUiSchema: any = {
         },
       ],
     },
+    {
+      type: "HorizontalLayout",
+      config: {
+        layout:{xs:12,sm: 6}
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/RemoveItemButton",
+          options: {
+            widget: "IconButton",
+          },
+          config: {
+            layout: { xs: 1, sm: 1 },
+            main: {
+              onClick: "RemoveItemButton",
+              size: "large",
+              icon: "RejectIcon",
+              styleDefault: true,
+            },
+            style:{
+              marginLeft: "-10px"
+            }
+          },
+        },
 
+        {
+          type: "Control",
+          scope: "#/properties/copiedElementDetails",
+    
+          options: {
+            widget: "Box",
+          },
+          config: {
+            layout: { xs: 6, sm: 6 },
+            main: {
+              heading: "No element copied",
+            },
+            style: {
+              color: "#535557",
+              marginLeft: "-10px",
+              fontSize: "12px",
+              marginTop: "4px"
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          options: {
+            widget: "EmptyBox",
+          },
+          config: {
+            layout: { xs: 1, sm: 5 },
+          },
+        },
+      ]
+    },
     {
       type: "Control",
-      scope: "#/properties/proc",
+      scope: "#/properties/btn",
+      options: {
+        widget: "Button",
+      },
+
       config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 },
+        layout: { xs: 4, sm: 2 },
+        main: {
+          name: "Ok",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          // color: "info",
+          type: "text",
+          onClick: "okHandler",
+          size: "medium",
+        },
       },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btnSubmit",
+      options: {
+        widget: "Button",
+      },
+
+      config: {
+        layout: { xs: 4, sm: 2 },
+        main: {
+          name: "Save & Exit",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          // color: "info",
+          type: "text",
+          onClick: "saveHandler",
+          size: "medium",
+        },
+      },
+    },
+
+
+    {
+      type: "Control",
+      scope: "#/properties/popUpComponentSection",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+        },
+        main: {
+          title: "WARNING!"
+        },
+        style: {
+        }
+      },
+      elements:
+        [
+          {
+            type: "Control",
+            scope: "#/properties/popupText",
+            options: {
+              widget: "Box",
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?",
+              },
+              style:{
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
+              }
+            },
+          },
+          {
+            type: "WrapperLayout",
+            config: {
+              layout: 12,
+              main: {},
+
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteCompButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpComponent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteCompButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteComponents",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+            ]
+          },
+        ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpEventSection",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+        },
+        main: {
+          title: "WARNING!"
+        },
+        style: {
+        }
+      },
+      elements:
+        [
+          {
+            type: "Control",
+            scope: "#/properties/popupText1",
+            options: {
+              widget: "Box",
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?",
+              },
+              style:{
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
+              }
+            },
+          },
+          {
+            type: "WrapperLayout",
+            config: {
+              layout: 12,
+              main: {},
+
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteEventButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpEvent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteEventButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteEvent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+            ]
+          },
+        ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/EmptyBox",
       options: {
         widget: "EmptyBox",
       },
+      config: {
+        layout: { xs: 4, sm: 8 },
+      },
     },
     {
       type: "Control",
@@ -237,24 +548,15 @@ export const componentBasicUiSchema: any = {
       },
 
       config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5,
-        },
+        layout: { xs: 4, sm: 2 },
         main: {
           name: "Ok",
           startIcon: "ApproveIcon",
           variant: "contained",
-          color: "info",
+          // color: "info",
           type: "text",
           onClick: "okHandler",
-          size: "small",
-        },
-        style: {
-          marginBottom: "8px",
-          float: "right",
+          size: "medium",
         },
       },
     },
@@ -266,24 +568,15 @@ export const componentBasicUiSchema: any = {
       },
 
       config: {
-        layout: {
-          xs: 11,
-          sm: 11,
-          md: 2.5,
-          lg: 2.5,
-        },
+        layout: { xs: 4, sm: 2 },
         main: {
           name: "Save & Exit",
           startIcon: "ApproveIcon",
           variant: "contained",
-          color: "info",
+          // color: "info",
           type: "text",
           onClick: "saveHandler",
-          size: "small",
-        },
-        style: {
-          marginBottom: "8px",
-          float: "right",
+          size: "medium",
         },
       },
     },
@@ -294,48 +587,114 @@ export const componentBasicUiSchema: any = {
         widget: "Notify",
       },
       layout: 6,
+    },
+    {
+      type: "HorizontalLayout",
+      config: {
+        main: {
+          direction: 'row'
+        },
+        style: {
+          flexDirection: "row",
+          position: "absolute",
+          bottom: 0,
+          marginBottom: '-8px',
+          height: 'fit-content',
+          overflow: 'hidden',
+          zIndex: 1000,
+          width: 'inherit'
+        }
+      },
+      elements: [
+        {
+
+          type: "Control",
+          scope: "#/properties/FooterText",
+          options: {
+            widget: "Box",
+          },
+          config: {
+            main: {
+              heading: "Copywriter@ACT21.IO"
+            },
+            style: {
+              color: theme?.palette?.text.disabled || "#AFAFAF",
+              fontSize: '12px',
+              textAlign: 'center',
+              lineHeight: 2,
+              width: 'fit-content',
+              left: '50%',
+              position: 'relative',
+              margin: 0,
+              flexGrow: 1,
+              height: 0,
+              transform: "translate(-50%,0%)"
+            }
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/backIcon",
+          options: {
+            widget: "Box",
+          },
+          config: {
+            main: {
+              iconName: 'PrevIcon',
+              onClick: "backHandler",
+              width: 'fit-content',
+            },
+            style: {
+              fill: theme.palette.primary.main,
+              width: 20,
+              height: 0,
+              margin: 0,
+              top: 0,
+              right: {xs: '12px', sm: '84px'},
+              position: 'absolute',
+              fontSize: '12px',
+              cursor: 'pointer',
+              ':hover': {
+                fill: theme.palette.primary.dark,
+              }
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/text",
+
+          options: {
+            widget: "Box",
+          },
+          config: {
+            main: {
+              heading: "Previous Page",
+              onClick: "backHandler"
+            },
+            style: {
+              display: {xs: 'none', sm: "flex"},
+              textAlign: 'left',
+              lineHeight: 1,
+              height: 0,
+              width: 'fit-content',
+              color: theme.palette.primary.main,
+              fontSize: "12px",
+              cursor: 'pointer',
+              marginLeft: '2px',
+              marginRight: 0,
+              top: 3,
+              right: '12px',
+              position: 'absolute',
+              ':hover': {
+                color: theme.palette.primary.dark,
+              }
+            }
+          },
+        },
+      ]
     }
   ],
 };
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-   // {
-        //   type: "Control",
-        //   scope: "#/properties/homeBtn",
-         
-        //   options: {
-        //     widget: "Button",
-        //   },
-        //   config: {
-        //     layout: {xs:2,sm:2,md:1},
-        //     main: {
-        //       name: "🏠",
-        //     },
-        //     style: {
-        //       marginRight:'auto',
-        //       marginLeft:"auto",
-        //       width:"20px",
-
-        //       // background:"inherit",
-        //       // boxShadow:"none",
-        //       float:"left",
-        //       borderRadius:"50%"
-           
-        //     },
-        //   },
-        // },
+return uiSchema
+}