Multiselect stories added to storybook

storybook/stories/Multiselect/MultiselectMultipleValues/MultiselectMultipleValues.js

@@ -0,0 +1,37 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
+const { Multiselect } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('Multiselect', module).add('MultiselectMultipleValues', () => {
+    const [selected, setSelected] = React.useState(['a']);
+    const onSelect = React.useCallback((event) => {
+        action('onSelect')(event);
+        if (selected.includes(event.value)) {
+            setSelected(selected.filter((value) => value !== event.value));
+        } else {
+            setSelected([...selected, event.value]);
+        }
+    }, [selected]);
+    return (
+        <Multiselect
+            className={styles['label-container']}
+            direction={'bottom'}
+            title={'MultiselectMultipleValues'}
+            options={[
+                { value: 'a', label: 'A' },
+                { value: 'b' },
+                { value: 'c', label: 'C' },
+            ]}
+            selected={selected}
+            disabled={false}
+            dataset={{ prop: 'value' }}
+            renderLabelContent={null}
+            renderLabelText={null}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
+            onSelect={onSelect}
+        />
+    );
+});

storybook/stories/Multiselect/MultiselectMultipleValues/index.js

@@ -0,0 +1 @@
+require('./MultiselectMultipleValues');

storybook/stories/Multiselect/MultiselectMultipleValues/styles.less

@@ -0,0 +1,6 @@
+.label-container {
+    flex: none;
+    width: 17rem;
+    height: 3.6rem;
+    margin: 2rem;
+}

storybook/stories/Multiselect/MultiselectNotAutoClosing/MultiselectNotAutoClosing.js

@@ -0,0 +1,39 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
+const { Multiselect } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('Multiselect', module).add('MultiselectNotAutoClosing', () => {
+    const [selected, setSelected] = React.useState(['a']);
+    const onSelect = React.useCallback((event) => {
+        action('onSelect')(event);
+        if (selected.includes(event.value)) {
+            setSelected(selected.filter((value) => value !== event.value));
+        } else {
+            setSelected([...selected, event.value]);
+        }
+
+        event.nativeEvent.closeMenuPrevented = true;
+    }, [selected]);
+    return (
+        <Multiselect
+            className={styles['label-container']}
+            direction={'bottom'}
+            title={'MultiselectNotAutoClosing'}
+            options={[
+                { value: 'a', label: 'A' },
+                { value: 'b' },
+                { value: 'c', label: 'C' },
+            ]}
+            selected={selected}
+            disabled={false}
+            dataset={{ prop: 'value' }}
+            renderLabelContent={null}
+            renderLabelText={null}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
+            onSelect={onSelect}
+        />
+    );
+});

storybook/stories/Multiselect/MultiselectNotAutoClosing/index.js

@@ -0,0 +1 @@
+require('./MultiselectNotAutoClosing');

storybook/stories/Multiselect/MultiselectNotAutoClosing/styles.less

@@ -0,0 +1,6 @@
+.label-container {
+    flex: none;
+    width: 17rem;
+    height: 3.6rem;
+    margin: 2rem;
+}

storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js

@@ -0,0 +1,33 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
+const { Multiselect } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('Multiselect', module).add('MultiselectSingleValue', () => {
+    const [selected, setSelected] = React.useState(['a']);
+    const onSelect = React.useCallback((event) => {
+        action('onSelect')(event);
+        setSelected([event.value]);
+    }, []);
+    return (
+        <Multiselect
+            className={styles['label-container']}
+            direction={'bottom'}
+            title={'MultiselectSingleValue'}
+            options={[
+                { value: 'a', label: 'A' },
+                { value: 'b' },
+                { value: 'c', label: 'C' },
+            ]}
+            selected={selected}
+            disabled={false}
+            dataset={{ prop: 'value' }}
+            renderLabelContent={null}
+            renderLabelText={null}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
+            onSelect={onSelect}
+        />
+    );
+});

storybook/stories/Multiselect/MultiselectSingleValue/index.js

@@ -0,0 +1 @@
+require('./MultiselectSingleValue');

storybook/stories/Multiselect/MultiselectSingleValue/styles.less

@@ -0,0 +1,6 @@
+.label-container {
+    flex: none;
+    width: 17rem;
+    height: 3.6rem;
+    margin: 2rem;
+}

storybook/stories/Multiselect/index.js

@@ -0,0 +1,3 @@
+require('./MultiselectMultipleValues');
+require('./MultiselectNotAutoClosing');
+require('./MultiselectSingleValue');

storybook/stories/index.js

@@ -1,6 +1,7 @@
 require('./Addon');
-require('./MetaItem');
 require('./ColorPicker');
-require('./SharePrompt');
+require('./MetaItem');
-require('./Notification');
 require('./ModalDialog');
+require('./Multiselect');
+require('./Notification');
+require('./SharePrompt');