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

Multiselect stories added to storybook

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-11-13 23:32:06 +02:00
parent da33bfa168
commit 7954e4f261
11 changed files with 137 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
storybook/stories/Multiselect/MultiselectMultipleValues/MultiselectMultipleValues.js Normal file
View file

@ -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}
/>
);
});

1
storybook/stories/Multiselect/MultiselectMultipleValues/index.js Normal file
View file

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

6
storybook/stories/Multiselect/MultiselectMultipleValues/styles.less Normal file
View file

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

39
storybook/stories/Multiselect/MultiselectNotAutoClosing/MultiselectNotAutoClosing.js Normal file
View file

@ -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}
/>
);
});

1
storybook/stories/Multiselect/MultiselectNotAutoClosing/index.js Normal file
View file

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

6
storybook/stories/Multiselect/MultiselectNotAutoClosing/styles.less Normal file
View file

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

33
storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js Normal file
View file

@ -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}
/>
);
});

1
storybook/stories/Multiselect/MultiselectSingleValue/index.js Normal file
View file

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

6
storybook/stories/Multiselect/MultiselectSingleValue/styles.less Normal file
View file

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

3
storybook/stories/Multiselect/index.js Normal file
View file

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

7
storybook/stories/index.js
View file

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