@redocly/theme/lib/components/Search/SearchInput.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchInput = SearchInput;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
const Spinner_1 = require("../../icons/Spinner/Spinner");
const Button_1 = require("../../components/Button/Button");
const hooks_1 = require("../../core/hooks");
const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, inputRef, onReturn, onSubmit, className, }) {
    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
    const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
    const otelTelemetry = useOtelTelemetry();
    const { onKeyDown } = (0, hooks_1.useInputKeyCommands)({
        onEnter: (event) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event),
        onClear: () => addSearchHistoryItem(value),
    });
    const stopPropagation = (event) => event.stopPropagation();
    const handleOnChange = (event) => {
        onChange(event.target.value);
    };
    const handleOnReset = () => {
        onChange('');
        addSearchHistoryItem(value);
        otelTelemetry.send({ type: 'search_input_reset_button.clicked' });
    };
    return (react_1.default.createElement(SearchInputWrapper, { "data-component-name": "Search/SearchInput", className: className },
        showReturnButton ? (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null), onClick: onReturn })) : value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "24px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "24px", color: "--search-input-icon-color" })),
        react_1.default.createElement(SearchInputField, { value: value, ref: inputRef, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation, onKeyDown: onKeyDown }),
        !!value && (react_1.default.createElement(ResetButton, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseFilledIcon_1.CloseFilledIcon, null), tabIndex: -1 }))));
}
const SearchInputWrapper = styled_components_1.default.div `
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: var(--search-input-padding);
  height: var(--search-input-height);
  gap: var(--search-input-gap);
`;
const SearchInputField = styled_components_1.default.input `
  width: 100%;
  outline: none;
  background-color: var(--search-input-bg-color);
  border-radius: var(--search-input-border-radius);
  border: var(--search-input-border);
  color: var(--search-input-text-color);
  font-size: var(--search-input-font-size);
  font-family: var(--search-input-font-family);
  font-weight: var(--search-input-font-weight);
  line-height: var(--search-input-line-height);

  &::placeholder {
    color: var(--search-input-placeholder-color);
  }
`;
const ResetButton = (0, styled_components_1.default)(Button_1.Button) `
  color: var(--color-warm-grey-5);
`;
//# sourceMappingURL=SearchInput.js.map