office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
52 lines • 3.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../../Utilities");
var Button_1 = require("../../../Button");
var stylesImport = require("./Suggestions.scss");
var legacyStyles = stylesImport;
var getClassNames = Utilities_1.classNamesFunction();
/**
* {@docCategory Pickers}
*/
var SuggestionsItem = /** @class */ (function (_super) {
tslib_1.__extends(SuggestionsItem, _super);
function SuggestionsItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
SuggestionsItem.prototype.render = function () {
var _a;
var _b = this.props, suggestionModel = _b.suggestionModel, RenderSuggestion = _b.RenderSuggestion, onClick = _b.onClick, className = _b.className, onRemoveItem = _b.onRemoveItem, isSelectedOverride = _b.isSelectedOverride, removeButtonAriaLabel = _b.removeButtonAriaLabel, styles = _b.styles, theme = _b.theme;
// TODO
// Clean this up by leaving only the first part after removing support for SASS.
// Currently we can not remove the SASS styles from SuggestionsItem class because it
// might be used by consumers separately from pickers extending from BasePicker
// and have not used the new 'styles' prop. Because it's expecting a type parameter,
// we can not use the 'styled' function without adding some helpers which can break
// downstream consumers who did not use the new helpers.
// We check for 'styles' prop which is going to be injected by the 'styled' HOC
// in Suggestions when the typed SuggestionsItem class is ready to be rendered. If the
// check passes we can use the CSS-in-JS styles. If the check fails (ex: custom picker),
// then we just use the old SASS styles instead.
var classNames = styles
? getClassNames(styles, {
theme: theme,
className: className,
suggested: suggestionModel.selected || isSelectedOverride
})
: {
root: Utilities_1.css('ms-Suggestions-item', legacyStyles.suggestionsItem, (_a = {},
_a['is-suggested ' + legacyStyles.suggestionsItemIsSuggested] = suggestionModel.selected || isSelectedOverride,
_a), className),
itemButton: Utilities_1.css('ms-Suggestions-itemButton', legacyStyles.itemButton),
closeButton: Utilities_1.css('ms-Suggestions-closeButton', legacyStyles.closeButton)
};
return (React.createElement("div", { className: classNames.root },
React.createElement(Button_1.CommandButton, { onClick: onClick, className: classNames.itemButton }, RenderSuggestion(suggestionModel.item, this.props)),
this.props.showRemoveButton ? (React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel', styles: { root: { fontSize: '12px' } } }, title: removeButtonAriaLabel, ariaLabel: removeButtonAriaLabel, onClick: onRemoveItem, className: classNames.closeButton })) : null));
};
return SuggestionsItem;
}(Utilities_1.BaseComponent));
exports.SuggestionsItem = SuggestionsItem;
//# sourceMappingURL=SuggestionsItem.js.map