office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
55 lines • 3.6 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./DetailsRow.styles"], function (require, exports, tslib_1, React, Utilities_1, DetailsRow_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DetailsRowFields = /** @class */ (function (_super) {
tslib_1.__extends(DetailsRowFields, _super);
function DetailsRowFields(props) {
var _this = _super.call(this, props) || this;
_this.state = _this._getState(props);
return _this;
}
DetailsRowFields.prototype.componentWillReceiveProps = function (newProps) {
this.setState(this._getState(newProps));
};
DetailsRowFields.prototype.render = function () {
var _a = this.props, columns = _a.columns, columnStartIndex = _a.columnStartIndex, shimmer = _a.shimmer, rowClassNames = _a.rowClassNames, _b = _a.cellStyleProps, cellStyleProps = _b === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _b;
var cellContent = this.state.cellContent;
return (React.createElement("div", { className: rowClassNames.fields, "data-automationid": "DetailsRowFields", role: "presentation" }, columns.map(function (column, columnIndex) {
var width = typeof column.calculatedWidth === 'undefined'
? 'auto'
: column.calculatedWidth +
cellStyleProps.cellLeftPadding +
cellStyleProps.cellRightPadding +
(column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);
return (React.createElement("div", { key: columnIndex, role: column.isRowHeader ? 'rowheader' : 'gridcell', "aria-colindex": columnIndex + columnStartIndex + 1, className: Utilities_1.css(column.className, column.isMultiline && rowClassNames.isMultiline, column.isRowHeader && rowClassNames.isRowHeader, column.isIconOnly && shimmer && rowClassNames.shimmerIconPlaceholder, shimmer && rowClassNames.shimmer, rowClassNames.cell, column.isPadded ? rowClassNames.cellPadded : rowClassNames.cellUnpadded), style: { width: width }, "data-automationid": "DetailsRowCell", "data-automation-key": column.key }, cellContent[columnIndex]));
})));
};
DetailsRowFields.prototype._getState = function (props) {
var _this = this;
var item = props.item, itemIndex = props.itemIndex, onRenderItemColumn = props.onRenderItemColumn, shimmer = props.shimmer;
return {
cellContent: props.columns.map(function (column) {
var cellContent;
try {
var render = column.onRender || onRenderItemColumn;
cellContent = render && !shimmer ? render(item, itemIndex, column) : _this._getCellText(item, column);
}
catch (e) {
/* no-op */
}
return cellContent;
})
};
};
DetailsRowFields.prototype._getCellText = function (item, column) {
var value = item && column && column.fieldName ? item[column.fieldName] : '';
if (value === null || value === undefined) {
value = '';
}
return value;
};
return DetailsRowFields;
}(Utilities_1.BaseComponent));
exports.DetailsRowFields = DetailsRowFields;
});
//# sourceMappingURL=DetailsRowFields.js.map