@fluentui/react
Version:
Reusable React components for building web experiences.
35 lines • 2.88 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../../../Utilities", "../../../../Persona", "../../../../Button", "../../BasePicker.types", "./PeoplePickerItem.styles"], function (require, exports, tslib_1, React, Utilities_1, Persona_1, Button_1, BasePicker_types_1, PeoplePickerItem_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PeoplePickerItem = exports.PeoplePickerItemBase = void 0;
var getClassNames = (0, Utilities_1.classNamesFunction)();
var PeoplePickerItemBase = function (props) {
var item = props.item, onRemoveItem = props.onRemoveItem, index = props.index, selected = props.selected, removeButtonAriaLabel = props.removeButtonAriaLabel, styles = props.styles, theme = props.theme, className = props.className, disabled = props.disabled, removeButtonIconProps = props.removeButtonIconProps;
var buttonRef = React.createRef();
var handleClick = function () {
var _a;
(_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
};
var itemId = (0, Utilities_1.getId)();
var classNames = getClassNames(styles, {
theme: theme,
className: className,
selected: selected,
disabled: disabled,
invalid: item.ValidationState === BasePicker_types_1.ValidationState.warning,
});
var personaStyles = classNames.subComponentStyles
? classNames.subComponentStyles.persona
: undefined;
var personaCoinStyles = classNames.subComponentStyles
? classNames.subComponentStyles.personaCoin
: undefined;
return (React.createElement("div", { "data-selection-index": index, className: classNames.root, role: 'listitem', key: index, onClick: handleClick },
React.createElement("div", { className: classNames.itemContent, id: 'selectedItemPersona-' + itemId },
React.createElement(Persona_1.Persona, tslib_1.__assign({ size: Persona_1.PersonaSize.size24, styles: personaStyles, coinProps: { styles: personaCoinStyles } }, item))),
React.createElement(Button_1.IconButton, { componentRef: buttonRef, id: itemId, onClick: onRemoveItem, disabled: disabled, iconProps: removeButtonIconProps !== null && removeButtonIconProps !== void 0 ? removeButtonIconProps : { iconName: 'Cancel' }, styles: { icon: { fontSize: '12px' } }, className: classNames.removeButton, ariaLabel: removeButtonAriaLabel, "aria-labelledby": "".concat(itemId, " selectedItemPersona-").concat(itemId) })));
};
exports.PeoplePickerItemBase = PeoplePickerItemBase;
exports.PeoplePickerItem = (0, Utilities_1.styled)(exports.PeoplePickerItemBase, PeoplePickerItem_styles_1.getStyles, undefined, { scope: 'PeoplePickerItem' });
});
//# sourceMappingURL=PeoplePickerItem.js.map