Dynamic search

Dynamic search searches as soon as at least one character is entered into the input.

import React from 'react';
import Input from '@semcore/input';
import { Hint } from '@semcore/tooltip';
import { ButtonLink } from '@semcore/button';
import CloseM from '@semcore/icon/Close/m';
import Search from '@semcore/icon/Search/m';
import { Text } from '@semcore/typography';
import { Flex } from '@semcore/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');

  const handleChange = React.useCallback((v: string) => {
    setValue(v);
  }, []);

  const handleClick = React.useCallback(() => {
    setValue('');
  }, []);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='dynamic-search-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Input w={200} mt={2}>
        <Input.Addon>
          <Search />
        </Input.Addon>
        <Input.Value
          value={value}
          onChange={handleChange}
          id='dynamic-search-filter-by-keyword'
          placeholder='Enter keyword here'
        />
        {value && (
          <Input.Addon>
            <ButtonLink use='secondary' addonLeft={CloseM} title='Clear' onClick={handleClick} />
          </Input.Addon>
        )}
      </Input>
    </Flex>
  );
};

export default Demo;

Search by button

Slow but accurate user assistant, searches by button or by pressing Enter.

import React from 'react';
import Input from '@semcore/input';
import { Hint } from '@semcore/tooltip';
import { ButtonLink } from '@semcore/button';
import CloseM from '@semcore/icon/Close/m';
import Search from '@semcore/icon/Search/m';
import Button from '@semcore/button';
import NeighborLocation from '@semcore/neighbor-location';
import { Text } from '@semcore/typography';
import { Flex, Box } from '@semcore/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');

  const handleChange = React.useCallback((v: string) => {
    setValue(v);
  }, []);

  const handleClick = React.useCallback(() => {
    setValue('');
  }, []);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='search-by-button-filter-by-keyword'>
        Filter by keyword
      </Text>
      <Box mt={2}>
        <NeighborLocation>
          <Input w={200}>
            <Input.Value
              value={value}
              onChange={handleChange}
              id='search-by-button-filter-by-keyword'
              placeholder='Enter keyword here'
            />
            {value && (
              <Input.Addon>
                <ButtonLink
                  use='secondary'
                  addonLeft={CloseM}
                  title='Clear'
                  onClick={handleClick}
                />
              </Input.Addon>
            )}
          </Input>
          <Hint tag={Button} addonLeft={Search} title='Search' />
        </NeighborLocation>
      </Box>
    </Flex>
  );
};

export default Demo;

Search with select

An extremely rare dynamic search, we use it when fine-tuning of this filter is needed, since there is a lot of different kinds of data.

import React from 'react';
import Input from '@semcore/input';
import CloseM from '@semcore/icon/Close/m';
import Search from '@semcore/icon/Search/m';
import { Hint } from '@semcore/tooltip';
import { ButtonLink } from '@semcore/button';
import NeighborLocation from '@semcore/neighbor-location';
import Select from '@semcore/select';
import { Text } from '@semcore/typography';
import { Flex, Box } from '@semcore/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('');
  const [scope, setScope] = React.useState('Everywhere');

  const handleChange = React.useCallback((v: string) => {
    setValue(v);
  }, []);

  const handleClick = React.useCallback(() => {
    setValue('');
  }, []);

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='search-with-select-backlinks'>
        Filter backlinks
      </Text>
      <Box mt={2}>
        <NeighborLocation>
          <Select aria-label='Search scope' options={options} value={scope} onChange={setScope} />
          <Input w={200}>
            <Input.Addon>
              <Search />
            </Input.Addon>
            <Input.Value
              value={value}
              onChange={handleChange}
              id='search-with-select-backlinks'
              placeholder='Search'
            />
            {value && (
              <Input.Addon>
                <ButtonLink
                  use='secondary'
                  addonLeft={CloseM}
                  title='Clear'
                  onClick={handleClick}
                />
              </Input.Addon>
            )}
          </Input>
        </NeighborLocation>
      </Box>
    </Flex>
  );
};

const options = ['Everywhere', 'URL', 'Target URL'].map((option) => ({
  value: option,
  children: option,
}));

export default Demo;