DocSearchButton.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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, { useMemo } from 'react';
  6. import { ControlKeyIcon } from './icons/ControlKeyIcon';
  7. import { SearchIcon } from './icons/SearchIcon';
  8. var ACTION_KEY_DEFAULT = 'Ctrl';
  9. var ACTION_KEY_APPLE = '⌘';
  10. function isAppleDevice() {
  11. return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
  12. }
  13. export var DocSearchButton = React.forwardRef(function (_ref, ref) {
  14. var _ref$translations = _ref.translations,
  15. translations = _ref$translations === void 0 ? {} : _ref$translations,
  16. props = _objectWithoutProperties(_ref, _excluded);
  17. var _translations$buttonT = translations.buttonText,
  18. buttonText = _translations$buttonT === void 0 ? 'Search' : _translations$buttonT,
  19. _translations$buttonA = translations.buttonAriaLabel,
  20. buttonAriaLabel = _translations$buttonA === void 0 ? 'Search' : _translations$buttonA;
  21. var key = useMemo(function () {
  22. if (typeof navigator !== 'undefined') {
  23. return isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT;
  24. }
  25. return null;
  26. }, []);
  27. return /*#__PURE__*/React.createElement("button", _extends({
  28. type: "button",
  29. className: "DocSearch DocSearch-Button",
  30. "aria-label": buttonAriaLabel
  31. }, props, {
  32. ref: ref
  33. }), /*#__PURE__*/React.createElement("span", {
  34. className: "DocSearch-Button-Container"
  35. }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement("span", {
  36. className: "DocSearch-Button-Placeholder"
  37. }, buttonText)), /*#__PURE__*/React.createElement("span", {
  38. className: "DocSearch-Button-Keys"
  39. }, key !== null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
  40. className: "DocSearch-Button-Key"
  41. }, key === ACTION_KEY_DEFAULT ? /*#__PURE__*/React.createElement(ControlKeyIcon, null) : key), /*#__PURE__*/React.createElement("span", {
  42. className: "DocSearch-Button-Key"
  43. }, "K"))));
  44. });