@fluentui/react
Version:
Reusable React components for building web experiences.
269 lines • 15.6 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import * as React from 'react';
import { Icon, FontIcon } from '../../Icon';
import { initializeComponentRef, EventGroup, Async, classNamesFunction, composeRenderFunction } from '../../Utilities';
import { ColumnActionsMode } from './DetailsList.types';
import { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
var getClassNames = classNamesFunction();
var TRANSITION_DURATION_DRAG = 200; // ms
var TRANSITION_DURATION_DROP = 1500; // ms
var CLASSNAME_ADD_INTERVAL = 20; // ms
var defaultOnRenderHeader = function (classNames) {
return function (props) {
if (!props) {
return null;
}
if (props.column.isIconOnly) {
return React.createElement("span", { className: classNames.accessibleLabel }, props.column.name);
}
return React.createElement(React.Fragment, null, props.column.name);
};
};
/**
* Component for rendering columns in a `DetailsList`.
*
* {@docCategory DetailsList}
*/
var DetailsColumnBase = /** @class */ (function (_super) {
__extends(DetailsColumnBase, _super);
function DetailsColumnBase(props) {
var _this = _super.call(this, props) || this;
_this._root = React.createRef();
_this._tooltipRef = React.createRef();
_this._onRenderFilterIcon = function (classNames) {
return function (props) {
var columnProps = props.columnProps, iconProps = __rest(props, ["columnProps"]);
var IconComponent = (columnProps === null || columnProps === void 0 ? void 0 : columnProps.useFastIcons) ? FontIcon : Icon;
return React.createElement(IconComponent, __assign({}, iconProps));
};
};
_this._onRenderColumnHeaderTooltip = function (tooltipHostProps) {
return React.createElement("span", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);
};
_this._onColumnClick = function (ev) {
var _a = _this.props, onColumnClick = _a.onColumnClick, column = _a.column;
if (column.columnActionsMode === ColumnActionsMode.disabled) {
return;
}
if (column.onColumnClick) {
column.onColumnClick(ev, column);
}
if (onColumnClick) {
onColumnClick(ev, column);
}
};
_this._onColumnBlur = function () {
_this._tooltipRef.current && _this._tooltipRef.current.dismiss();
};
_this._onColumnFocus = function () {
_this._tooltipRef.current && _this._tooltipRef.current.show();
};
_this._onDragStart = function (item, itemIndex, selectedItems, event) {
var classNames = _this._classNames;
if (itemIndex) {
_this._updateHeaderDragInfo(itemIndex);
_this._root.current.classList.add(classNames.borderWhileDragging);
_this._async.setTimeout(function () {
if (_this._root.current) {
_this._root.current.classList.add(classNames.noBorderWhileDragging);
}
}, CLASSNAME_ADD_INTERVAL);
}
};
_this._onDragEnd = function (item, event) {
var classNames = _this._classNames;
if (event) {
_this._updateHeaderDragInfo(-1, event);
}
_this._root.current.classList.remove(classNames.borderWhileDragging);
_this._root.current.classList.remove(classNames.noBorderWhileDragging);
};
_this._updateHeaderDragInfo = function (itemIndex, event) {
/* eslint-disable deprecation/deprecation */
if (_this.props.setDraggedItemIndex) {
_this.props.setDraggedItemIndex(itemIndex);
}
/* eslint-enable deprecation/deprecation */
if (_this.props.updateDragInfo) {
_this.props.updateDragInfo({ itemIndex: itemIndex }, event);
}
};
_this._onColumnContextMenu = function (ev) {
var _a = _this.props, onColumnContextMenu = _a.onColumnContextMenu, column = _a.column;
if (column.onColumnContextMenu) {
column.onColumnContextMenu(column, ev);
ev.preventDefault();
}
if (onColumnContextMenu) {
onColumnContextMenu(column, ev);
ev.preventDefault();
}
};
_this._onRootMouseDown = function (ev) {
var isDraggable = _this.props.isDraggable;
// Ignore anything except the primary button.
if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {
ev.stopPropagation();
}
};
initializeComponentRef(_this);
_this._async = new Async(_this);
_this._events = new EventGroup(_this);
return _this;
}
DetailsColumnBase.prototype.render = function () {
var _a = this.props, column = _a.column, parentId = _a.parentId, isDraggable = _a.isDraggable, styles = _a.styles, theme = _a.theme, _b = _a.cellStyleProps, cellStyleProps = _b === void 0 ? DEFAULT_CELL_STYLE_PROPS : _b, _c = _a.useFastIcons, useFastIcons = _c === void 0 ? true : _c;
var _d = this.props.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _d === void 0 ? this._onRenderColumnHeaderTooltip : _d;
this._classNames = getClassNames(styles, {
theme: theme,
headerClassName: column.headerClassName,
iconClassName: column.iconClassName,
isActionable: column.columnActionsMode !== ColumnActionsMode.disabled,
isEmpty: !column.name,
isIconVisible: column.isSorted || column.isGrouped || column.isFiltered,
isPadded: column.isPadded,
isIconOnly: column.isIconOnly,
cellStyleProps: cellStyleProps,
transitionDurationDrag: TRANSITION_DURATION_DRAG,
transitionDurationDrop: TRANSITION_DURATION_DROP,
});
var classNames = this._classNames;
var IconComponent = useFastIcons ? FontIcon : Icon;
var onRenderFilterIcon = column.onRenderFilterIcon
? composeRenderFunction(column.onRenderFilterIcon, this._onRenderFilterIcon(this._classNames))
: this._onRenderFilterIcon(this._classNames);
var onRenderHeader = column.onRenderHeader
? composeRenderFunction(column.onRenderHeader, defaultOnRenderHeader(this._classNames))
: defaultOnRenderHeader(this._classNames);
var hasInnerButton = column.columnActionsMode !== ColumnActionsMode.disabled &&
(column.onColumnClick !== undefined || this.props.onColumnClick !== undefined);
// use aria-describedby to point to the tooltip if the tooltip is not using the ariaLabel string
var shouldAssociateTooltip = this.props.onRenderColumnHeaderTooltip
? !column.ariaLabel
: this._hasAccessibleDescription();
var accNameDescription = {
'aria-label': column.ariaLabel ? column.ariaLabel : column.isIconOnly ? column.name : undefined,
'aria-labelledby': column.ariaLabel || column.isIconOnly ? undefined : "".concat(parentId, "-").concat(column.key, "-name"),
'aria-describedby': shouldAssociateTooltip ? "".concat(parentId, "-").concat(column.key, "-tooltip") : undefined,
};
return (React.createElement(React.Fragment, null,
React.createElement("div", __assign({ key: column.key, ref: this._root, role: 'columnheader' }, (!hasInnerButton && accNameDescription), { "aria-sort": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none', "data-is-focusable": !hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined, className: classNames.root, "data-is-draggable": isDraggable, draggable: isDraggable, style: {
width: (column.calculatedWidth || 0) +
cellStyleProps.cellLeftPadding +
cellStyleProps.cellRightPadding +
(column.isPadded ? cellStyleProps.cellExtraRightPadding : 0),
}, "data-automationid": 'ColumnsHeaderColumn', "data-item-key": column.key, onBlur: this._onColumnBlur, onFocus: this._onColumnFocus }),
isDraggable && (React.createElement(IconComponent, { iconName: "GripperBarVertical", className: classNames.gripperBarVerticalStyle })),
onRenderColumnHeaderTooltip({
hostClassName: classNames.cellTooltip,
id: "".concat(parentId, "-").concat(column.key, "-tooltip"),
setAriaDescribedBy: false,
column: column,
componentRef: this._tooltipRef,
content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',
children: (React.createElement("span", __assign({ id: "".concat(parentId, "-").concat(column.key), className: classNames.cellTitle, "data-is-focusable": hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined, role: hasInnerButton ? 'button' : undefined }, (hasInnerButton && accNameDescription), { onContextMenu: this._onColumnContextMenu, onClick: this._onColumnClick, "aria-haspopup": column.columnActionsMode === ColumnActionsMode.hasDropdown ? 'menu' : undefined, "aria-expanded": column.columnActionsMode === ColumnActionsMode.hasDropdown ? !!column.isMenuOpen : undefined }),
React.createElement("span", { id: "".concat(parentId, "-").concat(column.key, "-name"), className: classNames.cellName },
(column.iconName || column.iconClassName) && (React.createElement(IconComponent, { className: classNames.iconClassName, iconName: column.iconName })),
onRenderHeader(this.props)),
column.isFiltered && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: "Filter" }),
(column.isSorted || column.showSortIconWhenUnsorted) && (React.createElement(IconComponent, { className: classNames.sortIcon, iconName: column.isSorted ? (column.isSortedDescending ? 'SortDown' : 'SortUp') : 'Sort' })),
column.isGrouped && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: "GroupedDescending" }),
column.columnActionsMode === ColumnActionsMode.hasDropdown &&
!column.isIconOnly &&
onRenderFilterIcon({
'aria-hidden': true,
columnProps: this.props,
className: classNames.filterChevron,
iconName: 'ChevronDown',
}))),
}, this._onRenderColumnHeaderTooltip)),
!this.props.onRenderColumnHeaderTooltip ? this._renderAccessibleDescription() : null));
};
DetailsColumnBase.prototype.componentDidMount = function () {
var _this = this;
if (this.props.dragDropHelper && this.props.isDraggable) {
this._addDragDropHandling();
}
var classNames = this._classNames;
if (this.props.isDropped) {
if (this._root.current) {
this._root.current.classList.add(classNames.borderAfterDropping);
this._async.setTimeout(function () {
if (_this._root.current) {
_this._root.current.classList.add(classNames.noBorderAfterDropping);
}
}, CLASSNAME_ADD_INTERVAL);
}
this._async.setTimeout(function () {
if (_this._root.current) {
_this._root.current.classList.remove(classNames.borderAfterDropping);
_this._root.current.classList.remove(classNames.noBorderAfterDropping);
}
}, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL);
}
};
DetailsColumnBase.prototype.componentWillUnmount = function () {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
this._async.dispose();
this._events.dispose();
};
DetailsColumnBase.prototype.componentDidUpdate = function () {
if (!this._dragDropSubscription && this.props.dragDropHelper && this.props.isDraggable) {
this._addDragDropHandling();
}
if (this._dragDropSubscription && !this.props.isDraggable) {
this._dragDropSubscription.dispose();
this._events.off(this._root.current, 'mousedown');
delete this._dragDropSubscription;
}
};
DetailsColumnBase.prototype._getColumnDragDropOptions = function () {
var _this = this;
var columnIndex = this.props.columnIndex;
var options = {
selectionIndex: columnIndex,
context: { data: columnIndex, index: columnIndex },
canDrag: function () { return _this.props.isDraggable; },
canDrop: function () { return false; },
onDragStart: this._onDragStart,
updateDropState: function () { return undefined; },
onDrop: function () { return undefined; },
onDragEnd: this._onDragEnd,
};
return options;
};
DetailsColumnBase.prototype._hasAccessibleDescription = function () {
var column = this.props.column;
return !!(column.filterAriaLabel ||
column.sortAscendingAriaLabel ||
column.sortDescendingAriaLabel ||
column.groupAriaLabel ||
column.sortableAriaLabel);
};
DetailsColumnBase.prototype._renderAccessibleDescription = function () {
var _a = this.props, column = _a.column, parentId = _a.parentId;
var classNames = this._classNames;
return this._hasAccessibleDescription() && !this.props.onRenderColumnHeaderTooltip ? (React.createElement("label", { key: "".concat(column.key, "_label"), id: "".concat(parentId, "-").concat(column.key, "-tooltip"), className: classNames.accessibleLabel, hidden: true },
(column.isFiltered && column.filterAriaLabel) || null,
((column.isSorted || column.showSortIconWhenUnsorted) &&
(column.isSorted
? column.isSortedDescending
? column.sortDescendingAriaLabel
: column.sortAscendingAriaLabel
: column.sortableAriaLabel)) ||
null,
(column.isGrouped && column.groupAriaLabel) || null)) : null;
};
DetailsColumnBase.prototype._addDragDropHandling = function () {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getColumnDragDropOptions());
// We need to use native on this to prevent MarqueeSelection from handling the event before us.
this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);
};
return DetailsColumnBase;
}(React.Component));
export { DetailsColumnBase };
//# sourceMappingURL=DetailsColumn.base.js.map