office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
259 lines • 14.7 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BaseComponent, assign, css, shallowCompare, getNativeProps, divProperties, createRef } from '../../Utilities';
import { CheckboxVisibility } from './DetailsList.types';
import { DetailsRowCheck } from './DetailsRowCheck';
import { GroupSpacer } from '../GroupedList/GroupSpacer';
import { DetailsRowFields } from './DetailsRowFields';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
import { CollapseAllVisibility } from '../../GroupedList';
import { classNamesFunction } from '../../Utilities';
var getClassNames = classNamesFunction();
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
var NO_COLUMNS = [];
var DetailsRowBase = /** @class */ (function (_super) {
tslib_1.__extends(DetailsRowBase, _super);
function DetailsRowBase(props) {
var _this = _super.call(this, props) || this;
_this._cellMeasurer = createRef();
_this._focusZone = createRef();
_this._onRootRef = function (focusZone) {
if (focusZone) {
// Need to resolve the actual DOM node, not the component. The element itself will be used for drag/drop and focusing.
_this._root = ReactDOM.findDOMNode(focusZone);
}
else {
_this._root = undefined;
}
};
_this.state = {
selectionState: _this._getSelectionState(props),
columnMeasureInfo: undefined,
isDropping: false,
groupNestingDepth: props.groupNestingDepth
};
_this._droppingClassNames = '';
_this._updateDroppingState = _this._updateDroppingState.bind(_this);
_this._onToggleSelection = _this._onToggleSelection.bind(_this);
return _this;
}
DetailsRowBase.prototype.componentDidMount = function () {
var dragDropHelper = this.props.dragDropHelper;
if (dragDropHelper) {
this._dragDropSubscription = dragDropHelper.subscribe(this._root, this._events, this._getRowDragDropOptions());
}
this._events.on(this.props.selection, SELECTION_CHANGE, this._onSelectionChanged);
if (this.props.onDidMount && this.props.item) {
// If the item appears later, we should wait for it before calling this method.
this._hasMounted = true;
this.props.onDidMount(this);
}
};
DetailsRowBase.prototype.componentDidUpdate = function (previousProps) {
var state = this.state;
var _a = this.props, item = _a.item, onDidMount = _a.onDidMount;
var columnMeasureInfo = state.columnMeasureInfo;
if (this.props.itemIndex !== previousProps.itemIndex ||
this.props.item !== previousProps.item ||
this.props.dragDropHelper !== previousProps.dragDropHelper) {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
if (this.props.dragDropHelper) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root, this._events, this._getRowDragDropOptions());
}
}
if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.current) {
var newWidth = this._cellMeasurer.current.getBoundingClientRect().width;
columnMeasureInfo.onMeasureDone(newWidth);
this.setState({
columnMeasureInfo: undefined
});
}
if (item && onDidMount && !this._hasMounted) {
this._hasMounted = true;
onDidMount(this);
}
};
DetailsRowBase.prototype.componentWillUnmount = function () {
var _a = this.props, item = _a.item, onWillUnmount = _a.onWillUnmount;
// Only call the onWillUnmount callback if we have an item.
if (onWillUnmount && item) {
onWillUnmount(this);
}
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
};
DetailsRowBase.prototype.componentWillReceiveProps = function (newProps) {
this.setState({
selectionState: this._getSelectionState(newProps),
groupNestingDepth: newProps.groupNestingDepth
});
};
DetailsRowBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (this.props.useReducedRowRenderer) {
if (this.state.selectionState) {
var newSelectionState = this._getSelectionState(nextProps);
if (this.state.selectionState.isSelected !== newSelectionState.isSelected) {
return true;
}
}
return shallowCompare(this.props, nextProps);
}
else {
return true;
}
};
DetailsRowBase.prototype.render = function () {
var _a = this.props, className = _a.className, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, _c = _a.onRenderCheck, onRenderCheck = _c === void 0 ? this._onRenderCheck : _c, onRenderItemColumn = _a.onRenderItemColumn, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, getRowAriaDescribedBy = _a.getRowAriaDescribedBy, checkButtonAriaLabel = _a.checkButtonAriaLabel, checkboxCellClassName = _a.checkboxCellClassName,
/** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */
_d = _a.rowFieldsAs,
/** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */
RowFields = _d === void 0 ? DetailsRowFields : _d, selection = _a.selection, indentWidth = _a.indentWidth, shimmer = _a.shimmer, compact = _a.compact, theme = _a.theme, styles = _a.styles;
var _e = this.state, columnMeasureInfo = _e.columnMeasureInfo, isDropping = _e.isDropping, groupNestingDepth = _e.groupNestingDepth;
var _f = this.state.selectionState, _g = _f.isSelected, isSelected = _g === void 0 ? false : _g, _h = _f.isSelectionModal, isSelectionModal = _h === void 0 ? false : _h;
var isDraggable = Boolean(dragDropEvents && dragDropEvents.canDrag && dragDropEvents.canDrag(item));
var droppingClassName = isDropping
? this._droppingClassNames
? this._droppingClassNames
: DEFAULT_DROPPING_CSS_CLASS
: '';
var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : undefined;
var ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;
var canSelect = !!selection && selection.canSelectItem(item, itemIndex);
var isContentUnselectable = selectionMode === SelectionMode.multiple;
var showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;
var ariaSelected = selectionMode === SelectionMode.none ? undefined : isSelected;
var classNames = getClassNames(styles, {
theme: theme,
isSelected: isSelected,
canSelect: !isContentUnselectable,
anySelected: isSelectionModal,
checkboxCellClassName: checkboxCellClassName,
droppingClassName: droppingClassName,
className: className,
compact: compact
});
var rowFields = (React.createElement(RowFields, { rowClassNames: classNames, columns: columns, item: item, itemIndex: itemIndex, columnStartIndex: showCheckbox ? 1 : 0, onRenderItemColumn: onRenderItemColumn, shimmer: shimmer }));
// Rendering Shimmer Animation outside the focus zone
if (shimmer) {
return (React.createElement("div", { className: css(showCheckbox && classNames.shimmerLeftBorder, !compact && classNames.shimmerBottomBorder) }, rowFields));
}
return (React.createElement(FocusZone, tslib_1.__assign({}, getNativeProps(this.props, divProperties), { direction: FocusZoneDirection.horizontal, ref: this._onRootRef, componentRef: this._focusZone, role: "row", "aria-label": ariaLabel, ariaDescribedBy: ariaDescribedBy, className: css(classNames.root), "data-is-focusable": true, "data-selection-index": itemIndex, "data-item-index": itemIndex, "aria-rowindex": itemIndex + 1, "data-is-draggable": isDraggable, draggable: isDraggable, "data-automationid": "DetailsRow", style: { minWidth: viewport ? viewport.width : 0 }, "aria-selected": ariaSelected, allowFocusRoot: true }),
showCheckbox && (React.createElement("div", { role: "gridcell", "aria-colindex": 1, "data-selection-toggle": true, className: classNames.checkCell }, onRenderCheck({
selected: isSelected,
anySelected: isSelectionModal,
title: checkButtonAriaLabel,
canSelect: canSelect,
compact: compact,
className: classNames.check,
theme: theme,
isVisible: checkboxVisibility === CheckboxVisibility.always
}))),
React.createElement(GroupSpacer, { indentWidth: indentWidth, count: groupNestingDepth - (this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0) }),
item && rowFields,
columnMeasureInfo && (React.createElement("span", { role: "presentation", className: css(classNames.cellMeasurer, classNames.cell), ref: this._cellMeasurer },
React.createElement(RowFields, { rowClassNames: classNames, columns: [columnMeasureInfo.column], item: item, itemIndex: itemIndex, columnStartIndex: (showCheckbox ? 1 : 0) + columns.length, onRenderItemColumn: onRenderItemColumn }))),
React.createElement("span", { role: "checkbox", className: css(classNames.checkCover), "aria-checked": isSelected, "data-selection-toggle": true })));
};
/**
* measure cell at index. and call the call back with the measured cell width when finish measure
*
* @param {number} index (the cell index)
* @param {(width: number) => void} onMeasureDone (the call back function when finish measure)
*/
DetailsRowBase.prototype.measureCell = function (index, onMeasureDone) {
var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
var column = assign({}, columns[index]);
column.minWidth = 0;
column.maxWidth = 999999;
delete column.calculatedWidth;
this.setState({
columnMeasureInfo: {
index: index,
column: column,
onMeasureDone: onMeasureDone
}
});
};
DetailsRowBase.prototype.focus = function (forceIntoFirstElement) {
if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }
return !!this._focusZone.current && this._focusZone.current.focus(forceIntoFirstElement);
};
DetailsRowBase.prototype._onRenderCheck = function (props) {
return React.createElement(DetailsRowCheck, tslib_1.__assign({}, props));
};
DetailsRowBase.prototype._getSelectionState = function (props) {
var itemIndex = props.itemIndex, selection = props.selection;
return {
isSelected: !!selection && selection.isIndexSelected(itemIndex),
isSelectionModal: !!selection && !!selection.isModal && selection.isModal()
};
};
DetailsRowBase.prototype._onSelectionChanged = function () {
var selectionState = this._getSelectionState(this.props);
if (!shallowCompare(selectionState, this.state.selectionState)) {
this.setState({
selectionState: selectionState
});
}
};
DetailsRowBase.prototype._onToggleSelection = function () {
var selection = this.props.selection;
if (selection && this.props.itemIndex > -1) {
selection.toggleIndexSelected(this.props.itemIndex);
}
};
DetailsRowBase.prototype._getRowDragDropOptions = function () {
var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
var options = {
eventMap: eventsToRegister,
selectionIndex: itemIndex,
context: { data: item, index: itemIndex },
canDrag: dragDropEvents.canDrag,
canDrop: dragDropEvents.canDrop,
onDragStart: dragDropEvents.onDragStart,
updateDropState: this._updateDroppingState,
onDrop: dragDropEvents.onDrop,
onDragEnd: dragDropEvents.onDragEnd
};
return options;
};
/**
* update isDropping state based on the input value, which is used to change style during drag and drop
*
* when change to true, that means drag enter. we will add default dropping class name
* or the custom dropping class name (return result from onDragEnter) to the root elemet.
*
* when change to false, that means drag leave. we will remove the dropping class name from root element.
*
* @private
* @param {boolean} newValue (new isDropping state value)
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
*/
DetailsRowBase.prototype._updateDroppingState = function (newValue, event) {
var _a = this.state, selectionState = _a.selectionState, isDropping = _a.isDropping;
var _b = this.props, dragDropEvents = _b.dragDropEvents, item = _b.item;
if (!newValue) {
if (dragDropEvents.onDragLeave) {
dragDropEvents.onDragLeave(item, event);
}
}
else {
if (dragDropEvents.onDragEnter) {
this._droppingClassNames = dragDropEvents.onDragEnter(item, event);
}
}
if (isDropping !== newValue) {
this.setState({ selectionState: selectionState, isDropping: newValue });
}
};
return DetailsRowBase;
}(BaseComponent));
export { DetailsRowBase };
//# sourceMappingURL=DetailsRow.base.js.map