@fluentui/react
Version:
Reusable React components for building web experiences.
41 lines • 2.47 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
import { styled, classNamesFunction } from '../../../Utilities';
import { IconButton } from '../../../Button';
import { getStyles } from './TagItem.styles';
import { useId } from '@fluentui/react-hooks';
var getClassNames = classNamesFunction();
/**
* {@docCategory TagPicker}
*/
export var TagItemBase = function (props) {
var theme = props.theme, styles = props.styles, selected = props.selected, disabled = props.disabled, enableTagFocusInDisabledPicker = props.enableTagFocusInDisabledPicker, children = props.children, className = props.className, index = props.index, onRemoveItem = props.onRemoveItem, removeButtonAriaLabel = props.removeButtonAriaLabel, _a = props.title, title = _a === void 0 ? typeof props.children === 'string' ? props.children : props.item.name : _a, removeButtonIconProps = props.removeButtonIconProps, removeButtonProps = props.removeButtonProps;
var buttonRef = React.createRef();
var handleClick = function () {
var _a;
(_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
};
var classNames = getClassNames(styles, {
theme: theme,
className: className,
selected: selected,
disabled: disabled,
});
var itemId = useId();
var disabledAttrs = enableTagFocusInDisabledPicker
? {
'aria-disabled': disabled,
tabindex: 0,
}
: {
disabled: disabled,
};
return (React.createElement("div", { "data-selection-index": index, className: classNames.root, role: 'listitem', key: index, onClick: handleClick },
React.createElement("span", { className: classNames.text, title: title, id: "".concat(itemId, "-text") }, children),
React.createElement(IconButton, __assign({ componentRef: buttonRef, id: itemId, onClick: onRemoveItem }, disabledAttrs, { iconProps: removeButtonIconProps !== null && removeButtonIconProps !== void 0 ? removeButtonIconProps : { iconName: 'Cancel' }, styles: { icon: { fontSize: '12px' } }, className: classNames.close, "aria-labelledby": "".concat(itemId, "-removeLabel ").concat(itemId, "-text") }, removeButtonProps)),
React.createElement("span", { id: "".concat(itemId, "-removeLabel"), hidden: true }, removeButtonAriaLabel)));
};
export var TagItem = styled(TagItemBase, getStyles, undefined, {
scope: 'TagItem',
});
//# sourceMappingURL=TagItem.js.map