mui-spfx-controls
Version:
SPFx component library built with MUI
141 lines • 6.29 kB
JavaScript
import { __assign, __awaiter, __generator, __rest } from "tslib";
import { FieldTypes } from '@pnp/sp/fields';
import React, { useEffect, useState } from 'react';
import { PeoplePicker } from '../components/PeoplePicker';
import { PeopleService } from '../services/PeopleService';
/**
* Wrapper component for PeoplePicker, resolving user details based on query.
*/
var WrapperPeoplePicker = function (_a) {
var api = _a.api, context = _a.context, query = _a.query, multiple = _a.multiple, onChange = _a.onChange, props = __rest(_a, ["api", "context", "query", "multiple", "onChange"]);
var peopleService = new PeopleService(context);
var _b = useState(null), resolvedUser = _b[0], setResolvedUser = _b[1];
var _c = useState(true), loading = _c[0], setLoading = _c[1];
useEffect(function () {
var resolveUser = function () { return __awaiter(void 0, void 0, void 0, function () {
var resolvedUserResponse, _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
_b.trys.push([0, 2, 3, 4]);
return [4 /*yield*/, peopleService.resolveUser(context, query)];
case 1:
resolvedUserResponse = _b.sent();
setResolvedUser(resolvedUserResponse);
return [3 /*break*/, 4];
case 2:
_a = _b.sent();
setResolvedUser(null);
return [3 /*break*/, 4];
case 3:
setLoading(false);
return [7 /*endfinally*/];
case 4: return [2 /*return*/];
}
});
}); };
resolveUser();
}, []);
return (React.createElement(PeoplePicker, __assign({ context: context, loading: loading, value: resolvedUser, onChange: onChange }, props)));
};
/**
* Generates a dashboard column configuration for use in MUI DataGrid.
*
* @param {WebPartContext} context - SharePoint WebPart context.
* @param {IFieldInfo} currentField - SharePoint field information.
* @param {boolean | undefined} editable - Whether the column is editable.
* @param {boolean | undefined} resizable - Whether the column is resizable.
* @returns {GridColDef} - Column definition for MUI DataGrid.
*/
export var generateDashboardColumn = function (context, currentField, editable, resizable) {
var _a;
switch (currentField.FieldTypeKind) {
case FieldTypes.User:
return {
flex: 1,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
valueFormatter: function (params) { return params.Title; },
resizable: resizable,
renderEditCell: function (params) {
return (React.createElement(WrapperPeoplePicker, { api: params.api, context: context, query: params.value.EMail, onChange: function (selectedUser) {
params.api.setEditCellValue({
id: params.id,
field: params.field,
value: Array.isArray(selectedUser) ? selectedUser.map(function (user) { return ({
Id: user.EntityData.SPUserID,
EMail: user.EntityData.Email,
Title: user.DisplayText,
}); }) : {
Id: selectedUser.EntityData.SPUserID,
EMail: selectedUser.EntityData.Email,
Title: selectedUser.DisplayText,
},
});
} }));
},
};
case FieldTypes.Boolean:
return {
flex: 0.5,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'boolean',
resizable: resizable,
};
case FieldTypes.DateTime:
return {
flex: 1,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
valueGetter: function (params) {
return new Date(params);
},
type: 'dateTime',
resizable: resizable,
};
case FieldTypes.Choice:
case FieldTypes.MultiChoice:
return {
flex: 2,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'singleSelect',
resizable: resizable,
valueOptions: (_a = currentField.Choices) !== null && _a !== void 0 ? _a : [],
};
case FieldTypes.Number:
case FieldTypes.Integer:
return {
flex: 2,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'number',
resizable: resizable,
};
case FieldTypes.Note:
return {
flex: 4,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'string',
resizable: resizable,
};
default:
return {
flex: 2,
field: currentField.InternalName,
headerName: currentField.Title,
editable: !currentField.ReadOnlyField && editable,
type: 'string',
resizable: resizable,
};
}
};
//# sourceMappingURL=generateDashboardColumn.js.map