The react-chrono from prabhuignoto

The autoScroll property of the TimelineCard component

The autoScroll property of the TimelineCard component props needs to be turned on at the developer's discretion. My current requirement here is that Autoscroll cannot be used.

My English is not very good, I wonder if you can understand。

paginated items

First of all, thanks for the amazing project! I don't get the point of one thing. How to approach with server-side paginated items?

Bullet & Numbering in Timeline item Model

how i can show cardDetailedText as bullet or numbering text?

[DepShield] (CVSS 7.4) Vulnerability due to usage of lodash.camelcase:4.3.0

Vulnerabilities

DepShield reports that this application's usage of lodash.camelcase:4.3.0 results in the following vulnerability(s):

(CVSS 7.4) CWE-471: Modification of Assumed-Immutable Data (MAID)
(CVSS 6.5) [CVE-2018-3721] lodash node module before 4.17.5 suffers from a Modification of Assumed-Immutabl...

Occurrences

lodash.camelcase:4.3.0 is a transitive dependency introduced by the following direct dependency(s):

• rollup-plugin-postcss:3.1.8
└─ postcss-modules:2.0.0
└─ lodash.camelcase:4.3.0

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Props to set "read more" text

Is it possible to add a props to set the "read more" text please ?
Thanks

cardHeight prop not working

Describe the bug
I am adding cardHeight property to the Chrono component but nothing changes with the cards

To Reproduce
Steps to reproduce the behavior:

Add "cardHeight" to Chromo component

Expected behavior
From what I understand, the cardHeight property makes all cards have a certain minimum height. For example if I set it 1000, then all cards will have a minimum of 1000 pixels in height. However, in my case, the cards have the minimum height they need based on the text they occupy not the value I give.

Screenshots
https://imgur.com/a/PHGelk4

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: PC
OS: Windows 10
Browser: Firefox
Version: 1.8.4

Cards missing in horizontal timeline in Gatsby production build

Describe the bug
When I run my gatsby app in development by using "yarn start" then the horizontal timeline works perfectly. However, if I want to publish a build by using "yarn build" then the cards of the timeline all disappear. I have included a link to relevant images below.

To Reproduce
Steps to reproduce the behavior:

Create a timeline with horizontal mode
Run "gatsby build" / "yarn build" / "npm build"
All cards will be missing from the timeline

Expected behavior
It is expected that all the cards appear normally just like in the development Gatsby build when running "yarn start." The issue only occurs when the final build is made by using "yarn build"

Screenshots
https://imgur.com/a/VPdVDBs

Desktop (please complete the following information):

OS: Windows 10
Browser: Firefox
Version: 1.8.4

Smartphone (please complete the following information):

Device: Samsung S10
OS: Android 10
Browser: Chrome
Version: 1.8.4

The device is not very relevant for this issue. It has to do with the final production build that Gatsby outputs. Since the production build Gatsby generates is "more optimized," I believe something gets messed up in that process since it doesn't happen in the development build.

UPDATE: This issue only happens in the index page of the website when visited for the first time. For example, let's say the timeline is in the index page which I first land on. The cards in the horizontal line will not appear. If I go to another page then back to the index page, the timeline works as expected and the cards are there.
I hope this could help narrow down the bug.

A new prop, cardWidth, similar in usage to the existing cardHeight.

I would really like to be able to set a defined cardWidth for the cards appearing in Horizontal mode. It's fairly simple, just the ability to force the cards to be a certain width the same way we can use cardHeight.

Add github sponsors

I can pay a few dollars when I use this. These are very hard to make.

Add a multiline or line break support for contentDetailedText

Please support rich text (Multiple lines / html)

setup story book

Setup story book with examples for all modes and publish.

Add more unit tests and setup code coverage reports

[DepShield] (CVSS 5.3) Vulnerability due to usage of kind-of:4.0.0

Vulnerabilities

DepShield reports that this application's usage of kind-of:4.0.0 results in the following vulnerability(s):

(CVSS 5.3) CWE-74: Improper Neutralization of Special Elements in Output Used by a Downstream Component ('Injection')

Occurrences

kind-of:4.0.0 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ webpack:4.41.5
              └─ micromatch:3.1.10
                    └─ snapdragon:0.8.2
                          └─ base:0.11.2
                                └─ cache-base:1.0.1
                                      └─ has-value:1.0.0
                                            └─ has-values:1.0.0
                                                  └─ kind-of:4.0.0

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Divide the detailed text in paragraphs

Hi Prabhu! Have you thought of transforming "cardDetailedText" in an object where you can order your info like:

cardDetailedText:{
paragraph1: lorempisum....,
paragraph2: new paragraph...
.
.
}

The library is really cool.

[DepShield] (CVSS 7.4) Vulnerability due to usage of lodash._reinterpolate:3.0.0

Vulnerabilities

DepShield reports that this application's usage of lodash._reinterpolate:3.0.0 results in the following vulnerability(s):

(CVSS 7.4) CWE-471: Modification of Assumed-Immutable Data (MAID)

Occurrences

lodash._reinterpolate:3.0.0 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ postcss-preset-env:6.7.0
              └─ postcss-initial:3.0.2
                    └─ lodash.template:4.5.0
                          └─ lodash._reinterpolate:3.0.0
                          └─ lodash.templatesettings:4.2.0
                                └─ lodash._reinterpolate:3.0.0

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Scrolling within timeline element description is unreliable

Is your feature request related to a problem? Please describe.
A user should be able to explore both timeline and its elements seamlessly on mobile phone. Currently, it is very easy to scroll entire timeline and hard to scroll timeline element description.

Describe the solution you'd like
Scroll detection in timeline element should be more aggressive. Even if it would collide with normal timeline scrolling, the result would be less bothersome than trying to scroll element description and the accidentally scrolling entire timeline.
Through experience a user could easily learn to scroll entire timeline using parts of screen not reserved for element scrolls.

Describe alternatives you've considered

creating small descriptions so they don't have to be scrolled to be seen completely
replacing scroll with buttons that are easier to press, since element descriptions usually do not contain so much text to call for precise scroll widget.

setup cypress tests

setup cypress tests to validate all modes with interactions tested

[DepShield] (CVSS 7.5) Vulnerability due to usage of yargs-parser:11.1.1

Vulnerabilities

DepShield reports that this application's usage of yargs-parser:11.1.1 results in the following vulnerability(s):

(CVSS 7.5) CWE-400: Uncontrolled Resource Consumption ('Resource Exhaustion')
(CVSS 7.5) [CVE-2020-7608] yargs-parser could be tricked into adding or modifying properties of Object.prot...

Occurrences

yargs-parser:11.1.1 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ webpack-dev-server:3.10.2
              └─ yargs:12.0.5
                    └─ yargs-parser:11.1.1

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

[DepShield] (CVSS 5.3) Vulnerability due to usage of kind-of:5.1.0

Vulnerabilities

DepShield reports that this application's usage of kind-of:5.1.0 results in the following vulnerability(s):

(CVSS 5.3) CWE-74: Improper Neutralization of Special Elements in Output Used by a Downstream Component ('Injection')

Occurrences

kind-of:5.1.0 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ webpack:4.41.5
              └─ micromatch:3.1.10
                    └─ snapdragon:0.8.2
                          └─ define-property:0.2.5
                                └─ is-descriptor:0.1.6
                                      └─ kind-of:5.1.0

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

[DepShield] (CVSS 7.5) Vulnerability due to usage of acorn:5.7.4

Vulnerabilities

DepShield reports that this application's usage of acorn:5.7.4 results in the following vulnerability(s):

(CVSS 7.5) CWE-400: Uncontrolled Resource Consumption ('Resource Exhaustion')

Occurrences

acorn:5.7.4 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ jest:24.9.0
              └─ jest-cli:24.9.0
                    └─ jest-config:24.9.0
                          └─ jest-environment-jsdom:24.9.0
                                └─ jsdom:11.12.0
                                      └─ acorn:5.7.4

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

[DepShield] (CVSS 7.5) Vulnerability due to usage of acorn:6.4.1

Vulnerabilities

DepShield reports that this application's usage of acorn:6.4.1 results in the following vulnerability(s):

(CVSS 7.5) CWE-400: Uncontrolled Resource Consumption ('Resource Exhaustion')

Occurrences

acorn:6.4.1 is a transitive dependency introduced by the following direct dependency(s):

• @rollup/plugin-buble:0.21.3
└─ buble:0.20.0
└─ acorn:6.4.1

• react-scripts:3.4.0
        └─ jest-environment-jsdom-fourteen:1.0.1
              └─ jsdom:14.1.0
                    └─ acorn:6.4.1
                    └─ acorn-globals:4.3.4
                          └─ acorn:6.4.1
        └─ webpack:4.41.5
              └─ acorn:6.4.1

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

[DepShield] (CVSS 7.4) Vulnerability due to usage of lodash.uniq:4.5.0

Vulnerabilities

DepShield reports that this application's usage of lodash.uniq:4.5.0 results in the following vulnerability(s):

(CVSS 7.4) CWE-471: Modification of Assumed-Immutable Data (MAID)
(CVSS 6.5) [CVE-2018-3721] lodash node module before 4.17.5 suffers from a Modification of Assumed-Immutabl...

Occurrences

lodash.uniq:4.5.0 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ optimize-css-assets-webpack-plugin:5.0.3
              └─ cssnano:4.1.10
                    └─ cssnano-preset-default:4.0.7
                          └─ postcss-merge-rules:4.0.3
                                └─ caniuse-api:3.0.0
                                      └─ lodash.uniq:4.5.0

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

[DepShield] (CVSS 7.4) Vulnerability due to usage of lodash.sortby:4.7.0

Vulnerabilities

DepShield reports that this application's usage of lodash.sortby:4.7.0 results in the following vulnerability(s):

(CVSS 7.4) CWE-471: Modification of Assumed-Immutable Data (MAID)

Occurrences

lodash.sortby:4.7.0 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ jest:24.9.0
              └─ jest-cli:24.9.0
                    └─ jest-config:24.9.0
                          └─ jest-environment-jsdom:24.9.0
                                └─ jsdom:11.12.0
                                      └─ whatwg-url:6.5.0
                                            └─ lodash.sortby:4.7.0
        └─ jest-environment-jsdom-fourteen:1.0.1
              └─ jsdom:14.1.0
                    └─ data-urls:1.1.0
                          └─ whatwg-url:7.1.0
                                └─ lodash.sortby:4.7.0
                    └─ whatwg-url:7.1.0
                          └─ lodash.sortby:4.7.0

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

How do I set autoplay when I first enter the page

Support progress tracking

Add support for progress tracking #74

[DepShield] (CVSS 7.5) Vulnerability due to usage of q:1.5.1

Vulnerabilities

DepShield reports that this application's usage of q:1.5.1 results in the following vulnerability(s):

(CVSS 7.5) CWE-22: Improper Limitation of a Pathname to a Restricted Directory ('Path Traversal')

Occurrences

q:1.5.1 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ @svgr/webpack:4.3.3
              └─ @svgr/plugin-svgo:4.3.1
                    └─ svgo:1.3.2
                          └─ coa:2.0.2
                                └─ q:1.5.1

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Zoom in/out

Hi Prabhu,

Are you considering inserting a zoom in/out feature for the timeline? Similar to that of zoom functionality provided by the browsers, as more events are added to the timeline, it will be easier to maneuver by zooming out and then scrolling to a specific event. Of course, the card size can be reduced manually but Inserting a zoom out button that can reduce the card size and increase the number of cards shown on the page (see image below) will be great.

[DepShield] (CVSS 7.5) Vulnerability due to usage of http-proxy:1.18.1

Vulnerabilities

DepShield reports that this application's usage of http-proxy:1.18.1 results in the following vulnerability(s):

(CVSS 7.5) CWE-400: Uncontrolled Resource Consumption ('Resource Exhaustion')

Occurrences

http-proxy:1.18.1 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ webpack-dev-server:3.10.2
              └─ http-proxy-middleware:0.19.1
                    └─ http-proxy:1.18.1

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Card titles not showing on timeline?

Describe the bug
I created a vertical timeline and passed in an items object of cards with title, cardTitle, and cardSubtitle. The timeline and cards are showing correctly, but the titles are not showing.

To Reproduce
I just used the "getting started" code snippet".

Expected behavior
I expected to see titles appear on the left side of the timeline to correspond with each card.

Screenshots

Desktop (please complete the following information):

OS: macOS Catalina
Browser: Chrome
Version: 87.0.4280.67

Setup Storybook

Create & Deploy a new documentation site with examples (story book)

[DepShield] (CVSS 7.4) Vulnerability due to usage of lodash.memoize:4.1.2

Vulnerabilities

DepShield reports that this application's usage of lodash.memoize:4.1.2 results in the following vulnerability(s):

(CVSS 7.4) CWE-471: Modification of Assumed-Immutable Data (MAID)
(CVSS 6.5) [CVE-2018-3721] lodash node module before 4.17.5 suffers from a Modification of Assumed-Immutabl...

Occurrences

lodash.memoize:4.1.2 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ optimize-css-assets-webpack-plugin:5.0.3
              └─ cssnano:4.1.10
                    └─ cssnano-preset-default:4.0.7
                          └─ postcss-merge-rules:4.0.3
                                └─ caniuse-api:3.0.0
                                      └─ lodash.memoize:4.1.2

• ts-jest:26.3.0
└─ lodash.memoize:4.1.2

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Broken links in "Built with" section

To Reproduce
Steps to reproduce the behavior:

Go to https://github.com/prabhuignoto/react-chrono
Click on 'Typescript', 'emotion', 'snowpack'
See "Page not found" error

Expected behavior
It should open project page

Scroll support

currently the timelines can be navigated only via keyboard and ui controls. it will be nice to navigate the timeline via mouse scroll.
#58

[DepShield] (CVSS 7.5) Vulnerability due to usage of debug:2.6.9

Vulnerabilities

DepShield reports that this application's usage of debug:2.6.9 results in the following vulnerability(s):

(CVSS 7.5) CWE-400: Uncontrolled Resource Consumption ('Resource Exhaustion')

Occurrences

debug:2.6.9 is a transitive dependency introduced by the following direct dependency(s):

• babel-core:6.26.3
        └─ debug:2.6.9
        └─ babel-traverse:6.26.0
              └─ debug:2.6.9

• react-scripts:3.4.0
        └─ eslint-plugin-import:2.20.0
              └─ eslint-import-resolver-node:0.3.4
                    └─ debug:2.6.9
              └─ eslint-module-utils:2.6.0
                    └─ debug:2.6.9
              └─ debug:2.6.9
        └─ react-dev-utils:10.2.1
              └─ detect-port-alt:1.1.6
                    └─ debug:2.6.9
        └─ webpack:4.41.5
              └─ micromatch:3.1.10
                    └─ extglob:2.0.4
                          └─ expand-brackets:2.1.4
                                └─ debug:2.6.9
                    └─ snapdragon:0.8.2
                          └─ debug:2.6.9
        └─ webpack-dev-server:3.10.2
              └─ compression:1.7.4
                    └─ debug:2.6.9
              └─ express:4.17.1
                    └─ body-parser:1.19.0
                          └─ debug:2.6.9
                    └─ debug:2.6.9
                    └─ finalhandler:1.1.2
                          └─ debug:2.6.9
                    └─ send:0.17.1
                          └─ debug:2.6.9
              └─ serve-index:1.9.1
                    └─ debug:2.6.9

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Output HTML markup in cardDetailedText

Is there a way to output links or formatted lists in the card text?

I'm trying to build a timeline of user activity with actions taken including links towards the pages where the actions occured.

Images and videos are not showing up.

The image is present in the cards. And when we increase the height of the div, it is seen. However by default, the height of the div containing the media is 0.

My list of items looks as follows.

[{
       "title": "10th Gen Civic",
       "cardTitle": "Honda Civic",
       "cardSubtitle": "The latest Generation of civic",
       "cardDetailedText": "Honda released the 10th generation of the civic in 2016. he Civic has gone through several generational changes, becoming both larger and more upscale, moving into the compact car segment",
       "media": {
        "name": "Honda Civic",
        "type": "IMAGE",
        "source": {
          "url": "civic.jpg",
          "type": "jpg"
        }
      }
    },
    {
       "title": "May 1940",
       "cardTitle": "Dunkirk",
       "cardSubtitle": "Men of the British Expeditionary Force (BEF) wade out to..",
       "cardDetailedText": "Men of the British Expeditionary Force (BEF) wade out to..Men of the British Expeditionary Force (BEF) wade out to..Men of the British Expeditionary Force (BEF) wade out to..Men of the British Expeditionary Force (BEF) wade out to..Men of the British Expeditionary Force (BEF) wade out to..Men of the British Expeditionary Force (BEF) wade out to..Men of the British Expeditionary Force (BEF) wade out to..Men of the British Expeditionary Force (BEF) wade out to..",
       "media": {
        "source": {
          "url": "https://www.youtube.com/embed/f6cz9gtMTeI",
          "type": "mp4"
        },
        "type": "VIDEO",
        "name": "Pearl Harbor"
      }
    }
]

Working with React 16.13.0

I ran to the error about Invalid hook call when created the project with React 16.13.0

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

How to solve this issue? or we just need to use React 17.0.0 or the newest?

cardHeight prop is not working in VERTICAL mode

Describe the bug
I am adding cardHeight property to the Chrono component having Vertical mode but nothing changes with the cards.

To Reproduce
Steps to reproduce the behavior:

Clone vertical basic sandbox example given on npm website (https://codesandbox.io/s/react-chrono-vertical-basic-0rm1o?file=/src/App.js)
Add "cardHeight" to Chrono component

Expected behavior
From what I understand, the cardHeight property makes all cards have a certain minimum height. For example if I set it 700, then all cards will have a minimum of 700 pixels in height. However, in my case, the cards have the minimum height of 200.

Screenshots
https://codesandbox.io/s/ug6h3

Desktop (please complete the following information):

OS: MacOS
Browser: Chrome
Version: 89.0.4389.82

is it possible to change Card color?

how i can change Card color?

[DepShield] (CVSS 7.5) Vulnerability due to usage of express:4.17.1

Vulnerabilities

DepShield reports that this application's usage of express:4.17.1 results in the following vulnerability(s):

(CVSS 7.5) CWE-22: Improper Limitation of a Pathname to a Restricted Directory ('Path Traversal')

Occurrences

express:4.17.1 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
└─ webpack-dev-server:3.10.2
└─ express:4.17.1

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Ability to autoplay the slideshow on load

Add a new prop to start the slideshow on load.

Adding small images/icons to the clickable circles on the timeline

Is your feature request related to a problem? Please describe.
This is just a suggestion for the visual aspect of the timeline. Adding icons to the clickable circles of the timeline would be more visually appealing and convey some message while viewing the timeline and prior to clicking on the next event.

Describe the solution you'd like
A prop inside the objects in the items array for an icon/image.
This could simply add to the "style" of the circle div the property "background" which links to the link of the given icon. Preferably, a better solution would be to allow the addition of a div component (placed on top of the circle but still inside the circle borders), enabling greater customization.

Describe alternatives you've considered
I have tried looking into the files of the library but I couldn't find the div relating to the circles

Triggering onScroll event handler

Trying to implement a infinite scrolling Timeline where the component load more items when reaching the bottom of the list.

However, adding an onScroll event handler to the Chrono component does not trigger anything.

Is it possible to pass this along or to allow a ref to be passed to the component so an event listener can be added?

OnLoad page autofocus on chrono

Hello,

I have a one page infinite scroll website and when loading the focus is setting on my react chrono.
If I put of the component, it's ok of course.
Is there a way to counter that please?

Best regards,
Loïc

[DepShield] (CVSS 5.3) Vulnerability due to usage of kind-of:3.2.2

Vulnerabilities

DepShield reports that this application's usage of kind-of:3.2.2 results in the following vulnerability(s):

(CVSS 5.3) CWE-74: Improper Neutralization of Special Elements in Output Used by a Downstream Component ('Injection')

Occurrences

kind-of:3.2.2 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ @svgr/webpack:4.3.3
              └─ @svgr/plugin-svgo:4.3.1
                    └─ merge-deep:3.0.2
                          └─ clone-deep:0.2.4
                                └─ kind-of:3.2.2
                          └─ kind-of:3.2.2
        └─ webpack:4.41.5
              └─ micromatch:3.1.10
                    └─ braces:2.3.2
                          └─ fill-range:4.0.0
                                └─ is-number:3.0.0
                                      └─ kind-of:3.2.2
                          └─ snapdragon-node:2.1.1
                                └─ snapdragon-util:3.0.1
                                      └─ kind-of:3.2.2
                    └─ snapdragon:0.8.2
                          └─ base:0.11.2
                                └─ cache-base:1.0.1
                                      └─ to-object-path:0.3.0
                                            └─ kind-of:3.2.2
                                └─ class-utils:0.3.6
                                      └─ static-extend:0.1.2
                                            └─ object-copy:0.1.0
                                                  └─ kind-of:3.2.2
                          └─ define-property:0.2.5
                                └─ is-descriptor:0.1.6
                                      └─ is-accessor-descriptor:0.1.6
                                            └─ kind-of:3.2.2
                                      └─ is-data-descriptor:0.1.4
                                            └─ kind-of:3.2.2

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Titles are mispositioned.

Hi.
The titles of the timeline are mispositioned. They should be on top of the blue circles but right now they are on the line. I can position the titles using styling(I don't want to do that because of variable length of the titles), but out of the box they are like this

Here is the link to my repository:
https://github.com/naajil-aamir/Timeline.git

[DepShield] (CVSS 5.3) Vulnerability due to usage of kind-of:2.0.1

Vulnerabilities

DepShield reports that this application's usage of kind-of:2.0.1 results in the following vulnerability(s):

(CVSS 5.3) CWE-74: Improper Neutralization of Special Elements in Output Used by a Downstream Component ('Injection')

Occurrences

kind-of:2.0.1 is a transitive dependency introduced by the following direct dependency(s):

• react-scripts:3.4.0
        └─ @svgr/webpack:4.3.3
              └─ @svgr/plugin-svgo:4.3.1
                    └─ merge-deep:3.0.2
                          └─ clone-deep:0.2.4
                                └─ shallow-clone:0.1.2
                                      └─ kind-of:2.0.1

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

Fix layout issues in Safari

Describe the bug
Timeline is not rendered properly on safari with the main link missing

Expected behavior
Timeline should be rendered properly on all browsers

Desktop (please complete the following information):

OS - MacOS
Browser [safari]

Image not showing up

Describe the bug
Despite following the instruction in README closely, images I link in the media attributes are not showing up in the timeline element at all. Below is how my code looks like.

        title: "May 1940",
        cardTitle: "Project 1",
        cardSubtitle:"Description of my amazing project",
        cardDetailedText: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
        media: {
          source: {
            url: "https://cdn.the-scientist.com/assets/articleNo/66820/hImg/34886/bird-banner3-l.png",
            type:"png"
          },
          type: "IMAGE"
        }
      },

Expected behavior
Image shows up in the timeline card

Screenshots

Desktop (please complete the following information):

OS: Windows 10
Browser Chrome

Thanks in advance!

Keep scroll position on auto load

Hi there!

On scroll end, I am loading more data to the timeline, and when loading is done, the scrollbar scrolls to the top of the timeline, which is a frustration and not user friendly because I'm loading the new data on the bottom.

Can scroll to the top be disabled for this use case?

prabhuignoto / react-chrono Goto Github PK

react-chrono's Introduction

Hi there! 👋

Get in touch

Blog Posts

react-chrono's People

Contributors

Stargazers

Watchers

Forkers

react-chrono's Issues

Recommend Projects

Recommend Topics

Recommend Org