@visns-studio/visns-components 5.10.2 → 5.10.4

package/src/components/crm/Field.jsx

@@ -197,8 +197,6 @@ function Field({
                 };
             }
 
-            console.info(JSON.stringify(filter));
-
             CustomFetch(settings.url, 'POST', filter, function (result) {
                 setOptions(result.data);
 

package/src/components/crm/cells/CellWithTooltip.jsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip } from 'react-tooltip';
+import moment from 'moment';
+import numeral from 'numeral';
+
+// Utility function to check if text content is truncated
+const isTextTruncated = (element) => {
+    if (!element) return false;
+    return (
+        element.scrollWidth > element.clientWidth ||
+        element.scrollHeight > element.clientHeight
+    );
+};
+
+// Utility function to format cell value for tooltip display
+const formatCellValueForTooltip = (value, columnType) => {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+
+    switch (columnType) {
+        case 'date':
+        case 'datetime':
+            if (
+                moment(value).isValid() &&
+                moment(value).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                return moment(value).format('DD-MM-YYYY HH:mm');
+            }
+            return String(value);
+        case 'currency':
+            return numeral(value).format('$0,0.00');
+        case 'number':
+            return numeral(value).format('0,0');
+        case 'boolean':
+            return value ? 'Yes' : 'No';
+        case 'richtext':
+            // Strip HTML tags for tooltip
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = value;
+            return tempDiv.textContent || tempDiv.innerText || '';
+        default:
+            return String(value);
+    }
+};
+
+// Component to wrap cell content with tooltip functionality
+const CellWithTooltip = ({
+    children,
+    value,
+    columnType = 'text',
+    className = '',
+    wordWrap = false,
+}) => {
+    const cellRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipId] = useState(
+        () => `cell-tooltip-${Math.random().toString(36).substr(2, 9)}`
+    );
+
+    useEffect(() => {
+        const checkTruncation = () => {
+            if (cellRef.current) {
+                const isTruncated = isTextTruncated(cellRef.current);
+                setShowTooltip(isTruncated);
+            }
+        };
+
+        // Check truncation on mount and when content changes
+        checkTruncation();
+
+        // Also check on window resize
+        const handleResize = () => checkTruncation();
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [children, value]);
+
+    const tooltipContent = formatCellValueForTooltip(value, columnType);
+
+    // For wordWrap columns, only show tooltip if explicitly requested (content is still truncated due to height limits)
+    // For non-wordWrap columns, show tooltip when content is truncated
+    const shouldShowTooltip = 
+        wordWrap 
+            ? false // Disable tooltip for wordWrap columns since content is visible
+            : showTooltip && tooltipContent && tooltipContent.trim() !== '';
+
+    // Dynamic styles based on wordWrap setting
+    const cellStyles = wordWrap 
+        ? {
+            width: '100%',
+            whiteSpace: 'normal',
+            wordWrap: 'break-word',
+            overflowWrap: 'break-word',
+            overflow: 'visible',
+        }
+        : {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: '100%',
+        };
+
+    return (
+        <div
+            ref={cellRef}
+            className={className}
+            style={cellStyles}
+            {...(shouldShowTooltip && {
+                'data-tooltip-id': tooltipId,
+                'data-tooltip-html': tooltipContent,
+            })}
+        >
+            {children}
+            {shouldShowTooltip && (
+                <Tooltip
+                    id={tooltipId}
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                        color: 'white',
+                        borderRadius: '6px',
+                        padding: '8px 12px',
+                        fontSize: '13px',
+                        maxWidth: '500px',
+                        wordWrap: 'break-word',
+                        zIndex: 1000,
+                    }}
+                    place="top"
+                    offset={5}
+                />
+            )}
+        </div>
+    );
+};
+
+export default CellWithTooltip;