@axeptio/design-system/src/Core/Controls/Select/select.stories.jsx

Design System for Axeptio

import React from 'react';
import Select from './index';
import { useArgs } from '@storybook/client-api';
import data from './data.json';

export default {
  title: 'Core/Controls/Select',
  component: Template
};

const Template = args => {
  const [_, updateArgs] = useArgs();

  const update = val => {
    if (val.length === 0) {
      args.value = [];
    } else {
      args.value = val;
    }
    updateArgs({ ...args, value: args.value });
  };

  const clear = args => {
    args.value = [];
    updateArgs({ ...args, value: args.value });
  };

  return (
    <Select
      {...args}
      onClear={args => {
        clear(args);
      }}
      onChange={val => {
        update(val);
      }}
    />
  );
};

export const Default = Template.bind({});
Default.args = {
  value: null,
  options: data
};

export const Small = Template.bind({});
Small.args = {
  value: null,
  small: true,
  options: data
};

export const NoOptionsMessage = Template.bind({});
NoOptionsMessage.args = {
  value: [{ label: 'value', value: 1 }],
  optionsMessage: "Pas d'options ici",
  options: []
};

export const Multi = Template.bind({});
Multi.args = {
  value: [],
  optionsMessage: "Pas d'options ici",
  multi: true,
  options: data
};

export const DontCloseMenuOnSelect = Template.bind({});
DontCloseMenuOnSelect.args = {
  value: [],
  optionsMessage: "Pas d'options ici",
  multi: true,
  closeMenuOnSelect: false,
  options: data
};

export const Searchable = Template.bind({});
Searchable.args = {
  value: [],
  optionsMessage: "Pas d'options ici",
  multi: false,
  isSearchable: true,
  options: data
};

export const Placeholder = Template.bind({});
Placeholder.args = {
  value: [],
  optionsMessage: "Pas d'options ici",
  multi: false,
  isSearchable: true,
  placeholder: 'Choose your country',
  options: data
};

export const BrowserSelect = Template.bind({});
BrowserSelect.args = {
  value: [],
  optionsMessage: "Pas d'options ici",
  multi: false,
  isSearchable: true,
  placeholder: 'Choose your country',
  options: data,
  browser: true
};

export const Disabled = Template.bind({});
Disabled.args = {
  value: null,
  isDisabled: true,
  options: []
};

export const MenuOpen = Template.bind({});
MenuOpen.args = {
  value: null,
  options: data,
  menuIsOpen: true
};