@carbon/ibm-security/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _namespace = require("../../../globals/namespace");
var _focus = require("../../../globals/utils/focus");
var _Search = _interopRequireDefault(require("../../Search"));
var _excluded = ["children", "className", "labelText"];
/**
 * @file Filter panel search component.
 * @copyright IBM Security 2020 - 2021
 */
var namespace = (0, _namespace.getComponentNamespace)('filter-panel-search');
var FilterPanelSearch = function FilterPanelSearch(_ref) {
  var children = _ref.children,
    className = _ref.className,
    labelText = _ref.labelText,
    other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var _React$useState = _react.default.useState(false),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    displayResults = _React$useState2[0],
    setDisplayResults = _React$useState2[1];
  var _useComponentFocus = (0, _focus.useComponentFocus)(300),
    createFocusHandler = _useComponentFocus.createFocusHandler,
    createBlurHandler = _useComponentFocus.createBlurHandler;
  var handleFocus = createFocusHandler(function () {
    setDisplayResults(true);
  });
  var handleBlur = createBlurHandler(function () {
    setDisplayResults(false);
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: namespace,
    onBlur: handleBlur,
    onFocus: handleFocus
  }, /*#__PURE__*/_react.default.createElement(_Search.default, (0, _extends2.default)({
    className: (0, _classnames.default)("".concat(namespace, "__input"), className),
    "aria-label": labelText,
    labelText: labelText,
    size: "sm"
  }, other)), displayResults && children && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(namespace, "__results")
  }, children));
};
FilterPanelSearch.propTypes = {
  /** Results container content */
  children: _propTypes.default.node,
  /** Optional class name */
  className: _propTypes.default.string,
  /** Provide the label text for the [`Search`](https://react.carbondesignsystem.com/?path=/docs/components-search) */
  labelText: _Search.default.propTypes.labelText
};
FilterPanelSearch.defaultProps = {
  className: undefined,
  children: undefined
};
var _default = exports.default = FilterPanelSearch;