@visns-studio/visns-components 5.4.15 → 5.4.17

package/package.json

@@ -49,7 +49,7 @@
         "react-to-print": "^2.15.1",
         "react-toastify": "^10.0.6",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.28.0",
+        "react-tooltip": "^5.28.1",
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
@@ -58,7 +58,7 @@
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
-        "vite": "^5.4.17",
+        "vite": "^5.4.18",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
@@ -81,7 +81,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.15",
+    "version": "5.4.17",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericDashboard.jsx

@@ -37,6 +37,8 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     const [selectedAddWidgetId, setSelectedAddWidgetId] = useState('');
     // Flag used only for triggering reinitialization after widget addition.
     const [widgetAdded, setWidgetAdded] = useState(false);
+    // State to track viewport width
+    const [viewportWidth, setViewportWidth] = useState(window.innerWidth);
 
     // Compute available widgets from original settings that are not yet added.
     const availableWidgets = setting.widgets.filter(
@@ -188,6 +190,21 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         }
     }, [dashboardSetting]);
 
+    // Handle window resize events to update viewportWidth
+    useEffect(() => {
+        const handleResize = () => {
+            setViewportWidth(window.innerWidth);
+        };
+
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+
+        // Clean up event listener on component unmount
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
     const openModal = (widgetId) => {
         setModalContent(widgetId);
         setModalShow(true);
@@ -867,8 +884,28 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 case 'table': {
                     const tableData = widgetData.data || widgetData;
                     const tableKeys = widgetData.keys || [];
+
+                    // Calculate dynamic max-width based on viewport width
+                    const getTableMaxWidth = () => {
+                        // For very small screens (mobile)
+                        if (viewportWidth < 768) {
+                            return '100%';
+                        }
+                        // For medium screens (tablets)
+                        else if (viewportWidth < 1200) {
+                            return Math.min(viewportWidth * 0.9, 1000) + 'px';
+                        }
+                        // For large screens (desktops)
+                        else {
+                            return Math.min(viewportWidth * 0.9, 2560) + 'px';
+                        }
+                    };
+
                     return (
-                        <div className={styles['table-container']}>
+                        <div
+                            className={styles['table-container']}
+                            style={{ maxWidth: getTableMaxWidth() }}
+                        >
                             {tableData.length > 0 ? (
                                 <div className={styles['table-scroll']}>
                                     <table>

package/src/components/crm/generic/styles/GenericDashboard.module.scss

@@ -387,7 +387,7 @@
     border: 1px solid #dadce0;
     border-radius: 8px;
     overflow: hidden;
-    max-width: 1400px;
+    width: 100%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 

package/src/components/crm/README_DATAGRID.md

@@ -1,70 +0,0 @@
-# DataGrid Component
-
-## Customizing Hover Color
-
-The DataGrid component now supports customizable hover colors. This allows you to set different hover colors for different instances of the DataGrid.
-
-### Method 1: Using the hoverColor Prop (Recommended)
-
-The simplest way to set a custom hover color is to use the `hoverColor` prop directly:
-
-```jsx
-import DataGrid from './components/crm/DataGrid';
-
-// In your component
-<DataGrid
-    hoverColor="rgb(255, 240, 230)" // Custom hover color
-    // other props...
-/>;
-```
-
-### Method 2: Using CSS Variables in Component Props
-
-You can pass a custom style object to the DataGrid component with the `--hover-color` CSS variable:
-
-```jsx
-import DataGrid from './components/crm/DataGrid';
-
-// Define custom styles with hover color
-const customStyle = {
-    '--hover-color': 'rgb(255, 240, 230)', // Custom hover color
-};
-
-// In your component
-<DataGrid
-    style={customStyle}
-    // other props...
-/>;
-```
-
-### Method 3: Using CSS/SCSS
-
-You can define the `--hover-color` CSS variable in your CSS or SCSS files:
-
-```css
-/* Global default hover color */
-:root {
-    --hover-color: rgb(230, 240, 250);
-}
-
-/* For specific containers */
-.special-grid-container {
-    --hover-color: rgb(255, 240, 230);
-}
-```
-
-Then apply the class to your container:
-
-```jsx
-<div className="special-grid-container">
-    <DataGrid {...props} />
-</div>
-```
-
-### Default Value
-
-If no hover color is specified (via prop or CSS variable), the DataGrid will use a default light blue color (`rgb(230, 240, 250)`).
-
-### Example
-
-See the `src/examples/CustomHoverDataGrid.jsx` file for a complete example of how to implement custom hover colors using all three methods.