@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
215 lines (211 loc) • 9.19 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @file SearchBar.
* @copyright IBM Security 2019 - 2021
*/
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Button from '../Button';
import Search from '../Search';
import MultiSelect from '../MultiSelect';
import { getComponentNamespace } from '../../globals/namespace';
export var namespace = getComponentNamespace('search-bar');
/**
* Custom scope validator for props that are only required when scopes has been provided.
* @param {object} props Object containing passed in props.
* @param {string} propName Name of prop the validator is for.
* @param {string} componentName Name of component.
* @param {...any} rest Rest of parameters to pass down to string prop validator.
* @returns {Error|null} Error if validation failed otherwise nothing.
*/
var conditionalScopePropValidator = function conditionalScopePropValidator(props, propName, componentName) {
if (props.scopes && props.scopes.length > 0 && !props[propName]) {
return new Error("Required `".concat(propName, "` when `scopes` prop type is supplied to `").concat(componentName, "`. Validation failed."));
}
for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
rest[_key - 3] = arguments[_key];
}
return PropTypes.string.apply(PropTypes, [props, propName, componentName].concat(rest));
};
var SearchBar = /*#__PURE__*/function (_React$Component) {
function SearchBar() {
var _this;
_classCallCheck(this, SearchBar);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this = _callSuper(this, SearchBar, [].concat(args));
/**
* Handler for search input changes that calls onChange prop.
* @param {KeyboardEvent} event Event object from input change.
*/
_defineProperty(_this, "handleInputChange", function (event) {
var value = event.target.value;
var eventObject = {
value: value
};
if (_this.props.scopes.length > 0) {
eventObject.selectedScopes = _this.props.selectedScopes;
}
_this.props.onChange(eventObject);
});
/**
* Handler for form submit that calls onSubmit prop.
* @param {Event} event Submit event generated.
*/
_defineProperty(_this, "handleSubmit", function (event) {
event.preventDefault();
var eventObject = {
value: _this.props.value
};
if (_this.props.scopes.length > 0) {
eventObject.selectedScopes = _this.props.selectedScopes;
}
_this.props.onSubmit(eventObject);
});
/**
* Handler for when scope selection changes that calls onChangeProp.
* @param {{selectedItems: Array<any>}} {selectedItems} Object containing array of selected items.
*/
_defineProperty(_this, "handleSearchScopeChange", function (_ref) {
var selectedItems = _ref.selectedItems;
_this.props.onChange({
selectedScopes: selectedItems,
value: _this.props.value
});
});
return _this;
}
_inherits(SearchBar, _React$Component);
return _createClass(SearchBar, [{
key: "renderScopeSelector",
value:
/**
* Renders scope selector dropdown.
* @returns {ReactElement} Scope selector.
*/
function renderScopeSelector() {
var _this$props = this.props,
scopes = _this$props.scopes,
scopeToString = _this$props.scopeToString,
scopesTypeLabel = _this$props.scopesTypeLabel,
selectedScopes = _this$props.selectedScopes,
translateWithId = _this$props.translateWithId,
sortItems = _this$props.sortItems,
titleText = _this$props.titleText;
if (scopes.length === 0) {
return null;
}
return /*#__PURE__*/React.createElement(MultiSelect, {
id: "".concat(namespace, "__multi-select"),
name: "search-scopes",
className: "".concat(namespace, "__scopes"),
label: scopesTypeLabel,
onChange: this.handleSearchScopeChange,
initialSelectedItems: selectedScopes,
items: scopes,
itemToString: scopeToString,
translateWithId: translateWithId,
sortItems: sortItems,
titleText: titleText
});
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
labelText = _this$props2.labelText,
placeHolderText = _this$props2.placeHolderText,
submitLabel = _this$props2.submitLabel,
value = _this$props2.value,
className = _this$props2.className,
scopes = _this$props2.scopes,
selectedScopes = _this$props2.selectedScopes,
clearButtonLabelText = _this$props2.clearButtonLabelText,
hideScopesLabel = _this$props2.hideScopesLabel;
return /*#__PURE__*/React.createElement("form", {
className: classnames(namespace, className, _defineProperty({}, "".concat(namespace, "--hide-scopes-label"), hideScopesLabel)),
onSubmit: this.handleSubmit
}, this.renderScopeSelector(), /*#__PURE__*/React.createElement(Search, {
className: "".concat(namespace, "__input"),
closeButtonLabelText: clearButtonLabelText,
labelText: labelText,
name: "search-input",
onChange: this.handleInputChange,
placeholder: placeHolderText,
value: value
}), /*#__PURE__*/React.createElement(Button, {
name: "search-submit",
kind: "primary",
type: "submit",
className: "".concat(namespace, "__submit"),
disabled: !value || value.length === 0 || scopes.length !== 0 && selectedScopes.length === 0
}, submitLabel));
}
}]);
}(React.Component);
_defineProperty(SearchBar, "propTypes", {
/** @type {string} Optional additional class name. */
className: PropTypes.string,
/** @type {string} The label text for the search text input. */
clearButtonLabelText: PropTypes.string.isRequired,
/**
* Whether or not the scopes MultiSelect label is visually hidden.
*/
hideScopesLabel: PropTypes.bool,
/** @type {string} The label text for the search text input. */
labelText: PropTypes.string.isRequired,
/** @type {Function} Function handler for when the user changes their query search. */
onChange: PropTypes.func,
/** @type {Function} Function handler for when the user submits a search. */
onSubmit: PropTypes.func,
/** @type {string} Placeholder text to be displayed in the search input. */
placeHolderText: PropTypes.string.isRequired,
/** @type {Function} Function to get the text for each sscope to display in dropdown. */
scopeToString: PropTypes.func,
/** @type {Array<any>} Array of allowed search scopes. */
scopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
/** @type {string} The name text for the search scope type. */
// eslint-disable-next-line react/require-default-props
scopesTypeLabel: conditionalScopePropValidator,
/** @type {Array<any> Array of initially selected search scopes. */
selectedScopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
/**
* Optional custom sorting algorithm for an array of scope items.
* By default, scope items are sorted in ascending alphabetical order,
* with "selected" items moved to the start of the scope items array.
*/
sortItems: PropTypes.func,
// eslint-disable-line react/require-default-props
/** @type {string} The label text for the search submit button. */
submitLabel: PropTypes.string.isRequired,
/**
* Provide accessible label text for the scopes MultiSelect.
*/
titleText: PropTypes.string,
/** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
translateWithId: PropTypes.func,
// eslint-disable-line react/require-default-props
/** @type {string} Search query value. */
value: PropTypes.string
});
_defineProperty(SearchBar, "defaultProps", {
className: '',
value: '',
onSubmit: function onSubmit() {},
onChange: function onChange() {},
scopeToString: function scopeToString() {},
scopes: [],
selectedScopes: [],
titleText: 'Scopes multiselect',
hideScopesLabel: true
});
export { SearchBar as default };