office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
79 lines • 4.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable */
var React = require("react");
/* tslint:enable */
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var ExtendedPicker_1 = require("../../ExtendedPicker");
require("office-ui-fabric-react/lib/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.scss");
var SelectedPeopleList_1 = require("../SelectedPeopleList/SelectedPeopleList");
var ExtendedSelectedItem_1 = require("../SelectedPeopleList/Items/ExtendedSelectedItem");
var Selection_1 = require("office-ui-fabric-react/lib/Selection");
var Icon_1 = require("office-ui-fabric-react/lib/Icon");
var styles = require("./SelectedPeopleList.Basic.Example.scss");
var PeopleSelectedItemsListExample = /** @class */ (function (_super) {
tslib_1.__extends(PeopleSelectedItemsListExample, _super);
function PeopleSelectedItemsListExample() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.selection = new Selection_1.Selection({ onSelectionChanged: function () { return _this._onSelectionChange(); } });
_this._onRenderItem = function (props) {
return (React.createElement(ExtendedSelectedItem_1.ExtendedSelectedItem, tslib_1.__assign({}, props, { renderPersonaCoin: _this._renderPersonaElement })));
};
_this._setComponentRef = function (component) {
_this._selectionList = component;
};
_this._onAddItemButtonClicked = function () {
if (_this._selectionList) {
if (!_this.index) {
_this.index = 0;
}
_this._selectionList.addItems([ExtendedPicker_1.people[_this.index]]);
_this.index++;
}
};
_this._onExpandItem = function (item) {
// tslint:disable-next-line:no-any
_this._selectionList.replaceItem(item, _this._getExpandedGroupItems(item));
};
return _this;
}
PeopleSelectedItemsListExample.prototype.render = function () {
return (React.createElement("div", { className: 'ms-BasePicker-text' },
React.createElement(Button_1.PrimaryButton, { text: 'Add another item', onClick: this._onAddItemButtonClicked }),
this._renderExtendedPicker()));
};
PeopleSelectedItemsListExample.prototype._renderExtendedPicker = function () {
return (React.createElement(SelectedPeopleList_1.SelectedPeopleList, { className: 'ms-PeoplePicker', key: 'normal', removeButtonAriaLabel: 'Remove', defaultSelectedItems: [ExtendedPicker_1.people[40]], componentRef: this._setComponentRef, onCopyItems: this._onCopyItems, onExpandGroup: this._onExpandItem, copyMenuItemText: 'Copy', removeMenuItemText: 'Remove', selection: this.selection, onRenderItem: this._onRenderItem }));
};
PeopleSelectedItemsListExample.prototype._renderPersonaElement = function (props, defaultRender) {
return (React.createElement(Icon_1.Icon, { iconName: 'Contact', className: styles.persona }));
};
PeopleSelectedItemsListExample.prototype._onSelectionChange = function () {
this.forceUpdate();
};
PeopleSelectedItemsListExample.prototype._onCopyItems = function (items) {
var copyText = '';
items.forEach(function (item, index) {
copyText += item.text;
if (index < items.length - 1) {
copyText += ', ';
}
});
return copyText;
};
PeopleSelectedItemsListExample.prototype._getExpandedGroupItems = function (item) {
switch (item.text) {
case 'Group One':
return ExtendedPicker_1.groupOne;
case 'Group Two':
return ExtendedPicker_1.groupTwo;
default:
return [];
}
};
return PeopleSelectedItemsListExample;
}(Utilities_1.BaseComponent));
exports.PeopleSelectedItemsListExample = PeopleSelectedItemsListExample;
//# sourceMappingURL=SelectedPeopleList.Basic.Example.js.map