wix-style-react/src/AutoComplete/docs/AutoComplete.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">
      <AutoComplete placeholder="Large" size="large" options={options} />
      <AutoComplete placeholder="Medium" size="medium" options={options} />
      <AutoComplete placeholder="Small" size="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">
      <AutoComplete
        placeholder="Standard"
        border="standard"
        options={options}
      />
      <AutoComplete placeholder="Round" border="round" options={options} />
      <AutoComplete
        placeholder="Bottom line"
        border="bottomLine"
        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">
      <AutoComplete placeholder="Error" status="error" options={options} />
      <AutoComplete placeholder="Warning" status="warning" options={options} />
      <AutoComplete placeholder="Loading" status="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 (
    <AutoComplete
      placeholder="Hover the mouse on status icon"
      status="error"
      statusMessage="Please fill the required field"
      tooltipPlacement="top-end"
      options={options}
    />
  );
};
`;

export const _disabled = `
<AutoComplete placeholder="Disabled" disabled />;
`;

export const _affix = `
() => {
  const languageOptions = [
    { id: 0, value: 'English' },
    { id: 1, value: 'French' },
    { id: 2, value: 'Spanish' },
  ];

  const nameOptions = [
    { id: 0, value: 'Jason Sudeikis' },
    { id: 1, value: 'John Krasinski' },
    { id: 2, value: 'Emma Stone' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <AutoComplete
        placeholder="Select language"
        prefix={
          <Input.IconAffix>
            <Icons.Languages />
          </Input.IconAffix>
        }
        options={languageOptions}
      />
      <AutoComplete
        placeholder="Assign a person"
        defaultValue="Emma Stone"
        prefix={
          <Input.Affix>
            <Avatar size="size18"></Avatar>
          </Input.Affix>
        }
        suffix={<Input.Affix>12 April 2015</Input.Affix>}
        options={nameOptions}
      />
    </StorybookComponents.Stack>
  );
};
`;

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

  const [value, setValue] = React.useState(options[0].value);

  return (
    <AutoComplete
      placeholder="Select"
      clearButton
      options={options}
      value={value}
      onClear={() => setValue('')}
    />
  );
};
`;

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

  return (
    <AutoComplete
      placeholder="Click to see fixed areas"
      fixedHeader={<ListItemAction title="Fixed Header" />}
      fixedFooter={<ListItemAction title="Fixed Footer" />}
      options={options}
    />
  );
};
`;

export const _listItemBuilders = `
() => {
  const sectionOptions = [
    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 actionOptions = [
    listItemActionBuilder({
      id: 0,
      title: 'Action',
    }),
    { id: 1, value: 'Option 1' },
    { id: 2, value: 'Option 2' },
    { id: 3, value: 'Option 3' },
  ];

  const selectOptions = [
    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">
      <AutoComplete placeholder="List Item Section" options={sectionOptions} />
      <AutoComplete placeholder="List Item Action" options={actionOptions} />
      <AutoComplete placeholder="List Item Select" options={selectOptions} />
    </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 (
    <AutoComplete
      placeholder="Look at proportions"
      maxHeightPixels="200px"
      dropdownWidth="auto"
      minWidthPixels="400px"
      options={options}
      popoverProps={{
        placement: 'bottom-start',
      }}
    />
  );
};
`;

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

  return (
    <AutoComplete
      placeholder="Select an option"
      markedOption={1}
      options={options}
    />
  );
};
`;

export const _infiniteScroll = `
() => {
  const [options, setOptions] = React.useState([]);

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

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

  return (
    <AutoComplete
      infiniteScroll
      hasMore
      loadMore={fetchMoreData}
      options={options}
      placeholder={'Start typing'}
    />
  );
};
`;

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

  optionsLongValue = [
    {
      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',
    },
  ];

  optionsListBuilder = [
    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">
          <AutoComplete
            options={options}
            placeholder="This field is showing ellipsis at the end of this line"
            textOverflow="ellipsis"
          />
        </FormField>
        <FormField label="Input value - clip">
          <AutoComplete
            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">
          <AutoComplete
            options={optionsLongValue}
            placeholder="Select option that wraps"
          />
        </FormField>
        <FormField label="Options - with ellipsis">
          <AutoComplete
            options={optionsListBuilder}
            placeholder="Select option that clips"
          />
        </FormField>
      </StorybookComponents.Stack>
    </StorybookComponents.Stack>
  );
};
`;

export const _customLists = `
() => {
  const [value, setValue] = React.useState();

  const options = [
    listItemActionBuilder({
      title: 'Add New Staff Member',
      prefixIcon: <Icons.Add />,
    }),

    listItemSectionBuilder({
      title: 'Admins',
    }),
    listItemSelectBuilder({
      id: 0,
      prefix: <Avatar size="size30" color="A1" name={'Carmel Lloyd'} />,
      title: 'Carmel Lloyd',
      subtitle: 'carmel@mail.com',
      label: 'Carmel Lloyd',
    }),
    listItemSelectBuilder({
      id: 1,
      prefix: <Avatar size="size30" color="A2" name={'Gracie-May Marsden'} />,
      title: 'Gracie-May Marsden',
      subtitle: 'carmel@mail.com',
      label: 'Gracie-May Marsden',
    }),
    listItemSelectBuilder({
      id: 2,
      prefix: <Avatar size="size30" color="A3" name={'Keisha Decker'} />,
      title: 'Keisha Decker',
      subtitle: 'carmel@mail.com',
      label: 'Keisha Decker',
    }),
    listItemSelectBuilder({
      id: 3,
      prefix: <Avatar size="size30" color="A4" name={'Ruairidh Fitzgerald'} />,
      title: 'Ruairidh Fitzgerald',
      subtitle: 'carmel@mail.com',
      label: 'Ruairidh Fitzgerald',
    }),
    listItemSectionBuilder({
      title: 'Members',
    }),
    listItemSelectBuilder({
      id: 4,
      prefix: <Avatar size="size30" color="A5" name={'Sheldon Chavez'} />,
      title: 'Sheldon Chavez',
      subtitle: 'carmel@mail.com',
      label: 'Sheldon Chavez',
    }),
    listItemSelectBuilder({
      id: 5,
      prefix: <Avatar size="size30" color="A6" name={'James Lucas'} />,
      title: 'James Lucas',
      subtitle: 'carmel@mail.com',
      label: 'James Lucas',
    }),
    listItemSelectBuilder({
      id: 6,
      prefix: <Avatar size="size30" color="A1" name={'Greta Thompson'} />,
      title: 'Greta Thompson',
      subtitle: 'carmel@mail.com',
      label: 'Greta Thompson',
    }),
    listItemSelectBuilder({
      id: 7,
      prefix: <Avatar size="size30" color="A2" name={'Margareth Johnson'} />,
      title: 'Margareth Johnson',
      subtitle: 'carmel@mail.com',
      label: 'Margareth Johnson',
    }),
    listItemSelectBuilder({
      id: 8,
      prefix: <Avatar size="size30" color="A3" name={'Steven Alvarez'} />,
      title: 'Steven Alvarez',
      subtitle: 'carmel@mail.com',
      label: 'Steven Alvarez',
    }),
  ];

  return (
    <AutoComplete
      placeholder="Select staff member"
      maxHeightPixels="300px"
      options={options}
      value={value}
      onSelect={option => setValue(option.label)}
      onChange={event => setValue(event.target.value)}
    />
  );
};
`;