sp-app-react
Version:
React based Controls and Utilities for building applications in SharePoint
232 lines (231 loc) • 10.7 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPPeoplePicker = void 0;
var react_1 = __importStar(require("react"));
var react_2 = require("@fluentui/react");
var formik_1 = require("formik");
var SPList_1 = require("./SPList");
var SPDisplayPerson_1 = require("./SPDisplayPerson");
var styles_1 = require("./styles");
//if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
var header = {
'Accept': 'application/json;odata=verbose',
'Content-Type': 'application/json',
'X-RequestDigest': location.hostname === "localhost" ? null : document.getElementById('__REQUESTDIGEST').value
};
var suggestionProps = {
suggestionsHeaderText: 'Suggested People',
mostRecentlyUsedHeaderText: 'Suggested Contacts',
noResultsFoundText: 'No results found',
loadingText: 'Loading',
showRemoveButtons: true,
suggestionsAvailableAlertText: 'People Picker Suggestions available',
suggestionsContainerAriaLabel: 'Suggested contacts'
};
var SPPeoplePicker = function (_a) {
var name = _a.name, label = _a.label, multiple = _a.multiple, required = _a.required, disabled = _a.disabled, readOnly = _a.readOnly;
var listContext = react_1.useContext(SPList_1.SPListContext);
var listProps = (listContext && listContext.getFieldProps && name) ? listContext.getFieldProps(name.replace("Id", "")) : {};
if (listProps && listProps.label)
label = listProps.label;
var defaultSelectedPersonsa = [];
var _b = __read(react_1.useState(defaultSelectedPersonsa), 2), selectedPersonas = _b[0], setSelectedPersonas = _b[1];
var _c = __read(formik_1.useField(name), 3), field = _c[0], meta = _c[1], helpers = _c[2];
react_1.useEffect(function () {
var newSelectedPersonas = __spreadArray([], __read(selectedPersonas));
if (((field.value && typeof (field.value) == "number") || (field.value && field.value.results && field.value.results.length > 0)) && selectedPersonas.length === 0) {
var users = field.value.results || [field.value];
Promise.all(users.map(function (i) {
if (newSelectedPersonas.map(function (p) { return p.Id; }).indexOf(i) == -1)
return fetch(_spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + i + ")", {
method: "GET",
headers: header
})
.then(function (response) {
return response.json();
})
.then(function (r) {
var persona = {
text: r.d.Title,
secondaryText: "",
key: r.d.LoginName,
Id: i
};
newSelectedPersonas.push(persona);
});
}))
.then(function () {
setSelectedPersonas(newSelectedPersonas);
});
}
});
var _onFilterChanged = function (filterText) {
if (filterText && filterText.length > 2) {
return _SearchUsers(filterText);
}
else
return [];
};
var _SearchUsers = function (filterText) {
var body = {
"queryParams": {
"QueryString": filterText,
"MaximumEntitySuggestions": 50,
"AllowEmailAddresses": false,
"AllowOnlyEmailAddresses": false,
"PrincipalType": 1,
"PrincipalSource": 15,
"SharePointGroupID": 0
}
};
return fetch(_spPageContextInfo.webAbsoluteUrl + "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.ClientPeoplePickerSearchUser", {
method: "POST",
body: JSON.stringify(body),
headers: header
})
.then(function (response) {
return response.json();
})
.then(function (response) {
var results = JSON.parse(response.d.ClientPeoplePickerSearchUser);
var personas = results.map(function (item) {
var persona = {
text: item.DisplayText,
secondaryText: item.EntityData.Title,
key: item.Key
};
return persona;
});
return personas.filter(function (p) {
return selectedPersonas.map(function (i) {
return i.key;
}).indexOf(p.key) == -1;
});
})
.catch(function (error) {
console.error(error);
return [];
});
};
var _onChange = function (items) {
var setValue = helpers.setValue;
var value = multiple ? {
"__metadata": {
"type": "Collection(Edm.Int32)"
},
"results": []
} : null;
if (items)
Promise.all(items.map(function (item) {
if (item.key && !item.Id)
return _ensureUser(item.key)
.then(function (id) {
item.Id = id;
});
}))
.then(function () {
// value.results = multiple ? items.map(item => {
// return item.Id ? item.Id : 0
// }) : items[0].Id
setValue(multiple ? {
"__metadata": {
"type": "Collection(Edm.Int32)"
},
"results": items.map(function (item) {
return item.Id ? item.Id : 0;
})
} : (items[0]) ? items[0].Id : null);
setSelectedPersonas(items);
});
};
var _ensureUser = function (logonName) {
return fetch(_spPageContextInfo.webAbsoluteUrl + "/_api/web/ensureuser('" + encodeURIComponent(logonName) + "')", {
method: "POST",
headers: header
})
.then(function (r) {
return r.json();
})
.then(function (r) {
return r.d.Id;
});
};
var pickerErrorStyles = {
text: {
borderColor: "rgb(164, 38, 44)"
}
};
var pickerStyles = {
text: {
borderColor: "rgb(50, 49, 48)"
}
};
var error = meta.error;
return (readOnly
? react_1.default.createElement("div", null,
react_1.default.createElement(react_2.Label, null, listProps ? listProps.label : name),
multiple
? react_1.default.createElement(react_2.Stack, null, field.value.results.map(function (i) { return react_1.default.createElement(SPDisplayPerson_1.SPDisplayPerson, { userId: i }); }))
: react_1.default.createElement(SPDisplayPerson_1.SPDisplayPerson, { userId: field.value }))
: react_1.default.createElement("div", null,
react_1.default.createElement(react_2.Label, { required: required, disabled: disabled }, label),
react_1.default.createElement(react_2.NormalPeoplePicker, { onResolveSuggestions: _onFilterChanged, disabled: disabled,
//onEmptyInputFocus={this._returnMostRecentlyUsed}
//getTextFromItem={(persona: IPersonaProps) => persona.text ? persona.text : ""}
getTextFromItem: function (persona) { return persona.text ? "zubdub" : ""; }, pickerSuggestionsProps: suggestionProps, className: 'ms-PeoplePicker', key: 'normal', onChange: _onChange, selectedItems: selectedPersonas, itemLimit: (multiple) ? undefined : 1, styles: (meta.touched && meta.error) ? pickerErrorStyles : disabled ? undefined : pickerStyles,
//defaultSelectedItems={selectedPersonas}
// onRemoveSuggestion={this._onRemoveSuggestion}
// onValidateInput={this._validateInput}
// removeButtonAriaLabel={'Remove'}
inputProps: {
onBlur: function () { return helpers.setTouched(true); },
//name: name,
//onFocus: (ev: React.FocusEvent<HTMLInputElement>) => helpers.setTouched(true),
'aria-label': 'People Picker'
} }),
(meta.touched && meta.error) ? (react_1.default.createElement("span", { id: "TextFieldDescription2" },
react_1.default.createElement("div", { role: "alert" },
react_1.default.createElement("div", { className: "ms-TextField-errorMessage", style: styles_1.errorMessage },
react_1.default.createElement("span", { "data-automation-id": "error-message" }, error && error.results ? error.results : error))))) : null));
};
exports.SPPeoplePicker = SPPeoplePicker;