Revert "Lazy load css for legacy themes"

This reverts commit e604f0c.

Author: KoolADE85

dash_ag_grid/__init__.py

@@ -67,66 +67,6 @@
         'external_url': f'{_unpkg}async-enterprise.js.map',
         'dynamic': True
     },
-    {
-        'relative_package_path': 'async-ag-grid-css.js',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-grid-css.js',
-        'async': True
-    },
-    {
-        'relative_package_path': 'async-ag-grid-css.js.map',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-grid-css.js.map',
-        'dynamic': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-alpine-css.js',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-alpine-css.js',
-        'async': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-alpine-css.js.map',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-alpine-css.js.map',
-        'dynamic': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-balham-css.js',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-balham-css.js',
-        'async': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-balham-css.js.map',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-balham-css.js.map',
-        'dynamic': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-material-css.js',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-material-css.js',
-        'async': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-material-css.js.map',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-material-css.js.map',
-        'dynamic': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-quartz-css.js',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-quartz-css.js',
-        'async': True
-    },
-    {
-        'relative_package_path': 'async-ag-theme-quartz-css.js.map',
-        'namespace': package_name,
-        'external_url': f'{_unpkg}async-ag-theme-quartz-css.js.map',
-        'dynamic': True
-    },
 ]
 
 _css_dist = []

src/lib/components/AgGrid.react.js

@@ -1,13 +1,6 @@
 import PropTypes from 'prop-types';
 import LazyLoader from '../LazyLoader';
-import React, {
-    lazy,
-    Suspense,
-    useState,
-    useCallback,
-    useEffect,
-    useMemo,
-} from 'react';
+import React, {lazy, Suspense, useState, useCallback, useEffect} from 'react';
 import {AllCommunityModule, ModuleRegistry} from 'ag-grid-community';
 
 // Register all community features
@@ -20,46 +13,6 @@ function getGrid(enable) {
     return enable ? RealAgGridEnterprise : RealAgGrid;
 }
 
-// Base CSS loader - loads ag-grid.css
-const LegacyThemeBaseCSS = lazy(() =>
-    import(
-        /* webpackChunkName: "ag-grid-css" */ 'ag-grid-community/styles/ag-grid.css'
-    ).then(() => ({default: () => null}))
-);
-
-// Theme-specific CSS loaders
-const LegacyThemeAlpineCSS = lazy(() =>
-    import(
-        /* webpackChunkName: "ag-theme-alpine-css" */ 'ag-grid-community/styles/ag-theme-alpine.css'
-    ).then(() => ({default: () => null}))
-);
-
-const LegacyThemeBalhamCSS = lazy(() =>
-    import(
-        /* webpackChunkName: "ag-theme-balham-css" */ 'ag-grid-community/styles/ag-theme-balham.css'
-    ).then(() => ({default: () => null}))
-);
-
-const LegacyThemeMaterialCSS = lazy(() =>
-    import(
-        /* webpackChunkName: "ag-theme-material-css" */ 'ag-grid-community/styles/ag-theme-material.css'
-    ).then(() => ({default: () => null}))
-);
-
-const LegacyThemeQuartzCSS = lazy(() =>
-    import(
-        /* webpackChunkName: "ag-theme-quartz-css" */ 'ag-grid-community/styles/ag-theme-quartz.css'
-    ).then(() => ({default: () => null}))
-);
-
-// Map themes to their CSS loaders
-const legacyThemeLoaderMap = {
-    alpine: LegacyThemeAlpineCSS,
-    balham: LegacyThemeBalhamCSS,
-    material: LegacyThemeMaterialCSS,
-    quartz: LegacyThemeQuartzCSS,
-};
-
 /**
  * Dash interface to AG Grid, a powerful tabular data component.
  */
@@ -94,52 +47,6 @@ function DashAgGrid(props) {
     const {enableEnterpriseModules} = props;
     const RealComponent = getGrid(enableEnterpriseModules);
 
-    const themeName = useMemo(() => {
-        const themeMatch = props.className.match(
-            /\bag-theme-([a-zA-Z0-9-]+)\b/
-        );
-        return themeMatch ? themeMatch[1] : null;
-    }, [props.className]);
-
-    const shouldLoadLegacyCSS = useMemo(() => {
-        // Only load legacy CSS if theme is 'legacy' or unset
-        return (
-            !('theme' in props.dashGridOptions) ||
-            props.dashGridOptions.theme === 'legacy'
-        );
-    }, [props.dashGridOptions.theme]);
-
-    const LegacyThemeLoader = useMemo(() => {
-        if (
-            themeName &&
-            shouldLoadLegacyCSS &&
-            legacyThemeLoaderMap[themeName]
-        ) {
-            return legacyThemeLoaderMap[themeName];
-        }
-        return null;
-    }, [themeName, shouldLoadLegacyCSS]);
-
-    if (themeName && shouldLoadLegacyCSS && LegacyThemeLoader) {
-        const dashGridOptions = {
-            ...props.dashGridOptions,
-            theme: 'legacy',
-        };
-        return (
-            <Suspense fallback={null}>
-                <LegacyThemeBaseCSS />
-                <LegacyThemeLoader />
-                <Suspense fallback={null}>
-                    <RealComponent
-                        parentState={state}
-                        {...props}
-                        dashGridOptions={dashGridOptions}
-                    />
-                </Suspense>
-            </Suspense>
-        );
-    }
-
     return (
         <Suspense fallback={null}>
             <RealComponent parentState={state} {...props} />
@@ -150,7 +57,7 @@ function DashAgGrid(props) {
 DashAgGrid.dashRenderType = true;
 
 DashAgGrid.defaultProps = {
-    className: '',
+    className: 'ag-theme-alpine',
     resetColumnState: false,
     exportDataAsCsv: false,
     selectAll: false,

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

@@ -46,7 +46,7 @@
             {"label": "Alpine", "value": "themeAlpine"},
             {"label": "Custom Balham with red accent", "value": '{ "function": "themeBalham.withParams({ accentColor: \'red\' })"}'},
             {"label": "Invalid theme name", "value": "invalidTheme"},
-        ], value="", id="themeSelector"),
+        ], value="themeQuartz", id="themeSelector"),
         dag.AgGrid(
             id="grid",
             columnDefs=columnDefs,
@@ -61,7 +61,6 @@
     Output("grid", "dashGridOptions"),
     Input("themeSelector", "value"),
     State("grid", "dashGridOptions"),
-    prevent_initial_call=True,
 )
 def addGrid(selected_theme, dash_grid_options):
     try:

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

@@ -7,7 +7,7 @@
 legacy theme in action.
 """
 
-app = Dash(__name__,)
+app = Dash(__name__, assets_folder="assets_legacy_themes/")
 
 rowData = [
     {"weight": 0.074657, "date": "01/01/2024"},
@@ -17,8 +17,8 @@
 ]
 
 columnDefs = [
-    {"field": "weight"},
-    {"field": "date"},
+    {"field": "weight", "cellDataType": "percentage"},
+    {"field": "date", "cellDataType": "dateString"},
 ]
 
 app.layout = html.Div(
@@ -28,7 +28,8 @@
             columnDefs=columnDefs,
             rowData=rowData,
             defaultColDef={"filter": True, "editable": True},
-            className="ag-theme-balham",
+            dashGridOptions={"theme": "legacy"},
+            className="ag-theme-material",
         ),
     ],
 )