Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42: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 NavMenu = require('stremio/common/NavBar/NavMenu');
const styles = require('./styles'); 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(() => { const backButtonOnClick = React.useCallback(() => {
window.history.back(); window.history.back();
}, []); }, []);
@ -39,7 +39,7 @@ const HorizontalNavBar = React.memo(({ className, backButton, searchBar, addonsB
searchBar ? searchBar ?
<React.Fragment> <React.Fragment>
<div className={styles['spacing']} /> <div className={styles['spacing']} />
<SearchBar className={styles['search-bar']} /> <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
<div className={styles['spacing']} /> <div className={styles['spacing']} />
</React.Fragment> </React.Fragment>
: :
@ -77,6 +77,8 @@ HorizontalNavBar.displayName = 'HorizontalNavBar';
HorizontalNavBar.propTypes = { HorizontalNavBar.propTypes = {
className: PropTypes.string, className: PropTypes.string,
route: PropTypes.string,
query: PropTypes.string,
backButton: PropTypes.bool, backButton: PropTypes.bool,
searchBar: PropTypes.bool, searchBar: PropTypes.bool,
addonsButton: 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 Button = require('stremio/common/Button');
const styles = require('./styles'); const styles = require('./styles');
const NavTabButton = ({ className, icon, label, href, selected, direction, onClick }) => { const NavTabButton = ({ className, icon, label, href, selected, route, direction, onClick }) => {
return ( 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 ? typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} /> <Icon className={styles['icon']} icon={icon} />
@ -30,6 +30,7 @@ NavTabButton.propTypes = {
label: PropTypes.string, label: PropTypes.string,
href: PropTypes.string, href: PropTypes.string,
selected: PropTypes.bool, selected: PropTypes.bool,
route: PropTypes.string,
direction: PropTypes.oneOf(['horizontal', 'vertical']), direction: PropTypes.oneOf(['horizontal', 'vertical']),
onClick: PropTypes.func 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 NavTabButton = require('stremio/common/NavBar/NavTabButton');
const styles = require('./styles'); const styles = require('./styles');
const VerticalNavBar = React.memo(({ className, tabs }) => { const VerticalNavBar = React.memo(({ className, route, tabs }) => {
return ( return (
<nav className={classnames(className, styles['nav-bar-container'])}> <nav className={classnames(className, styles['nav-bar-container'])}>
{ {
Array.isArray(tabs) && tabs.length > 0 ? Array.isArray(tabs) && tabs.length > 0 ?
tabs.map(({ href = '', icon = '', label = '', onClick }, index) => ( tabs.map((tab, index) => (
<NavTabButton <NavTabButton
key={index} key={index}
className={styles['nav-tab-button']} className={styles['nav-tab-button']}
href={href} selected={tab.route === route}
icon={icon} href={tab.href}
label={label} icon={tab.icon}
label={tab.label}
route={tab.route}
direction={'vertical'} 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 VerticalNavBar = require('stremio/common/VerticalNavBar');
const TABS = [ const TABS = [
{ label: 'Board', icon: 'ic_board' }, { route: 'board', label: 'Board', icon: 'ic_board' },
{ label: 'Discover', icon: 'ic_discover' }, { route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ label: 'Library', icon: 'ic_library' }, { route: 'library', label: 'Library', icon: 'ic_library' },
{ label: 'Calendar', icon: 'ic_calendar' }, { route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ label: 'Addons', icon: 'ic_addons' }, { route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ label: 'Settings', icon: 'ic_settings' }, { route: 'settings', label: 'Settings', icon: 'ic_settings' },
{ label: 'Board', icon: 'ic_board' }, { route: 'board', label: 'Board', icon: 'ic_board' },
{ label: 'Discover', icon: 'ic_discover' }, { route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ label: 'Library', icon: 'ic_library' }, { route: 'library', label: 'Library', icon: 'ic_library' },
{ label: 'Calendar', icon: 'ic_calendar' }, { route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ label: 'Addons', icon: 'ic_addons' }, { route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ label: 'Settings', icon: 'ic_settings' } { route: 'settings', label: 'Settings', icon: 'ic_settings' }
]; ];
storiesOf('NavBar', module).add('LongVerticalNavBar', () => ( 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 VerticalNavBar = require('stremio/common/VerticalNavBar');
const TABS = [ const TABS = [
{ label: 'Board', icon: 'ic_board' }, { route: 'board', label: 'Board', icon: 'ic_board' },
{ label: 'Discover', icon: 'ic_discover' }, { route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ label: 'Library', icon: 'ic_library' }, { route: 'library', label: 'Library', icon: 'ic_library' },
{ label: 'Calendar', icon: 'ic_calendar' }, { route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ label: 'Addons', icon: 'ic_addons' }, { route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ label: 'Settings', icon: 'ic_settings' } { route: 'settings', label: 'Settings', icon: 'ic_settings' }
]; ];
storiesOf('NavBar', module).add('VerticalNavBar', () => ( storiesOf('NavBar', module).add('VerticalNavBar', () => (