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

wix-style-react

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

  return (
    <StorybookComponents.Stack flexDirection="column">
      <MultiSelectCheckbox size="large" placeholder="Large" options={options} />
      <MultiSelectCheckbox
        size="medium"
        placeholder="Medium"
        options={options}
      />
      <MultiSelectCheckbox size="small" placeholder="Small" options={options} />
    </StorybookComponents.Stack>
  );
};
`;

export const _border = `
() => {
  const options = [
    { value: 'Option 1', id: '1' },
    { value: 'Option 2', id: '2' },
    { value: 'Option 3', id: '3' },
    { value: 'Option 4', id: '4' },
    { value: 'Option 5', id: '5' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <MultiSelectCheckbox
        border="standard"
        placeholder="Standard"
        options={options}
      />
      <MultiSelectCheckbox
        border="round"
        placeholder="Round"
        options={options}
      />
      <MultiSelectCheckbox
        border="bottomLine"
        placeholder="Bottom line"
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _status = `
() => {
  const options = [
    { value: 'Option 1', id: '1' },
    { value: 'Option 2', id: '2' },
    { value: 'Option 3', id: '3' },
    { value: 'Option 4', id: '4' },
    { value: 'Option 5', id: '5' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <MultiSelectCheckbox
        status="error"
        placeholder="Error"
        options={options}
      />
      <MultiSelectCheckbox
        status="warning"
        placeholder="Warning"
        options={options}
      />
      <MultiSelectCheckbox
        status="loading"
        placeholder="Loading"
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _statusMessage = `
() => {
  const options = [
    { value: 'Option 1', id: '1' },
    { value: 'Option 2', id: '2' },
    { value: 'Option 3', id: '3' },
    { value: 'Option 4', id: '4' },
    { value: 'Option 5', id: '5' },
  ];

  return (
    <MultiSelectCheckbox
      placeholder="Hover the mouse on status icon"
      status="error"
      statusMessage="Please fill the required field"
      tooltipPlacement="top-end"
      options={options}
    />
  );
};
`;

export const _disabled = `
() => {
  const options = [
    { value: 'Option 1', id: '1' },
    { value: 'Option 2', id: '2' },
    { value: 'Option 3', id: '3' },
    { value: 'Option 4', id: '4' },
    { value: 'Option 5', id: '5' },
  ];

  return (
    <MultiSelectCheckbox placeholder="Disabled" disabled options={options} />
  );
};
`;

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

  return (
    <StorybookComponents.Stack flexDirection="column">
      <MultiSelectCheckbox
        placeholder="Select"
        prefix={<Input.Affix>Prefix</Input.Affix>}
        suffix={<Input.Affix>Suffix</Input.Affix>}
        options={options}
      />
      <MultiSelectCheckbox
        placeholder="Select"
        prefix={
          <Input.IconAffix>
            <Icons.Languages />
          </Input.IconAffix>
        }
        suffix={
          <Input.IconAffix>
            <Badge>Badge</Badge>
          </Input.IconAffix>
        }
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _clearButton = `
() => {
  const [selectedOptions, setSelectedOptions] = React.useState([0]);
  const options = [{ id: 0, value: 'Click clear button to remove selection' }];

  return (
    <MultiSelectCheckbox
      placeholder="Select"
      clearButton
      onClear={() => setSelectedOptions([])}
      onSelect={option => setSelectedOptions([option])}
      selectedOptions={selectedOptions}
      options={options}
    />
  );
};
`;

export const _fixedHeaderAndFooter = `
() => {
  const options = [
    { id: 1, value: 'Option 1' },
    { id: 2, value: 'Option 2' },
    { id: 3, value: 'Option 3' },
    { id: 4, value: 'Option 4' },
    { id: 5, value: 'Option 5' },
  ];

  return (
    <MultiSelectCheckbox
      placeholder="Select"
      fixedHeader={<ListItemAction title="Fixed Header" />}
      fixedFooter={<ListItemAction title="Fixed Footer" />}
      options={options}
    />
  );
};
`;

export const _listItemBuilders = `
() => {
  const listItemSectionOptions = [
    listItemSectionBuilder({
      type: 'title',
      title: 'Section 1',
    }),
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    listItemSectionBuilder({
      type: 'divider',
    }),

    listItemSectionBuilder({
      type: 'title',
      title: 'Section 2',
    }),
    { id: 3, value: 'Option 4' },
    { id: 4, value: 'Option 4' },
  ];

  const listItemActionOptions = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4' },
    listItemActionBuilder({
      title: 'Action',
    }),
  ];

  const listItemSelectOptions = [
    listItemSelectBuilder({
      id: 0,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
      checkbox: true,
    }),
    listItemSelectBuilder({
      id: 1,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
      checkbox: true,
    }),
    listItemSelectBuilder({
      id: 2,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
      checkbox: true,
    }),
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <MultiSelectCheckbox
        placeholder="List Item Section"
        options={listItemSectionOptions}
      />
      <MultiSelectCheckbox
        placeholder="List Item Action"
        options={listItemActionOptions}
      />
      <MultiSelectCheckbox
        placeholder="List Item Select"
        options={listItemSelectOptions}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _listContainerDimensions = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4' },
    { id: 4, value: 'Option 5' },
    { id: 5, value: 'Option 6' },
    { id: 6, value: 'Option 7' },
    { id: 7, value: 'Option 8' },
  ];

  return (
    <StorybookComponents.Stack>
      <MultiSelectCheckbox
        placeholder="Select"
        maxHeightPixels="200px"
        dropdownWidth="auto"
        minWidthPixels="400px"
        options={options}
        popoverProps={{
          placement: 'bottom-start',
        }}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _markedOption = `
<MultiSelectCheckbox
  placeholder="Select"
  markedOption={1}
  options={[
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ]}
/>;
`;

export const _delimiter = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <MultiSelectCheckbox
        placeholder="Select"
        selectedOptions={[0, 1, 2]}
        delimiter=", "
        options={options}
      />
      <MultiSelectCheckbox
        placeholder="Select"
        selectedOptions={[0, 1, 2]}
        delimiter=";  "
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _lazyLoading = `
() => {
  const [selectedOptions, setSelectedOptions] = React.useState([]);

  const [data, setData] = React.useState([]);
  const fetchMoreData = () =>
    Promise.resolve(
      fetch(\`/api/dropdown?limit=\${5}&offset=\${data.length}\`),
    ).then(results => setData([...data, ...results]));

  React.useEffect(() => {
    fetchMoreData();
  }, []);

  return (
    <MultiSelectCheckbox
      placeholder="Select"
      options={data}
      infiniteScroll
      hasMore={true}
      loadMore={fetchMoreData}
      selectedOptions={selectedOptions}
      onSelect={option => setSelectedOptions([...selectedOptions, option])}
      onDeselect={option =>
        setSelectedOptions(selectedOptions.filter(item => item !== option))
      }
    />
  );
};
`;

export const _textOverflow = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4' },
    { id: 4, value: 'Option 5' },
  ];
  const longOptions = [
    {
      id: 0,
      value: 'This is a long value that make dropdown layout grow',
    },
    {
      id: 1,
      value: 'This is a long value that make dropdown layout grow',
    },
    {
      id: 2,
      value: 'This is a long value that make dropdown layout grow',
    },
  ];
  const longOptionsWithEllipsis = [
    listItemSelectBuilder({
      id: 0,
      title: 'This is a long value that make dropdown layout grow',
      ellipsis: true,
      checkbox: true,
    }),
    listItemSelectBuilder({
      id: 1,
      title: 'This is a long value that make dropdown layout grow',
      ellipsis: true,
      checkbox: true,
    }),
    listItemSelectBuilder({
      id: 2,
      title: 'This is a long value that make dropdown layout grow',
      ellipsis: true,
      checkbox: true,
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <StorybookComponents.Stack>
        <FormField label="Input value - ellipsis">
          <MultiSelectCheckbox
            options={options}
            selectedOptions={[0, 1, 2, 3, 4]}
            placeholder="This field is showing ellipsis at the end of this line"
            textOverflow="ellipsis"
          />
        </FormField>
        <FormField label="Input value - clip">
          <MultiSelectCheckbox
            options={options}
            selectedOptions={[0, 1, 2, 3, 4]}
            placeholder="This field is clipping content at the end of this line"
            textOverflow="clip"
          />
        </FormField>
      </StorybookComponents.Stack>
      <StorybookComponents.Stack>
        <FormField label="Options - wrapping">
          <MultiSelectCheckbox options={longOptions} placeholder="Select" />
        </FormField>
        <FormField label="Options - with ellipsis">
          <MultiSelectCheckbox
            options={longOptionsWithEllipsis}
            placeholder="Select"
          />
        </FormField>
      </StorybookComponents.Stack>
    </StorybookComponents.Stack>
  );
};
`;

export const _selectedItemsValue = `
() => {
  const [state, setState] = React.useState({
    selectedOptions: [0, 1, 2, 3, 4],
    inputValue: 'All items selected',
  });
  const getInputValue = selectedOptions => {
    if (selectedOptions.length === optionsList.length) {
      return 'All items selected';
    }
    return selectedOptions
      .map(id => optionsList.find(option => option.id === id).value)
      .join(', ');
  };
  const onSelect = optionId => {
    const selectedOptions = [...state.selectedOptions, optionId];
    setState({ selectedOptions, inputValue: getInputValue(selectedOptions) });
  };
  const onDeselect = optionId => {
    const selectedOptions = state.selectedOptions.filter(
      item => item !== optionId,
    );
    setState({ selectedOptions, inputValue: getInputValue(selectedOptions) });
  };
  const optionsList = [
    { value: 'Option 1', id: 0 },
    { value: 'Option 2', id: 1 },
    { value: 'Option 3', id: 2 },
    { value: 'Option 4', id: 3 },
    { value: 'Option 5', id: 4 },
  ];
  return (
    <MultiSelectCheckbox
      options={optionsList}
      selectedOptions={state.selectedOptions}
      onSelect={onSelect}
      onDeselect={onDeselect}
      value={state.inputValue}
    />
  );
};
`;

export const _formElement = `
() => {
  const serviceOptions = [
    { id: 0, value: 'Web design' },
    { id: 1, value: 'Branding' },
    { id: 2, value: 'SEO' },
    { id: 3, value: 'Web development' },
    { id: 4, value: 'Marketing' },
  ];
  const businessOptions = [
    { id: 0, value: 'Agency' },
    { id: 1, value: 'Freelancer' },
    { id: 2, value: 'Other' },
  ];
  const renderServiceMultiSelect = () => {
    const [selectedOptions, setSelectedOptions] = React.useState([1, 2]);
    return (
      <FormField label="What services do you offer?">
        <MultiSelectCheckbox
          options={serviceOptions}
          selectedOptions={selectedOptions}
          onSelect={option => setSelectedOptions([...selectedOptions, option])}
          onDeselect={option =>
            setSelectedOptions(selectedOptions.filter(item => item !== option))
          }
        />
      </FormField>
    );
  };
  const renderBusinessDropdown = () => {
    const [selected, setSelected] = React.useState(1);
    return (
      <FormField label="What best describes your business?" required>
        <Dropdown
          placeholder="Select"
          selectedId={selected}
          options={businessOptions}
          onSelect={option => setSelected(option.id)}
        />
      </FormField>
    );
  };
  const renderBusinessLogoUpload = (
    <FormField label="Business Logo" infoContent="Minimum size 300 x 100 px">
      <FileUpload>
        {({ openFileUploadDialog }) => (
          <Box width="200px" height="132px">
            <AddItem
              theme="image"
              tooltipContent="Upload Logo"
              onClick={openFileUploadDialog}
            >
              Add Item
            </AddItem>
          </Box>
        )}
      </FileUpload>
    </FormField>
  );
  const renderMainBusinessInfoFields = (
    <Layout cols={1}>
      <FormField label="Business Name" required>
        <Input placeholder="Type your business name" />
      </FormField>
      <FormField label="Business Site URL">
        <Input placeholder="https://www.mybusinesswebsite.com" />
      </FormField>
    </Layout>
  );
  return (
    <Card>
      <Card.Header
        title="Business Details"
        subtitle="These details will be used for emailing, invoicing, and more."
      />
      <Card.Divider />
      <Card.Content>
        <Layout>
          <Cell span={8}>{renderMainBusinessInfoFields}</Cell>
          <Cell span={4}>{renderBusinessLogoUpload}</Cell>
          <Cell>
            <Divider />
          </Cell>
          <Cell>
            <Heading appearance="H4">More Details</Heading>
          </Cell>
          <Cell>
            <Layout>
              <Cell span={6}>{renderBusinessDropdown()}</Cell>
              <Cell span={6}>{renderServiceMultiSelect()}</Cell>
            </Layout>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;

export const _commonUseCaseListBuilders = `
() => {
  const [filterOptions, setFilterOptions] = React.useState({
    filterBy: [],
    selectedOptions: [],
  });

  const authorOptions = [
    listItemSectionBuilder({
      type: 'title',
      title: 'In-house',
    }),
    { id: 0, value: 'Christian Mills' },
    { id: 1, value: 'Etta Wheeler' },
    { id: 2, value: 'Paul Simons' },
    listItemSectionBuilder({
      type: 'divider',
    }),

    listItemSectionBuilder({
      type: 'title',
      title: 'Contributors',
    }),
    { id: 3, value: 'Robert Ortega' },
    { id: 4, value: 'Mary James' },
  ];

  const [items, setItems] = React.useState([
    {
      id: 0,
      title: 'Getting a grasp on adventure',
      author: 'Christian Mills',
      contributor: 'Robert Ortega',
      date: 'Jan 26, 2021',
      checked: false,
    },
    {
      id: 1,
      title: '10 tips for relaxation',
      author: 'Etta Wheeler',
      contributor: 'Mary James',
      date: 'Jun 9, 2020',
      checked: false,
    },
    {
      id: 2,
      title: 'Performance standards for digital trust and safety',
      author: 'Paul Simons',
      contributor: 'Mary James',
      date: 'Sep 12, 2020',
      checked: false,
    },
    {
      id: 3,
      title: 'Getting a grasp on adventure',
      author: 'Christian Mills',
      contributor: 'Robert Ortega',
      date: 'Jan 26, 2021',
      checked: false,
    },
  ]);

  const onAuthorFilterSelect = id => {
    setFilterOptions({
      selectedOptions: [...filterOptions.selectedOptions, id],
      filterBy: [
        ...filterOptions.filterBy,
        authorOptions.find(item => item.id === id).value,
      ],
    });
  };

  const onAuthorFilterDeselect = id => {
    const selectedOptions = filterOptions.selectedOptions.filter(
      item => item !== id,
    );

    setFilterOptions({
      filterBy: selectedOptions.map(
        id => authorOptions.find(author => author.id === id).value,
      ),
      selectedOptions,
    });
  };

  const renderAddToCategory = () => {
    const [shown, setShown] = React.useState(false);
    const [categories, setCategories] = React.useState([
      {
        id: 0,
        title: 'Getting started',
        checked: false,
      },
      {
        id: 1,
        title: 'Your Community',
        checked: false,
      },
    ]);

    return (
      !isAllUnchecked() && (
        <Popover
          showArrow
          shown={shown}
          appendTo="viewport"
          placement="bottom"
          width="250px"
          onClickOutside={() => setShown(false)}
        >
          <Popover.Element>
            <TextButton
              size="small"
              prefixIcon={<Icons.Tag />}
              onClick={() => setShown(!shown)}
            >
              Add to Category
            </TextButton>
          </Popover.Element>
          <Popover.Content>
            <Box
              backgroundColor="D80"
              direction="vertical"
              gap="SP2"
              padding="SP3"
            >
              <Text light secondary size="small">
                Categories
              </Text>
              {categories.map(category => (
                <Checkbox
                  checked={category.checked}
                  onChange={() =>
                    setCategories(
                      categories.map(item =>
                        item.id === category.id
                          ? { ...category, checked: !category.checked }
                          : item,
                      ),
                    )
                  }
                >
                  {category.title}
                </Checkbox>
              ))}
              <Divider />
              <Box align="space-between" paddingTop="SP2">
                <Button
                  skin="inverted"
                  size="small"
                  onClick={() => setShown(false)}
                >
                  Cancel
                </Button>
                <Button size="small" onClick={() => setShown(false)}>
                  Apply
                </Button>
              </Box>
            </Box>
          </Popover.Content>
        </Popover>
      )
    );
  };

  const renderAuthorsSelect = () =>
    isAllUnchecked() && (
      <MultiSelectCheckbox
        value="All authors"
        size="small"
        dropdownWidth="240px"
        maxHeightPixels="400px"
        border="round"
        options={authorOptions}
        popoverProps={{
          placement: 'bottom-start',
        }}
        selectedOptions={filterOptions.selectedOptions}
        onSelect={onAuthorFilterSelect}
        onDeselect={onAuthorFilterDeselect}
      />
    );

  const renderTableItem = item => {
    return (
      <TableListItem
        checkbox
        checked={item.checked}
        onCheckboxChange={() =>
          setItems(
            items.map(currentItem =>
              currentItem.id === item.id
                ? { ...item, checked: !item.checked }
                : currentItem,
            ),
          )
        }
        showDivider
        options={[
          { value: <Image />, width: '90px' },
          {
            value: (
              <Box direction="vertical" gap="3px">
                <Text>{item.title}</Text>
                <Text size="tiny" secondary>
                  {item.date} • {item.author}
                </Text>
              </Box>
            ),
          },
          {
            width: '20%',
            value: (
              <TableActionCell
                primaryAction={{
                  text: 'Edit',
                  skin: 'standard',
                }}
              />
            ),
          },
        ]}
      />
    );
  };

  const renderTableItems = () => {
    if (filterOptions.filterBy.length === 0) {
      return items.map(item => renderTableItem(item));
    }

    const filtered = items.filter(item =>
      filterOptions.filterBy.find(
        filter => filter === item.author || filter === item.contributor,
      ),
    );
    return filtered.map(item => renderTableItem(item));
  };

  const isAllChecked = () =>
    items.filter(item => item.checked).length === items.length;
  const isAllUnchecked = () => items.filter(item => item.checked).length === 0;

  const toggleAll = checked =>
    setItems(items.map(item => ({ ...item, checked })));

  return (
    <Card>
      <Card.Header
        title={
          <Checkbox
            onChange={() => {
              isAllChecked() ? toggleAll(false) : toggleAll(true);
            }}
            checked={isAllChecked()}
          >
            Select all
          </Checkbox>
        }
        suffix={
          <>
            {renderAuthorsSelect()}
            {renderAddToCategory()}
          </>
        }
      />
      <Card.Divider />
      {renderTableItems()}
    </Card>
  );
};
`;