Ensure compatibility between legacy themes and modern themes

Author: KoolADE85

src/lib/fragments/AgGrid.react.js

@@ -46,6 +46,13 @@ import RowMenuRenderer from '../renderers/rowMenuRenderer';
 import {customFunctions} from '../renderers/customFunctions';
 
 import {AgGridReact, useGridFilter} from 'ag-grid-react';
+import {
+    themeAlpine,
+    themeBalham,
+    themeMaterial,
+    themeQuartz,
+} from 'ag-grid-community';
+const themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz};
 
 // d3 imports
 import * as d3Format from 'd3-format';
@@ -153,6 +160,7 @@ export function DashAgGrid(props) {
                 const parsedCondition =
                     esprima.parse(funcString).body[0].expression;
                 const context = {
+                    ...themes,
                     d3,
                     dash_clientside,
                     ...customFunctions,
@@ -170,6 +178,7 @@ export function DashAgGrid(props) {
                 const parsedCondition =
                     esprima.parse(funcString).body[0].expression;
                 const context = {
+                    ...themes,
                     d3,
                     dash_clientside,
                     ...customFunctions,
@@ -189,6 +198,7 @@ export function DashAgGrid(props) {
                 const parsedCondition =
                     esprima.parse(funcString).body[0].expression;
                 const context = {
+                    ...themes,
                     d3,
                     ...customFunctions,
                     ...window.dashAgGridFunctions,
@@ -1519,6 +1529,14 @@ export function DashAgGrid(props) {
         omit(NO_CONVERT_PROPS, {...dashGridOptions, ...restProps})
     );
 
+    if ('theme' in convertedProps) {
+        if (typeof convertedProps.theme === 'function') {
+            convertedProps.theme = convertedProps.theme();
+        } else if (convertedProps.theme in themes) {
+            convertedProps.theme = themes[convertedProps.theme];
+        }
+    }
+
     let alignedGrids;
     if (dashGridOptions) {
         if ('alignedGrids' in dashGridOptions) {

src/lib/utils/propCategories.js

@@ -141,6 +141,9 @@ export const GRID_MAYBE_FUNCTIONS_NO_PARAMS = {
     setPopupParent: 1,
     popupParent: 1,
     quickFilterMatcher: 1,
+
+    // Themeing
+    theme: 1,
 };
 
 /**

tests/examples/assets_legacy_themes/README.md

@@ -0,0 +1,3 @@
+This is a custom assets folder for `themes_legacy.py`. It is used to demonstrate
+how you can supply a legacy theme via a custom CSS file, along with the "legacy: True" option
+for dashGridOptions.

tests/examples/assets_legacy_themes/ag-grid.css

@@ -0,0 +1,78 @@
+import dash_ag_grid as dag
+from dash import Dash, Input, Output, State, dcc, html
+import json
+
+app = Dash(__name__)
+
+rowData = [
+    {"weight": 0.074657, "date": "01/01/2024"},
+    {"weight": 0.06948567, "date": "02/01/2024"},
+    {"weight": 0.02730574, "date": "03/01/2024"},
+    {"weight": 0.0182345, "date": "04/01/2024"},
+]
+
+columnDefs = [
+    {"field": "weight", "cellDataType": "percentage"},
+    {"field": "date", "cellDataType": "dateString"},
+]
+
+dataTypeDefinitions = {
+    "percentage": {
+        "baseDataType": "number",
+        "extendsDataType": "number",
+        "valueFormatter": {
+            "function": "params.value == null ? '' :  d3.format(',.1%')(params.value)"
+        },
+    },
+    "dateString": {
+        "baseDataType": 'dateString',
+        "extendsDataType": 'dateString',
+        "valueParser": {
+            "function": r"params.newValue != null && !!params.newValue.match(/\d{2}\/\d{2}\/\d{4}/) ? params.newValue : null"
+            },
+        "valueFormatter": {"function": "params.value == null ? '' : params.value"},
+        "dataTypeMatcher": {"function": r"params != null && !!params.match(/\d{2}\/\d{2}\/\d{4}/)"},
+        "dateParser": {"function": "dateParser(params)"},
+        "dateFormatter": {"function": "dateFormatter(params)"},
+    },
+}
+
+app.layout = html.Div(
+    [
+        dcc.Dropdown(options=[
+            {"label": "Quartz", "value": "themeQuartz"},
+            {"label": "Balham", "value": "themeBalham"},
+            {"label": "Material", "value": "themeMaterial"},
+            {"label": "Alpine", "value": "themeAlpine"},
+            {"label": "Custom Balham with red accent", "value": '{ "function": "themeBalham.withParams({ accentColor: \'red\' })"}'},
+            {"label": "Invalid theme name", "value": "invalidTheme"},
+        ], value="themeQuartz", id="themeSelector"),
+        dag.AgGrid(
+            id="grid",
+            columnDefs=columnDefs,
+            rowData=rowData,
+            defaultColDef={"filter": True, "editable": True},
+            dashGridOptions={"dataTypeDefinitions": dataTypeDefinitions},
+        ),
+    ],
+)
+
+@app.callback(
+    Output("grid", "dashGridOptions"),
+    Input("themeSelector", "value"),
+    State("grid", "dashGridOptions"),
+)
+def addGrid(selected_theme, dash_grid_options):
+    try:
+        selected_theme = json.loads(selected_theme)
+    except json.JSONDecodeError:
+        ...
+
+    if not dash_grid_options:
+        dash_grid_options = {}
+
+    dash_grid_options["theme"] = selected_theme
+    return dash_grid_options
+
+if __name__ == "__main__":
+    app.run(debug=True)

tests/examples/assets_legacy_themes/ag-theme-alpine.min.css

@@ -0,0 +1,38 @@
+import dash_ag_grid as dag
+from dash import Dash, Input, Output, State, dcc, html
+
+"""
+Note the custom assets_folder in this app!
+Change the `className` theme to one of the options in that folder to see the
+legacy theme in action.
+"""
+
+app = Dash(__name__, assets_folder="assets_legacy_themes/")
+
+rowData = [
+    {"weight": 0.074657, "date": "01/01/2024"},
+    {"weight": 0.06948567, "date": "02/01/2024"},
+    {"weight": 0.02730574, "date": "03/01/2024"},
+    {"weight": 0.0182345, "date": "04/01/2024"},
+]
+
+columnDefs = [
+    {"field": "weight", "cellDataType": "percentage"},
+    {"field": "date", "cellDataType": "dateString"},
+]
+
+app.layout = html.Div(
+    [
+        dag.AgGrid(
+            id="grid",
+            columnDefs=columnDefs,
+            rowData=rowData,
+            defaultColDef={"filter": True, "editable": True},
+            dashGridOptions={"theme": "legacy"},
+            className="ag-theme-material",
+        ),
+    ],
+)
+
+if __name__ == "__main__":
+    app.run(debug=True)