office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
32 lines • 2.16 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, getId, toMatrix, classNamesFunction, getNativeProps, htmlElementProperties } from '../../Utilities';
import { FocusZone } from '../../FocusZone';
var getClassNames = classNamesFunction();
var GridBase = /** @class */ (function (_super) {
tslib_1.__extends(GridBase, _super);
function GridBase(props) {
var _this = _super.call(this, props) || this;
_this._id = getId();
return _this;
}
GridBase.prototype.render = function () {
var _this = this;
var _a = this.props, items = _a.items, columnCount = _a.columnCount, onRenderItem = _a.onRenderItem, positionInSet = _a.positionInSet, setSize = _a.setSize, styles = _a.styles;
var htmlProps = getNativeProps(this.props, htmlElementProperties, ['onBlur, aria-posinset, aria-setsize']);
var classNames = getClassNames(styles, { theme: this.props.theme });
// Array to store the cells in the correct row index
var rowsOfItems = toMatrix(items, columnCount);
var content = (React.createElement("table", tslib_1.__assign({}, htmlProps, { "aria-posinset": positionInSet, "aria-setsize": setSize, id: this._id, role: 'grid', className: classNames.root }),
React.createElement("tbody", null, rowsOfItems.map(function (rows, rowIndex) {
return (React.createElement("tr", { role: 'row', key: _this._id + '-' + rowIndex + '-row' }, rows.map(function (cell, cellIndex) {
return (React.createElement("td", { role: 'presentation', key: _this._id + '-' + cellIndex + '-cell', className: classNames.tableCell }, onRenderItem(cell, cellIndex)));
})));
}))));
// Create the table/grid
return this.props.doNotContainWithinFocusZone ? (content) : (React.createElement(FocusZone, { isCircularNavigation: this.props.shouldFocusCircularNavigate, className: classNames.focusedContainer, onBlur: this.props.onBlur }, content));
};
return GridBase;
}(BaseComponent));
export { GridBase };
//# sourceMappingURL=Grid.base.js.map