impaktapps-jsonforms 5.427.7000 → 5.428.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-jsonforms",
-  "version": "5.427.7000",
+  "version": "5.428.3",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

package/src/impaktapps-jsonforms/renderers/common/ButtonIcon.tsx

@@ -28,6 +28,7 @@ import LockIcon from '@mui/icons-material/Lock';
 import DraftsIcon from '@mui/icons-material/Drafts';
 
 import PermPhoneMsgIcon from '@mui/icons-material/PermPhoneMsg';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 export function ButtonIcon(iconName: string, data: any, 
   additionalIcons: Record<string, any> = {}) {
   switch (iconName) {
@@ -89,6 +90,8 @@ export function ButtonIcon(iconName: string, data: any,
       return <DraftsIcon sx={{ ...data?.iconStyle }} />
     case "PermPhoneMsgIcon":
       return <PermPhoneMsgIcon sx={{ ...data?.iconStyle }} />
+    case "PasteIcon":
+      return <ContentPasteIcon sx={{ ...data?.iconStyle }} />
     case "PrevIcon":
       return (
         <svg fill="inherit" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"

package/src/impaktapps-jsonforms/renderers/components/LeaderBoard.tsx

@@ -197,8 +197,8 @@ const LeaderBoard = React.memo(
                 width="105%"
                 height="70%"
                 rank={2}
-                name={data?.[1][nameKey] || ""}
-                image={data?.[1][imageKey] || uischemaData?.secondImage}
+                name={data?.[1]?.[nameKey] || ""}
+                image={data?.[1]?.[imageKey] || uischemaData?.secondImage}
                 theme={theme.myTheme}
                 sx={{
                   position: "absolute",
@@ -212,7 +212,7 @@ const LeaderBoard = React.memo(
               <Typography
                 sx={{ position: "absolute", bottom: '8%', width: "100%", fontSize: "28px", fontWeight: "bolder" }}
               >
-                {data?.[1][scoreKey] || ""}
+                {data?.[1]?.[scoreKey] || ""}
               </Typography>
             </Box>
             <Box
@@ -227,8 +227,8 @@ const LeaderBoard = React.memo(
                 width="130%"
                 height="100%"
                 rank={1}
-                name={data?.[0][nameKey] || ""}
-                image={data?.[0][imageKey] || uischemaData?.firstImage}
+                name={data?.[0]?.[nameKey] || ""}
+                image={data?.[0]?.[imageKey] || uischemaData?.firstImage}
                 sx={{
                   position: "absolute",
                   left: '50%',
@@ -257,8 +257,8 @@ const LeaderBoard = React.memo(
                 width="105%"
                 height="70%"
                 rank={3}
-                name={data?.[2][nameKey] || ""}
-                image={data?.[2][imageKey] || uischemaData?.thirdImage}
+                name={data?.[2]?.[nameKey] || ""}
+                image={data?.[2]?.[imageKey] || uischemaData?.thirdImage}
                 theme={theme.myTheme}
                 sx={{
                   position: "absolute",

package/src/impaktapps-jsonforms/renderers/components/Table.tsx

@@ -62,7 +62,7 @@ import {
 import { Add, ArrowDownward, ArrowUpward, Check } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
-import "./Table.css"
+import "./Table.css";
 export const Table = memo(function ({
   data,
   uischema,
@@ -134,7 +134,7 @@ export const Table = memo(function ({
           timeZone,
           dateFormat,
           serverDateTimeFormat,
-          index
+          index,
         });
       }),
     []
@@ -549,7 +549,7 @@ export const Table = memo(function ({
                     renderers={renderers}
                   />
                 </Tooltip>
-                
+
                 <ComponentWrapper
                   {...getComponentProps(
                     `${pageName}:${actualElemPath}`,
@@ -609,7 +609,10 @@ export const Table = memo(function ({
                     <Typography
                       sx={{
                         fontSize: "0.65rem",
-                        color: table.getPrePaginationRowModel().rows.length === 0 ? theme.myTheme.palette.text.disabled : theme.myTheme.palette.primary.main,
+                        color:
+                          table.getPrePaginationRowModel().rows.length === 0
+                            ? theme.myTheme.palette.text.disabled
+                            : theme.myTheme.palette.primary.main,
                         display: { xs: "none", sm: "block" },
                       }}
                     >
@@ -628,20 +631,22 @@ export const Table = memo(function ({
           )}
         </>
       );
-      const seachButton = (
-        <>
-        </>
-      );
+      const seachButton = <></>;
       return (
-        <Box sx={{
-          display: "flex",
-          width: "100%",
-          "& svg": { mx: { xs: 0, sm: 2.5 } },
-          flexWrap: "wrap",
-        }}
+        <Box
+          sx={{
+            display: "flex",
+            width: "100%",
+            "& svg": { mx: { xs: 0, sm: 2.5 } },
+            flexWrap: "wrap",
+          }}
         >
           {uischemaData?.lazyLoading &&
-          !((uischemaData?.disableGlobalSearch &&  uischemaData?.disableColumnFilter) ?? false)
+          !(
+            (uischemaData?.disableGlobalSearch &&
+              uischemaData?.disableColumnFilter) ??
+            false
+          )
             ? seachButton
             : null}
           {customIcons}
@@ -649,7 +654,7 @@ export const Table = memo(function ({
           {!(uischemaData?.disableColumnFilter ?? false) && (
             <>
               <div style={{ textAlign: "center" }}>
-              {/* <Tooltip title={"Filter"}> */}
+                {/* <Tooltip title={"Filter"}> */}
                 <MRT_ToggleFiltersButton
                   disableRipple
                   table={table}
@@ -677,7 +682,7 @@ export const Table = memo(function ({
           {!(uischemaData?.disableEditColumn ?? false) && (
             <>
               <div style={{ textAlign: "center" }}>
-              {/* <Tooltip title={"Edit Column"}> */}
+                {/* <Tooltip title={"Edit Column"}> */}
                 <MRT_ShowHideColumnsButton
                   disableRipple
                   table={table}
@@ -707,7 +712,7 @@ export const Table = memo(function ({
           {!(uischemaData?.disableFullScreenToggle ?? false) && (
             <>
               <div style={{ textAlign: "center" }}>
-              {/* <Tooltip title={isFullScreen ? "Exit" : "Full Screen"}> */}
+                {/* <Tooltip title={isFullScreen ? "Exit" : "Full Screen"}> */}
                 <IconButton
                   disableRipple
                   onClick={handleFullScreenToggle}
@@ -748,7 +753,7 @@ export const Table = memo(function ({
           {!(uischemaData?.disableDensityToggle ?? false) && (
             <>
               <div style={{ textAlign: "center" }}>
-              {/* <Tooltip title={"Toggle Density"}> */}
+                {/* <Tooltip title={"Toggle Density"}> */}
                 <MRT_ToggleDensePaddingButton
                   disableRipple
                   table={table}
@@ -777,28 +782,31 @@ export const Table = memo(function ({
           {!(uischemaData?.disableDownloadFile ?? false) && (
             <div style={{ textAlign: "center" }}>
               <Tooltip title={"Download File"}>
-              <IconButton
-                disabled={table.getPrePaginationRowModel().rows.length === 0}
-                // size="small"
-                disableRipple
-                sx={{
-                  paddingTop: {
-                    marginBottom: "-9px",
-                  },
-                  color: theme.myTheme.palette.primary.main,
-                  "&:hover": { color: theme.myTheme.palette.primary.dark },
-                }}
-                onClick={() =>
-                  generateCSV(table.getPrePaginationRowModel().rows)
-                }
-              >
-                <FileDownloadIcon />
-              </IconButton>
+                <IconButton
+                  disabled={table.getPrePaginationRowModel().rows.length === 0}
+                  // size="small"
+                  disableRipple
+                  sx={{
+                    paddingTop: {
+                      marginBottom: "-9px",
+                    },
+                    color: theme.myTheme.palette.primary.main,
+                    "&:hover": { color: theme.myTheme.palette.primary.dark },
+                  }}
+                  onClick={() =>
+                    generateCSV(table.getPrePaginationRowModel().rows)
+                  }
+                >
+                  <FileDownloadIcon />
+                </IconButton>
               </Tooltip>
               <Typography
                 sx={{
                   fontSize: "0.65rem",
-                  color: table.getPrePaginationRowModel().rows.length === 0 ? theme.myTheme.palette.text.disabled : theme.myTheme.palette.primary.main,
+                  color:
+                    table.getPrePaginationRowModel().rows.length === 0
+                      ? theme.myTheme.palette.text.disabled
+                      : theme.myTheme.palette.primary.main,
                   display: { xs: "none", sm: "block" },
                 }}
               >
@@ -851,6 +859,7 @@ export const Table = memo(function ({
         },
       },
     },
+
     muiTableBodyProps: {
       sx: {
         ...((uischema?.config.defaultStyle ||
@@ -859,6 +868,9 @@ export const Table = memo(function ({
         }),
       },
     },
+    muiTableBodyCellProps: {
+      sx: { ...uischema?.config?.style?.tableBodyCellProps },
+    },
     muiSearchTextFieldProps: {
       placeholder: "Search here",
       className: "searchTextfield",
@@ -913,8 +925,8 @@ export const Table = memo(function ({
           }}
         >
           {globalFilter || columnFilters.length
-            ? 'No results found'
-            : 'No records to display'}
+            ? "No results found"
+            : "No records to display"}
         </Typography>
       );
     },
@@ -1048,7 +1060,7 @@ function convertColumn(columnParam: any) {
     dateFormat,
     dateTimeFormat,
     serverDateTimeFormat,
-    index
+    index,
   } = columnParam;
   const commonProperties = {
     size: UISchemacolumn.size,
@@ -1056,7 +1068,9 @@ function convertColumn(columnParam: any) {
       UISchemacolumn.enableColumnFilter ?? true ? true : false,
     columnFilterModeOptions: UISchemacolumn.columnFilterModeOptions,
     muiTableHeadCellProps: {
-      align: theme?.myTheme?.table?.header?.alignment?.[UISchemacolumn?.type] || "left",
+      align:
+        theme?.myTheme?.table?.header?.alignment?.[UISchemacolumn?.type] ||
+        "left",
     },
     muiTableBodyCellProps: {
       align:
@@ -1131,30 +1145,35 @@ function convertColumn(columnParam: any) {
           </Box>
         );
       }
-      if(uischema.config.main?.isLeaderBoard && index === 0){
+      if (uischema.config.main?.isLeaderBoard && index === 0) {
         return (
-          <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}>
           <div
             style={{
-              display: "inline-block",
-              overflow: "auto",
-              scrollbarWidth: "none",
-              fontSize: "11px",
-              width: "35px",
-              ...dynamicOutput?.cellStyle,
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
             }}
           >
-            #{updatedValue}
-          </div>
-          <div style={{display: "flex", alignItems: "center"}}>
-            <img width={40} src="../src/assets/LeaderboardAvatar.svg" alt="LeaderBoardTableAvatar"></img>
-          </div>
+            <div
+              style={{
+                display: "inline-block",
+                overflow: "auto",
+                scrollbarWidth: "none",
+                fontSize: "11px",
+                width: "35px",
+                ...dynamicOutput?.cellStyle,
+              }}
+            >
+              #{updatedValue}
+            </div>
+            <div style={{ display: "flex", alignItems: "center" }}>
+              <img
+                width={40}
+                src="../src/assets/LeaderboardAvatar.svg"
+                alt="LeaderBoardTableAvatar"
+              ></img>
+            </div>
           </div>
         );
       }

package/src/impaktapps-jsonforms/renderers/components/Timer.tsx

@@ -9,7 +9,7 @@ import { getComponentProps } from "../common/getComponentProps";
 import React from "react";
 
 const CustomTimer = React.memo(({ data, uischema, path ,schema,rootSchema}: any) => {
-  const { pageName, permissions, theme } = useContext(DataContext);
+  const { pageName, permissions,theme } = useContext(DataContext);
   const fieldName = getFieldName(path);
   const ctx = useJsonForms();
   return (

package/dist/impaktapps-jsonforms.d.ts

@@ -1 +0,0 @@
-export * from './src/impaktapps-jsonforms/lib/index'