From ebeb81ab2d49e9c60ccb6fb8aa55dd9abe6de00a Mon Sep 17 00:00:00 2001 From: AlSharp Date: Thu, 21 Sep 2023 22:27:03 -0400 Subject: [PATCH] add click event handler for title; add read full button in the footer of the card --- package.json | 2 +- .../timeline-elements/memoized/index.tsx | 6 ++- .../memoized/memoized-model.ts | 1 + .../timeline-card-content/content-footer.tsx | 54 ++++++++++++------- .../timeline-card-content/content-header.tsx | 4 +- .../header-footer.model.ts | 3 +- .../timeline-card-content.tsx | 4 ++ .../timeline-card-media.tsx | 2 + .../timeline-vertical-item.tsx | 3 ++ src/models/TimelineContentModel.ts | 3 ++ src/models/TimelineMediaModel.ts | 3 ++ src/models/TimelineVerticalModel.ts | 2 +- 12 files changed, 62 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index a22d7b546..6a02f4b3f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-chrono", + "name": "react-chrono-extra", "version": "2.2.7", "license": "MIT", "description": "A Modern Timeline component for React", diff --git a/src/components/timeline-elements/memoized/index.tsx b/src/components/timeline-elements/memoized/index.tsx index b333f1df5..0cab54a5c 100644 --- a/src/components/timeline-elements/memoized/index.tsx +++ b/src/components/timeline-elements/memoized/index.tsx @@ -23,6 +23,7 @@ import { const TitleMemo = ({ title, url, + urlClassName, theme, color, dir, @@ -40,13 +41,14 @@ const TitleMemo = ({ $fontSize={fontSize} data-class={classString} $padding={padding} + onClick={typeof url === 'function' ? url : () => {}} > - {url ? ( + {typeof url === 'string' ? ( {title} ) : ( - title + {title} )} ) : null; diff --git a/src/components/timeline-elements/memoized/memoized-model.ts b/src/components/timeline-elements/memoized/memoized-model.ts index 2b0f491e7..aa1507aa5 100644 --- a/src/components/timeline-elements/memoized/memoized-model.ts +++ b/src/components/timeline-elements/memoized/memoized-model.ts @@ -16,6 +16,7 @@ export interface Title extends common { padding?: boolean; title?: string; url?: string; + urlClassName?: string } export interface Content extends common { diff --git a/src/components/timeline-elements/timeline-card-content/content-footer.tsx b/src/components/timeline-elements/timeline-card-content/content-footer.tsx index 053c8f2a1..922c5bbb4 100644 --- a/src/components/timeline-elements/timeline-card-content/content-footer.tsx +++ b/src/components/timeline-elements/timeline-card-content/content-footer.tsx @@ -31,6 +31,7 @@ import { * @property {React.RefObject} progressRef - Ref to the progress bar. * @property {boolean} isNested - Determines if component is nested. * @property {boolean} isResuming - Determines if slideshow is resuming. + * @property {string | Function} url - Navigate user to URL * * @returns {JSX.Element} ContentFooter component. */ @@ -48,6 +49,7 @@ const ContentFooter: FunctionComponent = ({ progressRef, isNested, isResuming, + url }) => { const { mode, theme } = useContext(GlobalContext); @@ -72,25 +74,39 @@ const ContentFooter: FunctionComponent = ({ return ( <> - {canShowMore ? ( - { - if (event.key === 'Enter') { - onExpand(); - } - }} - show={canShow ? 'true' : 'false'} - theme={theme} - tabIndex={0} - > - {{showMore ? 'read less' : 'read more'}} - - - - - ) : null} +
+
+ + {canShowMore ? ( + { + if (event.key === 'Enter') { + onExpand(); + } + }} + show={canShow ? 'true' : 'false'} + theme={theme} + tabIndex={0} + > + {{showMore ? 'read less' : 'read more'}} + + + + + ) : null} +
+
{showProgressBar && ( = memo( - ({ title, url, media, content }: ContentHeaderProps) => { + ({ title, url, urlClassName, media, content }: ContentHeaderProps) => { // Using context to get global values const { fontSizes, classNames, theme } = useContext(GlobalContext); @@ -29,6 +30,7 @@ const ContentHeader: FunctionComponent = memo( title={title} theme={theme} url={url} + urlClassName={urlClassName} fontSize={fontSizes?.cardTitle} classString={classNames?.cardTitle} /> diff --git a/src/components/timeline-elements/timeline-card-content/header-footer.model.ts b/src/components/timeline-elements/timeline-card-content/header-footer.model.ts index 542064b4d..80b5587e8 100644 --- a/src/components/timeline-elements/timeline-card-content/header-footer.model.ts +++ b/src/components/timeline-elements/timeline-card-content/header-footer.model.ts @@ -4,7 +4,7 @@ import { RefObject } from 'react'; export type ContentHeaderProps = Pick< TimelineContentModel, - 'theme' | 'url' | 'title' | 'media' | 'content' + 'theme' | 'url' | 'title' | 'media' | 'content' | 'urlClassName' >; export type ContentFooterProps = { @@ -22,4 +22,5 @@ export type ContentFooterProps = { textContentIsLarge: boolean; theme?: Theme; triangleDir?: string; + url?: string }; diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx b/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx index 6d641fa8b..f29f97128 100644 --- a/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx +++ b/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx @@ -38,6 +38,7 @@ const TimelineCardContent: React.FunctionComponent = flip, branchDir, url, + urlClassName, timelineContent, items, isNested, @@ -375,6 +376,7 @@ const TimelineCardContent: React.FunctionComponent = title={title} theme={theme} url={url} + urlClassName={urlClassName} media={media} content={content} /> @@ -394,6 +396,7 @@ const TimelineCardContent: React.FunctionComponent = theme={theme} title={title} url={url} + urlClassName={urlClassName} startWidth={startWidth} detailsText={TextOrContent} paused={paused} @@ -444,6 +447,7 @@ const TimelineCardContent: React.FunctionComponent = showMore={showMore} isNested={isNested} isResuming={isResuming} + url={url} /> )} diff --git a/src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx b/src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx index bc37d5750..d98d7a7ad 100644 --- a/src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx +++ b/src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx @@ -48,6 +48,7 @@ const CardMedia: React.FunctionComponent = ({ media, slideshowActive, url, + urlClassName, detailsText, showProgressBar, remainInterval, @@ -294,6 +295,7 @@ const CardMedia: React.FunctionComponent = ({ theme={theme} active={active} url={url} + urlClassName={urlClassName} fontSize={fontSizes?.cardTitle} classString={classNames?.cardTitle} /> diff --git a/src/components/timeline-vertical/timeline-vertical-item.tsx b/src/components/timeline-vertical/timeline-vertical-item.tsx index 3f5a80357..9805417a7 100644 --- a/src/components/timeline-vertical/timeline-vertical-item.tsx +++ b/src/components/timeline-vertical/timeline-vertical-item.tsx @@ -19,6 +19,7 @@ import { * @property {string} cardSubtitle - The subtitle of the card. * @property {string} cardTitle - The title of the card. * @property {string} url - The URL of the card. + * @property {string} urlClassName - Class applied to title, if title is url * @property {string} className - The class name for the component. * @property {React.ReactNode} contentDetailsChildren - The content details children nodes. * @property {React.ReactNode} iconChild - The icon child nodes. @@ -49,6 +50,7 @@ const VerticalItem: React.FunctionComponent = ( cardSubtitle, cardTitle, url, + urlClassName, className, contentDetailsChildren, iconChild, @@ -217,6 +219,7 @@ const VerticalItem: React.FunctionComponent = ( theme={theme} title={cardTitle} url={url} + urlClassName={urlClassName} flip={flipLayout} timelineContent={timelineContent} items={items} diff --git a/src/models/TimelineContentModel.ts b/src/models/TimelineContentModel.ts index 4aaafdeef..a004c3028 100644 --- a/src/models/TimelineContentModel.ts +++ b/src/models/TimelineContentModel.ts @@ -66,4 +66,7 @@ export type TimelineContentModel = { // URL associated with the timeline item. url?: string; + + // Class applied to title, if title is URL + urlClassName: string }; diff --git a/src/models/TimelineMediaModel.ts b/src/models/TimelineMediaModel.ts index a7cb558b6..fafa8b077 100644 --- a/src/models/TimelineMediaModel.ts +++ b/src/models/TimelineMediaModel.ts @@ -106,4 +106,7 @@ export interface CardMediaModel { // URL associated with the media. url?: string; + + // Class applied to title, if url is present + urlClassName?: string } diff --git a/src/models/TimelineVerticalModel.ts b/src/models/TimelineVerticalModel.ts index a1b2c748e..557e8aec8 100644 --- a/src/models/TimelineVerticalModel.ts +++ b/src/models/TimelineVerticalModel.ts @@ -67,7 +67,7 @@ type VerticalModel = Pick< | 'timelineContent' | 'items' | 'isNested' - > & { active?: boolean; className: string; id?: string }; + > & { active?: boolean; className: string; id?: string, urlClassName?: string }; /** * Represents the model for a vertical timeline point.