office-ui-fabric-react/lib-amd/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "../../../ExtendedPicker", "../SelectedPeopleList/SelectedPeopleList", "../SelectedPeopleList/Items/ExtendedSelectedItem", "office-ui-fabric-react/lib/Selection", "office-ui-fabric-react/lib/Toggle", "./SelectedPeopleList.Basic.Example.scss", "office-ui-fabric-react/lib/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.scss"], function (require, exports, tslib_1, React, Button_1, ExtendedPicker_1, SelectedPeopleList_1, ExtendedSelectedItem_1, Selection_1, Toggle_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var PeopleSelectedItemsListExample = /** @class */ (function (_super) {
        tslib_1.__extends(PeopleSelectedItemsListExample, _super);
        function PeopleSelectedItemsListExample(props) {
            var _this = _super.call(this, props) || this;
            _this.selection = new Selection_1.Selection({ onSelectionChanged: function () { return _this._onSelectionChange(); } });
            _this._toggleControlledComponent = function (ev, toggleState) {
                _this.setState({ controlledComponent: toggleState });
            };
            _this._onRenderItem = function (props) {
                return React.createElement(ExtendedSelectedItem_1.ExtendedSelectedItem, tslib_1.__assign({}, props));
            };
            _this._setComponentRef = function (component) {
                _this._selectionList = component;
            };
            _this._onAddItemButtonClicked = function () {
                if (_this._selectionList) {
                    if (!_this.index) {
                        _this.index = 0;
                    }
                    if (_this.state.controlledComponent) {
                        _this.setState({ currentSelectedItems: _this.state.currentSelectedItems.concat([ExtendedPicker_1.people[_this.index]]) });
                    }
                    else {
                        _this._selectionList.addItems([ExtendedPicker_1.people[_this.index]]);
                    }
                    _this.index++;
                }
            };
            _this._onItemDeleted = function (item) {
                var indexToRemove = _this.state.currentSelectedItems.indexOf(item);
                _this.setState({
                    currentSelectedItems: _this.state.currentSelectedItems
                        .slice(0, indexToRemove)
                        .concat(_this.state.currentSelectedItems.slice(indexToRemove + 1))
                });
            };
            _this._onExpandItem = function (item) {
                if (_this.state.controlledComponent) {
                    var indexToExpand = _this.state.currentSelectedItems.indexOf(item);
                    _this.setState({
                        currentSelectedItems: _this.state.currentSelectedItems
                            .slice(0, indexToExpand)
                            .concat(_this._getExpandedGroupItems(item))
                            .concat(_this.state.currentSelectedItems.slice(indexToExpand + 1))
                    });
                }
                else {
                    _this._selectionList.replaceItem(item, _this._getExpandedGroupItems(item));
                }
            };
            _this.state = {
                controlledComponent: false,
                currentSelectedItems: [ExtendedPicker_1.people[40]]
            };
            return _this;
        }
        PeopleSelectedItemsListExample.prototype.render = function () {
            return (React.createElement("div", { className: 'ms-BasePicker-text' },
                React.createElement(Toggle_1.Toggle, { label: "Controlled component", defaultChecked: false, onChange: this._toggleControlledComponent }),
                React.createElement(Button_1.PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
                this._renderExtendedPicker()));
        };
        PeopleSelectedItemsListExample.prototype._renderExtendedPicker = function () {
            return (React.createElement("div", { className: styles.container },
                React.createElement(SelectedPeopleList_1.SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', defaultSelectedItems: [ExtendedPicker_1.people[40]], selectedItems: this.state.controlledComponent ? this.state.currentSelectedItems : undefined, componentRef: this._setComponentRef, onCopyItems: this._onCopyItems, onExpandGroup: this._onExpandItem, copyMenuItemText: 'Copy', removeMenuItemText: 'Remove', selection: this.selection, onRenderItem: this._onRenderItem, onItemDeleted: this.state.controlledComponent ? this._onItemDeleted : undefined })));
        };
        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;
    }(React.Component));
    exports.PeopleSelectedItemsListExample = PeopleSelectedItemsListExample;
});
//# sourceMappingURL=SelectedPeopleList.Basic.Example.js.map