@talend/react-faceted-search/lib-esm/components/AdvancedSearch/AdvancedSearch.component.js

Faceted search

/* eslint-disable jsx-a11y/no-autofocus */
import { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { ButtonIcon, Form, SizedIcon } from '@talend/design-system';
import tokens from '@talend/design-tokens';
import { USAGE_TRACKING_TAGS } from '../../constants';
import { useFacetedSearchContext } from '../context/facetedSearch.context';
import styles from './AdvancedSearch.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AdvancedSearchError = ({
  id,
  label
}) => /*#__PURE__*/_jsx("p", {
  "aria-live": "assertive",
  className: styles['adv-search-error'],
  id: `${id}-error`,
  role: "status",
  children: label
});
AdvancedSearchError.propTypes = {
  label: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired
};
export function AdvancedSearch({
  initialQuery = '',
  placeholder,
  onCancel,
  onChange,
  onKeyDown,
  onSubmit
}) {
  const [query, setQuery] = useState(initialQuery);
  const {
    id,
    inProgress,
    error,
    t
  } = useFacetedSearchContext();
  const formSubmit = event => {
    event.preventDefault();
    onSubmit(event, query);
  };
  const onKeyDownHandler = event => {
    if (onKeyDown) {
      onKeyDown(event, query);
    } else {
      switch (event.key) {
        case 'Enter':
          formSubmit(event);
          break;
        default:
          break;
      }
    }
  };
  const onChangeHandler = event => {
    if (onChange) {
      onChange(event, event.target.value);
    } else {
      setQuery(event.target.value);
    }
  };
  const onCancelHandler = () => {
    setQuery('');
    if (onCancel) {
      onCancel();
    }
  };
  const advSearchId = `${id}-adv-search`;
  return /*#__PURE__*/_jsxs("div", {
    id: advSearchId,
    className: styles['adv-search'],
    children: [/*#__PURE__*/_jsxs("form", {
      id: `${advSearchId}-form`,
      role: "search",
      onSubmit: formSubmit,
      children: [/*#__PURE__*/_jsx("div", {
        className: styles['adv-search-filter-icon'],
        children: /*#__PURE__*/_jsx(SizedIcon, {
          name: "filter",
          size: "M",
          color: tokens.coralColorNeutralIconWeak,
          className: styles['adv-search-filter-icon']
        })
      }), /*#__PURE__*/_jsx(Form.Text, {
        id: `${id}-form`,
        name: "advanced-search-faceted",
        type: "search",
        value: query,
        placeholder: placeholder || t('ADV_SEARCH_FACETED_PLACEHOLDER', 'Enter your query'),
        autoComplete: "off",
        className: classnames(styles['adv-search-input'], {
          'has-error': error
        }),
        "aria-label": placeholder || t('ADV_SEARCH_FACETED_ARIA', 'Advanced Faceted Search'),
        autoFocus: true,
        role: "searchbox",
        onKeyDown: onKeyDownHandler,
        onChange: onChangeHandler
      }), /*#__PURE__*/_jsxs("div", {
        className: styles['adv-search-buttons'],
        children: [/*#__PURE__*/_jsx(ButtonIcon, {
          name: "action-cancel-title",
          icon: "cross-filled",
          size: "S",
          isLoading: inProgress,
          onClick: onCancelHandler,
          "data-feature": USAGE_TRACKING_TAGS.ADVANCED_CLEAR,
          children: t('CANCEL_TOOLTIP', 'Cancel')
        }), /*#__PURE__*/_jsx(ButtonIcon, {
          name: "action-submit-title",
          icon: "check-filled",
          size: "S",
          isLoading: inProgress,
          type: "submit",
          "data-feature": USAGE_TRACKING_TAGS.ADVANCED_APPLY,
          children: t('SUBMIT_TOOLTIP', 'Submit')
        })]
      })]
    }), error && /*#__PURE__*/_jsx(AdvancedSearchError, {
      id: advSearchId,
      label: error
    })]
  });
}
AdvancedSearch.propTypes = {
  initialQuery: PropTypes.string,
  onCancel: PropTypes.func,
  onChange: PropTypes.func,
  onKeyDown: PropTypes.func,
  onSubmit: PropTypes.func.isRequired,
  placeholder: PropTypes.string
};
//# sourceMappingURL=AdvancedSearch.component.js.map