office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
193 lines • 12.8 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Icon", "../../Utilities", "./DetailsList.types", "./DetailsRow.styles"], function (require, exports, tslib_1, React, Icon_1, Utilities_1, DetailsList_types_1, DetailsRow_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
var getClassNames = Utilities_1.classNamesFunction();
var DetailsColumnBase = /** @class */ (function (_super) {
tslib_1.__extends(DetailsColumnBase, _super);
function DetailsColumnBase(props) {
var _this = _super.call(this, props) || this;
_this._onRenderColumnHeaderTooltip = function (tooltipHostProps, defaultRender) {
return React.createElement("span", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);
};
_this._onRootMouseDown = function (ev) {
var isDraggable = _this.props.isDraggable;
// Ignore anything except the primary button.
if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {
ev.stopPropagation();
}
};
_this._root = Utilities_1.createRef();
_this._onDragStart = _this._onDragStart.bind(_this);
_this._onDragEnd = _this._onDragEnd.bind(_this);
_this._onRootMouseDown = _this._onRootMouseDown.bind(_this);
_this._updateHeaderDragInfo = _this._updateHeaderDragInfo.bind(_this);
return _this;
}
DetailsColumnBase.prototype.render = function () {
var _a = this.props, column = _a.column, columnIndex = _a.columnIndex, parentId = _a.parentId, isDraggable = _a.isDraggable, styles = _a.styles, theme = _a.theme, _b = _a.cellStyleProps, cellStyleProps = _b === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _b;
var _c = this.props.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _c === void 0 ? this._onRenderColumnHeaderTooltip : _c;
this._classNames = getClassNames(styles, {
theme: theme,
headerClassName: column.headerClassName,
iconClassName: column.iconClassName,
isActionable: column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled,
isEmpty: !column.name,
isIconVisible: column.isSorted || column.isGrouped || column.isFiltered,
isPadded: column.isPadded,
isIconOnly: column.isIconOnly,
cellStyleProps: cellStyleProps
});
var classNames = this._classNames;
return (React.createElement(React.Fragment, null,
React.createElement("div", { key: column.key, ref: this._root, role: 'columnheader', "aria-sort": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none', "aria-colindex": columnIndex, className: classNames.root, "data-is-draggable": isDraggable, draggable: isDraggable, style: {
width: column.calculatedWidth +
cellStyleProps.cellLeftPadding +
cellStyleProps.cellRightPadding +
(column.isPadded ? cellStyleProps.cellExtraRightPadding : 0)
}, "data-automationid": 'ColumnsHeaderColumn', "data-item-key": column.key },
isDraggable && React.createElement(Icon_1.Icon, { iconName: "GripperBarVertical", className: classNames.gripperBarVerticalStyle }),
onRenderColumnHeaderTooltip({
hostClassName: classNames.cellTooltip,
id: parentId + "-" + column.key + "-tooltip",
setAriaDescribedBy: false,
content: column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled ? column.ariaLabel : '',
children: (React.createElement("span", { id: parentId + "-" + column.key, "aria-label": column.isIconOnly ? column.name : undefined, "aria-labelledby": column.isIconOnly ? undefined : parentId + "-" + column.key + "-name ", className: classNames.cellTitle, "data-is-focusable": column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled, role: column.columnActionsMode !== DetailsList_types_1.ColumnActionsMode.disabled &&
(column.onColumnClick !== undefined || this.props.onColumnClick !== undefined)
? 'button'
: undefined, "aria-describedby": this.props.onRenderColumnHeaderTooltip || this._hasAccessibleLabel()
? parentId + "-" + column.key + "-tooltip"
: undefined, onContextMenu: this._onColumnContextMenu.bind(this, column), onClick: this._onColumnClick.bind(this, column), "aria-haspopup": column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown },
React.createElement("span", { id: parentId + "-" + column.key + "-name", className: classNames.cellName },
(column.iconName || column.iconClassName) && (React.createElement(Icon_1.Icon, { className: classNames.iconClassName, iconName: column.iconName })),
column.isIconOnly ? (React.createElement("span", { className: classNames.accessibleLabel }, column.name)) : (column.name)),
column.isFiltered && React.createElement(Icon_1.Icon, { className: classNames.nearIcon, iconName: 'Filter' }),
column.isSorted && (React.createElement(Icon_1.Icon, { className: classNames.sortIcon, iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })),
column.isGrouped && React.createElement(Icon_1.Icon, { className: classNames.nearIcon, iconName: 'GroupedDescending' }),
column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown &&
!column.isIconOnly && (React.createElement(Icon_1.Icon, { "aria-hidden": true, className: classNames.filterChevron, iconName: 'ChevronDown' }))))
}, this._onRenderColumnHeaderTooltip)),
!this.props.onRenderColumnHeaderTooltip ? this._renderAccessibleLabel() : null));
};
DetailsColumnBase.prototype.componentDidMount = function () {
var _this = this;
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
if (this.props.dragDropHelper && this.props.isDraggable) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getColumnDragDropOptions());
// We need to use native on this to avoid MarqueeSelection from handling the event before us.
this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);
}
var classNames = this._classNames;
if (this.props.isDropped) {
if (this._root.current) {
this._root.current.classList.add(classNames.borderAfterDropping);
}
setTimeout(function () {
if (_this._root.current) {
_this._root.current.classList.remove(classNames.borderAfterDropping);
}
}, 1500);
}
};
DetailsColumnBase.prototype.componentWillUnmount = function () {
if (this._dragDropSubscription) {
this._dragDropSubscription.dispose();
delete this._dragDropSubscription;
}
};
DetailsColumnBase.prototype.componentDidUpdate = function () {
if (!this._dragDropSubscription && this.props.dragDropHelper && this.props.isDraggable) {
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.value, this._events, this._getColumnDragDropOptions());
// We need to use native on this to avoid MarqueeSelection from handling the event before us.
this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);
}
if (this._dragDropSubscription && !this.props.isDraggable) {
this._dragDropSubscription.dispose();
this._events.off(this._root.current, 'mousedown');
delete this._dragDropSubscription;
}
};
DetailsColumnBase.prototype._onColumnClick = function (column, ev) {
var onColumnClick = this.props.onColumnClick;
if (column.onColumnClick) {
column.onColumnClick(ev, column);
}
if (onColumnClick) {
onColumnClick(ev, column);
}
};
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._hasAccessibleLabel = function () {
var column = this.props.column;
return !!(column.ariaLabel ||
column.filterAriaLabel ||
column.sortAscendingAriaLabel ||
column.sortDescendingAriaLabel ||
column.groupAriaLabel);
};
DetailsColumnBase.prototype._renderAccessibleLabel = function () {
var _a = this.props, column = _a.column, parentId = _a.parentId;
var classNames = this._classNames;
return this._hasAccessibleLabel() && !this.props.onRenderColumnHeaderTooltip ? (React.createElement("label", { key: column.key + "_label", id: parentId + "-" + column.key + "-tooltip", className: classNames.accessibleLabel },
column.ariaLabel,
(column.isFiltered && column.filterAriaLabel) || null,
(column.isSorted &&
(column.isSortedDescending ? column.sortDescendingAriaLabel : column.sortAscendingAriaLabel)) ||
null,
(column.isGrouped && column.groupAriaLabel) || null)) : null;
};
DetailsColumnBase.prototype._onDragStart = function (item, itemIndex, selectedItems, event) {
var classNames = this._classNames;
if (itemIndex) {
this._updateHeaderDragInfo(itemIndex);
this._root.current.classList.add(classNames.borderWhileDragging);
}
};
DetailsColumnBase.prototype._onDragEnd = function (item, event) {
var classNames = this._classNames;
if (event) {
this._updateHeaderDragInfo(-1, event);
}
this._root.current.classList.remove(classNames.borderWhileDragging);
};
DetailsColumnBase.prototype._updateHeaderDragInfo = function (itemIndex, event) {
if (this.props.setDraggedItemIndex) {
this.props.setDraggedItemIndex(itemIndex);
}
if (this.props.updateDragInfo) {
this.props.updateDragInfo({ itemIndex: itemIndex }, event);
}
};
DetailsColumnBase.prototype._onColumnContextMenu = function (column, ev) {
var onColumnContextMenu = this.props.onColumnContextMenu;
if (column.onColumnContextMenu) {
column.onColumnContextMenu(column, ev);
ev.preventDefault();
}
if (onColumnContextMenu) {
onColumnContextMenu(column, ev);
ev.preventDefault();
}
};
return DetailsColumnBase;
}(Utilities_1.BaseComponent));
exports.DetailsColumnBase = DetailsColumnBase;
});
//# sourceMappingURL=DetailsColumn.base.js.map