From 61d001b00f2754ba80f8487a1df0032a65989047 Mon Sep 17 00:00:00 2001 From: hammadtheone Date: Mon, 6 Apr 2020 17:23:32 -0400 Subject: [PATCH 1/4] Initial implementation --- src/components/Tabs.react.js | 154 +++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) diff --git a/src/components/Tabs.react.js b/src/components/Tabs.react.js index 3c78189de..34940bffc 100644 --- a/src/components/Tabs.react.js +++ b/src/components/Tabs.react.js @@ -121,6 +121,95 @@ EnhancedTab.defaultProps = { }, }; +const NextTab = ({ + className, + style, + selectHandler, + value, + disabled, + disabled_style, + disabled_className, + mobile_breakpoint, + amountOfTabs, + colors, + vertical, + loading_state, +}) => { + let tabStyle = style; + if (disabled) { + tabStyle = {tabStyle, ...disabled_style}; + } + let tabClassName = `tab ${className || ''}`; + if (disabled) { + tabClassName += ` tab--disabled ${disabled_className || ''}`; + } + return ( +
{ + if (!disabled) { + selectHandler(value); + } + }} + > + Next Tab + +
+ ); +}; /** * A Dash component that lets you render pages with tabs - the Tabs component's children * can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold @@ -168,6 +257,7 @@ export default class Tabs extends Component { render() { let EnhancedTabs; let selectedTab; + let nextTab; if (this.props.children) { const children = this.parseChildrenToArray(); @@ -229,6 +319,64 @@ export default class Tabs extends Component { }); } + if (this.props.children) { + nextTab = () => { + // TODO: handle components that are not dcc.Tab components (throw error) + // enhance Tab components coming from Dash (as dcc.Tab) with methods needed for handling logic + let childProps; + const child = this.parseChildrenToArray()[0]; + const length = this.props.children.length; + let currentIndex = 0; + + const nextTabHandler = () => { + currentIndex = this.props.value.slice(-1) - 1; + currentIndex = ((currentIndex + 1) % length) + 1; + this.props.setProps({value: `tab-${currentIndex}`}); + }; + + if ( + // disabled is a defaultProp (so it's always set) + // meaning that if it's not set on child.props, the actual + // props we want are lying a bit deeper - which means they + // are coming from Dash + isNil(child.props.disabled) && + child.props._dashprivate_layout && + child.props._dashprivate_layout.props + ) { + // props are coming from Dash + childProps = child.props._dashprivate_layout.props; + } else { + // else props are coming from React (Demo.react.js, or Tabs.test.js) + childProps = child.props; + } + + return ( +
+ +
+ ); + }; + } + + if (this.props.next_tab) { + EnhancedTabs = EnhancedTabs.concat(nextTab()); + } + const selectedTabContent = !isNil(selectedTab) ? selectedTab : ''; const tabContainerClass = this.props.vertical @@ -326,6 +474,7 @@ Tabs.defaultProps = { background: '#f9f9f9', }, vertical: false, + next_tab: false, persisted_props: ['value'], persistence_type: 'local', }; @@ -378,6 +527,11 @@ Tabs.propTypes = { */ vertical: PropTypes.bool, + /** + * Adds a next tab button to the component, enabling sequential scrolling through the tabs. + */ + next_tab: PropTypes.bool, + /** * Breakpoint at which tabs are rendered full width (can be 0 if you don't want full width tabs on mobile) */ From 8adf639f5b5db95db5e859ba49f46a76905bba52 Mon Sep 17 00:00:00 2001 From: hammadtheone Date: Tue, 7 Apr 2020 13:50:39 -0400 Subject: [PATCH 2/4] Added Changelog Entry --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60844ad14..1adef17bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,9 @@ This project adheres to [Semantic Versioning](http://semver.org/). - [#767](https://github.com/plotly/dash-core-components/pull/767) Updated dcc.Link to respond to click modifiers, and added a target prop. - [#774](https://github.com/plotly/dash-core-components/pull/774) Fixed dcc.Location firing callbacks for wrong property. +### Added +- [#786](https://github.com/plotly/dash-core-components/pull/786) Added 'Next Tab' optional button to dcc.Tabs + ## [1.8.1] -2020-02-27 ### Added - [#760](https://github.com/plotly/dash-core-components/pull/760) Added R examples to package help From 5c4816d80f19f3f3a2d9b76378525a8c0c0be4ab Mon Sep 17 00:00:00 2001 From: hammadtheone Date: Tue, 7 Apr 2020 22:04:41 -0400 Subject: [PATCH 3/4] Added integration test and styling props --- src/components/Tabs.react.js | 16 +++++++- .../integration/tab/test_tabs_next_button.py | 40 +++++++++++++++++++ 2 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 tests/integration/tab/test_tabs_next_button.py diff --git a/src/components/Tabs.react.js b/src/components/Tabs.react.js index 34940bffc..7f179b669 100644 --- a/src/components/Tabs.react.js +++ b/src/components/Tabs.react.js @@ -134,6 +134,7 @@ const NextTab = ({ colors, vertical, loading_state, + title, }) => { let tabStyle = style; if (disabled) { @@ -157,7 +158,7 @@ const NextTab = ({ } }} > - Next Tab + {title}