Skip to content

Commit

Permalink
Removing 'getTheme' from BasicList examples (#30641)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mltejera
mltejera authored Feb 29, 2024
1 parent b0f39c7 commit 6bd8fa7
Show file tree
Hide file tree
Showing 4 changed files with 273 additions and 245 deletions.
131 changes: 69 additions & 62 deletions packages/react-examples/src/react/List/List.Basic.Example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)`;
Expand All @@ -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>
);
Expand Down
140 changes: 73 additions & 67 deletions packages/react-examples/src/react/List/List.Ghosting.Example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
Loading

0 comments on commit 6bd8fa7

Please sign in to comment.