Removing 'getTheme' from BasicList examples (#30641)

microsoft · Feb 29, 2024 · 6bd8fa7 · 6bd8fa7
1 parent b0f39c7
commit 6bd8fa7
Show file tree

Hide file tree

Showing 4 changed files with 273 additions and 245 deletions.
diff --git a/packages/react-examples/src/react/List/List.Basic.Example.tsx b/packages/react-examples/src/react/List/List.Basic.Example.tsx
@@ -5,80 +5,86 @@ import { TextField } from '@fluentui/react/lib/TextField';
 import { Image, ImageFit } from '@fluentui/react/lib/Image';
 import { Icon } from '@fluentui/react/lib/Icon';
 import { List } from '@fluentui/react/lib/List';
-import { ITheme, mergeStyleSets, getTheme, getFocusStyle } from '@fluentui/react/lib/Styling';
+import { ITheme, mergeStyleSets, getFocusStyle } from '@fluentui/react/lib/Styling';
 import { createListItems, IExampleItem } from '@fluentui/example-data';
 import { useConst } from '@fluentui/react-hooks';
+import { useTheme } from '@fluentui/react/lib/Theme';
 
-const theme: ITheme = getTheme();
-const { palette, semanticColors, fonts } = theme;
-
-const classNames = mergeStyleSets({
-  itemCell: [
-    getFocusStyle(theme, { inset: -1 }),
-    {
-      minHeight: 54,
-      padding: 10,
-      boxSizing: 'border-box',
-      borderBottom: `1px solid ${semanticColors.bodyDivider}`,
-      display: 'flex',
-      selectors: {
-        '&:hover': { background: palette.neutralLight },
+const generateStyles = (theme: ITheme) => {
+  const { palette, semanticColors, fonts } = theme;
+  return mergeStyleSets({
+    itemCell: [
+      getFocusStyle(theme, { inset: -1 }),
+      {
+        minHeight: 54,
+        padding: 10,
+        boxSizing: 'border-box',
+        borderBottom: `1px solid ${semanticColors.bodyDivider}`,
+        display: 'flex',
+        selectors: {
+          '&:hover': { background: palette.neutralLight },
+        },
       },
+    ],
+    itemImage: {
+      flexShrink: 0,
     },
-  ],
-  itemImage: {
-    flexShrink: 0,
-  },
-  itemContent: {
-    marginLeft: 10,
-    overflow: 'hidden',
-    flexGrow: 1,
-  },
-  itemName: [
-    fonts.xLarge,
-    {
-      whiteSpace: 'nowrap',
+    itemContent: {
+      marginLeft: 10,
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
+      flexGrow: 1,
     },
-  ],
-  itemIndex: {
-    fontSize: fonts.small.fontSize,
-    color: palette.neutralTertiary,
-    marginBottom: 10,
-  },
-  chevron: {
-    alignSelf: 'center',
-    marginLeft: 10,
-    color: palette.neutralTertiary,
-    fontSize: fonts.large.fontSize,
-    flexShrink: 0,
-  },
-});
-
-const onRenderCell = (item: IExampleItem, index: number | undefined): JSX.Element => {
-  return (
-    <div className={classNames.itemCell} data-is-focusable={true}>
-      <Image
-        className={classNames.itemImage}
-        src="https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/fluent-placeholder.svg"
-        width={50}
-        height={50}
-        imageFit={ImageFit.cover}
-      />
-      <div className={classNames.itemContent}>
-        <div className={classNames.itemName}>{item.name}</div>
-        <div className={classNames.itemIndex}>{`Item ${index}`}</div>
-        <div>{item.description}</div>
-      </div>
-      <Icon className={classNames.chevron} iconName={getRTL() ? 'ChevronLeft' : 'ChevronRight'} />
-    </div>
-  );
+    itemName: [
+      fonts.xLarge,
+      {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    ],
+    itemIndex: {
+      fontSize: fonts.small.fontSize,
+      color: palette.neutralTertiary,
+      marginBottom: 10,
+    },
+    chevron: {
+      alignSelf: 'center',
+      marginLeft: 10,
+      color: palette.neutralTertiary,
+      fontSize: fonts.large.fontSize,
+      flexShrink: 0,
+    },
+  });
 };
 
 export const ListBasicExample: React.FunctionComponent = () => {
   const originalItems = useConst(() => createListItems(5000));
   const [items, setItems] = React.useState(originalItems);
+  const theme = useTheme();
+  const classNames = React.useMemo(() => generateStyles(theme), [theme]);
+
+  const onRenderCell = React.useCallback(
+    (item: IExampleItem, index: number | undefined): JSX.Element => {
+      return (
+        <div className={classNames.itemCell} data-is-focusable={true}>
+          <Image
+            className={classNames.itemImage}
+            src="https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/fluent-placeholder.svg"
+            width={50}
+            height={50}
+            imageFit={ImageFit.cover}
+          />
+          <div className={classNames.itemContent}>
+            <div className={classNames.itemName}>{item.name}</div>
+            <div className={classNames.itemIndex}>{`Item ${index}`}</div>
+            <div>{item.description}</div>
+          </div>
+          <Icon className={classNames.chevron} iconName={getRTL() ? 'ChevronLeft' : 'ChevronRight'} />
+        </div>
+      );
+    },
+    [classNames],
+  );
 
   const resultCountText =
     items.length === originalItems.length ? '' : ` (${items.length} of ${originalItems.length} shown)`;
@@ -94,6 +100,7 @@ export const ListBasicExample: React.FunctionComponent = () => {
         // eslint-disable-next-line react/jsx-no-bind
         onChange={onFilterChanged}
       />
+
       <List items={items} onRenderCell={onRenderCell} />
     </FocusZone>
   );

diff --git a/packages/react-examples/src/react/List/List.Ghosting.Example.tsx b/packages/react-examples/src/react/List/List.Ghosting.Example.tsx
@@ -2,84 +2,90 @@ import * as React from 'react';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react/lib/FocusZone';
 import { List } from '@fluentui/react/lib/List';
 import { Image, ImageFit } from '@fluentui/react/lib/Image';
-import { ITheme, mergeStyleSets, getTheme, getFocusStyle } from '@fluentui/react/lib/Styling';
+import { ITheme, mergeStyleSets, getFocusStyle } from '@fluentui/react/lib/Styling';
 import { createListItems, IExampleItem } from '@fluentui/example-data';
 import { useConst } from '@fluentui/react-hooks';
+import { useTheme } from '@fluentui/react/lib/Theme';
 
-const theme: ITheme = getTheme();
-const { palette, semanticColors, fonts } = theme;
-const classNames = mergeStyleSets({
-  container: {
-    overflow: 'auto',
-    maxHeight: 500,
-  },
-  itemCell: [
-    getFocusStyle(theme, { inset: -1 }),
-    {
-      minHeight: 54,
-      padding: 10,
-      boxSizing: 'border-box',
-      borderBottom: `1px solid ${semanticColors.bodyDivider}`,
-      display: 'flex',
-      selectors: {
-        '&:hover': { background: palette.neutralLight },
+const generateStyles = (theme: ITheme) => {
+  return mergeStyleSets({
+    container: {
+      overflow: 'auto',
+      maxHeight: 500,
+    },
+    itemCell: [
+      getFocusStyle(theme, { inset: -1 }),
+      {
+        minHeight: 54,
+        padding: 10,
+        boxSizing: 'border-box',
+        borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
+        display: 'flex',
+        selectors: {
+          '&:hover': { background: theme.palette.neutralLight },
+        },
       },
+    ],
+    itemImage: {
+      flexShrink: 0,
     },
-  ],
-  itemImage: {
-    flexShrink: 0,
-  },
-  itemContent: {
-    marginLeft: 10,
-    overflow: 'hidden',
-    flexGrow: 1,
-  },
-  itemName: [
-    fonts.xLarge,
-    {
-      whiteSpace: 'nowrap',
+    itemContent: {
+      marginLeft: 10,
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
+      flexGrow: 1,
     },
-  ],
-  itemIndex: {
-    fontSize: fonts.small.fontSize,
-    color: palette.neutralTertiary,
-    marginBottom: 10,
-  },
-  chevron: {
-    alignSelf: 'center',
-    marginLeft: 10,
-    color: palette.neutralTertiary,
-    fontSize: fonts.large.fontSize,
-    flexShrink: 0,
-  },
-});
-
-const onRenderCell = (item: IExampleItem, index: number, isScrolling: boolean): JSX.Element => {
-  return (
-    <div className={classNames.itemCell} data-is-focusable={true}>
-      <Image
-        className={classNames.itemImage}
-        src={
-          isScrolling
-            ? undefined
-            : 'https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/fluent-placeholder.svg'
-        }
-        width={50}
-        height={50}
-        imageFit={ImageFit.cover}
-      />
-      <div className={classNames.itemContent}>
-        <div className={classNames.itemName}>{item.name}</div>
-        <div className={classNames.itemIndex}>{`Item ${index}`}</div>
-      </div>
-    </div>
-  );
+    itemName: [
+      theme.fonts.xLarge,
+      {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    ],
+    itemIndex: {
+      fontSize: theme.fonts.small.fontSize,
+      color: theme.palette.neutralTertiary,
+      marginBottom: 10,
+    },
+    chevron: {
+      alignSelf: 'center',
+      marginLeft: 10,
+      color: theme.palette.neutralTertiary,
+      fontSize: theme.fonts.large.fontSize,
+      flexShrink: 0,
+    },
+  });
 };
 
 export const ListGhostingExample: React.FunctionComponent = () => {
   const items = useConst(() => createListItems(5000));
+  const theme = useTheme();
+  const classNames = React.useMemo(() => generateStyles(theme), [theme]);
+
+  const onRenderCell = React.useCallback(
+    (item: IExampleItem, index: number, isScrolling: boolean): JSX.Element => {
+      return (
+        <div className={classNames.itemCell} data-is-focusable={true}>
+          <Image
+            className={classNames.itemImage}
+            src={
+              isScrolling
+                ? undefined
+                : 'https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/fluent-placeholder.svg'
+            }
+            width={50}
+            height={50}
+            imageFit={ImageFit.cover}
+          />
+          <div className={classNames.itemContent}>
+            <div className={classNames.itemName}>{item.name}</div>
+            <div className={classNames.itemIndex}>{`Item ${index}`}</div>
+          </div>
+        </div>
+      );
+    },
+    [classNames],
+  );
 
   return (
     <FocusZone direction={FocusZoneDirection.vertical}>