NavTabButton shows Image or Icon depending on details property

This commit is contained in:
svetlagasheva 2020-04-07 18:04:27 +03:00
parent b636bd9d1e
commit 2afedcd67f
2 changed files with 19 additions and 5 deletions

View file

@ -3,16 +3,30 @@ const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
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 Image = require('stremio/common/Image');
const styles = require('./styles'); const styles = require('./styles');
const NavTabButton = ({ className, icon, label, href, selected, onClick }) => { const NavTabButton = ({ className, icon, label, href, selected, details, onClick }) => {
const renderLogoFallback = React.useMemo(() => () => {
return (
<Icon className={styles['icon']} icon={'ic_addons'} />
);
}, []);
return ( return (
<Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}> <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
{ {
typeof icon === 'string' && icon.length > 0 ? details ?
<Icon className={styles['icon']} icon={icon} /> <Image
className={styles['logo']}
src={icon}
alt={' '}
renderFallback={renderLogoFallback}
/>
: :
null typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
:
null
} }
{ {
typeof label === 'string' && label.length > 0 ? typeof label === 'string' && label.length > 0 ?

View file

@ -27,7 +27,7 @@
} }
} }
.icon { .icon, .logo {
flex: none; flex: none;
width: 1.7rem; width: 1.7rem;
height: 1.7rem; height: 1.7rem;