@visns-studio/visns-components 5.15.13 → 5.15.14

package/package.json

@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.13",
+    "version": "5.15.14",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -117,6 +117,8 @@ import {
     renderStageCounterColumn,
     renderGalleryColumn,
     renderTotalColumn,
+    renderPhoneColumn,
+    renderAbnColumn,
 } from './columns/ColumnRenderers.jsx';
 import _ from 'lodash';
 
@@ -2921,6 +2923,16 @@ const DataGrid = forwardRef(
                                     column,
                                     commonProps,
                                 });
+                            case 'phone':
+                                return renderPhoneColumn({
+                                    column,
+                                    commonProps,
+                                });
+                            case 'abn':
+                                return renderAbnColumn({
+                                    column,
+                                    commonProps,
+                                });
                             default:
                                 columnId = Array.isArray(column.id)
                                     ? column.id.join('-')

package/src/components/columns/ColumnRenderers.jsx

@@ -2486,3 +2486,105 @@ export const renderTotalColumn = () => {
         },
     };
 };
+
+// Phone Number formatter
+const formatPhoneNumber = (phoneNumber) => {
+    if (!phoneNumber) return '';
+    
+    // Remove all non-digit characters
+    const cleanNumber = phoneNumber.replace(/\D/g, '');
+    
+    // Check if it's an Australian mobile number (starts with 04 and has 10 digits)
+    if (cleanNumber.match(/^04\d{8}$/)) {
+        // Mobile format: 0400 000 000
+        return cleanNumber.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
+    }
+    
+    // Check if it's a 1300/1800 number (10 digits starting with 1300 or 1800)
+    if (cleanNumber.match(/^1[38]00\d{6}$/)) {
+        // 1300/1800 format: 1300 000 000
+        return cleanNumber.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
+    }
+    
+    // Check if it's an Australian landline number (8 digits with area code, or 10 digits total)
+    if (cleanNumber.match(/^0[2-9]\d{8}$/)) {
+        // Landline format: (02) 0000 0000
+        return cleanNumber.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2 $3');
+    }
+    
+    // If it doesn't match standard Australian patterns, return as is with some basic formatting
+    if (cleanNumber.length >= 8) {
+        // Generic formatting for longer numbers
+        if (cleanNumber.length === 8) {
+            return cleanNumber.replace(/(\d{4})(\d{4})/, '$1 $2');
+        } else if (cleanNumber.length === 9) {
+            return cleanNumber.replace(/(\d{1})(\d{4})(\d{4})/, '$1 $2 $3');
+        } else if (cleanNumber.length === 10) {
+            return cleanNumber.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2 $3');
+        }
+    }
+    
+    // Return original if no formatting pattern matches
+    return phoneNumber;
+};
+
+// ABN formatter
+const formatABN = (abn) => {
+    if (!abn) return '';
+    
+    // Remove all non-digit characters
+    const cleanABN = abn.replace(/\D/g, '');
+    
+    // Check if it's a valid 11-digit ABN
+    if (cleanABN.length === 11) {
+        // Format as: 00 000 000 000
+        return cleanABN.replace(/(\d{2})(\d{3})(\d{3})(\d{3})/, '$1 $2 $3 $4');
+    }
+    
+    // Return original if not 11 digits
+    return abn;
+};
+
+// Phone Column Renderer
+export const renderPhoneColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: true,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                const formattedPhone = formatPhoneNumber(data[column.id]);
+                
+                return (
+                    <CellWithTooltip value={data[column.id]} columnType="phone">
+                        <span>{formattedPhone}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// ABN Column Renderer
+export const renderAbnColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: true,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                const formattedABN = formatABN(data[column.id]);
+                
+                return (
+                    <CellWithTooltip value={data[column.id]} columnType="abn">
+                        <span>{formattedABN}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};