office-ui-fabric-react/lib/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
/* tslint:disable */
import * as React from 'react';
/* tslint:enable */
import { BaseSelectedItemsList } from '../BaseSelectedItemsList';
import { ExtendedSelectedItem } from './Items/ExtendedSelectedItem';
import { SelectedItemWithContextMenu } from './Items/SelectedItemWithContextMenu';
import { EditingItem } from './Items/EditingItem';
var BasePeopleSelectedItemsList = /** @class */ (function (_super) {
    tslib_1.__extends(BasePeopleSelectedItemsList, _super);
    function BasePeopleSelectedItemsList() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BasePeopleSelectedItemsList;
}(BaseSelectedItemsList));
export { BasePeopleSelectedItemsList };
/**
 * Standard People Picker.
 */
var SelectedPeopleList = /** @class */ (function (_super) {
    tslib_1.__extends(SelectedPeopleList, _super);
    function SelectedPeopleList() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.replaceItem = function (itemToReplace, itemsToReplaceWith) {
            var items = _this.state.items;
            var index = items.indexOf(itemToReplace);
            if (index > -1) {
                var newItems = items
                    .slice(0, index)
                    .concat(itemsToReplaceWith)
                    .concat(items.slice(index + 1));
                _this.updateItems(newItems);
            }
        };
        _this.renderItems = function () {
            var items = _this.state.items;
            // tslint:disable-next-line:no-any
            return items.map(function (item, index) { return _this._renderItem(item, index); });
        };
        _this._beginEditing = function (item) {
            item.isEditing = true;
            _this.forceUpdate();
        };
        // tslint:disable-next-line:no-any
        _this._completeEditing = function (oldItem, newItem) {
            oldItem.isEditing = false;
            _this.replaceItem(oldItem, newItem);
        };
        return _this;
    }
    // tslint:disable-next-line:no-any
    SelectedPeopleList.prototype._renderItem = function (item, index) {
        var _this = this;
        var removeButtonAriaLabel = this.props.removeButtonAriaLabel;
        var props = {
            item: item,
            index: index,
            key: item.key ? item.key : index,
            selected: this.selection.isIndexSelected(index),
            onRemoveItem: function () { return _this.removeItem(item); },
            onItemChange: this.onItemChange,
            removeButtonAriaLabel: removeButtonAriaLabel,
            onCopyItem: function (itemToCopy) { return _this.copyItems([itemToCopy]); },
            onExpandItem: this.props.onExpandGroup
                ? function () { return _this.props.onExpandGroup(item); }
                : undefined,
            menuItems: this._createMenuItems(item)
        };
        var hasContextMenu = props.menuItems.length > 0;
        if (item.isEditing && hasContextMenu) {
            return (React.createElement(EditingItem, tslib_1.__assign({}, props, { onRenderFloatingPicker: this.props.onRenderFloatingPicker, floatingPickerProps: this.props.floatingPickerProps, onEditingComplete: this._completeEditing, getEditingItemText: this.props.getEditingItemText })));
        }
        else {
            var onRenderItem = this.props.onRenderItem;
            var renderedItem = onRenderItem(props);
            return hasContextMenu ? (React.createElement(SelectedItemWithContextMenu, { renderedItem: renderedItem, beginEditing: this._beginEditing, menuItems: this._createMenuItems(props.item), item: props.item })) : (renderedItem);
        }
    };
    // tslint:disable-next-line:no-any
    SelectedPeopleList.prototype._createMenuItems = function (item) {
        var _this = this;
        var menuItems = [];
        if (this.props.editMenuItemText && this.props.getEditingItemText) {
            menuItems.push({
                key: 'Edit',
                text: this.props.editMenuItemText,
                onClick: function (ev, menuItem) {
                    _this._beginEditing(menuItem.data);
                },
                data: item
            });
        }
        if (this.props.removeMenuItemText) {
            menuItems.push({
                key: 'Remove',
                text: this.props.removeMenuItemText,
                onClick: function (ev, menuItem) {
                    _this.removeItem(menuItem.data);
                },
                data: item
            });
        }
        if (this.props.copyMenuItemText) {
            menuItems.push({
                key: 'Copy',
                text: this.props.copyMenuItemText,
                onClick: function (ev, menuItem) {
                    if (_this.props.onCopyItems) {
                        _this.copyItems([menuItem.data]);
                    }
                },
                data: item
            });
        }
        return menuItems;
    };
    // tslint:disable-next-line:no-any
    SelectedPeopleList.defaultProps = {
        onRenderItem: function (props) { return React.createElement(ExtendedSelectedItem, tslib_1.__assign({}, props)); }
    };
    return SelectedPeopleList;
}(BasePeopleSelectedItemsList));
export { SelectedPeopleList };
//# sourceMappingURL=SelectedPeopleList.js.map