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

wix-style-react

export const _size = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <Dropdown size="large" placeholder="Large" options={options} />
      <Dropdown size="medium" placeholder="Medium" options={options} />
      <Dropdown size="small" placeholder="Small" options={options} />
    </StorybookComponents.Stack>
  );
};
`;

export const _border = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <Dropdown border="standard" placeholder="Standard" options={options} />
      <Dropdown border="round" placeholder="Round" options={options} />
      <Dropdown
        border="bottomLine"
        placeholder="Bottom Line"
        options={options}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _status = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <Dropdown status="error" placeholder="Error" options={options} />
      <Dropdown status="warning" placeholder="Warning" options={options} />
      <Dropdown status="loading" placeholder="Loading" options={options} />
    </StorybookComponents.Stack>
  );
};
`;

export const _statusMessage = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];
  return (
    <Dropdown
      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 = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];
  return <Dropdown disabled placeholder="Disabled" options={options} />;
};
`;

export const _affix = `
() => {
  const discountSuffixOptions = [
    { id: 0, value: '5' },
    { id: 1, value: '10' },
    { id: 2, value: '15' },
  ];
  const discountAffixOptions = [
    { id: 0, value: '10' },
    { id: 1, value: '20' },
    { id: 2, value: '30' },
  ];
  const languageOptions = [
    { id: 0, value: 'English' },
    { id: 1, value: 'French' },
    { id: 2, value: 'Spanish' },
  ];
  const employeeOptions = [
    { id: 0, value: 'Jason Sudeikis' },
    { id: 1, value: 'John Krasinski' },
    { id: 2, value: 'Emma Stone' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <Dropdown
        placeholder="Select discount size"
        suffix={<Input.Affix>%</Input.Affix>}
        options={discountSuffixOptions}
      />
      <Dropdown
        placeholder="Select discount size"
        prefix={<Input.Affix>$</Input.Affix>}
        options={discountAffixOptions}
      />
      <Dropdown
        placeholder="Select language"
        prefix={
          <Input.IconAffix>
            <Icons.Languages />
          </Input.IconAffix>
        }
        options={languageOptions}
      />
      <Dropdown
        placeholder="Select employee"
        prefix={
          <Input.Affix>
            <Avatar size="size18" />
          </Input.Affix>
        }
        options={employeeOptions}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _clearButton = `
() => {
  const [selectedOption, setSelectedOption] = React.useState(0);
  const options = [
    { id: 0, value: 'Click clear button to remove selection' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ];

  return (
    <Dropdown
      placeholder="Select"
      clearButton
      onClear={() => setSelectedOption(null)}
      onSelect={option => setSelectedOption(option.id)}
      selectedId={selectedOption}
      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' },
    { id: 6, value: 'Option 6' },
    { id: 7, value: 'Option 7' },
    { id: 8, value: 'Option 8' },
    { id: 9, value: 'Option 9' },
  ];
  return (
    <Dropdown
      placeholder="Select"
      fixedHeader={<ListItemAction title="Fixed Header" />}
      fixedFooter={<ListItemAction title="Fixed Footer" />}
      options={options}
    />
  );
};
`;

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

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

  const listItemSelectOptions = [
    listItemSelectBuilder({
      id: 0,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
    listItemSelectBuilder({
      id: 1,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
    listItemSelectBuilder({
      id: 2,
      prefix: <Avatar size="size30" />,
      title: 'Title',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
    }),
  ];
  return (
    <StorybookComponents.Stack flexDirection="column">
      <Dropdown
        placeholder="List Item Section"
        options={listItemSectionOptions}
      />
      <Dropdown
        placeholder="List Item Action"
        options={listItemActionOptions}
      />
      <Dropdown
        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>
      <Dropdown
        placeholder="Look at proportions"
        maxHeightPixels="200px"
        dropdownWidth="auto"
        minWidthPixels="400px"
        options={options}
        popoverProps={{
          placement: 'bottom-start',
        }}
      />
    </StorybookComponents.Stack>
  );
};
`;

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

export const _nativeSupport = `
() => {
  const options = [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4' },
  ];
  return <Dropdown options={options} placeholder="Select as native" native />;
};
`;

export const _lazyLoading = `
() => {
  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 (
    <Dropdown
      placeholder="Select"
      options={data}
      infiniteScroll
      hasMore={true}
      loadMore={fetchMoreData}
    />
  );
};

`;

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' },
  ];
  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,
    }),
    listItemSelectBuilder({
      id: 0,
      title: 'This is a long value that make dropdown layout grow',
      ellipsis: true,
    }),
    listItemSelectBuilder({
      id: 0,
      title: 'This is a long value that make dropdown layout grow',
      ellipsis: true,
    }),
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <StorybookComponents.Stack>
        <FormField label="Input value - ellipsis">
          <Dropdown
            options={options}
            placeholder="This field is showing ellipsis at the end of this line"
            textOverflow="ellipsis"
          />
        </FormField>
        <FormField label="Input value - clip">
          <Dropdown
            options={options}
            placeholder="This field is clipping content at the end of this line"
            textOverflow="clip"
          />
        </FormField>
      </StorybookComponents.Stack>
      <StorybookComponents.Stack>
        <FormField label="Options - wrapping">
          <Dropdown
            options={longOptions}
            placeholder="Select option that wraps"
          />
        </FormField>
        <FormField label="Options - with ellipsis">
          <Dropdown
            options={longOptionsWithEllipsis}
            placeholder="Select option that clipps"
          />
        </FormField>
      </StorybookComponents.Stack>
    </StorybookComponents.Stack>
  );
};
`;

export const _membersList = `
() => {
  const options = [
    listItemSelectBuilder({
      id: 0,
      prefix: (
        <Box>
          <Icons.Home />
        </Box>
      ),
      title: 'Home Address',
      label: 'Home Address',
    }),
    listItemSelectBuilder({
      id: 1,
      title: 'Work Address',
      label: 'Work Address',
      prefix: (
        <Box>
          <Icons.Toolbox />
        </Box>
      ),
    }),
    listItemSelectBuilder({
      id: 2,
      title: 'Mailing Address',
      label: 'Mailing Address',
      prefix: (
        <Box>
          <Icons.Email />
        </Box>
      ),
    }),
    listItemSelectBuilder({
      id: 3,
      title: 'Shipping Address',
      label: 'Shipping Address',
      prefix: (
        <Box>
          <Icons.Archive />
        </Box>
      ),
    }),
    listItemSelectBuilder({
      id: 4,
      title: 'Other',
      label: 'Other',
      prefix: (
        <Box>
          <Icons.Category />
        </Box>
      ),
    }),
  ];

  return (
    <Dropdown
      placeholder="Choose your address type"
      valueParser={option => option.label}
      options={options}
    />
  );
};
`;

export const _grouping = `
<Layout>
  <Cell span={12}>
    <Dropdown
      placeholder="Select product"
      options={[
        listItemSectionBuilder({
          title: 'Most Popular',
        }),
        { id: 1, value: 'Wix Stores' },
        { id: 2, value: 'Wix Bookings' },
        { id: 3, value: 'Wix Blog' },
        listItemSectionBuilder({
          title: 'Other',
        }),
        { id: 4, value: 'Wix Events' },
        { id: 5, value: 'Wix Forum' },
        { id: 6, value: 'Wix Restaurants' },
      ]}
    />
  </Cell>
  <Cell span={12}>
    <Dropdown
      placeholder="Select assignee"
      options={[
        listItemSectionBuilder({
          title: 'Admins',
          type: 'subheader',
          suffix: 'Edit',
        }),
        { id: 0, value: 'John Wilson' },
        { id: 1, value: 'Silvester Grant' },
        listItemSectionBuilder({
          title: 'Members',
          type: 'subheader',
          suffix: 'Edit',
        }),
        { id: 2, value: 'Jason Angel' },
        { id: 3, value: 'Kalvin Mcleod' },
        { id: 4, value: 'Ro Giberton' },
      ]}
    />
  </Cell>
</Layout>;
`;