@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
37 lines • 2.25 kB
JavaScript
import * as React from 'react';
import { classNamesFunction, css } from '../../../Utilities';
import { getStyles } from './FloatingSuggestionsItem.styles';
import { CommandButton, IconButton } from 'office-ui-fabric-react/lib/Button';
export var 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 = classNamesFunction();
var classNames = getClassNames(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: css(classNames.root, className ? className : ''), id: id },
React.createElement(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(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));
};
export var FloatingSuggestionsItemMemo = React.memo(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