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

discover implemented on a working demo stage

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-29 18:13:36 +03:00
parent a396eebab3
commit ca730fa597
2 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/routes/Discover/Discover.js
View file

@ -6,9 +6,9 @@ const styles = require('./styles');
const Discover = ({ urlParams, queryParams }) => {
const [pickers, metaItems] = useCatalog(urlParams, queryParams);
const [selectedItem, setSelectedItem] = React.useState(null);
const [selectedItem, setSelectedItem] = React.useState(metaItems[0]);
const changeMetaItem = React.useCallback((event) => {
const { metaItemId } = event.currentTarget.dataset;
const { id: metaItemId } = event.currentTarget.dataset;
const metaItem = metaItems.find(({ id }) => id === metaItemId);
setSelectedItem(metaItem);
}, [metaItems]);

16
src/routes/Discover/PickerMenu.js
View file

@ -6,11 +6,19 @@ const { Input } = require('stremio-navigation');
const { Popup, useBinaryState } = require('stremio/common');
const styles = require('./styles');
const PickerMenu = ({ name, value, options, toggle }) => {
const PickerMenu = ({ name, value, options, onChange }) => {
const popupRef = React.useRef();
const [open, onOpen, onClose] = useBinaryState(false);
const label = typeof value === 'string' ? value : name;
const optionOnClick = React.useCallback((event) => {
if (popupRef.current !== null) {
popupRef.current.close();
}
onChange(event);
}, [onChange]);
return (
<Popup onOpen={onOpen} onClose={onClose}>
<Popup ref={popupRef} onOpen={onOpen} onClose={onClose}>
<Popup.Label>
<Input className={classnames(styles['picker-button'], { 'active': open }, 'focusable-with-border')} title={label} type={'button'}>
<div className={classnames(styles['picker-label'], { [styles['capitalized']]: name === 'type' })}>{label}</div>
@ -22,7 +30,7 @@ const PickerMenu = ({ name, value, options, toggle }) => {
{
Array.isArray(options) ?
options.map(({ value, label }) => (
<Input key={value} className={classnames(styles['menu-item-container'], 'focusable-with-border')} title={label} data-name={name} data-value={value} type={'button'} onClick={toggle}>
<Input key={value} className={classnames(styles['menu-item-container'], 'focusable-with-border')} title={label} data-name={name} data-value={value} type={'button'} onClick={optionOnClick}>
<div className={classnames(styles['menu-label'], { [styles['capitalized']]: name === 'type' })}>{label}</div>
</Input>
))
@ -42,7 +50,7 @@ PickerMenu.propTypes = {
value: PropTypes.string,
label: PropTypes.string
})),
toggle: PropTypes.func
onChange: PropTypes.func
};
module.exports = PickerMenu;