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

wix-style-react

export const _structure = `
() => {
  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' },
  ];
  return (
    <DropdownBase options={options}>
      {({ toggle }) => (
        <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
          Open Dropdown Layout
        </TextButton>
      )}
    </DropdownBase>
  );
};
`;

export const _triggerAction = `
() => {
  const [openedDropdown, setOpenedDropdown] = React.useState(false);
  const openDropdown = () => setOpenedDropdown(true);
  const closeDropdown = () => setOpenedDropdown(false);

  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' },
  ];

  return (
    <StorybookComponents.Stack>
      <DropdownBase options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Click to open dropdown
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase
        options={options}
        onMouseEnter={openDropdown}
        onMouseLeave={closeDropdown}
        onSelect={closeDropdown}
        open={openedDropdown}
      >
        {() => (
          <TextButton suffixIcon={<Icons.ChevronDown />}>
            Hover to open dropdown
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
`;

export const _placement = `
<DropdownBase
  options={[
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ]}
  placement="right-start"
  moveBy={{ x: 6, y: 0 }}
>
  {({ toggle }) => (
    <TextButton onClick={toggle} suffixIcon={<Icons.ChevronRight />}>
      Right-Start
    </TextButton>
  )}
</DropdownBase>;
`;

export const _dimensions = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4 is quite wider than other options' },
    { id: 4, value: 'Option 5' },
  ];

  return (
    <StorybookComponents.Stack>
      <DropdownBase
        maxHeight="200px"
        minWidth="300px"
        maxWidth="800px"
        options={options}
      >
        {({ toggle, selectedOption = {} }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            {selectedOption.value || 'Controlled width'}
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase dynamicWidth options={options}>
        {({ toggle, selectedOption = {} }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            {selectedOption.value || 'Dynamic width'}
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
`;

export const _arrow = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];
  return (
    <StorybookComponents.Stack>
      <DropdownBase options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Popover without arrow
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase showArrow options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Popover with arrow
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
`;

export const _listItemBuilders = `
<DropdownBase
  options={[
    listItemSectionBuilder({
      type: 'title',
      title: 'Group Title',
    }),
    listItemSelectBuilder({
      id: 0,
      title: 'Title 1',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
      label: 'Title 1',
    }),
    listItemSelectBuilder({
      id: 1,
      title: 'Title 2',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
      label: 'Title 2',
    }),
    listItemSectionBuilder({
      type: 'divider',
    }),
    listItemActionBuilder({
      title: 'Action',
    }),
  ]}
>
  {({ toggle }) => (
    <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
      Options using list item builders
    </TextButton>
  )}
</DropdownBase>;
`;

export const _focusOnOption = `
<StorybookComponents.Stack>
  <DropdownBase
    focusOnOption={1}
    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' },
    ]}
  >
    {({ toggle, selectedOption = {} }) => (
      <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
        {selectedOption.value || 'Highlight on option 2'}
      </TextButton>
    )}
  </DropdownBase>
  <DropdownBase
    selectedId={11}
    focusOnSelectedOption
    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' },
      { id: 8, value: 'Option 9' },
      { id: 9, value: 'Option 10' },
      { id: 10, value: 'Option 11' },
      { id: 11, value: 'Scrolled list to selected option 12' },
      { id: 12, value: 'Option 13' },
      { id: 13, value: 'Option 14' },
      { id: 14, value: 'Option 15' },
    ]}
  >
    {({ toggle, selectedOption = {} }) => (
      <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
        {selectedOption.value || 'Click to see highlight on Option 2'}
      </TextButton>
    )}
  </DropdownBase>
</StorybookComponents.Stack>;
`;

export const _infiniteScroll = `
() => {
  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 (
    <DropdownBase
      options={data}
      infiniteScroll
      hasMore={true}
      loadMore={fetchMoreData}
    >
      {({ toggle }) => (
        <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
          Open infinite dropdown layout
        </TextButton>
      )}
    </DropdownBase>
  );
};
`;

export const _animate = `
() => {
  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' },
  ];
  return (
    <StorybookComponents.Stack>
      <DropdownBase options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Without animation
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase animate options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            With animation
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
`;

export const _contentFilters = `
<Card>
  <Card.Header
    title="Invoice Stats"
    suffix={
      <DropdownBase
        selectedId={1}
        focusOnSelectedOption
        options={[
          { id: 0, value: 'Last 30 Days' },
          { id: 1, value: 'This Month' },
          { id: 2, value: 'This Quarter' },
          { id: 3, value: 'Last Quarter' },
          { id: 4, value: 'This Year' },
          { id: 5, value: 'Last Year' },
        ]}
      >
        {({ toggle, selectedOption = {} }) => (
          <TextButton
            onClick={toggle}
            skin="dark"
            suffixIcon={<Icons.ChevronDown />}
          >
            {selectedOption.value}
          </TextButton>
        )}
      </DropdownBase>
    }
  />
  <Card.Divider />
  <Card.Content>
    <StorybookComponents.Placeholder height="200px">
      Various charts
    </StorybookComponents.Placeholder>
  </Card.Content>
</Card>;
`;

export const _assignTaskOrItem = `
() => {
  const ListItem = ({ title }) => (
    <TableListItem
      verticalPadding="small"
      showDivider
      options={[
        { value: title },
        {
          value: (
            <DropdownBase
              options={[
                listItemSelectBuilder({
                  id: 0,
                  prefix: <Avatar size="size30" name="Joe Harold" />,
                  title: 'Joe Harold',
                  subtitle: 'joe@hotmail.com',
                  label: 'Joe Harold',
                }),
                listItemSelectBuilder({
                  id: 1,
                  prefix: <Avatar size="size30" name="Kim Lee" />,
                  title: 'Kim Lee',
                  subtitle: 'kim@gmail.com',
                  label: 'Kim Lee',
                }),
              ]}
            >
              {({ toggle, selectedOption = {} }) => (
                <Button
                  size="small"
                  skin="inverted"
                  onClick={toggle}
                  prefixIcon={<Icons.UserSmall />}
                >
                  {selectedOption.label || 'Assign a person'}
                </Button>
              )}
            </DropdownBase>
          ),
          align: 'right',
        },
      ]}
    />
  );
  return (
    <Layout cols={1} gap={0}>
      <ListItem title="Task 1" />
      <ListItem title="Task 2" />
      <ListItem title="Task 3" />
    </Layout>
  );
};
`;