gd-sprest-js/build/fabric/templates/peoplepicker.js

SharePoint 2013/Online js components.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var templates_1 = require("../templates");
var persona_1 = require("./persona");
/**
 * People Picker
 */
exports.PeoplePicker = function (props) {
    // Group
    var group = function (title, searchText, results) {
        if (title === void 0) { title = ""; }
        if (searchText === void 0) { searchText = ""; }
        // Return the template
        return [
            '<div class="ms-PeoplePicker-resultGroup">',
            '<div class="ms-PeoplePicker-resultGroupTitle">',
            title,
            '</div>',
            '</div>',
            results ? results : result(),
            '<button class="ms-PeoplePicker-searchMore"' + (searchText ? '' : ' style="display: none;"') + '>',
            '<div class="ms-PeoplePicker-searchMoreIcon">',
            '<i class="ms-Icon ms-Icon--Search"></i>',
            '</div>',
            '<div class="ms-PeoplePicker-searchMoreText">',
            searchText,
            '</div>',
            '</button>',
            '</div>',
        ].join('\n');
    };
    // Header
    var header = function () {
        // Return the template
        return templates_1.Label({
            className: "field-label",
            description: props.description,
            isRequired: props.required,
            text: props.label
        }) || "";
    };
    // Result
    var result = function (user) {
        // Ensure the user exists
        if (user) {
            return [
                '<div class="ms-PeoplePicker-result" tabindex="1">',
                '<div class="ms-Persona ms-Persona--sm" data-user=\'' + JSON.stringify(user) + '\'>',
                '<div class="ms-Persona-imageArea"></div>',
                '<div class="ms-Persona-details">',
                '<div class="ms-Persona-primaryText">' + user.DisplayText + '</div>',
                '<div class="ms-Persona-secondaryText">' + ((user.EntityData ? user.EntityData.Email : null) || "") + '</div>',
                '</div>',
                '</div>',
                '<button class="ms-PeoplePicker-resultAction" style="display: none;"></button>',
                '</div>'
            ].join('\n');
        }
        // Return an empty persona
        return [
            '<div class="ms-PeoplePicker-result" style="display: none;">',
            '<div class="ms-Persona"></div>',
            '<button class="ms-PeoplePicker-resultAction"></button>',
            '</div>',
        ].join('\n');
    };
    // Results
    var results = function (title, users, searchText) {
        if (title === void 0) { title = ""; }
        if (users === void 0) { users = []; }
        if (searchText === void 0) { searchText = ""; }
        var personas = [];
        // Parse the users
        for (var i = 0; i < users.length; i++) {
            // Add the persona
            personas.push(persona_1.Persona(users[i]));
        }
        // Return the template
        return [
            '<div class="ms-PeoplePicker-results">',
            group(title, searchText),
            '<div class="selected-users">',
            personas.join('\n'),
            '</div>',
            '</div>'
        ].join('\n');
    };
    // Search Box
    var searchBox = function () {
        // Return the template
        return [
            '<div class="ms-PeoplePicker-searchBox">',
            '<div class="ms-TextField ms-TextField--textFieldUnderlined">',
            '<input class="ms-TextField-field" type="text" value="" placeholder="Search"></input>',
            '</div>',
            '</div>',
        ].join('\n');
    };
    return {
        group: group,
        header: header,
        result: result,
        results: results,
        searchBox: searchBox
    };
};