@carbon/ibm-products
Version:
Carbon for IBM Products
116 lines (111 loc) • 4.24 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React__default, { useContext, useRef, useState, useEffect } from 'react';
import { Search } from '@carbon/react';
import { Checkmark } from '@carbon/react/icons';
import PropTypes from '../../../../_virtual/index.js';
import { ConditionBuilderContext } from '../../ConditionBuilderContext/ConditionBuilderProvider.js';
import { useTranslations } from '../../utils/useTranslations.js';
import { blockClass, onKeyDownHandlerForSearch } from '../../utils/util.js';
const ItemOption = _ref => {
let {
conditionState = {},
config = {},
onChange
} = _ref;
const {
popOverSearchThreshold
} = useContext(ConditionBuilderContext);
const contentRef = useRef(null);
const [propertyText, clearSearchText] = useTranslations(['propertyText', 'clearSearchText']);
const {
conditionBuilderRef
} = useContext(ConditionBuilderContext);
const allOptions = config.options;
const [searchValue, setSearchValue] = useState('');
const selection = conditionState.value;
const filteredItems = searchValue ? allOptions?.filter(opt => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
useEffect(() => {
//this will focus the first input field in the popover
if (contentRef.current) {
const firstFocusableElement = contentRef.current?.querySelector('input, button,li');
if (firstFocusableElement) {
firstFocusableElement.focus();
}
}
}, [allOptions]);
const onClickHandler = (evt, option) => {
onChange(option.id, evt);
};
const onSearchChangeHandler = evt => {
const {
value
} = evt.target;
setSearchValue(value);
};
const getAriaLabel = () => {
return conditionState.label ? conditionState.label : propertyText;
};
const getStatementContent = option => {
return /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__statement_wrapper`
}, /*#__PURE__*/React__default.createElement("div", null, option.label, " (", option.connector, ")"), /*#__PURE__*/React__default.createElement("div", null, option.secondaryLabel));
};
if (!allOptions) {
return;
}
return /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__item-option`,
ref: contentRef
}, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__item-option__search`
}, /*#__PURE__*/React__default.createElement(Search, {
size: "sm",
labelText: clearSearchText,
closeButtonLabelText: clearSearchText,
onChange: onSearchChangeHandler,
onKeyDown: evt => onKeyDownHandlerForSearch(evt, conditionBuilderRef)
})), /*#__PURE__*/React__default.createElement("ul", {
"aria-label": getAriaLabel(),
role: "listbox"
}, filteredItems?.map(option => {
const isSelected = selection === option.id;
const Icon = option.icon;
return /*#__PURE__*/React__default.createElement("li", {
tabIndex: 0,
key: option.id,
role: "option",
"aria-selected": isSelected,
className: `${blockClass}__item-option__option`,
onKeyUp: () => {
return false;
},
onClick: evt => onClickHandler(evt, option)
}, /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__item-option__option-content`
}, /*#__PURE__*/React__default.createElement("span", {
className: `${blockClass}__item-option__option-label`
}, Icon && /*#__PURE__*/React__default.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
className: `${blockClass}__checkmark`
})));
})));
};
ItemOption.propTypes = {
/**
* current condition object
*/
conditionState: PropTypes.object,
/**
* current config object that this property is part of
*/
config: PropTypes.object,
/**
* callback to update state oin date change
*/
onChange: PropTypes.func
};
export { ItemOption };