Convert more complex EuiCode

- replace previous `UseEuiCodeSyntaxVariables` memoization with this new architecture
cee-chen · Feb 14, 2024 · 3c4fdee · 3c4fdee
1 parent 001f7f1
commit 3c4fdee
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 107 deletions.
diff --git a/src/components/code/code.styles.ts b/src/components/code/code.styles.ts
@@ -9,12 +9,10 @@
 import { css } from '@emotion/react';
 import { logicalShorthandCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
+  const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
   const { euiTheme } = euiThemeContext;
 
   return {
@@ -25,12 +23,12 @@ export const euiCodeStyles = (
       font-family: ${euiTheme.font.familyCode};
       font-size: 0.9em; /* 1 */
       ${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */
-      background: ${euiCodeSyntaxVariables.backgroundColor};
+      background: ${codeSyntaxVariables.backgroundColor};
       border-radius: ${euiTheme.border.radius.small};
       font-weight: ${euiTheme.font.weight.bold};
-      color: ${euiCodeSyntaxVariables.inlineCodeColor};
+      color: ${codeSyntaxVariables.inlineCodeColor};
 
-      ${euiCodeSyntaxVariables.tokensCss}
+      ${codeSyntaxVariables.tokensCss}
     `,
     transparentBackground: css`
       background: transparent;

diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
@@ -15,8 +15,7 @@ import {
   checkSupportedLanguage,
   getHtmlContent,
 } from './utils';
-import { useEuiTheme } from '../../services';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiCodeStyles } from './code.styles';
 
 export type EuiCodeProps = EuiCodeSharedProps;
@@ -47,7 +46,7 @@ export const EuiCode: FunctionComponent<EuiCodeProps> = ({
 
   const classes = classNames('euiCode', className);
 
-  const styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
+  const styles = useEuiMemoizedStyles(euiCodeStyles);
   const cssStyles = [
     styles.euiCode,
     transparentBackground && styles.transparentBackground,

diff --git a/src/components/code/code_block.styles.ts b/src/components/code/code_block.styles.ts
@@ -22,22 +22,20 @@ import {
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
-import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeBlockStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
+  const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
   const { euiTheme } = euiThemeContext;
 
   return {
     euiCodeBlock: css`
       max-inline-size: 100%;
       display: block;
       position: relative;
-      background: ${euiCodeSyntaxVariables.backgroundColor};
+      background: ${codeSyntaxVariables.backgroundColor};
 
-      ${euiCodeSyntaxVariables.tokensCss}
+      ${codeSyntaxVariables.tokensCss}
     `,
     // Font size
     s: css`
@@ -134,17 +132,14 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
   };
 };
 
-export const euiCodeBlockCodeStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeBlockCodeStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   return {
     euiCodeBlock__code: css`
       font-family: ${euiTheme.font.familyCode};
       font-size: inherit;
-      color: ${euiCodeSyntaxVariables.color};
+      color: ${euiTheme.colors.text};
       display: block;
     `,
     isVirtualized: css`

diff --git a/src/components/code/code_block.tsx b/src/components/code/code_block.tsx
@@ -9,7 +9,12 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import { RefractorNode } from 'refractor';
 import classNames from 'classnames';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+
+import {
+  useCombinedRefs,
+  useEuiTheme,
+  useEuiMemoizedStyles,
+} from '../../services';
 import { ExclusiveUnion } from '../common';
 import {
   EuiCodeSharedProps,
@@ -32,7 +37,6 @@ import {
   euiCodeBlockPreStyles,
   euiCodeBlockCodeStyles,
 } from './code_block.styles';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 
 // Based on observed line height for non-virtualized code blocks
 const fontSizeToRowHeightMap = {
@@ -123,7 +127,6 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
-  const euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
   const language = useMemo(
     () => checkSupportedLanguage(_language),
     [_language]
@@ -177,7 +180,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   const hasControls = !!(copyButton || fullScreenButton);
   const hasBothControls = !!(copyButton && fullScreenButton);
 
-  const styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
+  const styles = useEuiMemoizedStyles(euiCodeBlockStyles);
   const cssStyles = [
     styles.euiCodeBlock,
     styles[fontSize],
@@ -188,26 +191,26 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
         : styles.hasControls[paddingSize]),
   ];
 
+  const preStyles = useEuiMemoizedStyles(euiCodeBlockPreStyles);
   const [preProps, preFullscreenProps] = useMemo(() => {
     const isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
 
-    const styles = euiCodeBlockPreStyles(euiTheme);
     const cssStyles = [
-      styles.euiCodeBlock__pre,
+      preStyles.euiCodeBlock__pre,
       isWhiteSpacePre
-        ? styles.whiteSpace.pre.pre
-        : styles.whiteSpace.preWrap.preWrap,
+        ? preStyles.whiteSpace.pre.pre
+        : preStyles.whiteSpace.preWrap.preWrap,
     ];
 
     const preProps = {
       className: 'euiCodeBlock__pre',
       css: [
         ...cssStyles,
-        styles.padding[paddingSize],
+        preStyles.padding[paddingSize],
         hasControls &&
           (isWhiteSpacePre
-            ? styles.whiteSpace.pre.controlsOffset[paddingSize]
-            : styles.whiteSpace.preWrap.controlsOffset[paddingSize]),
+            ? preStyles.whiteSpace.pre.controlsOffset[paddingSize]
+            : preStyles.whiteSpace.preWrap.controlsOffset[paddingSize]),
       ],
       tabIndex: isVirtualized ? 0 : tabIndex,
     };
@@ -216,19 +219,19 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
       css: [
         ...cssStyles,
         // Force fullscreen to use xl padding
-        styles.padding.xl,
+        preStyles.padding.xl,
         hasControls &&
           (isWhiteSpacePre
-            ? styles.whiteSpace.pre.controlsOffset.xl
-            : styles.whiteSpace.preWrap.controlsOffset.xl),
+            ? preStyles.whiteSpace.pre.controlsOffset.xl
+            : preStyles.whiteSpace.preWrap.controlsOffset.xl),
       ],
       tabIndex: 0,
       onKeyDown,
     };
 
     return [preProps, preFullscreenProps];
   }, [
-    euiTheme,
+    preStyles,
     whiteSpace,
     isVirtualized,
     hasControls,
@@ -237,11 +240,11 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
     tabIndex,
   ]);
 
+  const codeStyles = useEuiMemoizedStyles(euiCodeBlockCodeStyles);
   const codeProps = useMemo(() => {
-    const styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
     const cssStyles = [
-      styles.euiCodeBlock__code,
-      isVirtualized && styles.isVirtualized,
+      codeStyles.euiCodeBlock__code,
+      isVirtualized && codeStyles.isVirtualized,
     ];
 
     return {
@@ -250,7 +253,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
       'data-code-language': language,
       ...rest,
     };
-  }, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);
+  }, [codeStyles, language, isVirtualized, rest]);
 
   return (
     <div

diff --git a/src/components/code/code_block_controls.styles.ts b/src/components/code/code_block_controls.styles.ts
@@ -16,21 +16,19 @@
 import { css } from '@emotion/react';
 import { euiPaddingSize } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeBlockControlsStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeBlockControlsStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
 
   return {
     euiCodeBlock__controls: css`
       position: absolute;
       display: flex;
       flex-direction: column;
       gap: ${euiTheme.size.xs};
-      background: ${euiCodeSyntaxVariables.backgroundColor};
+      background: ${codeSyntaxVariables.backgroundColor};
     `,
     offset: {
       none: css`

diff --git a/src/components/code/code_block_controls.tsx b/src/components/code/code_block_controls.tsx
@@ -7,19 +7,15 @@
  */
 
 import React, { FC, Fragment, ReactNode } from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import type { EuiCodeBlockPaddingSize } from './code_block';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockControlsStyles } from './code_block_controls.styles';
 
 export const EuiCodeBlockControls: FC<{
   controls: ReactNode[];
   paddingSize: EuiCodeBlockPaddingSize;
 }> = ({ paddingSize, controls }) => {
-  const styles = euiCodeBlockControlsStyles(
-    useEuiTheme(),
-    useEuiCodeSyntaxVariables()
-  );
+  const styles = useEuiMemoizedStyles(euiCodeBlockControlsStyles);
   const cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
 
   const hasControls = controls.some((control) => !!control);

diff --git a/src/components/code/code_block_full_screen.tsx b/src/components/code/code_block_full_screen.tsx
@@ -14,12 +14,11 @@ import React, {
   useMemo,
   PropsWithChildren,
 } from 'react';
-import { keys, useEuiTheme } from '../../services';
+import { keys, useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockStyles } from './code_block.styles';
 
 /**
@@ -92,7 +91,7 @@ export const useFullScreen = ({
 export const EuiCodeBlockFullScreenWrapper: FunctionComponent<
   PropsWithChildren
 > = ({ children }) => {
-  const styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
+  const styles = useEuiMemoizedStyles(euiCodeBlockStyles);
   const cssStyles = [
     styles.euiCodeBlock,
     styles.l, // Force fullscreen to use large font

diff --git a/src/components/code/code_syntax.styles.ts b/src/components/code/code_syntax.styles.ts
@@ -6,56 +6,51 @@
  * Side Public License, v 1.
  */
 
-import { useMemo } from 'react';
 import {
-  useEuiTheme,
+  UseEuiTheme,
   makeHighContrastColor,
   euiPaletteColorBlind,
 } from '../../services';
 
 const visColors = euiPaletteColorBlind();
 
-// These variables are computationally expensive, so it needs
-// to be a hook in order to memoize it per theme
-export const useEuiCodeSyntaxVariables = () => {
-  const { euiTheme } = useEuiTheme();
-
-  return useMemo(() => {
-    const backgroundColor = euiTheme.colors.lightestShade;
-
-    return {
-      backgroundColor: backgroundColor,
-      color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
-      inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
-      selectedBackgroundColor: 'inherit',
-      commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(
-        backgroundColor
-      ),
-      selectorTagColor: 'inherit',
-      stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
-      tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
-      nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
-      numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
-      keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
-      functionTitleColor: 'inherit',
-      typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
-      attributeColor: 'inherit',
-      symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
-      paramsColor: 'inherit',
-      metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(
-        backgroundColor
-      ),
-      titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
-      sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
-      additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
-      deletionColor: makeHighContrastColor(euiTheme.colors.danger)(
-        backgroundColor
-      ),
-      selectorClassColor: 'inherit',
-      selectorIdColor: 'inherit',
-
-      get tokensCss() {
-        return `
+// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+export const euiCodeSyntaxVariables = ({ euiTheme }: UseEuiTheme) => {
+  const backgroundColor = euiTheme.colors.lightestShade;
+
+  return {
+    backgroundColor: backgroundColor,
+    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+    inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
+    selectedBackgroundColor: 'inherit',
+    commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(
+      backgroundColor
+    ),
+    selectorTagColor: 'inherit',
+    stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
+    tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
+    keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
+    functionTitleColor: 'inherit',
+    typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    attributeColor: 'inherit',
+    symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
+    paramsColor: 'inherit',
+    metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(
+      backgroundColor
+    ),
+    titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
+    sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
+    additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
+    deletionColor: makeHighContrastColor(euiTheme.colors.danger)(
+      backgroundColor
+    ),
+    selectorClassColor: 'inherit',
+    selectorIdColor: 'inherit',
+
+    get tokensCss() {
+      return `
   .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {
     opacity: .7;
   }
@@ -181,11 +176,6 @@ export const useEuiCodeSyntaxVariables = () => {
   .token.entity {
     cursor: help;
   }`;
-      },
-    };
-  }, [euiTheme]);
+    },
+  };
 };
-
-export type UseEuiCodeSyntaxVariables = ReturnType<
-  typeof useEuiCodeSyntaxVariables
->;