@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
219 lines (215 loc) • 10.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.namespace = exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _Button = _interopRequireDefault(require("../Button"));
var _Search = _interopRequireDefault(require("../Search"));
var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
var _namespace = require("../../globals/namespace");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
*/
var namespace = exports.namespace = (0, _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.default.string.apply(_propTypes.default, [props, propName, componentName].concat(rest));
};
var SearchBar = exports.default = /*#__PURE__*/function (_React$Component) {
function SearchBar() {
var _this;
(0, _classCallCheck2.default)(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.
*/
(0, _defineProperty2.default)(_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.
*/
(0, _defineProperty2.default)(_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.
*/
(0, _defineProperty2.default)(_this, "handleSearchScopeChange", function (_ref) {
var selectedItems = _ref.selectedItems;
_this.props.onChange({
selectedScopes: selectedItems,
value: _this.props.value
});
});
return _this;
}
(0, _inherits2.default)(SearchBar, _React$Component);
return (0, _createClass2.default)(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.default.createElement(_MultiSelect.default, {
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.default.createElement("form", {
className: (0, _classnames2.default)(namespace, className, (0, _defineProperty2.default)({}, "".concat(namespace, "--hide-scopes-label"), hideScopesLabel)),
onSubmit: this.handleSubmit
}, this.renderScopeSelector(), /*#__PURE__*/_react.default.createElement(_Search.default, {
className: "".concat(namespace, "__input"),
closeButtonLabelText: clearButtonLabelText,
labelText: labelText,
name: "search-input",
onChange: this.handleInputChange,
placeholder: placeHolderText,
value: value
}), /*#__PURE__*/_react.default.createElement(_Button.default, {
name: "search-submit",
kind: "primary",
type: "submit",
className: "".concat(namespace, "__submit"),
disabled: !value || value.length === 0 || scopes.length !== 0 && selectedScopes.length === 0
}, submitLabel));
}
}]);
}(_react.default.Component);
(0, _defineProperty2.default)(SearchBar, "propTypes", {
/** @type {string} Optional additional class name. */
className: _propTypes.default.string,
/** @type {string} The label text for the search text input. */
clearButtonLabelText: _propTypes.default.string.isRequired,
/**
* Whether or not the scopes MultiSelect label is visually hidden.
*/
hideScopesLabel: _propTypes.default.bool,
/** @type {string} The label text for the search text input. */
labelText: _propTypes.default.string.isRequired,
/** @type {Function} Function handler for when the user changes their query search. */
onChange: _propTypes.default.func,
/** @type {Function} Function handler for when the user submits a search. */
onSubmit: _propTypes.default.func,
/** @type {string} Placeholder text to be displayed in the search input. */
placeHolderText: _propTypes.default.string.isRequired,
/** @type {Function} Function to get the text for each sscope to display in dropdown. */
scopeToString: _propTypes.default.func,
/** @type {Array<any>} Array of allowed search scopes. */
scopes: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.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.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.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.default.func,
// eslint-disable-line react/require-default-props
/** @type {string} The label text for the search submit button. */
submitLabel: _propTypes.default.string.isRequired,
/**
* Provide accessible label text for the scopes MultiSelect.
*/
titleText: _propTypes.default.string,
/** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
translateWithId: _propTypes.default.func,
// eslint-disable-line react/require-default-props
/** @type {string} Search query value. */
value: _propTypes.default.string
});
(0, _defineProperty2.default)(SearchBar, "defaultProps", {
className: '',
value: '',
onSubmit: function onSubmit() {},
onChange: function onChange() {},
scopeToString: function scopeToString() {},
scopes: [],
selectedScopes: [],
titleText: 'Scopes multiselect',
hideScopesLabel: true
});