@visns-studio/visns-components 6.1.6 → 6.1.8

package/package.json

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

package/src/components/DataGrid.jsx

@@ -250,6 +250,13 @@ const loadData = async (
 const ROW_HEIGHT = 34;
 const GRID_CHROME = ROW_HEIGHT * 2 + 60; // header + filter row + footer
 
+/**
+ * Column types whose renderer names the grid column `${type}.${id}` instead of
+ * the plain field path. Their filter entries must use the same name, otherwise
+ * the grid cannot pair the filter with its column and no editor is rendered.
+ */
+const TYPE_PREFIXED_FILTER_NAMES = ['age', 'coding'];
+
 function fitToRows(dataCount, windowHeight) {
     const roomy = Math.max(windowHeight * 0.7, 550);
 
@@ -3655,6 +3662,7 @@ const DataGrid = forwardRef(
                                     column,
                                     commonProps,
                                     filterEditor,
+                                    filterEditorProps,
                                 });
                             case 'arrayCount':
                                 return renderArrayCountColumn({
@@ -3672,6 +3680,8 @@ const DataGrid = forwardRef(
                                 return renderCodingColumn({
                                     column,
                                     commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
                                     handleCoding,
                                 });
                             case 'colour':
@@ -4285,21 +4295,31 @@ const DataGrid = forwardRef(
                             let filterName = '';
 
                             if (Array.isArray(column.id)) {
-                                filterName = column.id.reduce(
-                                    (acc, id) => acc + `${id}.`,
-                                    ''
-                                );
+                                // The age/coding renderers name their column
+                                // `${type}.${id}` with the array stringified,
+                                // so the filter has to be named the same way or
+                                // the grid never matches it to the column.
+                                if (TYPE_PREFIXED_FILTER_NAMES.includes(column.type)) {
+                                    filterName = `${column.type}.${column.id}`;
+                                } else {
+                                    filterName = column.id.reduce(
+                                        (acc, id) => acc + `${id}.`,
+                                        ''
+                                    );
 
-                                if (
-                                    column.type === 'dropdown' &&
-                                    filterName.endsWith('.')
-                                ) {
-                                    filterName = filterName.slice(0, -1);
+                                    if (
+                                        column.type === 'dropdown' &&
+                                        filterName.endsWith('.')
+                                    ) {
+                                        filterName = filterName.slice(0, -1);
+                                    }
                                 }
                             } else {
                                 switch (column.type) {
                                     case 'address':
                                     case 'boolean':
+                                    case 'age':
+                                    case 'coding':
                                         filterName = `${column.type}.${column.id}`;
                                         break;
                                     default:
@@ -4308,7 +4328,10 @@ const DataGrid = forwardRef(
                                 }
                             }
 
-                            if (column.nameFrom) {
+                            if (
+                                column.nameFrom &&
+                                !TYPE_PREFIXED_FILTER_NAMES.includes(column.type)
+                            ) {
                                 filterName += column.nameFrom;
                             }
 

package/src/components/TableFilter.jsx

@@ -390,6 +390,7 @@ function TableFilter({
 
         // Calculate the updated settings
         let updatedSettings = null;
+        let applySettingsUpdate = null;
 
         if (setSettings) {
             // For child items, non-parent items, or parent items with a value property
@@ -406,66 +407,73 @@ function TableFilter({
                 const filterId = id;
                 const filterValue = value || '';
 
-                // Start with the current settings
-                // Check if _currentValue exists (React state setter) or use the object directly
-                updatedSettings = setSettings._currentValue
-                    ? { ...setSettings._currentValue }
-                    : { ...setSettings };
-
-                if (updatedSettings.ajaxSetting) {
-                    // First, remove any existing filters that might conflict
-                    let _where = updatedSettings.ajaxSetting.where
-                        ? [...updatedSettings.ajaxSetting.where].filter(
-                              (item) => {
+                // Merge this filter into a settings object, supporting both
+                // ajaxSetting.where and a top-level where. Written as a pure
+                // function of the base settings so it can run either against
+                // the `settings` prop or inside a functional state update —
+                // a state setter carries no readable current value.
+                const mergeFilterIntoSettings = (base) => {
+                    let updated = base ? { ...base } : {};
+
+                    if (updated.ajaxSetting) {
+                        // First, remove any existing filters that might conflict
+                        let _where = updated.ajaxSetting.where
+                            ? [...updated.ajaxSetting.where].filter((item) => {
                                   // Keep items that don't match this filter ID
                                   return item.id !== filterId;
-                              }
-                          )
-                        : [];
+                              })
+                            : [];
 
-                    // Add the new filter only if both filterId and filterValue have values
-                    if (filterId && filterValue !== '') {
-                        _where.push({ id: filterId, value: filterValue });
+                        // Add the new filter only if both filterId and filterValue have values
+                        if (filterId && filterValue !== '') {
+                            _where.push({ id: filterId, value: filterValue });
+                        }
+
+                        return {
+                            ...updated,
+                            ajaxSetting: {
+                                ...updated.ajaxSetting,
+                                where: _where,
+                            },
+                        };
                     }
 
-                    updatedSettings = {
-                        ...updatedSettings,
-                        ajaxSetting: {
-                            ...updatedSettings.ajaxSetting,
-                            where: _where,
-                        },
-                    };
-                } else if (updatedSettings.where) {
-                    // Handle the case where we're using 'where' directly instead of ajaxSetting.where
-                    let w = updatedSettings.where
-                        ? [...updatedSettings.where]
-                        : [];
+                    if (updated.where) {
+                        // Handle the case where we're using 'where' directly instead of ajaxSetting.where
+                        let w = [...updated.where];
 
-                    // Remove any existing filters that might conflict
-                    w = w.filter((item) => item.id !== filterId);
+                        // Remove any existing filters that might conflict
+                        w = w.filter((item) => item.id !== filterId);
 
-                    // Add the new filter only if both filterId and filterValue have values
-                    if (filterId && filterValue !== '') {
-                        w.push({ id: filterId, value: filterValue });
+                        // Add the new filter only if both filterId and filterValue have values
+                        if (filterId && filterValue !== '') {
+                            w.push({ id: filterId, value: filterValue });
+                        }
+
+                        return { ...updated, where: w };
                     }
 
-                    updatedSettings = { ...updatedSettings, where: w };
-                } else {
                     // If neither ajaxSetting.where nor where exists, create a new ajaxSetting
                     // Only apply the filter if both filterId and filterValue have values
                     if (filterId && filterValue !== '') {
-                        updatedSettings = {
-                            ...settings,
+                        return {
+                            ...updated,
                             ajaxSetting: {
-                                ...(settings.ajaxSetting || {}),
                                 where: [{ id: filterId, value: filterValue }],
                             },
                         };
-                    } else {
-                        // If either filterId or filterValue is empty, just copy the existing settings
-                        updatedSettings = { ...settings };
                     }
-                }
+
+                    return updated;
+                };
+
+                applySettingsUpdate = mergeFilterIntoSettings;
+                // With a settings prop we can compute the result now (also
+                // feeds onFilterChange); without one the update happens as a
+                // functional setState below.
+                updatedSettings = settings
+                    ? mergeFilterIntoSettings(settings)
+                    : null;
             }
         }
 
@@ -477,8 +485,14 @@ function TableFilter({
             setFilters(updatedFilters);
 
             // Update the settings if needed
-            if (updatedSettings && setSettings) {
-                setSettings(updatedSettings);
+            if (setSettings && applySettingsUpdate) {
+                if (updatedSettings) {
+                    setSettings(updatedSettings);
+                } else {
+                    // No settings prop to read from — merge against the
+                    // live state via a functional update instead.
+                    setSettings((prev) => applySettingsUpdate(prev));
+                }
             }
         }
 

package/src/components/columns/ColumnRenderers.jsx

@@ -1641,11 +1641,17 @@ export const renderPlaceholderColumn = ({ column, commonProps }) => {
 };
 
 // Age Column Renderer
-export const renderAgeColumn = ({ column, commonProps, filterEditor }) => {
+export const renderAgeColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         type: 'number',
         filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
         name: `${column.type}.${column.id}`,
         render: ({ data }) => {
             const value = column.id.reduce((acc, id) => {
@@ -1675,9 +1681,19 @@ export const renderAgeColumn = ({ column, commonProps, filterEditor }) => {
 };
 
 // Coding Column Renderer
-export const renderCodingColumn = ({ column, commonProps, handleCoding }) => {
+export const renderCodingColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+    handleCoding,
+}) => {
     return {
         ...commonProps,
+        // A coding column is a composite of several icon fields, so it cannot
+        // be sorted — but it can be filtered when the config declares one.
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
         name: `${column.type}.${column.id}`,
         sortable: false,
         render: ({ data }) => {