@dnb/eufemia/es/components/filter/FilterSearch.js

DNB Eufemia Design System UI Library

"use client";

var _ProgressIndicator;
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { clsx } from 'clsx';
import Input from "../input/Input.js";
import ProgressIndicator from "../progress-indicator/ProgressIndicator.js";
import { FilterContext } from "./FilterContext.js";
import { jsx as _jsx } from "react/jsx-runtime";
function FilterSearch({
  label,
  submitBehavior,
  onChange: onChangeProp,
  className,
  ...rest
}) {
  const context = useContext(FilterContext);
  if (!context) {
    throw new Error('Filter.Search must be used inside a Filter.Root.');
  }
  const isManual = submitBehavior === 'manual';
  const isTypingRef = useRef(false);
  const [localValue, setLocalValue] = useState(context.state.search);
  const {
    setSearch
  } = context;
  const handleChange = useCallback(({
    value
  }) => {
    isTypingRef.current = true;
    if (isManual) {
      setLocalValue(value);
      if (value === '') {
        setSearch(value);
      }
    } else {
      setSearch(value);
    }
    onChangeProp?.(value);
  }, [isManual, setSearch, onChangeProp]);
  const handleSubmit = useCallback(({
    value
  }) => {
    setSearch(value);
  }, [setSearch]);
  const handleClear = useCallback(() => {
    setLocalValue('');
    setSearch('');
  }, [setSearch]);
  useEffect(() => {
    if (!context.resultLoading) {
      isTypingRef.current = false;
    }
  }, [context.resultLoading]);
  useEffect(() => {
    if (!isManual) {
      setLocalValue(context.state.search);
    } else if (context.state.search === '') {
      setLocalValue('');
    }
  }, [isManual, context.state.search]);
  const showIndicator = context.resultLoading && isTypingRef.current;
  return _jsx("div", {
    className: clsx('dnb-filter__search', showIndicator && 'dnb-filter__search--show-indicator', className),
    children: _jsx(Input, {
      ...rest,
      type: "search",
      label: label,
      labelDirection: "vertical",
      value: isManual ? localValue : context.state.search,
      onChange: handleChange,
      ...(isManual ? {
        onSubmit: handleSubmit,
        onClear: handleClear
      } : undefined),
      showSubmitButton: isManual,
      icon: showIndicator ? _ProgressIndicator || (_ProgressIndicator = _jsx(ProgressIndicator, {
        type: "circular",
        size: "small"
      })) : undefined,
      stretch: true,
      size: "medium",
      showClearButton: true,
      autoCapitalize: "none",
      autoCorrect: "off",
      spellCheck: false
    })
  });
}
export default FilterSearch;
//# sourceMappingURL=FilterSearch.js.map