SearchBox.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. var _excluded = ["translations"];
  2. function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  3. function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
  4. function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  5. import React from 'react';
  6. import { MAX_QUERY_SIZE } from './constants';
  7. import { LoadingIcon } from './icons/LoadingIcon';
  8. import { ResetIcon } from './icons/ResetIcon';
  9. import { SearchIcon } from './icons/SearchIcon';
  10. export function SearchBox(_ref) {
  11. var _ref$translations = _ref.translations,
  12. translations = _ref$translations === void 0 ? {} : _ref$translations,
  13. props = _objectWithoutProperties(_ref, _excluded);
  14. var _translations$resetBu = translations.resetButtonTitle,
  15. resetButtonTitle = _translations$resetBu === void 0 ? 'Clear the query' : _translations$resetBu,
  16. _translations$resetBu2 = translations.resetButtonAriaLabel,
  17. resetButtonAriaLabel = _translations$resetBu2 === void 0 ? 'Clear the query' : _translations$resetBu2,
  18. _translations$cancelB = translations.cancelButtonText,
  19. cancelButtonText = _translations$cancelB === void 0 ? 'Cancel' : _translations$cancelB,
  20. _translations$cancelB2 = translations.cancelButtonAriaLabel,
  21. cancelButtonAriaLabel = _translations$cancelB2 === void 0 ? 'Cancel' : _translations$cancelB2;
  22. var _props$getFormProps = props.getFormProps({
  23. inputElement: props.inputRef.current
  24. }),
  25. onReset = _props$getFormProps.onReset;
  26. React.useEffect(function () {
  27. if (props.autoFocus && props.inputRef.current) {
  28. props.inputRef.current.focus();
  29. }
  30. }, [props.autoFocus, props.inputRef]);
  31. React.useEffect(function () {
  32. if (props.isFromSelection && props.inputRef.current) {
  33. props.inputRef.current.select();
  34. }
  35. }, [props.isFromSelection, props.inputRef]);
  36. return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
  37. className: "DocSearch-Form",
  38. onSubmit: function onSubmit(event) {
  39. event.preventDefault();
  40. },
  41. onReset: onReset
  42. }, /*#__PURE__*/React.createElement("label", _extends({
  43. className: "DocSearch-MagnifierLabel"
  44. }, props.getLabelProps()), /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement("div", {
  45. className: "DocSearch-LoadingIndicator"
  46. }, /*#__PURE__*/React.createElement(LoadingIcon, null)), /*#__PURE__*/React.createElement("input", _extends({
  47. className: "DocSearch-Input",
  48. ref: props.inputRef
  49. }, props.getInputProps({
  50. inputElement: props.inputRef.current,
  51. autoFocus: props.autoFocus,
  52. maxLength: MAX_QUERY_SIZE
  53. }))), /*#__PURE__*/React.createElement("button", {
  54. type: "reset",
  55. title: resetButtonTitle,
  56. className: "DocSearch-Reset",
  57. "aria-label": resetButtonAriaLabel,
  58. hidden: !props.state.query
  59. }, /*#__PURE__*/React.createElement(ResetIcon, null))), /*#__PURE__*/React.createElement("button", {
  60. className: "DocSearch-Cancel",
  61. type: "reset",
  62. "aria-label": cancelButtonAriaLabel,
  63. onClick: props.onClose
  64. }, cancelButtonText));
  65. }