diff --git a/.all-contributorsrc b/.all-contributorsrc index 7d43dc72..8ca1bb70 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -58,6 +58,15 @@ "contributions": [ "code" ] + }, + { + "login": "cbuchwald", + "name": "Christian Buchwald", + "avatar_url": "https://avatars.githubusercontent.com/u/4342337?v=4", + "profile": "https://github.com/cbuchwald", + "contributions": [ + "code" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 0d9d1af8..b9219bde 100644 --- a/README.md +++ b/README.md @@ -161,8 +161,10 @@ Play the timeline automatically with the `slideShow` mode. This prop enables the | hideControls | Hides the navigation controls. | false | | itemWidth | Width of the timeline section in `HORIZONTAL` mode. | 300 | | items | Collection of [Timeline Item Model](#timeline-item-model). | [] | +| lessText | Overwrites the default text `read less` with a string | `read less` | | lineWidth | Prop to customize the width of the timeline track line. | 3px | | mode | Sets the mode of the component. can be `HORIZONTAL`, `VERTICAL` or `VERTICAL_ALTERNATING`. | `HORIZONTAL` | +| moreText | Overwrites the default text `read more` with a string | `read more` | | onItemSelected | Callback invoked on a item selection. passes all of the data pertinent to the item. | | | onScrollEnd | Use the `onScrollEnd` to detect the end of the timeline. | | | scrollable | Makes the timeline [scrollable](#scrollable) (applicable for `VERTICAL` & `VERTICAL_ALTERNATING`). | true | diff --git a/src/components/index.tsx b/src/components/index.tsx index 8aada755..9df0633e 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -18,6 +18,8 @@ const Chrono: React.FunctionComponent> = ( theme, onItemSelected, activeItemIndex = 0, + lessText, + moreText, } = props; const [timeLineItems, setItems] = useState([]); @@ -190,6 +192,8 @@ const Chrono: React.FunctionComponent> = ( onScrollEnd={onScrollEnd} onItemSelected={onItemSelected} onOutlineSelection={handleOutlineSelection} + lessText={lessText} + moreText={moreText} /> ); 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 30a3ebc3..401172c0 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 @@ -45,6 +45,8 @@ const TimelineCardContent: React.FunctionComponent = flip, branchDir, url, + moreText, + lessText, }: TimelineContentModel) => { const [showMore, setShowMore] = useState(false); const detailsRef = useRef(null); @@ -247,6 +249,13 @@ const TimelineCardContent: React.FunctionComponent = ); }, [mode]); + const getMoreButtonText = useMemo(() => { + if (showMore) { + return lessText || 'show less'; + } + return moreText || 'show more'; + }, [showMore, moreText, lessText]); + return ( = theme={theme} tabIndex={0} > - {{showMore ? 'read less' : 'read more'}} + {{getMoreButtonText}} diff --git a/src/components/timeline-elements/timeline-card/timeline-horizontal-card.tsx b/src/components/timeline-elements/timeline-card/timeline-horizontal-card.tsx index 348d5477..9bead768 100644 --- a/src/components/timeline-elements/timeline-card/timeline-horizontal-card.tsx +++ b/src/components/timeline-elements/timeline-card/timeline-horizontal-card.tsx @@ -37,6 +37,8 @@ const TimelineCard: React.FunctionComponent = ({ customContent, hasFocus, iconChild, + lessText, + moreText, }: TimelineCardModel) => { const circleRef = useRef(null); const wrapperRef = useRef(null); @@ -128,6 +130,8 @@ const TimelineCard: React.FunctionComponent = ({ customContent={customContent} hasFocus={hasFocus} onClick={onClick} + lessText={lessText} + moreText={moreText} /> ); diff --git a/src/components/timeline-horizontal/timeline-horizontal.tsx b/src/components/timeline-horizontal/timeline-horizontal.tsx index 6afe688c..992a8b62 100644 --- a/src/components/timeline-horizontal/timeline-horizontal.tsx +++ b/src/components/timeline-horizontal/timeline-horizontal.tsx @@ -19,6 +19,8 @@ const TimelineHorizontal: React.FunctionComponent = ({ contentDetailsChildren: children, hasFocus, iconChildren, + lessText, + moreText, }: TimelineHorizontalModel) => { const { mode = 'HORIZONTAL', @@ -69,6 +71,8 @@ const TimelineHorizontal: React.FunctionComponent = ({ hasFocus={hasFocus} iconChild={iconChildColln[index]} active={item.active} + lessText={lessText} + moreText={moreText} /> ))} diff --git a/src/components/timeline-vertical/timeline-vertical-item.tsx b/src/components/timeline-vertical/timeline-vertical-item.tsx index b3cc9d20..88cec312 100644 --- a/src/components/timeline-vertical/timeline-vertical-item.tsx +++ b/src/components/timeline-vertical/timeline-vertical-item.tsx @@ -28,7 +28,9 @@ const VerticalItem: React.FunctionComponent = ( iconChild, hasFocus, id, + lessText, media, + moreText, onActive, onClick, onElapsed, @@ -111,7 +113,9 @@ const VerticalItem: React.FunctionComponent = ( detailedText={cardDetailedText} hasFocus={hasFocus} id={id} + lessText={lessText} media={media} + moreText={moreText} onClick={onClick} onElapsed={onElapsed} onShowMore={handleShowMore} diff --git a/src/components/timeline-vertical/timeline-vertical.tsx b/src/components/timeline-vertical/timeline-vertical.tsx index 00b9b91c..4aed3c4b 100644 --- a/src/components/timeline-vertical/timeline-vertical.tsx +++ b/src/components/timeline-vertical/timeline-vertical.tsx @@ -13,7 +13,9 @@ const TimelineVertical: React.FunctionComponent = ({ hasFocus, iconChildren, items, + lessText, mode, + moreText, onClick, onElapsed, onOutlineSelection, @@ -90,6 +92,8 @@ const TimelineVertical: React.FunctionComponent = ({ slideShowRunning={slideShowRunning} theme={theme} cardLess={cardLess} + lessText={lessText} + moreText={moreText} /> ); })} diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx index fc2d198c..85a546c7 100644 --- a/src/components/timeline/timeline.tsx +++ b/src/components/timeline/timeline.tsx @@ -44,6 +44,8 @@ const Timeline: React.FunctionComponent = ( slideShowEnabled, slideShowRunning, theme, + lessText, + moreText, } = props; const { @@ -300,6 +302,8 @@ const Timeline: React.FunctionComponent = ( slideShowRunning={slideShowRunning} theme={theme} enableOutline={enableOutline} + lessText={lessText} + moreText={moreText} /> ) : null} @@ -319,6 +323,8 @@ const Timeline: React.FunctionComponent = ( slideShowRunning={slideShowRunning} theme={theme} wrapperId={id.current} + lessText={lessText} + moreText={moreText} /> ) : null} @@ -340,6 +346,8 @@ const Timeline: React.FunctionComponent = ( slideShowRunning={slideShowRunning} theme={theme} enableOutline={enableOutline} + lessText={lessText} + moreText={moreText} /> ) : null} diff --git a/src/demo/App.tsx b/src/demo/App.tsx index 2b33a25e..b271efdd 100644 --- a/src/demo/App.tsx +++ b/src/demo/App.tsx @@ -5,7 +5,7 @@ import { TimelineItemModel } from '../models/TimelineItemModel'; import { HorizontalAll, HorizontalBasic, HorizontalInitalSelectedItem, - VerticalBasic, VerticalBasicCardLess, VerticalCustomContent, VerticalCustomContent2, VerticalTree, VerticalTreeMixed + VerticalBasic, VerticalBasicCardLess, VerticalCustomContent, VerticalCustomContent2, VerticalRenamedMoreButton, VerticalTree, VerticalTreeMixed } from './app-samples'; import './App.css'; import { @@ -68,6 +68,9 @@ const NewDemo: React.FunctionComponent = () => {
  • Vertical Basic
    • +
  • + Vertical Basic with renamed 'more' buttons +
  • Vertical Alternating
    • @@ -104,6 +107,8 @@ const NewDemo: React.FunctionComponent = () => { }> + }> + 0 && } > diff --git a/src/demo/app-samples.tsx b/src/demo/app-samples.tsx index 9b048060..070fc2fa 100644 --- a/src/demo/app-samples.tsx +++ b/src/demo/app-samples.tsx @@ -126,6 +126,30 @@ export const VerticalBasic: FunctionComponent<{ ); +export const VerticalRenamedMoreButton: FunctionComponent<{ + type: string; + items: TimelineItemModel[]; +}> = ({ type, items }) => ( + + + console.log(selected.cardTitle)} + enableOutline + timelineCircleDimension={20} + moreText="show me more" + lessText="show me less" + /> + + +); + export const VerticalBasicCardLess: FunctionComponent<{ type: string; items: TimelineItemModel[]; diff --git a/src/models/TimelineContentModel.ts b/src/models/TimelineContentModel.ts index 45880dfe..4b0d34fe 100644 --- a/src/models/TimelineContentModel.ts +++ b/src/models/TimelineContentModel.ts @@ -10,7 +10,9 @@ export interface TimelineContentModel { flip?: boolean; hasFocus?: boolean; id?: string; + lessText?: string; media?: Media; + moreText?: string; onClick?: (id: string) => void; onElapsed?: (id?: string) => void; onShowMore: () => void; diff --git a/src/models/TimelineHorizontalModel.ts b/src/models/TimelineHorizontalModel.ts index 92ae1419..7b25fe73 100644 --- a/src/models/TimelineHorizontalModel.ts +++ b/src/models/TimelineHorizontalModel.ts @@ -11,7 +11,9 @@ export interface TimelineHorizontalModel { iconChildren?: ReactNode; itemWidth?: number; items: TimelineCardModel[]; + lessText?: string; mode?: TimelineMode; + moreText?: string; onElapsed?: (id?: string) => void; slideShowRunning?: boolean; theme?: Theme; diff --git a/src/models/TimelineItemModel.ts b/src/models/TimelineItemModel.ts index 13421a3b..a8ee08eb 100644 --- a/src/models/TimelineItemModel.ts +++ b/src/models/TimelineItemModel.ts @@ -43,7 +43,9 @@ export type TimelineCardModel = Pick< customContent?: React.ReactNode | React.ReactNode[]; hasFocus?: boolean; iconChild?: React.ReactNode; + lessText?: string; mode: TimelineMode; + moreText?: string; onClick: (id?: string) => void; onElapsed?: (id?: string) => void; slideItemDuration?: number; diff --git a/src/models/TimelineModel.ts b/src/models/TimelineModel.ts index ab685f4b..05fdfb69 100644 --- a/src/models/TimelineModel.ts +++ b/src/models/TimelineModel.ts @@ -16,6 +16,8 @@ export type TimelineModel = Pick< | 'theme' | 'slideShow' | 'onScrollEnd' + | 'lessText' + | 'moreText' > & { activeTimelineItem: number; contentDetailsChildren?: React.ReactNode | React.ReactNode[]; @@ -59,8 +61,10 @@ export type TimelineProps = { hideControls?: boolean; itemWidth?: number; items?: TimelineItemModel[]; + lessText?: string; lineWidth?: number; mode?: TimelineMode; + moreText?: string; onItemSelected?: (data: TimelineItemModel) => void; onRestartSlideshow?: () => void; onScrollEnd?: () => void; diff --git a/src/models/TimelineVerticalModel.ts b/src/models/TimelineVerticalModel.ts index 4bb9db80..c129e11a 100644 --- a/src/models/TimelineVerticalModel.ts +++ b/src/models/TimelineVerticalModel.ts @@ -15,6 +15,8 @@ export type Props = Pick< | 'enableOutline' | 'disableClickOnCircle' | 'cardLess' + | 'lessText' + | 'moreText' > & { alternateCards?: boolean; hasFocus?: boolean; @@ -38,6 +40,8 @@ type VerticalModel = Pick< | 'lineWidth' | 'disableClickOnCircle' | 'cardLess' + | 'lessText' + | 'moreText' > & { active?: boolean; className: string; @@ -79,6 +83,8 @@ export type TimelineVerticalModel = Pick< | 'theme' | 'hasFocus' | 'cardLess' + | 'lessText' + | 'moreText' > & { activeTimelineItem: number; autoScroll: (s: Partial) => void;