rez-table-listing-mui 1.0.49 → 1.0.50

package/src/components/table-settings/common/info-alert.tsx

@@ -0,0 +1,37 @@
+import { Alert, Box } from "@mui/material";
+
+interface InfoAlertProps {
+  message: string;
+  width?: string | number;
+  top?: number | string;
+  color?: string;
+  zIndex?: number;
+  position?: "absolute" | "relative" | "fixed" | "sticky";
+}
+
+const InfoAlert = ({
+  message,
+  width = "100%",
+  top = 10,
+  color = "#088AB2",
+  zIndex = 0,
+  position = "absolute",
+}: InfoAlertProps) => {
+  return (
+    <Box
+      sx={{
+        fontSize: "12px",
+        color,
+        width,
+        height: "fit-content",
+        position,
+        zIndex,
+        top,
+      }}
+    >
+      <Alert severity="info">{message}</Alert>
+    </Box>
+  );
+};
+
+export default InfoAlert;

package/src/components/table-settings/common/listing-values.tsx

@@ -1,4 +1,11 @@
-import { Box, Button, Grid, IconButton, Typography } from "@mui/material";
+import {
+  Alert,
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  Typography,
+} from "@mui/material";
 import CustomSearch from "../../filter/components/search/index.tsx";
 import {
   SortableContext,
@@ -9,6 +16,8 @@ import DraggableListItem from "./draggable-listitem.tsx";
 import { listingValuesStyles } from "../style.ts";
 import Loader from "../../common/loader/loader.tsx";
 import { ClosedEyeIcon, EyeIcon } from "../../../assets/svg.tsx";
+import InfoAlert from "./info-alert.tsx";
+import React from "react";
 ``;
 
 interface FilterValue {
@@ -27,6 +36,8 @@ interface ListingValuesProps {
   tabsApiDataLoading?: boolean;
   onItemToggle: (itemId: string, fromContainerId: string) => void;
   enableDragAndDrop?: boolean;
+  isQuickTabActive?: boolean;
+  AlertComponenet?: React.ReactNode;
 }
 
 const ListingValuesContent = ({
@@ -71,6 +82,7 @@ const ListingValues = ({
   tabsApiDataLoading,
   onItemToggle,
   enableDragAndDrop = true,
+  AlertComponenet,
 }: ListingValuesProps) => {
   const { setNodeRef } = useDroppable({
     id: containerId,
@@ -85,62 +97,65 @@ const ListingValues = ({
       {tabsApiDataLoading ? (
         <Loader />
       ) : (
-        <Box sx={{ p: 2 }}>
-          <Box sx={listingValuesStyles.headerContainer}>
-            <Typography variant="h6" sx={listingValuesStyles.heading}>
-              {headerText}
-            </Typography>
-            <Button
-              onClick={onClick}
-              variant="text"
-              size="small"
-              sx={listingValuesStyles.button}
-              disabled={filteredValues.length === 0}
-            >
-              {buttonText}
-            </Button>
-          </Box>
+        <>
+          <Box sx={{ p: 2, zIndex: 10 }}>
+            <Box sx={listingValuesStyles.headerContainer}>
+              <Typography variant="h6" sx={listingValuesStyles.heading}>
+                {headerText}
+              </Typography>
+              <Button
+                onClick={onClick}
+                variant="text"
+                size="small"
+                sx={listingValuesStyles.button}
+                disabled={filteredValues.length === 0}
+              >
+                {buttonText}
+              </Button>
+            </Box>
 
-          {searchTerm !== undefined && setSearchTerm !== undefined && (
-            <CustomSearch value={searchTerm} onChange={setSearchTerm} />
-          )}
+            {searchTerm !== undefined && setSearchTerm !== undefined && (
+              <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+            )}
 
-          <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
-            {enableDragAndDrop ? (
-              <SortableContext
-                items={filteredValues.map((item) => item.id)}
-                strategy={verticalListSortingStrategy}
-              >
+            <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
+              {enableDragAndDrop ? (
+                <SortableContext
+                  items={filteredValues.map((item) => item.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <Box sx={listingValuesStyles.draggableCover}>
+                    {filteredValues.map((item) => (
+                      <DraggableListItem
+                        key={item.id}
+                        id={item.id}
+                        containerId={containerId}
+                      >
+                        <ListingValuesContent
+                          item={item}
+                          containerId={containerId}
+                          onItemToggle={onItemToggle}
+                        />
+                      </DraggableListItem>
+                    ))}
+                  </Box>
+                </SortableContext>
+              ) : (
                 <Box sx={listingValuesStyles.draggableCover}>
                   {filteredValues.map((item) => (
-                    <DraggableListItem
+                    <ListingValuesContent
                       key={item.id}
-                      id={item.id}
+                      item={item}
                       containerId={containerId}
-                    >
-                      <ListingValuesContent
-                        item={item}
-                        containerId={containerId}
-                        onItemToggle={onItemToggle}
-                      />
-                    </DraggableListItem>
+                      onItemToggle={onItemToggle}
+                    />
                   ))}
                 </Box>
-              </SortableContext>
-            ) : (
-              <Box sx={listingValuesStyles.draggableCover}>
-                {filteredValues.map((item) => (
-                  <ListingValuesContent
-                    key={item.id}
-                    item={item}
-                    containerId={containerId}
-                    onItemToggle={onItemToggle}
-                  />
-                ))}
-              </Box>
-            )}
+              )}
+            </Box>
           </Box>
-        </Box>
+          {AlertComponenet && AlertComponenet}
+        </>
       )}
     </Grid>
   );