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

wix-style-react

export const _size = `
() => {
  const options = [
    { id: 1, value: 'tag 1' },
    { id: 2, value: 'tag 2' },
    { id: 3, value: 'tag 3' },
  ];

  const renderMultiSelect = ({ size, tagSize }) => {
    const [tags, setTags] = React.useState([
      {
        size: tagSize,
        id: '1',
        label: 'tag 1',
      },
      {
        size: tagSize,
        id: '2',
        label: 'tag 2',
      },
    ]);

    const handleOnSelect = tag =>
      setTags([...tags, { id: tag.id, label: tag.value }]);

    const handleOnRemoveTag = tagId =>
      setTags(tags.filter(currTag => currTag.id !== tagId));

    return (
      <MultiSelect
        size={size}
        options={options}
        tags={tags}
        onSelect={handleOnSelect}
        onRemoveTag={handleOnRemoveTag}
      />
    );
  };

  return (
    <StorybookComponents.Stack flexDirection="column">
      <FormField label="Large">
        {renderMultiSelect({ size: 'large', tagSize: 'medium' })}
      </FormField>
      <FormField label="Medium">
        {renderMultiSelect({ size: 'medium', tagSize: 'small' })}
      </FormField>
      <FormField label="Small">
        {renderMultiSelect({ size: 'small', tagSize: 'tiny' })}
      </FormField>
    </StorybookComponents.Stack>
  );
};

`;

export const _action = `
() => {
  const [tags, setTags] = React.useState([]);

  const handleOnSelect = tag =>
    setTags([...tags, { id: tag.id, label: tag.value }]);

  const handleOnRemoveTag = tagId =>
    setTags(tags.filter(currTag => currTag.id !== tagId));
    
  return (
    <MultiSelect
      tags={tags}
      options={[
        { id: '1', value: 'tag 1' },
        { id: '2', value: 'tag 2' },
        { id: '3', value: 'tag 3' },
      ]}
      customSuffix={
        <Box>
          <TextButton prefixIcon={<Icons.Add />}>Add Tag</TextButton>
        </Box>
      }
      onSelect={handleOnSelect}
      onRemoveTag={handleOnRemoveTag}
    />
  );
};
`;

export const _selectMode = `
() => {
  const [tags, setTags] = React.useState([]);

  const handleOnSelect = tag =>
    setTags([...tags, { id: tag.id, label: tag.value }]);

  const handleOnRemoveTag = tagId =>
    setTags(tags.filter(currTag => currTag.id !== tagId));

  return (
    <MultiSelect
      tags={tags}
      options={[
        { id: '1', value: 'tag 1' },
        { id: '2', value: 'tag 2' },
        { id: '3', value: 'tag 3' },
      ]}
      mode="select"
      placeholder="Select tags from a list"
      onSelect={handleOnSelect}
      onRemoveTag={handleOnRemoveTag}
    />
  );
};
`;

export const _manualInput = `
() => {
  const [tags, setTags] = React.useState([]);

  const handleManualInput = tag =>
    setTags([...tags, { id: Math.random(), label: tag[0] }]);

  const handleOnRemoveTag = tagId =>
    setTags(tags.filter(currTag => currTag.id !== tagId));

  return (
    <MultiSelect
      tags={tags}
      placeholder="Type custom tags and insert it by pressing Enter key"
      onManuallyInput={handleManualInput}
      onRemoveTag={handleOnRemoveTag}
    />
  );
};
`;

export const _autocomplete = `
() => {
  const [value, setValue] = React.useState('');
  const [tags, setTags] = React.useState([]);

  const options = [
    { value: 'Alabama', id: 'AL' },
    { value: 'California', id: 'CA' },
    { value: 'North Carolina', id: 'NC' },
    { value: 'Colorado', id: 'CO' },
    { value: 'Connecticut', id: 'CT' },
  ];

  const handleOnChange = event => setValue(event.target.value);

  const predicate = option =>
    option.value && option.value.toLowerCase().includes(value.toLowerCase());

  const handleOnSelect = tag =>
    setTags([...tags, { id: tag.id, label: tag.value }]);

  const handleOnRemoveTag = tagId =>
    setTags(tags.filter(currTag => currTag.id !== tagId));

  return (
    <MultiSelect
      predicate={predicate}
      tags={tags}
      value={value}
      options={options}
      onChange={handleOnChange}
      placeholder="Type in tags to matching options list"
      onSelect={handleOnSelect}
      onRemoveTag={handleOnRemoveTag}
    />
  );
};
`;

export const _reorder = `
() => {
  const [tags, setTags] = React.useState([
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three' },
  ]);

  const options = [
    { id: 1, value: 'One' },
    { id: 2, value: 'Two' },
    { id: 3, value: 'Three' },
  ];

  const handleOnSelect = tag =>
    setTags([...tags, { id: tag.id, label: tag.value }]);

  const handleOnRemoveTag = tagId =>
    setTags(tags.filter(currTag => currTag.id !== tagId));

  return (
    <MultiSelect
      tags={tags}
      options={options}
      onReorder={({ addedIndex, removedIndex }) => {
        const nextTags = tags.slice();
        nextTags.splice(addedIndex, 0, ...nextTags.splice(removedIndex, 1));
        setTags(nextTags);
      }}
      onSelect={handleOnSelect}
      onRemoveTag={handleOnRemoveTag}
    />
  );
};
`;

// handle tag removes too
export const _suggestions = `
() => {
  const [value, setValue] = React.useState('');
  const [tags, setTags] = React.useState([]);

  const contacts = [
    { name: 'David Fincher', email: 'davidf@wix.com', id: 1 },
    { name: 'John Doe', email: 'johnd@wix.com', id: 2 },
    { name: 'Jane Martin', email: 'janem@wix.com', id: 3 },
    { name: 'Robert Ortega', email: 'roberto@wix.com', id: 4 },
    { name: 'Mary James', email: 'maryj@wix.com', id: 5 },
  ];

  const options = contacts.map(contact => ({
    ...contact,
    ...contactItemBuilder({
      id: contact.id,
      title: contact.name,
      subtitle: contact.email,
      imageUrl: \`AvatarExample\${contact.id}.jpg\`,
    }),
  }));

  const handleOnSelect = ({ name, email, id }) =>
    setTags([...tags, { id, label: name ? \`\${email} (\${name})\` : email }]);

  const handleOnRemoveTag = tagId =>
    setTags(tags.filter(currTag => currTag.id !== tagId));

  const handleOnChange = event => setValue(event.target.value);

  const predicate = option =>
    (option.name + option.email).toLowerCase().includes(value.toLowerCase());

  return (
    <MultiSelect
      value={value}
      options={options}
      tags={tags}
      onChange={handleOnChange}
      onSelect={handleOnSelect}
      onRemoveTag={handleOnRemoveTag}
      placeholder="Type in tags to matching options list"
      predicate={predicate}
    />
  );
};
`;