@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
98 lines • 4.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Grid = void 0;
const tslib_1 = require("tslib");
/* eslint-disable no-prototype-builtins */
/* eslint-disable no-unused-expressions */
const React = tslib_1.__importStar(require("react"));
const PropertyControlStrings_1 = tslib_1.__importDefault(require("PropertyControlStrings"));
const react_1 = require("@fluentui/react");
const react_components_1 = require("@fluentui/react-components");
const columnSizingOptions = {
title: {
minWidth: 40,
defaultWidth: 80,
},
description: {
defaultWidth: 80,
minWidth: 60,
idealWidth: 80,
},
};
const Grid = (props) => {
const { items, onSelected, defaultSelectedItems, multiSelect, column1Label, column2Label } = props;
const selectionMode = React.useMemo(() => multiSelect ? "multiselect" : "single", [multiSelect]);
const [selectedRows, setSelectedRows] = React.useState(() => {
if (defaultSelectedItems) {
const set = new Set();
for (const item of defaultSelectedItems) {
const index = items.findIndex((i) => i.key === item.key);
if (index > -1) {
set.add(index);
}
}
return set;
}
return new Set([]);
});
const columns = [
(0, react_components_1.createTableColumn)({
columnId: "title",
compare: (a, b) => {
if (typeof a.title === "string" && typeof b.title === "string") {
return a.title.localeCompare(b.title);
}
return 0;
},
renderHeaderCell: () => {
return React.createElement(react_components_1.Body1Strong, null, column1Label !== null && column1Label !== void 0 ? column1Label : PropertyControlStrings_1.default.gridControlColumn1Label);
},
renderCell: (item) => {
return (React.createElement(react_components_1.TableCellLayout, { media: React.isValidElement(item.icon) ? item.icon : React.createElement(react_1.FontIcon, { iconName: item.icon }) }, item.title));
},
}),
(0, react_components_1.createTableColumn)({
columnId: "description",
compare: (a, b) => {
if (typeof a.description === "string" && typeof b.description === "string") {
return a.description.localeCompare(b.description);
}
return 0;
},
renderHeaderCell: () => {
return React.createElement(react_components_1.Body1Strong, null, column2Label !== null && column2Label !== void 0 ? column2Label : PropertyControlStrings_1.default.gridControlColumn2Label,
" ");
},
renderCell: (item) => {
return (React.createElement(react_components_1.TableCellLayout, null, React.isValidElement(item.description) ? item.description : item.description));
},
}),
];
const onSelectionChange = React.useCallback((e, data) => {
const entries = data.selectedItems.entries();
// select all entries in the map
const itemsSelected = [];
const toArray = Array.from(entries);
for (const item of toArray) {
const rowId = item[0];
const itemSelected = items[rowId];
// code to be executed for each itemSelected
itemsSelected.push(itemSelected);
}
onSelected(itemsSelected);
setSelectedRows(data.selectedItems);
}, [onSelected, items]);
const [sortState, setSortState] = React.useState({
sortColumn: "title",
sortDirection: "ascending",
});
const onSortChange = (e, nextSortState) => {
setSortState(nextSortState);
};
return (React.createElement(react_components_1.DataGrid, { items: items, columns: columns, selectionMode: selectionMode, selectedItems: selectedRows, onSelectionChange: onSelectionChange, sortable: true, sortState: sortState, onSortChange: onSortChange, resizableColumns: true, columnSizingOptions: columnSizingOptions },
React.createElement(react_components_1.DataGridHeader, null,
React.createElement(react_components_1.DataGridRow, null, ({ renderHeaderCell }) => React.createElement(react_components_1.DataGridHeaderCell, null, renderHeaderCell()))),
React.createElement(react_components_1.DataGridBody, null, ({ item, rowId }) => (React.createElement(react_components_1.DataGridRow, { key: rowId, selectionCell: { radioIndicator: { "aria-label": "Select row" } } }, ({ renderCell }) => React.createElement(react_components_1.DataGridCell, null, renderCell(item)))))));
};
exports.Grid = Grid;
//# sourceMappingURL=Grid.js.map