[misc] Clean up & performance improvements

- reorder vars, remove `let` jsx nodes in favor of useMemo
elastic · Jan 29, 2024 · 58c1157 · 58c1157
1 parent 5fcb18d
commit 58c1157
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 103 deletions.
diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts
@@ -20,7 +20,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   const generatePaddingStyles = (property = 'padding') => ({
-    none: css``,
+    none: null,
     s: css`
       ${property}: ${euiPaddingSize(euiThemeContext, 's')}
     `,

diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx
@@ -6,11 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, ReactElement, ReactNode } from 'react';
+import React, {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useMemo,
+} from 'react';
 import classNames from 'classnames';
 
 import { useEuiTheme } from '../../services';
-import { CommonProps, keysOf } from '../common';
+import { CommonProps } from '../common';
 import { EuiTitle, EuiTitleSize } from '../title';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSpacer } from '../spacer';
@@ -21,15 +26,7 @@ import { EuiPanel, _EuiPanelDivlike } from '../panel/panel';
 
 import { euiEmptyPromptStyles } from './empty_prompt.styles';
 
-const paddingSizeToClassNameMap = {
-  none: null,
-  s: 'euiEmptyPrompt--paddingSmall',
-  m: 'euiEmptyPrompt--paddingMedium',
-  l: 'euiEmptyPrompt--paddingLarge',
-};
-
-export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
-
+export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const;
 export type PaddingSize = (typeof PADDING_SIZES)[number];
 
 export type EuiEmptyPromptProps = CommonProps &
@@ -99,51 +96,55 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
   footer,
   ...rest
 }) => {
+  const classes = classNames('euiEmptyPrompt', className);
   const euiTheme = useEuiTheme();
-  const styles = euiEmptyPromptStyles(euiTheme);
+  const styles = useMemo(() => euiEmptyPromptStyles(euiTheme), [euiTheme]);
   const cssStyles = [styles.euiEmptyPrompt, styles[layout]];
+  const mainStyles = [
+    styles.main.euiEmptyPrompt__main,
+    styles.main[layout],
+    styles.main[paddingSize],
+    layout === 'horizontal' && styles.main.horizontalPadding[paddingSize],
+  ];
+  const contentStyles = [
+    styles.content.euiEmptyPrompt__content,
+    styles.content[layout],
+  ];
 
-  const isVerticalLayout = layout === 'vertical';
   // Default the iconColor to `subdued`,
   // otherwise try to match the iconColor with the panel color unless iconColor is specified
   const iconColor = _iconColor ?? (isNamedColor(color) ? color : 'subdued');
+  const iconNode = useMemo(() => {
+    if (!iconType && !icon) return null;
+
+    const iconStyles = [styles.icon.euiEmptyPrompt__icon, styles.icon[layout]];
+    return (
+      <div className="euiEmptyPrompt__icon" css={iconStyles}>
+        {iconType ? (
+          <EuiIcon type={iconType} size="xxl" color={iconColor} />
+        ) : (
+          icon
+        )}
+      </div>
+    );
+  }, [icon, iconType, iconColor, layout, styles.icon]);
 
-  const iconNode = iconType ? (
-    <EuiIcon type={iconType} size="xxl" color={iconColor} />
-  ) : (
-    icon
-  );
-
-  let titleNode;
-  let bodyNode;
-  if (body || title) {
-    if (title) {
-      titleNode = <EuiTitle size={titleSize}>{title}</EuiTitle>;
-    }
-
-    if (body) {
-      bodyNode = (
-        <>
-          {title && <EuiSpacer size="m" />}
-          <EuiText color="subdued">{body}</EuiText>
-        </>
-      );
-    }
-  }
-
-  let actionsNode;
-  if (actions) {
-    let actionsRow;
+  const actionsNode = useMemo(() => {
+    if (!actions) return null;
 
     if (Array.isArray(actions)) {
-      actionsRow = (
+      const actionStyles = [
+        styles.actions.euiEmptyPrompt__actions,
+        styles.actions[layout],
+      ];
+      return (
         <EuiFlexGroup
           className="euiEmptyPrompt__actions"
-          css={[styles.actions.euiEmptyPrompt__actions, styles.actions[layout]]}
+          css={actionStyles}
           gutterSize="m"
           alignItems="center"
           justifyContent="center"
-          direction={isVerticalLayout ? 'column' : 'row'}
+          direction={layout === 'vertical' ? 'column' : 'row'}
         >
           {actions.map((action, index) => (
             <EuiFlexItem key={index} grow={false}>
@@ -153,31 +154,24 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
         </EuiFlexGroup>
       );
     } else {
-      actionsRow = actions;
+      return actions;
     }
-
-    actionsNode = (
-      <>
-        <EuiSpacer size="l" />
-        {actionsRow}
-      </>
+  }, [actions, layout, styles.actions]);
+
+  const footerNode = useMemo(() => {
+    if (!footer) return null;
+    const footerStyles = [
+      styles.footer.euiEmptyPrompt__footer,
+      styles.footer[paddingSize],
+      styles.footer[color],
+      color === 'transparent' && !hasBorder && styles.footer.roundedBorders,
+    ];
+    return (
+      <div className="euiEmptyPrompt__footer" css={footerStyles}>
+        {footer}
+      </div>
     );
-  }
-
-  const contentNodes = (
-    <>
-      {titleNode}
-      {bodyNode}
-      {actionsNode}
-    </>
-  );
-
-  const classes = classNames(
-    'euiEmptyPrompt',
-    [`euiEmptyPrompt--${layout}`],
-    paddingSizeToClassNameMap[paddingSize],
-    className
-  );
+  }, [footer, paddingSize, color, hasBorder, styles.footer]);
 
   return (
     <EuiPanel
@@ -189,45 +183,17 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
       hasBorder={hasBorder}
       {...rest}
     >
-      <div
-        className="euiEmptyPrompt__main"
-        css={[
-          styles.main.euiEmptyPrompt__main,
-          styles.main[layout],
-          styles.main[paddingSize],
-          layout === 'horizontal' && styles.main.horizontalPadding[paddingSize],
-        ]}
-      >
-        {iconNode && (
-          <div
-            className="euiEmptyPrompt__icon"
-            css={[styles.icon.euiEmptyPrompt__icon, styles.icon[layout]]}
-          >
-            {iconNode}
-          </div>
-        )}
-        <div
-          className="euiEmptyPrompt__content"
-          css={[styles.content.euiEmptyPrompt__content, styles.content[layout]]}
-        >
-          {contentNodes}
+      <div className="euiEmptyPrompt__main" css={mainStyles}>
+        {iconNode}
+        <div className="euiEmptyPrompt__content" css={contentStyles}>
+          {title && <EuiTitle size={titleSize}>{title}</EuiTitle>}
+          {title && body && <EuiSpacer size="m" />}
+          {body && <EuiText color="subdued">{body}</EuiText>}
+          {actionsNode && (body || title) && <EuiSpacer size="l" />}
+          {actionsNode}
         </div>
       </div>
-      {footer && (
-        <div
-          className="euiEmptyPrompt__footer"
-          css={[
-            styles.footer.euiEmptyPrompt__footer,
-            styles.footer[paddingSize],
-            styles.footer[color],
-            color === 'transparent' &&
-              !hasBorder &&
-              styles.footer.roundedBorders,
-          ]}
-        >
-          {footer}
-        </div>
-      )}
+      {footerNode}
     </EuiPanel>
   );
 };