Code review changes

#1660

Author: bmingles

packages/code-studio/src/styleguide/Grids.tsx

@@ -5,7 +5,7 @@ import {
   GridThemeType,
   MockGridModel,
   MockTreeGridModel,
-  GridThemeContext,
+  ThemeContext,
 } from '@deephaven/grid';
 import { IrisGrid } from '@deephaven/iris-grid';
 import { useApi } from '@deephaven/jsapi-bootstrap';
@@ -38,7 +38,7 @@ function Grids(): ReactElement {
   });
   return (
     <div>
-      <GridThemeContext.Provider value={contextTheme}>
+      <ThemeContext.Provider value={contextTheme}>
         <h2 className="ui-title">Grid</h2>
         <Flex {...sampleSectionIdAndClassesSpectrum('grids-grid')}>
           <Grid model={model} theme={theme} />
@@ -81,7 +81,7 @@ function Grids(): ReactElement {
         <Flex {...sampleSectionIdAndClassesSpectrum('grids-iris')} height={500}>
           <IrisGrid model={irisGridModel} />
         </Flex>
-      </GridThemeContext.Provider>
+      </ThemeContext.Provider>
     </div>
   );
 }

packages/code-studio/src/styleguide/ThemeColors.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Tooltip, useTheme } from '@deephaven/components';
 import { ColorUtils } from '@deephaven/utils';
 import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline';
@@ -28,16 +28,8 @@ function buildSwatchDataGroups() {
 }
 
 export function ThemeColors(): JSX.Element {
-  const [swatchDataGroups, setSwatchDataGroups] = useState(
-    buildSwatchDataGroups
-  );
-
   const { selectedThemeKey } = useTheme();
-
-  useEffect(() => {
-    // Rebuild swatches when themes change
-    setSwatchDataGroups(buildSwatchDataGroups());
-  }, [selectedThemeKey]);
+  const swatchDataGroups = useMemo(buildSwatchDataGroups, [selectedThemeKey]);
 
   return (
     <>

packages/grid/src/Grid.tsx

@@ -57,7 +57,7 @@ import {
 } from './EditableGridModel';
 import { EventHandlerResultOptions } from './EventHandlerResult';
 import { assertIsDefined } from './errors';
-import GridThemeContext from './GridThemeContext';
+import ThemeContext from './ThemeContext';
 import { DraggingColumn } from './mouse-handlers/GridColumnMoveMouseHandler';
 import {
   EditingCell,
@@ -211,7 +211,7 @@ export type GridState = {
  * Can also add onClick and onContextMenu handlers to add custom functionality and menus.
  */
 class Grid extends PureComponent<GridProps, GridState> {
-  static contextType = GridThemeContext;
+  static contextType = ThemeContext;
 
   static defaultProps = {
     canvasOptions: { alpha: false } as CanvasRenderingContext2DSettings,

packages/grid/src/GridThemeContext.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { GridTheme as GridThemeType } from './GridTheme';
+
+export type ThemeContextValue = Partial<GridThemeType>;
+
+export const ThemeContext: React.Context<ThemeContextValue> =
+  React.createContext({});
+
+export default ThemeContext;

packages/grid/src/ThemeContext.ts

@@ -25,7 +25,7 @@ export * from './key-handlers';
 export * from './mouse-handlers';
 export * from './errors';
 export * from './EventHandlerResult';
-export * from './GridThemeContext';
+export * from './ThemeContext';
 export type { default as CellRenderer, CellRenderType } from './CellRenderer';
 export { default as TextCellRenderer } from './TextCellRenderer';
 export { default as DataBarCellRenderer } from './DataBarCellRenderer';