Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added navigation feature #97

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

highfield
Copy link

@highfield highfield commented Jan 30, 2021

Here is my proposal for adding the navigation feature.

The Chrono component now exposes a new optional property initialActiveTimelineItem, which instructs the component which item should activate on load. That comes useful when the timeline shows items where the most recent is the most interesting (es. incoming mail messages).

There's another modification: the ability to navigate programmatically to any of the loaded items. That is done by exposing a kind of "API" via ref. That comes useful when the component is already shown, but you need to highlight the item upon something else selection.

It would be nice if the initial scrolling will happen without animation, but I was unable to follow your code to do that.

Let me know if you need clarifications about my code.

Mario

Copy link

@accesslint accesslint bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are accessibility issues in these changes.

>
<div>
<div style={{ width: "250px", height: "250px" }}>
<img style={{ maxWidth: "100%", maxHeight: "100%" }} src="https://cdn.tutsplus.com/net/uploads/2013/08/github-collab-retina-preview.gif" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is missing a text alternative (alt attribute). This is a problem for people using screen readers.

>
<div>
<div style={{ width: "250px", height: "250px" }}>
<img style={{ maxWidth: "100%", maxHeight: "100%" }} src="https://cdn.tutsplus.com/net/uploads/2013/08/github-collab-retina-preview.gif" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is missing a text alternative (alt attribute). This is a problem for people using screen readers.

@prabhuignoto prabhuignoto self-assigned this Jan 31, 2021
@prabhuignoto
Copy link
Owner

@highfield thanks for opening the PR. the proposal looks good to me.

can you fix the lint issues please.
https://github.com/prabhuignoto/react-chrono/pull/97/checks?check_run_id=1796751500

@highfield
Copy link
Author

@prabhuignoto I'd love to fix them, but I have no practice with linter. By the way, the analisys shows some strange informations to me. For instance, anonymous functions are a very common practice with React hooks: should we take all of them as named?

Let me know.

@sonarqubecloud
Copy link

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
No Duplication information No Duplication information

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants