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

Faceted search

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AdvancedSearch = AdvancedSearch;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _designTokens = _interopRequireDefault(require("@talend/design-tokens"));
var _constants = require("../../constants");
var _facetedSearch = require("../context/facetedSearch.context");
var _AdvancedSearchModule = _interopRequireDefault(require("./AdvancedSearch.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable jsx-a11y/no-autofocus */

const AdvancedSearchError = ({
  id,
  label
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
  "aria-live": "assertive",
  className: _AdvancedSearchModule.default['adv-search-error'],
  id: `${id}-error`,
  role: "status",
  children: label
});
AdvancedSearchError.propTypes = {
  label: _propTypes.default.string.isRequired,
  id: _propTypes.default.string.isRequired
};
function AdvancedSearch({
  initialQuery = '',
  placeholder,
  onCancel,
  onChange,
  onKeyDown,
  onSubmit
}) {
  const [query, setQuery] = (0, _react.useState)(initialQuery);
  const {
    id,
    inProgress,
    error,
    t
  } = (0, _facetedSearch.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__*/(0, _jsxRuntime.jsxs)("div", {
    id: advSearchId,
    className: _AdvancedSearchModule.default['adv-search'],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
      id: `${advSearchId}-form`,
      role: "search",
      onSubmit: formSubmit,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _AdvancedSearchModule.default['adv-search-filter-icon'],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SizedIcon, {
          name: "filter",
          size: "M",
          color: _designTokens.default.coralColorNeutralIconWeak,
          className: _AdvancedSearchModule.default['adv-search-filter-icon']
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.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: (0, _classnames.default)(_AdvancedSearchModule.default['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__*/(0, _jsxRuntime.jsxs)("div", {
        className: _AdvancedSearchModule.default['adv-search-buttons'],
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
          name: "action-cancel-title",
          icon: "cross-filled",
          size: "S",
          isLoading: inProgress,
          onClick: onCancelHandler,
          "data-feature": _constants.USAGE_TRACKING_TAGS.ADVANCED_CLEAR,
          children: t('CANCEL_TOOLTIP', 'Cancel')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
          name: "action-submit-title",
          icon: "check-filled",
          size: "S",
          isLoading: inProgress,
          type: "submit",
          "data-feature": _constants.USAGE_TRACKING_TAGS.ADVANCED_APPLY,
          children: t('SUBMIT_TOOLTIP', 'Submit')
        })]
      })]
    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedSearchError, {
      id: advSearchId,
      label: error
    })]
  });
}
AdvancedSearch.propTypes = {
  initialQuery: _propTypes.default.string,
  onCancel: _propTypes.default.func,
  onChange: _propTypes.default.func,
  onKeyDown: _propTypes.default.func,
  onSubmit: _propTypes.default.func.isRequired,
  placeholder: _propTypes.default.string
};
//# sourceMappingURL=AdvancedSearch.component.js.map