@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
83 lines • 4.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridLayout = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var GridLayout_module_scss_1 = tslib_1.__importDefault(require("./GridLayout.module.scss"));
// Used to render list grid
var FocusZone_1 = require("@fluentui/react/lib/FocusZone");
var List_1 = require("@fluentui/react/lib/List");
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
/**
* Grid layout component
*/
var GridLayout = /** @class */ (function (_super) {
tslib_1.__extends(GridLayout, _super);
/**
* Constructor method
*/
function GridLayout(props) {
var _a, _b, _c, _d, _e;
var _this = _super.call(this, props) || this;
//Get constants from SCSS if they are not passed in props
_this.ROWS_PER_PAGE = (_a = _this.props.rowsPerPage) !== null && _a !== void 0 ? _a : +GridLayout_module_scss_1.default.rowsPerPage;
_this.MAX_WIDTH = (_b = _this.props.itemMaxWidth) !== null && _b !== void 0 ? _b : +GridLayout_module_scss_1.default.maxWidth;
_this.MIN_WIDTH = (_c = _this.props.itemMinWidth) !== null && _c !== void 0 ? _c : +GridLayout_module_scss_1.default.minWidth;
_this.PADDING = (_d = _this.props.itemPadding) !== null && _d !== void 0 ? _d : +GridLayout_module_scss_1.default.padding;
_this.COMPACT_THRESHOLD = (_e = _this.props.compactThreshold) !== null && _e !== void 0 ? _e : +GridLayout_module_scss_1.default.compactThreshold;
/**
* Calculates how many items in the page
*/
_this._getItemCountForPage = function (itemIndex, surfaceRect) {
if (itemIndex === 0) {
_this._isCompact = surfaceRect.width < _this.COMPACT_THRESHOLD;
if (_this._isCompact) {
_this._columnCount = 1;
_this._columnWidth = surfaceRect.width;
return _this.props.items.length;
}
else {
_this._columnCount = Math.ceil(surfaceRect.width / (_this.MAX_WIDTH));
_this._columnWidth = Math.max(_this.MIN_WIDTH, Math.floor(surfaceRect.width / _this._columnCount) + Math.floor(_this.PADDING / _this._columnCount));
_this._rowHeight = _this._columnWidth;
}
}
return _this._columnCount * _this.ROWS_PER_PAGE;
};
/**
* Calculates the page height for the grid
*/
_this._getPageHeight = function () {
if (_this._isCompact) {
return _this.props.items.length * _this._rowHeight;
}
return _this._rowHeight * _this.ROWS_PER_PAGE;
};
/**
* Calls the passed onRenderCell
*/
_this._onRenderCell = function (item, index) {
var isCompact = _this._isCompact;
var cellPadding = index % _this._columnCount !== _this._columnCount - 1 && !isCompact ? _this.PADDING : 0;
var finalSize = { width: _this._columnWidth, height: _this._rowHeight };
var cellWidth = isCompact ? _this._columnWidth + _this.PADDING : _this._columnWidth - _this.PADDING;
return (React.createElement("div", { style: {
width: "".concat(cellWidth, "px"),
marginRight: "".concat(cellPadding, "px")
} }, _this.props.onRenderGridItem(item, finalSize, isCompact)));
};
telemetry.track('ReactGridLayout');
return _this;
}
/**
* Renders the grid control
*/
GridLayout.prototype.render = function () {
return (React.createElement("div", { className: GridLayout_module_scss_1.default.gridLayout, role: "group", "aria-label": this.props.ariaLabel },
React.createElement(FocusZone_1.FocusZone, null,
React.createElement(List_1.List, tslib_1.__assign({ role: "presentation", className: GridLayout_module_scss_1.default.gridLayoutList, items: this.props.items, getItemCountForPage: this._getItemCountForPage, getPageHeight: this._getPageHeight, onRenderCell: this._onRenderCell }, this.props.listProps)))));
};
return GridLayout;
}(React.Component));
exports.GridLayout = GridLayout;
//# sourceMappingURL=GridLayout.js.map