Dynamic search

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

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

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 { Flex, Box } from '@semcore/ui/base-components';
import Button, { ButtonLink } from '@semcore/ui/button';
import CloseM from '@semcore/ui/icon/Close/m';
import Search from '@semcore/ui/icon/Search/m';
import Input from '@semcore/ui/input';
import { Hint } from '@semcore/ui/tooltip';
import { Text } from '@semcore/ui/typography';
import React from 'react';

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}>
        <Input w={200} neighborLocation='right'>
          <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='left' />
      </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 { Flex, Box } from '@semcore/ui/base-components';
import { ButtonLink } from '@semcore/ui/button';
import CloseM from '@semcore/ui/icon/Close/m';
import Search from '@semcore/ui/icon/Search/m';
import Input from '@semcore/ui/input';
import Select from '@semcore/ui/select';
import { Text } from '@semcore/ui/typography';
import React from 'react';

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}>
        <Select aria-label='Search scope' options={options} value={scope} onChange={setScope} neighborLocation='right' />
        <Input w={200} neighborLocation='left'>
          <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>
      </Box>
    </Flex>
  );
};

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

export default Demo;