Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

NavTabButton refactored to work with useRouteActive hook

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-19 11:37:58 +03:00
parent d6e47f0982
commit 97b2244e3e
1 changed files with 4 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,19 +1,17 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const UrlUtils = require('url');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button'); const Button = require('stremio/common/Button');
const routesRegexp = require('stremio/common/routesRegexp'); const routesRegexp = require('stremio/common/routesRegexp');
const useLocationHash = require('stremio/common/useLocationHash'); const useRouteActive = require('stremio/common/useRouteActive');
const styles = require('./styles'); const styles = require('./styles');
const NavTabButton = ({ className, icon, label, href, onClick }) => { const NavTabButton = ({ className, icon, label, href, onClick }) => {
const locationHash = useLocationHash();
const routeRegexp = React.useMemo(() => { const routeRegexp = React.useMemo(() => {
if (typeof href === 'string' && href.length > 0) { if (typeof href === 'string') {
for (const { regexp } of Object.values(routesRegexp)) { for (const { regexp } of Object.values(routesRegexp)) {
if (regexp.exec(href.slice(1))) { if (href.slice(1).match(regexp)) {
return regexp; return regexp;
} }
} }
@ -21,14 +19,7 @@ const NavTabButton = ({ className, icon, label, href, onClick }) => {
return null; return null;
}, [href]); }, [href]);
const active = React.useMemo(() => { const active = useRouteActive(routeRegexp);
if (routeRegexp !== null) {
const { pathname: locationPathname } = UrlUtils.parse(locationHash.slice(1));
return !!locationPathname.match(routeRegexp);
}
return false;
}, [routeRegexp, locationHash]);
return ( return (
<Button className={classnames(className, styles['nav-tab-button-container'], { 'active': active })} title={label} tabIndex={-1} href={href} onClick={onClick}> <Button className={classnames(className, styles['nav-tab-button-container'], { 'active': active })} title={label} tabIndex={-1} href={href} onClick={onClick}>
{ {