@equinor/eds-data-grid-react/dist/esm/components/DebouncedInput.js

A feature-rich data-grid written in React, implementing the Equinor Design System

import { useState, useEffect } from 'react';
import { InputWrapper, Input, Autocomplete, Chip } from '@equinor/eds-core-react';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

/* istanbul ignore file */
// File ignored, as relevant actions are covered via Filter.test.tsx
function DebouncedInput({
  value: initialValue,
  values,
  onChange,
  debounce = 500,
  label,
  ...props
}) {
  const [value, setValue] = useState(initialValue);
  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);
  useEffect(() => {
    const timeout = setTimeout(() => {
      onChange(value);
    }, debounce);
    return () => clearTimeout(timeout);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);
  return /*#__PURE__*/jsx(Fragment, {
    children: props.type === 'number' ? /*#__PURE__*/jsx(InputWrapper, {
      label: props.placeholder,
      children: /*#__PURE__*/jsx(Input, {
        type: 'number',
        placeholder: '0',
        value: value,
        onChange: e => setValue(e.target.valueAsNumber)
      })
    }) : /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx(Autocomplete, {
        options: values,
        autoWidth: true,
        multiple: true,
        optionComponent: opt => opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt,
        "data-testid": 'autocomplete'
        /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */,
        label: `Select ${label ?? ''}`,
        placeholder: props.placeholder ?? 'Search',
        selectedOptions: value,
        onOptionsChange: c => setValue(c.selectedItems),
        multiline: true
      }), /*#__PURE__*/jsx("div", {
        style: {
          display: 'flex',
          flexWrap: 'wrap',
          marginTop: '8px'
        },
        children: value.map(v => /*#__PURE__*/jsxs(Chip, {
          title: v,
          onKeyDownCapture: event => {
            if (['Backspace', 'Delete'].includes(event.key)) {
              onChange(value.filter(item => item !== v));
            }
          },
          style: {
            margin: '4px'
          },
          onDelete: () => onChange(value.filter(item => item !== v)),
          children: [v.slice(0, 20), v.length > 20 ? '...' : '']
        }, v))
      })]
    })
  });
}

export { DebouncedInput };