@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
37 lines • 2.54 kB
JavaScript
define(["require", "exports", "react", "../../../Utilities", "./FloatingSuggestionsItem.styles", "office-ui-fabric-react/lib/Button"], function (require, exports, React, Utilities_1, FloatingSuggestionsItem_styles_1, Button_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatingSuggestionsItem = function (props) {
var id = props.id, onClick = props.onClick, className = props.className, onRemoveItem = props.onRemoveItem, onRenderSuggestion = props.onRenderSuggestion, showRemoveButton = props.showRemoveButton, removeButtonAriaLabel = props.removeButtonAriaLabel, isSelected = props.isSelected;
var getClassNames = Utilities_1.classNamesFunction();
var classNames = getClassNames(FloatingSuggestionsItem_styles_1.getStyles, { isSelected: isSelected });
var onClickItem = function (ev) {
onClick ? onClick(ev, props) : null;
ev.stopPropagation();
};
var onRemove = function (ev) {
onRemoveItem ? onRemoveItem(ev, props) : null;
ev.stopPropagation();
};
return (React.createElement("div", { className: Utilities_1.css(classNames.root, className ? className : ''), id: id },
React.createElement(Button_1.CommandButton
// eslint-disable-next-line react/jsx-no-bind
, {
// eslint-disable-next-line react/jsx-no-bind
onClick: onClickItem, className: classNames.itemButton }, onRenderSuggestion ? (onRenderSuggestion(props)) : (React.createElement("div", { className: classNames.displayText }, props.displayText))),
showRemoveButton ? (React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel', styles: { root: { fontSize: '12px' } } }, title: removeButtonAriaLabel, ariaLabel: removeButtonAriaLabel,
// eslint-disable-next-line react/jsx-no-bind
onClick: onRemove, className: classNames.closeButton })) : null));
};
exports.FloatingSuggestionsItemMemo = React.memo(exports.FloatingSuggestionsItem, function (prevProps, nextProp) {
if (prevProps.isSelected !== nextProp.isSelected ||
prevProps.id !== nextProp.id ||
prevProps.item !== nextProp.item ||
prevProps.displayText !== nextProp.displayText ||
prevProps.showRemoveButton !== nextProp.showRemoveButton) {
return false;
}
return true;
});
});
//# sourceMappingURL=FloatingSuggestionsItem.js.map