Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-29 05:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

dataset integrated in Multiselect component

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-11 15:59:44 +03:00
parent c996d521de
commit 6d76f309a2
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/common/Multiselect/Multiselect.js
View file

@ -5,6 +5,7 @@ const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const Popup = require('stremio/common/Popup');
const useBinaryState = require('stremio/common/useBinaryState');
const useDataset = require('stremio/common/useDataset');
const styles = require('./styles');
const Multiselect = ({ className, direction, title, renderLabelContent, options, selected, onOpen, onClose, onSelect, ...props }) => {
@ -16,6 +17,7 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
selected.filter(value => typeof value === 'string')
:
[];
const dataset = useDataset(props);
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const popupLabelOnClick = React.useCallback((event) => {
if (!event.nativeEvent.togglePopupPrevented) {
@ -27,21 +29,31 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
}, []);
const optionOnClick = React.useCallback((event) => {
if (typeof onSelect === 'function') {
onSelect(event);
onSelect({
type: 'select',
nativeEvent: event.nativeEvent,
dataset: dataset
});
}
if (!event.nativeEvent.closeMenuPrevented) {
closeMenu();
}
}, [onSelect]);
React.useEffect(() => {
}, [onSelect, dataset]);
React.useLayoutEffect(() => {
if (menuOpen) {
if (typeof onOpen === 'function') {
onOpen();
onOpen({
type: 'open',
dataset: dataset
});
}
} else {
if (typeof onClose === 'function') {
onClose();
onClose({
type: 'close',
dataset: dataset
});
}
}
}, [menuOpen]);
@ -51,7 +63,7 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
direction={direction}
onCloseRequest={closeMenu}
renderLabel={({ ref, className: popupLabelClassName, children }) => (
<Button {...props} ref={ref} className={classnames(className, popupLabelClassName, styles['label-container'], { 'active': menuOpen })} title={title} onClick={popupLabelOnClick}>
<Button ref={ref} className={classnames(className, popupLabelClassName, styles['label-container'], { 'active': menuOpen })} title={title} onClick={popupLabelOnClick}>
{
typeof renderLabelContent === 'function' ?
renderLabelContent()

4
src/common/Multiselect/styles.less
View file

@ -24,7 +24,6 @@
.label {
flex: 1;
max-height: 2.4em;
margin-right: 1rem;
color: var(--color-surfacelighter);
}
@ -32,6 +31,7 @@
flex: none;
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: var(--color-surfacelighter);
}
@ -61,7 +61,6 @@
.label {
flex: 1;
max-height: 4.8em;
margin-right: 1rem;
color: var(--color-surfacelighter);
}
@ -70,6 +69,7 @@
display: none;
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: var(--color-surfacelighter);
}
}