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

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <Search size="large" placeholder="Large"/>
  <Search size="medium" placeholder="Medium"/>
  <Search size="small" placeholder="Small"/>
</StorybookComponents.Stack>
`;

export const _border = `
<StorybookComponents.Stack flexDirection="column">
  <Search border="round" placeholder="Search..." />
  <Search border="standard" placeholder="Search..." />
  <Search border="bottomLine" placeholder="Search..." />
</StorybookComponents.Stack>;
`;

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <Search status="loading" placeholder="Search..." />
  <Search status="error" placeholder="Search..." />
  <Search status="warning" placeholder="Search..." />
</StorybookComponents.Stack>;
`;

export const _statusMessage = `
<Search
  status="loading"
  placeholder="Hover the mouse on the loader..."
  statusMessage="Message explaining the status"
  />;
`;

export const _readOnlyAndDisabled = `
<StorybookComponents.Stack flexDirection="column">
  <Search readOnly value="Read only"/>
  <Search disabled value="Disabled"/>
</StorybookComponents.Stack>
`;

export const _clearButton = `
() => {
  const [inputText, setInputText] = React.useState(
    'Click clear button to erase this value',
  );

  return (
    <Search
      value={inputText}
      clearButton
      onChange={e => setInputText(e.target.value)}
      onClear={() => setInputText('')}
    />
  );
};
`;

export const _options = `() => {
  const [text, setText] = React.useState('');
  const options = [
    { 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 (
    <Search
      value={text}
      onChange={e => setText(e.target.value)}
      onClear={() => setText('')}
      options={options}
      predicate={option => option.value.indexOf(text) !== -1}
    />
  );
};
`;

export const _optionsContainerDimensions = `
() => {
  const [text, setText] = React.useState('');
  const options = [
    { 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 (
    <StorybookComponents.Stack>
      <Search
        value={text}
        clearButton={true}
        onChange={e => setText(e.target.value)}
        onClear={() => setText('')}
        options={options}
        maxHeightPixels="160px"
        minWidthPixels="300px"
        dropdownWidth="auto"
        popoverProps={{
          placement: 'bottom-start',
        }}
      />
    </StorybookComponents.Stack>
  );
};

`;

export const _expandable = `
<StorybookComponents.Stack flexDirection="column">
  <Search expandable />
  <Search expandable expandWidth="400px" />
</StorybookComponents.Stack>;
`;

export const _debounce = `() => {
  const [textInstant, setTextInstant] = React.useState('');
  const [textDelayed, setTextDelayed] = React.useState('');

  return (
    <StorybookComponents.Stack flexDirection="column">
      <StorybookComponents.Stack flexDirection="column" gap="12px">
        <Search
          placeholder="Search for instant results..."
          value={textInstant}
          onChange={e => setTextInstant(e.target.value)}
          onClear={() => setTextInstant('')}
        />
        <StorybookComponents.Stack>
          Results for:
          <Text size="tiny" weight="bold" skin="primary">
            {textInstant}
          </Text>
        </StorybookComponents.Stack>
      </StorybookComponents.Stack>
      <StorybookComponents.Stack flexDirection="column" gap="12px">
        <Search
          placeholder="Search for delayed results..."
          debounceMs={250}
          value={textDelayed}
          onChange={e => setTextDelayed(e.target.value)}
          onClear={() => setTextDelayed('')}
        />
        <StorybookComponents.Stack>
          Results for:
          <Text size="tiny" weight="bold" skin="primary">
            {textDelayed}
          </Text>
        </StorybookComponents.Stack>
      </StorybookComponents.Stack>
    </StorybookComponents.Stack>
  );
};
`;

export const _filteringTheList = `
() => {
  const [filterBy, setFilterBy] = React.useState('');
  const [activeSearch, setActiveSearch] = React.useState('');

  const records = [
    {
      name: 'Red Slippers',
      sku: 25232564,
      status: 'In Stock',
      price: '$14.00',
    },
    { name: 'Velvet Hat', sku: 35246432, status: 'In Stock', price: '$29.00' },
    {
      name: 'Silver Jeans',
      sku: 4864310,
      status: 'Out Of Stock',
      price: '$69.00',
    },
    {
      name: 'Orange Socks',
      sku: 125156422,
      status: 'In Stock',
      price: '$7.00',
    },
  ];

  const columns = [
    { title: 'Name', render: row => row.name },
    { title: 'SKU', render: row => row.sku },
    { title: 'Status', render: row => row.status },
    { title: 'Status', render: row => row.price },
  ];

  const filterOptions = [
    { id: '', value: 'All Statuses' },
    { id: 'In Stock', value: 'In Stock' },
    { id: 'Out Of Stock', value: 'Out Of Stock' },
  ];

  const getFilteredData = () =>
    records.filter(({ name, sku, status, price }) => {
      if (filterBy && status !== filterBy) {
        return false;
      }

      const searchData = [name, sku, status, price].join(' ').toLowerCase();
      const searchQuery = activeSearch.trim().toLowerCase();
      if (searchQuery && searchData.indexOf(searchQuery) === -1) {
        return false;
      }

      return true;
    });

  const MainToolbar = () => {
    return (
      <TableToolbar>
        <TableToolbar.ItemGroup position="start">
          <TableToolbar.Item>
            <TableToolbar.Title>My Table</TableToolbar.Title>
          </TableToolbar.Item>
        </TableToolbar.ItemGroup>
        <TableToolbar.ItemGroup position="end">
          <TableToolbar.Item>
            <TableToolbar.Label>
              Filter by
              <Box width="175">
                <Dropdown
                  options={filterOptions}
                  selectedId={filterBy}
                  roundInput
                  onSelect={({ id }) => setFilterBy(id)}
                />
              </Box>
            </TableToolbar.Label>
          </TableToolbar.Item>
          <TableToolbar.Item>
            <Box width="200">
              <Search
                value={activeSearch}
                onChange={e => setActiveSearch(e.target.value)}
                onClear={() => setActiveSearch('')}
              />
            </Box>
          </TableToolbar.Item>
        </TableToolbar.ItemGroup>
      </TableToolbar>
    );
  };

  const ActionsToolbar = ({ selectedCount, getSelectedIds }) => (
    <TableToolbar>
      <TableToolbar.ItemGroup position="start">
        <TableToolbar.Item>
          <TableToolbar.SelectedCount>{\`\${selectedCount} Selected\`}</TableToolbar.SelectedCount>
        </TableToolbar.Item>
      </TableToolbar.ItemGroup>
      <TableToolbar.ItemGroup position="end">
        <TableToolbar.Item layout="button">
          <Button skin="light" prefixIcon={<Icons.Upload />}>
            Export
          </Button>
        </TableToolbar.Item>
        <TableToolbar.Item layout="button">
          <Button skin="light" prefixIcon={<Icons.Duplicate />}>
            Duplicate
          </Button>
        </TableToolbar.Item>
        <TableToolbar.Item layout="button">
          <Button skin="light" prefixIcon={<Icons.Edit />}>
            Edit
          </Button>
        </TableToolbar.Item>
        <TableToolbar.Divider />
        <TableToolbar.Item>
          <Search
            expandable
            value={activeSearch}
            onChange={e => setActiveSearch(e.target.value)}
          />
        </TableToolbar.Item>
      </TableToolbar.ItemGroup>
    </TableToolbar>
  );

  return (
    <Card>
      <Table showSelection data={getFilteredData()} columns={columns}>
        <Table.ToolbarContainer>
          {selectionContext =>
            selectionContext.selectedCount === 0
              ? MainToolbar()
              : ActionsToolbar({ ...selectionContext })
          }
        </Table.ToolbarContainer>
        <Box minHeight="282px">
          <Table.Content />
          {!records.length && (
            <Table.EmptyState
              subtitle={
                <Text>
                  {'There are no search results matching '}
                  <Text weight="normal">{\`"\${activeSearch}"\`}</Text>
                </Text>
              }
            />
          )}
        </Box>
      </Table>
    </Card>
  );
};
`;