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

Add scrollable tab set #443

Merged
merged 4 commits into from Nov 28, 2019
Merged

Add scrollable tab set #443

merged 4 commits into from Nov 28, 2019

Conversation

thyhjwb6
Copy link
Collaborator

@thyhjwb6 thyhjwb6 commented Nov 22, 2019

Related issue

#225

Overview

Adding a scrollable tab set component

Reason

When there are a large number of tabs then these need to be scrolled through.

Work carried out

  • Add scroll buttons
  • Add scrollable tab set

Screenshot

Screenshot 2019-11-27 at 09 28 42

Developer notes

Still to do:

  • Smooth scrolling
  • Mobile
  • Documentation

@m7kvqbe1
Copy link
Member

Is this WIP?

@m7kvqbe1 m7kvqbe1 changed the title Add scrollable tab set [WIP] Add scrollable tab set Nov 22, 2019
@thyhjwb6 thyhjwb6 force-pushed the feature/scrollable-tab-set branch 5 times, most recently from baa11b1 to 38eeb06 Compare November 26, 2019 15:53
@thyhjwb6 thyhjwb6 changed the title [WIP] Add scrollable tab set Add scrollable tab set Nov 27, 2019
@thyhjwb6 thyhjwb6 marked this pull request as ready for review November 27, 2019 09:32
Copy link
Member

@m7kvqbe1 m7kvqbe1 left a comment

Choose a reason for hiding this comment

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

Looks great to me - just a couple of tiny comments

setActiveTab(index)

if (onChangeCallback) {
onChangeCallback(activeTab, title)
onChangeCallback(index)
Copy link
Member

Choose a reason for hiding this comment

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

I know this was already here before and it's annoyingly a breaking change but maybe we could lose the word 'callback' and it could become onChange.

Copy link
Member

Choose a reason for hiding this comment

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

Maybe there is a task here to carry out ahead of the v2.0.0 release - we could make our interfaces more consistent across the entire library.

}
}

const headerClassNames = classNames('rn-tab-set__head', {
'is-scrollable': scrollable,
Copy link
Member

Choose a reason for hiding this comment

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

Could we just add this stateful class in once, at the root of the component?

itemsRef.current = itemsRef.current.slice(0, items.length)
}, [items])

function updateCurrentScrollToTab(change: (currentTab: number) => number) {
Copy link
Member

Choose a reason for hiding this comment

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

Lovely bit of inversion of control :)

@thyhjwb6 thyhjwb6 merged commit 16e8eda into develop Nov 28, 2019
@thyhjwb6 thyhjwb6 deleted the feature/scrollable-tab-set branch November 28, 2019 16:32
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.

None yet

2 participants