handle keydown to toggle addon

This commit is contained in:
NikolaBorislavovHristov 2019-09-18 23:05:28 +03:00
parent 195046d244
commit bfcab9ffe0
2 changed files with 9 additions and 4 deletions

View file

@ -2,13 +2,17 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button, useTabIndex } = require('stremio/common');
const { Button } = require('stremio/common');
const styles = require('./styles');
const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, toggle }) => {
const tabIndex = useTabIndex();
const onKeyUp = React.useCallback((event) => {
if (event.key === 'Enter' && typeof toggle === 'function') {
toggle(event);
}
}, [toggle]);
return (
<div className={classnames(styles['addon-container'], className)} tabIndex={tabIndex} data-id={id}>
<Button className={classnames(styles['addon-container'], className)} data-id={id} onKeyUp={onKeyUp}>
<div className={styles['logo-container']}>
{
typeof logo === 'string' && logo.length > 0 ?
@ -56,7 +60,7 @@ const Addon = ({ className, id, name, logo, description, types, version, transpo
<div className={styles['label']}>Share addon</div>
</Button>
</div>
</div>
</Button>
);
};

View file

@ -5,6 +5,7 @@
align-items: flex-start;
padding: 1rem;
background-color: var(--color-backgroundlighter);
cursor: inherit;
.logo-container {
flex: none;