@fluentui/react
Version:
Reusable React components for building web experiences.
71 lines • 4.25 kB
JavaScript
import * as React from 'react';
import { composeRenderFunction, css } from '../../Utilities';
import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';
var getCellText = function (item, column) {
var value = item && column && column.fieldName ? item[column.fieldName] : '';
if (value === null || value === undefined) {
value = '';
}
if (typeof value === 'boolean') {
return value.toString();
}
return value;
};
/**
* Component for rendering a row's cells in a `DetailsList`.
*
* {@docCategory DetailsList}
*/
export var DetailsRowFields = function (props) {
var columns = props.columns, rowClassNames = props.rowClassNames, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a, item = props.item, itemIndex = props.itemIndex, isSelected = props.isSelected, onRenderItemColumn = props.onRenderItemColumn, getCellValueKey = props.getCellValueKey, propsOnRenderField = props.onRenderField, cellsByColumn = props.cellsByColumn, enableUpdateAnimations = props.enableUpdateAnimations, rowHeaderId = props.rowHeaderId;
var cellValueKeysRef = React.useRef();
var cellValueKeys = cellValueKeysRef.current || (cellValueKeysRef.current = {});
var defaultOnRenderField = React.useCallback(function (fieldProps) {
var column = fieldProps.column, cellValueKey = fieldProps.cellValueKey, className = fieldProps.className, onRender = fieldProps.onRender, fieldItem = fieldProps.item, fieldItemIndex = fieldProps.itemIndex;
var width = typeof column.calculatedWidth === 'undefined'
? 'auto'
: column.calculatedWidth +
cellStyleProps.cellLeftPadding +
cellStyleProps.cellRightPadding +
(column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);
var key = "".concat(column.key).concat(cellValueKey !== undefined ? "-".concat(cellValueKey) : '');
return (React.createElement("div", { key: key, id: column.isRowHeader ? rowHeaderId : undefined, role: column.isRowHeader ? 'rowheader' : 'gridcell', className: css(column.className, column.isMultiline && rowClassNames.isMultiline, column.isRowHeader && rowClassNames.isRowHeader, rowClassNames.cell, column.isPadded ? rowClassNames.cellPadded : rowClassNames.cellUnpadded, className), style: { width: width }, "data-automationid": "DetailsRowCell", "data-automation-key": column.key }, onRender(fieldItem, fieldItemIndex, column)));
}, [rowClassNames, cellStyleProps, rowHeaderId]);
return (React.createElement("div", { className: rowClassNames.fields, "data-automationid": "DetailsRowFields", role: "presentation" }, columns.map(function (column) {
var _a = column.getValueKey, getValueKey = _a === void 0 ? getCellValueKey : _a;
var onRender = (cellsByColumn && column.key in cellsByColumn && (function () { return cellsByColumn[column.key]; })) ||
column.onRender ||
onRenderItemColumn ||
defaultOnRender;
var onRenderField = defaultOnRenderField;
if (column.onRenderField) {
onRenderField = composeRenderFunction(column.onRenderField, onRenderField);
}
if (propsOnRenderField) {
onRenderField = composeRenderFunction(propsOnRenderField, onRenderField);
}
var previousValueKey = cellValueKeys[column.key];
var cellValueKey = enableUpdateAnimations && getValueKey ? getValueKey(item, itemIndex, column) : undefined;
var showAnimation = false;
if (cellValueKey !== undefined && previousValueKey !== undefined && cellValueKey !== previousValueKey) {
showAnimation = true;
}
cellValueKeys[column.key] = cellValueKey;
return onRenderField({
item: item,
itemIndex: itemIndex,
isSelected: isSelected,
column: column,
cellValueKey: cellValueKey,
className: showAnimation ? rowClassNames.cellAnimation : undefined,
onRender: onRender,
});
})));
};
function defaultOnRender(item, index, column) {
if (!item || !column) {
return null;
}
return getCellText(item, column);
}
//# sourceMappingURL=DetailsRowFields.js.map