new prop disableToolbar for hiding toolbar

prabhuignoto · Mar 7, 2024 · b443994 · b443994
1 parent 0a86716
commit b443994
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -173,7 +173,6 @@ Below are the available configuration options for the component:
 | flipLayout               | false                | Reverses the layout (Right to Left).                                                                                                     |
 | focusActiveItemOnLoad    | false                | Automatically scrolls to and focuses on the `activeItemIndex` when loading.                                                              |
 | fontSizes                |                      | Allows customization of font sizes.                                                                                                      |
-| hideControls             | false                | Hides navigation controls.                                                                                                               |
 | highlightCardsOnHover    | false                | Highlights the card on hover                                                                                                             |
 | items                    | []                   | A collection of Timeline Item Models.                                                                                                    |
 | itemWidth                | 300                  | Sets the width of the timeline section in horizontal mode.                                                                               |
@@ -201,6 +200,7 @@ Below are the available configuration options for the component:
 | toolbarPosition          | TOP                  | Configures the position of the toolbar. Can be `TOP` or `BOTTOM`                                                                         |
 | uniqueId                 |                      | Used with `noUniqueId` to set a custom unique id for the wrapper.                                                                        |
 | useReadMore              | true                 | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself.                        |
+| disableToolbar           | false                | Disables and hides the toolbar                                                                                                           |
 
 ### Mode
 

diff --git a/src/components/GlobalContext.tsx b/src/components/GlobalContext.tsx
@@ -120,6 +120,7 @@ const GlobalContextProvider: FunctionComponent<ContextProps> = (props) => {
           disableClickOnCircle: !!props.disableInteraction,
           disableInteraction: false,
           disableTimelinePoint: !!props.disableInteraction,
+          disableToolbar: false,
           enableBreakPoint: true,
           enableDarkToggle: false,
           enableLayoutSwitch: true,

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -20,7 +20,6 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = (
     activeItemIndex = 0,
     titleDateFormat = 'MMM DD, YYYY',
     mode,
-    hideControls,
   } = props;
 
   const [timeLineItems, setTimeLineItems] = useState<TimelineItemModel[]>([]);
@@ -210,7 +209,6 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = (
         onItemSelected={onItemSelected}
         onOutlineSelection={handleOutlineSelection}
         mode={mode}
-        hideControls={hideControls}
         onPaused={onPaused}
       />
     </GlobalContextProvider>

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
@@ -392,7 +392,6 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
             <Timeline
               items={items}
               mode={'VERTICAL'}
-              hideControls
               nestedCardHeight={nestedCardHeight}
               isChild
             />

diff --git a/src/components/timeline/__tests__/timeline.test.tsx b/src/components/timeline/__tests__/timeline.test.tsx
@@ -35,7 +35,6 @@ describe('Timeline', () => {
   const commonProps: TimelineModel = {
     activeTimelineItem: 0,
     contentDetailsChildren: null,
-    hideControls: false,
     iconChildren: null,
     isChild: false,
     items: [

diff --git a/src/components/timeline/timeline.style.ts b/src/components/timeline/timeline.style.ts
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { ScrollBar } from '../common/styles';
 
 export const Wrapper = styled.div<{
-  $hideControls?: boolean;
   cardPositionHorizontal?: 'TOP' | 'BOTTOM';
 }>`
   display: flex;

diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
@@ -45,7 +45,6 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
     slideShowEnabled,
     slideShowRunning,
     mode = 'HORIZONTAL',
-    hideControls = false,
     nestedCardHeight,
     isChild = false,
     onPaused,
@@ -68,6 +67,7 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
     updateHorizontalAllCards,
     toolbarPosition,
     updateTextContentDensity,
+    disableToolbar,
   } = useContext(GlobalContext);
 
   const [newOffSet, setNewOffset] = useNewScrollPosition(mode, itemWidth);
@@ -327,6 +327,10 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
     });
   }, [mode, isChild]);
 
+  const canShowToolbar = useMemo(() => {
+    return !disableToolbar && !isChild;
+  }, [isChild, disableToolbar]);
+
   return (
     <Wrapper
       onKeyDown={handleKeyDown}
@@ -335,14 +339,13 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
       onMouseDown={() => {
         setHasFocus(true);
       }}
-      $hideControls={hideControls}
       onKeyUp={(evt) => {
         if (evt.key === 'Escape') {
           onPaused?.();
         }
       }}
     >
-      {!isChild ? (
+      {canShowToolbar ? (
         <ToolbarWrapper position={toolbarPosition}>
           <TimelineToolbar
             activeTimelineItem={activeTimelineItem}

diff --git a/src/demo/vertical-samples.tsx b/src/demo/vertical-samples.tsx
@@ -24,6 +24,7 @@ export const VerticalTree: FunctionComponent<{
           slideShowType="slide_from_sides"
           allowDynamicUpdate
           cardHeight={200}
+          disableToolbar
           // textOverlay
           focusActiveItemOnLoad
           enableDarkToggle

diff --git a/src/models/TimelineModel.ts b/src/models/TimelineModel.ts
@@ -19,7 +19,6 @@ export type TimelineModel = Pick<
   | 'slideShow'
   | 'onScrollEnd'
   | 'mode'
-  | 'hideControls'
   | 'timelinePointDimension'
   | 'nestedCardHeight'
   | 'noUniqueId'
@@ -136,6 +135,8 @@ export type TimelineProps = {
 
   disableTimelinePoint?: boolean;
 
+  disableToolbar?: boolean;
+
   enableBreakPoint?: boolean;
 
   enableDarkToggle?: boolean;
@@ -158,9 +159,6 @@ export type TimelineProps = {
     title?: string;
   };
 
-  // hides the ui controls
-  hideControls?: boolean;
-
   highlightCardsOnHover?: boolean;
 
   itemWidth?: number;