@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
60 lines (59 loc) • 2.35 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "labelText"];
/**
* @file Filter panel search component.
* @copyright IBM Security 2020 - 2021
*/
import classnames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { getComponentNamespace } from '../../../globals/namespace';
import { useComponentFocus } from '../../../globals/utils/focus';
import Search from '../../Search';
var namespace = getComponentNamespace('filter-panel-search');
var FilterPanelSearch = function FilterPanelSearch(_ref) {
var children = _ref.children,
className = _ref.className,
labelText = _ref.labelText,
other = _objectWithoutProperties(_ref, _excluded);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
displayResults = _React$useState2[0],
setDisplayResults = _React$useState2[1];
var _useComponentFocus = useComponentFocus(300),
createFocusHandler = _useComponentFocus.createFocusHandler,
createBlurHandler = _useComponentFocus.createBlurHandler;
var handleFocus = createFocusHandler(function () {
setDisplayResults(true);
});
var handleBlur = createBlurHandler(function () {
setDisplayResults(false);
});
return /*#__PURE__*/React.createElement("div", {
className: namespace,
onBlur: handleBlur,
onFocus: handleFocus
}, /*#__PURE__*/React.createElement(Search, _extends({
className: classnames("".concat(namespace, "__input"), className),
"aria-label": labelText,
labelText: labelText,
size: "sm"
}, other)), displayResults && children && /*#__PURE__*/React.createElement("div", {
className: "".concat(namespace, "__results")
}, children));
};
FilterPanelSearch.propTypes = {
/** Results container content */
children: PropTypes.node,
/** Optional class name */
className: PropTypes.string,
/** Provide the label text for the [`Search`](https://react.carbondesignsystem.com/?path=/docs/components-search) */
labelText: Search.propTypes.labelText
};
FilterPanelSearch.defaultProps = {
className: undefined,
children: undefined
};
export default FilterPanelSearch;