@spaced-out/ui-design-system/lib/components/SearchInput/SearchInput.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';
import {CircularLoader} from '../CircularLoader';
import type {InputProps} from '../Input';
import {Input} from '../Input';

import css from './SearchInput.module.css';


type ClassNames = $ReadOnly<{
  wrapper?: string,
  box?: string,
  iconLeft?: string,
}>;

export type SearchInputProps = {
  ...InputProps,
  classNames?: ClassNames,
  onClear?: () => void,
  isLoading?: boolean,
  ...
};

export const SearchInput: React$AbstractComponent<
  SearchInputProps,
  HTMLInputElement,
> = React.forwardRef<SearchInputProps, HTMLInputElement>(
  (
    {
      value,
      disabled,
      locked,
      placeholder = 'Search...',
      classNames,
      onClear,
      isLoading,
      size,
      iconLeftName = 'magnifying-glass',
      ...searchInputProps
    }: SearchInputProps,
    ref,
  ): React.Node => {
    const handleClearClick = () => {
      if (value && !(disabled || locked)) {
        onClear?.();
      }
    };

    return (
      <div className={classify(css.searchInputWrapper, classNames?.wrapper)}>
        <Input
          {...searchInputProps}
          type="text"
          ref={ref}
          classNames={{
            iconRight: value && !(disabled || locked) ? css.clickable : '',
            iconLeft: value && !disabled ? css.primaryText : '',
            box: classNames?.box,
          }}
          placeholder={placeholder}
          value={value}
          disabled={disabled}
          locked={locked}
          iconLeftName={iconLeftName}
          size={size}
          iconRightName={value && !(disabled || locked) ? 'xmark' : 'fw'}
          onIconRightClick={handleClearClick}
        />
        {isLoading && (
          <div
            className={classify(css.loaderContainer, {
              [css.small]: size === 'small',
            })}
          >
            <CircularLoader
              colorToken="colorFillPrimary"
              className={css.loader}
              size="small"
            />
          </div>
        )}
      </div>
    );
  },
);