Skip to content

Commit

Permalink
chore: refactor example components part 2 (#151)
Browse files Browse the repository at this point in the history
* chore(example): fix weird size behaviours

* chore(example): take out isItemLarge function

* chore(example): extract itemSize function

* chore(example): pass list size as props
  • Loading branch information
pierpo authored Sep 13, 2024
1 parent 7242ba8 commit 4d55b25
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 24 deletions.
2 changes: 1 addition & 1 deletion packages/example/src/design-system/theme/sizes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { scaledPixels } from '../helpers/scaledPixels';

export const sizes = {
program: {
landscape: { width: scaledPixels(250), height: scaledPixels(200) },
landscape: { width: scaledPixels(450), height: scaledPixels(200) },
portrait: { width: scaledPixels(200), height: scaledPixels(250) },
long: { width: scaledPixels(416), height: scaledPixels(250) },
},
Expand Down
2 changes: 1 addition & 1 deletion packages/example/src/modules/program/view/Program.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const ProgramContainer = styled(Animated.View)<{
height: theme.sizes.program.portrait.height, // Height is the same for both variants
width:
variant === 'landscape'
? theme.sizes.program.landscape.width * 2
? theme.sizes.program.landscape.width
: theme.sizes.program.portrait.width,
overflow: 'hidden',
borderRadius: 20,
Expand Down
43 changes: 27 additions & 16 deletions packages/example/src/modules/program/view/ProgramList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,28 +21,32 @@ const NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN = 7;
const WINDOW_SIZE = NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN + 8;
const ROW_PADDING = scaledPixels(70);

const GAP_BETWEEN_ELEMENTS = scaledPixels(30);

type ProgramListProps = {
orientation?: 'vertical' | 'horizontal';
containerStyle?: object;
listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
data?: ProgramInfo[];
listSize?: number;
variant?: 'normal' | 'variable-size';
};

const isItemLarge = (item: { id: string }) => {
return parseInt(item.id, 10) % 2 === 0; // Arbitrary condition to decide size
};

export const ProgramList = ({
orientation = 'horizontal',
containerStyle,
listRef,
data,
variant = 'normal',
listSize = 1000,
}: ProgramListProps) => {
const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const theme = useTheme();

const isItemLarge = useCallback((item: ProgramInfo) => {
return parseInt(item.id, 10) % 2 === 0; // Arbitrary condition to decide size
}, []);

const renderItem = useCallback(
({ item, index }: { item: ProgramInfo; index: number }) => (
<ProgramNode
Expand All @@ -52,12 +56,23 @@ export const ProgramList = ({
variant={variant === 'variable-size' && isItemLarge(item) ? 'landscape' : 'portrait'}
/>
),
[navigation, isItemLarge, variant],
[navigation, variant],
);

const programInfos = useMemo(
() => data ?? getPrograms(variant === 'variable-size' ? 10 : 1000),
[data, variant],
const programInfos = useMemo(() => data ?? getPrograms(listSize), [data, listSize]);

const itemSize = useMemo(
() => {
if (variant === 'normal') {
return theme.sizes.program.portrait.width + GAP_BETWEEN_ELEMENTS;
}

return (item: ProgramInfo) =>
isItemLarge(item)
? theme.sizes.program.landscape.width + GAP_BETWEEN_ELEMENTS
: theme.sizes.program.portrait.width + GAP_BETWEEN_ELEMENTS;
}, // Default item size for "normal"
[theme.sizes.program.landscape.width, theme.sizes.program.portrait.width, variant],
);

return (
Expand All @@ -68,14 +83,7 @@ export const ProgramList = ({
orientation={orientation}
data={programInfos}
renderItem={renderItem}
itemSize={
variant === 'variable-size'
? (item: ProgramInfo) =>
isItemLarge(item)
? theme.sizes.program.landscape.width * 2 + 45
: theme.sizes.program.portrait.width + 30
: theme.sizes.program.portrait.width + 30 // Default item size for "normal"
}
itemSize={itemSize}
numberOfRenderedItems={WINDOW_SIZE}
numberOfItemsVisibleOnScreen={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
onEndReachedThresholdItemsNumber={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
Expand All @@ -95,10 +103,12 @@ export const ProgramsRow = ({
containerStyle,
listRef,
variant = 'normal',
listSize,
}: {
containerStyle?: object;
listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
variant?: 'normal' | 'variable-size';
listSize?: number;
}) => {
const theme = useTheme();
return (
Expand All @@ -109,6 +119,7 @@ export const ProgramsRow = ({
}}
listRef={listRef}
variant={variant}
listSize={listSize}
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,29 @@ import { SpatialNavigationVirtualizedListRef } from '../../../../../lib/src/spat
type Props = {
title: string;
listRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
listSize?: number;
};

export const ProgramListWithTitle = ({ title, listRef }: Props) => {
export const ProgramListWithTitle = ({ title, listRef, listSize }: Props) => {
return (
<Box direction="vertical">
<Typography variant="body" fontWeight="strong">
{title}
</Typography>
<Spacer direction="vertical" gap="$2" />
<ProgramsRow listRef={listRef ?? null} />
<ProgramsRow listRef={listRef ?? null} listSize={listSize} />
</Box>
);
};

export const ProgramListWithTitleAndVariableSizes = ({ title }: Props) => {
export const ProgramListWithTitleAndVariableSizes = ({ title, listSize }: Props) => {
return (
<Box direction="vertical">
<Typography variant="body" fontWeight="strong">
{title}
</Typography>
<Spacer direction="vertical" gap="$2" />
<ProgramsRow variant="variable-size" />
<ProgramsRow variant="variable-size" listSize={listSize} />
</Box>
);
};
10 changes: 8 additions & 2 deletions packages/example/src/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,15 @@ export const Home = () => {
<Spacer gap="$6" />
<ProgramListWithTitle title="You may also like..." />
<Spacer gap="$6" />
<ProgramListWithTitleAndVariableSizes title="Our selection"></ProgramListWithTitleAndVariableSizes>
<ProgramListWithTitleAndVariableSizes
listSize={10}
title="Our selection"
></ProgramListWithTitleAndVariableSizes>
<Spacer gap="$6" />
<ProgramListWithTitleAndVariableSizes title="Oscar Winners"></ProgramListWithTitleAndVariableSizes>
<ProgramListWithTitleAndVariableSizes
listSize={100}
title="Oscar Winners"
></ProgramListWithTitleAndVariableSizes>
<Spacer gap="$6" />
<ProgramListWithTitleAndVariableSizes title="Child section"></ProgramListWithTitleAndVariableSizes>
</Box>
Expand Down

0 comments on commit 4d55b25

Please sign in to comment.