Skip to content

feat(plasma-temple): Custom title component in GalleryPage #1119

Open
VladislavPetyukevich wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat(plasma-temple): Custom title component in GalleryPage #1119

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd94ad0
feat(plasma-temple): Custom title component in GalleryPage
VladislavPetyukevich Feb 22, 2022
1548998
feat(plasma-temple): Pass ReactNode to GalleryPage titles
VladislavPetyukevich Feb 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions packages/plasma-temple/src/pages/GalleryPage/GalleryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface GalleryPageProps<T extends AnyObject = AnyObject> extends ComponentPro
changeState: (state: GalleryPageState<T>) => void;
onCardClick: (card: GalleryCardParams<T>) => void;
galleryCard?: React.ComponentType<GalleryCardProps<T>>;
titleComponent?: React.ComponentType<{ title: string }>;
}

interface StyledSectionWrapperProps {
Expand Down Expand Up @@ -54,13 +55,15 @@ const StyledSectionTitle = styled(Headline3)<{ active: boolean }>`
interface FocusableGalleryProps {
index: number;
title?: string;
TitleComponent?: React.ComponentType<{ title: string }>;

@kvpolyanskiy kvpolyanskiy Feb 22, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Если сделать title?: React.ReactNode закроет кейс?

@VladislavPetyukevich VladislavPetyukevich Feb 22, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Да, можно рендерить компоненты в поле title внутри state. Спасибо, сразу не подумал

activeCardIndex?: number;
isMultiple?: boolean;
}

const FocusableGallery: React.FC<FocusableGalleryProps & GalleryProps> = ({
index,
title,
TitleComponent,
activeCardIndex = -1,
isMultiple = false,
...props
Expand All @@ -81,12 +84,13 @@ const FocusableGallery: React.FC<FocusableGalleryProps & GalleryProps> = ({
if (!title) {
return null;
}
const titleContent = TitleComponent ? <TitleComponent title={title} /> : title;

if (isMultiple) {
return <StyledSectionTitle active={isActive}>{title}</StyledSectionTitle>;
return <StyledSectionTitle active={isActive}>{titleContent}</StyledSectionTitle>;
}

return <Headline3>{title}</Headline3>;
return <Headline3>{titleContent}</Headline3>;
}, [isActive, isMultiple, title]);

return (
Expand All @@ -102,7 +106,7 @@ export interface GalleryPageControl {
}

export const GalleryPage = React.forwardRef<GalleryPageControl, GalleryPageProps<AnyObject>>(
({ state, header, changeState, onCardClick, galleryCard }, ref): React.ReactElement => {
({ state, header, changeState, onCardClick, galleryCard, titleComponent }, ref): React.ReactElement => {
const { gallery, activeGalleryIndex } = state;
const galleries = React.useMemo(() => (Array.isArray(gallery) ? gallery : [{ id: 'id', ...gallery }]), [
gallery,
Expand Down Expand Up @@ -171,6 +175,7 @@ export const GalleryPage = React.forwardRef<GalleryPageControl, GalleryPageProps
index={index}
items={galleryData.items}
title={galleryData.title}
TitleComponent={titleComponent}
activeCardIndex={galleryData.activeCardIndex}
onItemFocus={() => changeGallery(index)}
onItemClick={handleItemClick}
Expand Down