@carbon/react
Version:
React components for the Carbon Design System
127 lines (123 loc) • 4.05 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* 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 { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import { Close } from '@carbon/icons-react';
import { usePrefix } from '../../../internal/usePrefix.js';
var _Close, _Close2;
const defaultTranslations = {
'clear.all': 'Clear all selected items',
'clear.selection': 'Clear selected item'
};
function defaultTranslateWithId(id) {
return defaultTranslations[id];
}
function ListBoxSelection({
clearSelection,
selectionCount,
translateWithId: t = defaultTranslateWithId,
disabled,
readOnly,
onClearSelection,
...rest
}) {
const prefix = usePrefix();
const className = cx(`${prefix}--list-box__selection`, {
[`${prefix}--tag--filter`]: selectionCount,
[`${prefix}--list-box__selection--multi`]: selectionCount
});
const description = selectionCount ? t('clear.all') : t('clear.selection');
const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
[`${prefix}--tag--disabled`]: disabled
});
function onClick(event) {
event.stopPropagation();
if (disabled || readOnly) {
return;
}
clearSelection(event);
if (onClearSelection) {
onClearSelection(event);
}
}
if (selectionCount) {
return /*#__PURE__*/React.createElement("div", {
className: tagClasses
}, /*#__PURE__*/React.createElement("span", {
className: `${prefix}--tag__label`,
title: selectionCount?.toString()
}, selectionCount), /*#__PURE__*/React.createElement("button", {
"aria-label": description,
className: `${prefix}--tag__close-icon`,
disabled: disabled || readOnly,
onClick: onClick,
tabIndex: -1,
title: description,
type: "button",
"aria-disabled": readOnly ? true : undefined
}, _Close || (_Close = /*#__PURE__*/React.createElement(Close, null))));
}
return /*#__PURE__*/React.createElement("button", _extends({}, rest, {
"aria-label": description,
className: className,
disabled: disabled || readOnly,
onClick: onClick,
tabIndex: -1,
title: description,
type: "button",
"aria-disabled": readOnly ? true : undefined
}), _Close2 || (_Close2 = /*#__PURE__*/React.createElement(Close, null)));
}
ListBoxSelection.propTypes = {
/**
* Specify a function to be invoked when a user interacts with the clear
* selection element.
*/
clearSelection: PropTypes.func.isRequired,
/**
* Specify whether or not the clear selection element should be disabled
*/
disabled: PropTypes.bool,
/**
* Whether or not the listbox is readonly
*/
readOnly: PropTypes.bool,
/**
* Specify an optional `onClearSelection` handler that is called when the underlying
* element is cleared
*/
onClearSelection: PropTypes.func,
/**
* Specify an optional `onClick` handler that is called when the underlying
* clear selection element is clicked
*/
onClick: PropTypes.func,
/**
* Specify an optional `onClick` handler that is called when the underlying
* clear selection element is clicked
*/
onMouseUp: PropTypes.func,
/**
* Specify an optional `onKeyDown` handler that is called when the underlying
* clear selection element fires a keydown event
*/
onKeyDown: PropTypes.func,
/**
* Specify an optional `selectionCount` value that will be used to determine
* whether the selection should display a badge or a single clear icon.
*/
selectionCount: PropTypes.number,
/**
* i18n hook used to provide the appropriate description for the given menu
* icon. This function takes in an id defined in `translationIds` and should
* return a string message for that given message id.
*/
translateWithId: PropTypes.func
};
export { ListBoxSelection as default };