@redocly/theme/lib/components/Filter/FilterInput.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.FilterInput = FilterInput;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
function FilterInput(props) {
    const { value, onChange } = props;
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    return (react_1.default.createElement(InputWrapper, { "data-component-name": "Filter/FilterInput" },
        react_1.default.createElement(InputIcon, null),
        react_1.default.createElement(Input, { value: value, onChange: (e) => onChange(e.target.value), placeholder: translate('catalog.filters.placeholder', 'Type to filter...') })));
}
const InputWrapper = styled_components_1.default.div `
  position: relative;
`;
const InputIcon = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--spacing-sm);
  color: var(--input-content-placeholder-color);
`;
const Input = styled_components_1.default.input `
  border: var(--filter-input-border);
  min-width: var(--filter-input-min-width);
  width: 100%;
  outline: none;
  padding: var(--filter-input-padding);
  border-radius: var(--filter-input-border-radius);
  background-color: var(--filter-input-bg-color);
  color: var(--filter-input-color);
  font-family: var(--filter-input-font-family);
  font-size: var(--filter-input-font-size);
  line-height: var(--filter-input-line-height);

  &::placeholder {
    opacity: var(--filter-input-placeholder-opacity);
    color: var(--filter-input-placeholder-color);
  }

  &:hover {
    color: var(--filter-input-color-hover);
    border: var(--filter-input-border-hover);
  }

  &:focus {
    color: var(--filter-input-color-focus);
    border: var(--filter-input-border-focus);
  }

  &:-webkit-autofill {
    background-color: var(--filter-input-bg-color);
  }
`;
//# sourceMappingURL=FilterInput.js.map