office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePicker.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 { getRTL, getInitials } from '../../../Utilities';
import { BasePicker, BasePickerListBelow } from '../BasePicker';
import { ValidationState } from '../BasePicker.types';
import { SelectedItemDefault } from './PeoplePickerItems/SelectedItemDefault';
import { SuggestionItemSmall, SuggestionItemNormal } from './PeoplePickerItems/SuggestionItemDefault';
import './PeoplePicker.scss';
var BasePeoplePicker = /** @class */ (function (_super) {
    tslib_1.__extends(BasePeoplePicker, _super);
    function BasePeoplePicker() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BasePeoplePicker;
}(BasePicker));
export { BasePeoplePicker };
var MemberListPeoplePicker = /** @class */ (function (_super) {
    tslib_1.__extends(MemberListPeoplePicker, _super);
    function MemberListPeoplePicker() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return MemberListPeoplePicker;
}(BasePickerListBelow));
export { MemberListPeoplePicker };
/**
 * Standard People Picker.
 */
var NormalPeoplePicker = /** @class */ (function (_super) {
    tslib_1.__extends(NormalPeoplePicker, _super);
    function NormalPeoplePicker() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    NormalPeoplePicker.defaultProps = {
        onRenderItem: function (props) { return React.createElement(SelectedItemDefault, tslib_1.__assign({}, props)); },
        onRenderSuggestionsItem: function (props, itemProps) {
            return SuggestionItemNormal(tslib_1.__assign({}, props), tslib_1.__assign({}, itemProps));
        },
        createGenericItem: createGenericItem
    };
    return NormalPeoplePicker;
}(BasePeoplePicker));
export { NormalPeoplePicker };
/**
 * Compact layout. It uses small personas when displaying search results.
 */
var CompactPeoplePicker = /** @class */ (function (_super) {
    tslib_1.__extends(CompactPeoplePicker, _super);
    function CompactPeoplePicker() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CompactPeoplePicker.defaultProps = {
        onRenderItem: function (props) { return React.createElement(SelectedItemDefault, tslib_1.__assign({}, props)); },
        onRenderSuggestionsItem: function (props, itemProps) {
            return SuggestionItemSmall(tslib_1.__assign({}, props), tslib_1.__assign({}, itemProps));
        },
        createGenericItem: createGenericItem
    };
    return CompactPeoplePicker;
}(BasePeoplePicker));
export { CompactPeoplePicker };
/**
 * MemberList layout. The selected people show up below the search box.
 */
var ListPeoplePicker = /** @class */ (function (_super) {
    tslib_1.__extends(ListPeoplePicker, _super);
    function ListPeoplePicker() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ListPeoplePicker.defaultProps = {
        onRenderItem: function (props) { return React.createElement(SelectedItemDefault, tslib_1.__assign({}, props)); },
        onRenderSuggestionsItem: function (props, itemProps) {
            return SuggestionItemNormal(tslib_1.__assign({}, props), tslib_1.__assign({}, itemProps));
        },
        createGenericItem: createGenericItem
    };
    return ListPeoplePicker;
}(MemberListPeoplePicker));
export { ListPeoplePicker };
export function createGenericItem(name, currentValidationState, allowPhoneInitials) {
    var personaToConvert = {
        key: name,
        primaryText: name,
        imageInitials: '!',
        ValidationState: currentValidationState
    };
    if (currentValidationState !== ValidationState.warning) {
        personaToConvert.imageInitials = getInitials(name, getRTL(), allowPhoneInitials);
    }
    return personaToConvert;
}
//# sourceMappingURL=PeoplePicker.js.map