Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

route prop added to NavTabButton

Browse source
This commit is contained in:
svetlagasheva 2020-01-02 18:30:10 +02:00
parent 8d7253ba2e
commit 79a9d70174
5 changed files with 33 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common/HorizontalNavBar/HorizontalNavBar.js
View file

@ -10,7 +10,7 @@ const NotificationsMenu = require('stremio/common/NavBar/NotificationsMenu');
const NavMenu = require('stremio/common/NavBar/NavMenu');
const styles = require('./styles');
const HorizontalNavBar = React.memo(({ className, backButton, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
const HorizontalNavBar = React.memo(({ className, route, query, backButton, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
@ -39,7 +39,7 @@ const HorizontalNavBar = React.memo(({ className, backButton, searchBar, addonsB
searchBar ?
<React.Fragment>
<div className={styles['spacing']} />
<SearchBar className={styles['search-bar']} />
<SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
<div className={styles['spacing']} />
</React.Fragment>
:
@ -77,6 +77,8 @@ HorizontalNavBar.displayName = 'HorizontalNavBar';
HorizontalNavBar.propTypes = {
className: PropTypes.string,
route: PropTypes.string,
query: PropTypes.string,
backButton: PropTypes.bool,
searchBar: PropTypes.bool,
addonsButton: PropTypes.bool,

5
src/common/NavBar/NavTabButton/NavTabButton.js
View file

@ -5,9 +5,9 @@ const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const NavTabButton = ({ className, icon, label, href, selected, direction, onClick }) => {
const NavTabButton = ({ className, icon, label, href, selected, route, direction, onClick }) => {
return (
<Button className={classnames(className, styles['nav-tab-button-container'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} direction={direction} onClick={onClick}>
<Button className={classnames(className, styles['nav-tab-button-container'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} route={route} direction={direction} onClick={onClick}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
@ -30,6 +30,7 @@ NavTabButton.propTypes = {
label: PropTypes.string,
href: PropTypes.string,
selected: PropTypes.bool,
route: PropTypes.string,
direction: PropTypes.oneOf(['horizontal', 'vertical']),
onClick: PropTypes.func
};

14
src/common/VerticalNavBar/VerticalNavBar.js
View file

@ -4,20 +4,22 @@ const classnames = require('classnames');
const NavTabButton = require('stremio/common/NavBar/NavTabButton');
const styles = require('./styles');
const VerticalNavBar = React.memo(({ className, tabs }) => {
const VerticalNavBar = React.memo(({ className, route, tabs }) => {
return (
<nav className={classnames(className, styles['nav-bar-container'])}>
{
Array.isArray(tabs) && tabs.length > 0 ?
tabs.map(({ href = '', icon = '', label = '', onClick }, index) => (
tabs.map((tab, index) => (
<NavTabButton
key={index}
className={styles['nav-tab-button']}
href={href}
icon={icon}
label={label}
selected={tab.route === route}
href={tab.href}
icon={tab.icon}
label={tab.label}
route={tab.route}
direction={'vertical'}
onClick={onClick}
onClick={tab.onClick}
/>
))
:

24
storybook/stories/NavBar/VerticalNavBar/LongVerticalNavBar.js
View file

@ -3,18 +3,18 @@ const { storiesOf } = require('@storybook/react');
const VerticalNavBar = require('stremio/common/VerticalNavBar');
const TABS = [
{ label: 'Board', icon: 'ic_board' },
{ label: 'Discover', icon: 'ic_discover' },
{ label: 'Library', icon: 'ic_library' },
{ label: 'Calendar', icon: 'ic_calendar' },
{ label: 'Addons', icon: 'ic_addons' },
{ label: 'Settings', icon: 'ic_settings' },
{ label: 'Board', icon: 'ic_board' },
{ label: 'Discover', icon: 'ic_discover' },
{ label: 'Library', icon: 'ic_library' },
{ label: 'Calendar', icon: 'ic_calendar' },
{ label: 'Addons', icon: 'ic_addons' },
{ label: 'Settings', icon: 'ic_settings' }
{ route: 'board', label: 'Board', icon: 'ic_board' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ route: 'library', label: 'Library', icon: 'ic_library' },
{ route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ route: 'settings', label: 'Settings', icon: 'ic_settings' },
{ route: 'board', label: 'Board', icon: 'ic_board' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ route: 'library', label: 'Library', icon: 'ic_library' },
{ route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ route: 'settings', label: 'Settings', icon: 'ic_settings' }
];
storiesOf('NavBar', module).add('LongVerticalNavBar', () => (

12
storybook/stories/NavBar/VerticalNavBar/VerticalNavBar.js
View file

@ -3,12 +3,12 @@ const { storiesOf } = require('@storybook/react');
const VerticalNavBar = require('stremio/common/VerticalNavBar');
const TABS = [
{ label: 'Board', icon: 'ic_board' },
{ label: 'Discover', icon: 'ic_discover' },
{ label: 'Library', icon: 'ic_library' },
{ label: 'Calendar', icon: 'ic_calendar' },
{ label: 'Addons', icon: 'ic_addons' },
{ label: 'Settings', icon: 'ic_settings' }
{ route: 'board', label: 'Board', icon: 'ic_board' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ route: 'library', label: 'Library', icon: 'ic_library' },
{ route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ route: 'settings', label: 'Settings', icon: 'ic_settings' }
];
storiesOf('NavBar', module).add('VerticalNavBar', () => (