Merge pull request #121 from prabhuignoto/1.9.3

✨ 1.9.3 changes
prabhuignoto · Apr 2, 2021 · c362bed · c362bed
2 parents 96b1324 + 70fdd82
commit c362bed
Show file tree

Hide file tree

Showing 17 changed files with 547 additions and 215 deletions.
diff --git a/README.md b/README.md
@@ -162,12 +162,14 @@ Play the timeline automatically with the `slideShow` mode. This prop enables the
 | itemWidth               | width of the timeline section in `HORIZONTAL` mode.                                   | 300          |
 | hideControls            | hides the navigation controls.                                                        | 300          |
 | allowDynamicUpdate      | allows timeline items to be updated dynamically.                                      | false        |
-| cardHeight              | sets the minimum height of the timeline card.                                         | 250          |
+| cardHeight              | sets the minimum height of the timeline card.                                         | 200          |
+| cardWidth               | sets the maximum width of the timeline card.                                          |              |
 | scrollable              | makes the timeline [scrollable](#scrollable) (applicable for `VERTICAL` & `VERTICAL_ALTERNATING`).   | true         |
 | flipLayout              | flips the layout (RTL). applicable only to `VERTICAL` and `VERTICAL_ALTERNATING`      | false         |
 | cardPositionHorizontal  | positions the card in `HORIZONTAL` mode. can be either `TOP` or `BOTTOM`              |              |
 | theme                   | prop to customize the colors.                                                         |              |
 | onScrollEnd             | use the `onScrollEnd` to detect the end of the timeline.                              |              |
+| useReadMore             | enables or disables the read more button. when disabled the card will auto expand to fit the content|    true          |
 
 ### Mode
 

diff --git a/cypress/integration/react-chrono/vertical_spec.js b/cypress/integration/react-chrono/vertical_spec.js
@@ -72,18 +72,18 @@ context('Chrono.Vertical.Basic', () => {
       .should('have.class', 'active');
   });
 
-  it('check read more action', () => {
-    cy.get('.vertical-item-row')
-      .eq(1)
-      .find('.card-description')
-      .should('have.class', 'show-less');
-    cy.get('.vertical-item-row').eq(1).find('.show-more').click();
-    cy.wait(500);
-    cy.get('.vertical-item-row')
-      .eq(1)
-      .find('.card-description')
-      .should('not.have.class', 'show-less');
-  });
+  // it('check read more action', () => {
+  //   cy.get('.vertical-item-row')
+  //     .eq(1)
+  //     .find('.card-description')
+  //     .should('have.class', 'show-less');
+  //   cy.get('.vertical-item-row').eq(1).find('.show-more').click();
+  //   cy.wait(500);
+  //   cy.get('.vertical-item-row')
+  //     .eq(1)
+  //     .find('.card-description')
+  //     .should('not.have.class', 'show-less');
+  // });
 
   it('check scroll', () => {
     cy.get('.timeline-main-wrapper').scrollTo('bottom');

diff --git a/package.json b/package.json
@@ -33,62 +33,62 @@
     "@emotion/core": "^11.0.0-next.10",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.0",
     "focus-visible": "^5.2.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
+    "@babel/core": "^7.13.14",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@emotion/babel-plugin": "^11.2.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-strip": "^2.0.0",
     "@snowpack/app-scripts-react": "^2.0.1",
-    "@snowpack/plugin-dotenv": "^2.0.5",
-    "@snowpack/plugin-react-refresh": "^2.4.1",
+    "@snowpack/plugin-dotenv": "^2.1.0",
+    "@snowpack/plugin-react-refresh": "^2.4.2",
     "@snowpack/plugin-typescript": "^1.2.1",
     "@snowpack/web-test-runner-plugin": "^0.2.2",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^13.0.10",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.1",
     "@types/classnames": "^2.2.11",
-    "@types/jest": "^26.0.21",
-    "@types/node": "^14.14.35",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^14.14.37",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",
     "@types/snowpack-env": "^2.3.3",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
     "babel-loader": "^8.2.2",
     "cssnano": "^4.1.10",
     "cypress": "^6.8.0",
-    "eslint": "^7.22.0",
-    "eslint-plugin-react": "^7.23.0",
-    "husky": "^5.2.0",
+    "eslint": "^7.23.0",
+    "eslint-plugin-react": "^7.23.1",
+    "husky": "^6.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
-    "postcss": "^8.2.8",
+    "postcss": "^8.2.9",
     "prettier": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.42.3",
+    "rollup": "^2.44.0",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "snowpack": "^3.1.2",
+    "snowpack": "^3.2.2",
     "start-server-and-test": "^1.12.1",
     "stylelint": "^13.12.0",
     "stylelint-config-recommended": "^4.0.0",

diff --git a/src/components/GlobalContext.tsx b/src/components/GlobalContext.tsx
@@ -1,18 +1,24 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { TimelineProps } from '../models/TimelineModel';
+import { TimelineProps as PropsModel } from '../models/TimelineModel';
 
-const GlobalContext = React.createContext<TimelineProps>({});
+const GlobalContext = React.createContext<PropsModel>({});
 
-const GlobalContextProvider: React.FunctionComponent<Partial<TimelineProps>> = (
+const GlobalContextProvider: React.FunctionComponent<Partial<PropsModel>> = (
   props,
 ) => {
-  const modifiedProps = Object.assign({}, props, {
-    cardHeight: 200,
-  });
+  const defaultProps = Object.assign<PropsModel, PropsModel, PropsModel>(
+    {},
+    {
+      cardHeight: 200,
+      useReadMore: true,
+    },
+    props,
+  );
+  const { children } = props;
   return (
-    <GlobalContext.Provider value={modifiedProps}>
-      {props.children}
+    <GlobalContext.Provider value={defaultProps}>
+      {children}
     </GlobalContext.Provider>
   );
 };

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -33,7 +33,7 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = (
     theme,
   );
 
-  const initItems = () => {
+  const initItems = (items?: TimelineItemModel[]) => {
     return items && items.length
       ? items.map((item, index) => {
           return Object.assign({}, item, {
@@ -53,10 +53,50 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = (
         }));
   };
 
+  const updateItems = (items: TimelineItemModel[]) => {
+    if (items) {
+      const newStartingPosition = items.length - timeLineItems.length;
+
+      const newItems = items
+        .slice(newStartingPosition + 1)
+        .map((item, index) => ({
+          ...item,
+          id: Math.random().toString(16).slice(2),
+          visible: true,
+          active: index === 0,
+        }));
+
+      const updatedLineItems = timeLineItems.map((item) => ({
+        ...item,
+        active: false,
+      }));
+
+      return updatedLineItems.concat(newItems);
+    } else {
+      return [];
+    }
+  };
+
   useEffect(() => {
-    const items = initItems();
-    timeLineItemsRef.current = items;
-    setItems(items);
+    const _items = items?.filter((item) => item);
+    let newItems: TimelineItemModel[] = [];
+
+    if (!_items?.length) {
+      const items = initItems();
+      setItems(items);
+      return;
+    }
+
+    if (timeLineItems.length && _items.length > timeLineItems.length) {
+      newItems = updateItems(_items);
+    } else if (_items.length) {
+      newItems = initItems(_items);
+    }
+
+    if (newItems.length) {
+      timeLineItemsRef.current = newItems;
+      setItems(newItems);
+    }
   }, [JSON.stringify(allowDynamicUpdate ? items : null)]);
 
   const handleTimelineUpdate = useCallback((actvTimelineIndex: number) => {

diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts b/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts
@@ -7,6 +7,7 @@ export const TimelineItemContentWrapper = styled.section<{
   theme?: Theme;
   noMedia?: boolean;
   minHeight?: number;
+  maxWidth?: number;
   mode?: TimelineMode;
 }>`
   align-items: flex-start;
@@ -17,11 +18,12 @@ export const TimelineItemContentWrapper = styled.section<{
   flex-direction: column;
   justify-content: flex-start;
   line-height: 1.5em;
-  margin: ${(p) => (p.mode !== 'VERTICAL_ALTERNATING' ? '1em 0' : '')};
+  margin: ${(p) => (p.mode !== 'VERTICAL_ALTERNATING' ? '1em 0' : '0 auto')};
   position: relative;
   text-align: left;
   width: 100%;
   min-height: ${(p) => p.minHeight}px;
+  max-width: ${(p) => p.maxWidth}px;
 
   &:focus {
     outline: 1px solid ${(p) => p.theme?.primary};
@@ -76,6 +78,7 @@ export const TimelineSubContent = styled.span`
 export const TimelineContentDetailsWrapper = styled.div<{
   theme?: Theme;
   customContent?: boolean;
+  useReadMore?: boolean;
 }>`
   align-items: center;
   display: flex;
@@ -84,7 +87,7 @@ export const TimelineContentDetailsWrapper = styled.div<{
   margin: 0 auto;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
-  ${(p) => (!p.customContent ? 'max-height: 150px;' : '')}
+  ${(p) => (p.useReadMore && !p.customContent ? 'max-height: 150px;' : '')}
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-color: ${(p) => p.theme?.primary} default;

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
@@ -55,9 +55,13 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
     const [remainInterval, setRemainInterval] = useState(0);
     const [startWidth, setStartWidth] = useState(0);
 
-    const { mode, cardHeight, slideItemDuration = 2000 } = useContext(
-      GlobalContext,
-    );
+    const {
+      mode,
+      cardHeight,
+      slideItemDuration = 2000,
+      useReadMore,
+      cardWidth,
+    } = useContext(GlobalContext);
 
     const canShowProgressBar = useMemo(() => {
       const canShow = active && slideShowActive;
@@ -191,7 +195,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
     const contentDetailsClass = useMemo(
       () =>
         cls(
-          !showMore && !customContent
+          !showMore && !customContent && useReadMore
             ? 'show-less card-description'
             : 'card-description',
         ),
@@ -208,10 +212,10 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
     return (
       <TimelineItemContentWrapper
         className={contentClass}
-        theme={theme}
-        noMedia={!media}
         minHeight={cardHeight}
+        maxWidth={cardWidth}
         mode={mode}
+        noMedia={!media}
         onClick={(ev: React.MouseEvent) => {
           ev.stopPropagation();
           if (!slideShowActive && onClick && id) {
@@ -222,6 +226,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
         onMouseLeave={tryHandleResumeSlideshow}
         ref={containerRef}
         tabIndex={0}
+        theme={theme}
       >
         <TimelineCardHeader>
           {/* main title */}
@@ -233,26 +238,27 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
         {/* render media video or image */}
         {media && (
           <CardMedia
-            media={media}
+            active={active}
+            cardHeight={cardHeight}
             content={content}
-            title={title}
-            onMediaStateChange={handleMediaState}
+            hideMedia={showMore}
             id={id}
-            active={active}
-            theme={theme}
+            media={media}
+            onMediaStateChange={handleMediaState}
             slideshowActive={slideShowActive}
-            hideMedia={showMore}
-            cardHeight={cardHeight}
+            theme={theme}
+            title={title}
           />
         )}
 
         {/* detailed text */}
         <TimelineContentDetailsWrapper
-          ref={detailsRef}
-          className={contentDetailsClass}
-          theme={theme}
           aria-expanded={showMore}
+          className={contentDetailsClass}
           customContent={!!customContent}
+          ref={detailsRef}
+          theme={theme}
+          useReadMore={useReadMore}
         >
           {customContent ? (
             <>{customContent}</>
@@ -272,9 +278,9 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
         </TimelineContentDetailsWrapper>
 
         {/* display the show more button for textual content */}
-        {detailedText && !customContent && (
+        {useReadMore && detailedText && !customContent && (
           <ShowMore
-            role="button"
+            className="show-more"
             onClick={handleExpandDetails}
             onKeyPress={useCallback(
               (event) => {
@@ -284,7 +290,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
               },
               [active, paused, slideShowActive, showMore],
             )}
-            className="show-more"
+            role="button"
             show={canShowMore}
             theme={theme}
             tabIndex={0}
@@ -298,11 +304,11 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> = React
 
         {canShowProgressBar && (
           <SlideShowProgressBar
-            startWidth={startWidth}
-            paused={paused}
+            color={theme && theme.primary}
             duration={remainInterval}
+            paused={paused}
             ref={progressRef}
-            color={theme && theme.primary}
+            startWidth={startWidth}
           ></SlideShowProgressBar>
         )}
       </TimelineItemContentWrapper>