wix-style-react/src/MultiSelect/docs/MultiSelect.demo.js

wix-style-react

import React from 'react';
import MultiSelect from '..';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
import { listItemSectionBuilder } from '../../ListItemSection';
import { listItemActionBuilder } from '../../ListItemAction';
import TextButton from '../../TextButton';

export default () => {
  const [addedTags, setAddedTags] = React.useState([]);

  const options = [
    { id: 1, value: 'Pottery Class' },
    { id: 2, value: 'Circle Workout' },
  ];

  const baseDropdownItems = [
    ...options,
    listItemSectionBuilder({
      id: 3,
      type: 'divider',
    }),
    listItemActionBuilder({
      id: 4,
      title: 'Select all services',
    }),
  ];

  const [dropdownItems, setDropdownItems] = React.useState(baseDropdownItems);

  const addTag = option => {
    const tags =
      option.id === 4
        ? options.map(option => ({ id: option.id, label: option.value }))
        : [...addedTags, { id: option.id, label: option.value }];

    tags.length === 2
      ? setDropdownItems(baseDropdownItems.filter(item => item.id < 3))
      : setDropdownItems(baseDropdownItems);

    setAddedTags(tags);
  };

  const removeTag = tagId => {
    setAddedTags(addedTags.filter(tag => tag.id !== tagId));
    setDropdownItems(baseDropdownItems);
  };

  return (
    <StorybookComponents.Stack flexDirection="column" width="50%">
      <MultiSelect
        tags={addedTags}
        options={dropdownItems}
        onSelect={option => addTag(option)}
        onRemoveTag={tagId => removeTag(tagId)}
        customSuffix={<TextButton>+ Add Service</TextButton>}
      />
    </StorybookComponents.Stack>
  );
};