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 TRANSITION_DURATION_DRAG = 200; // ms
    var TRANSITION_DURATION_DROP = 1500; // ms
    var CLASSNAME_ADD_INTERVAL = 20; // ms
    /**
     * Component for rendering columns in a `DetailsList`.
     *
     * {@docCategory DetailsList}
     */
    var DetailsColumnBase = /** @class */ (function (_super) {
        tslib_1.__extends(DetailsColumnBase, _super);
        function DetailsColumnBase(props) {
            var _this = _super.call(this, props) || this;
            _this._root = React.createRef();
            _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 === DetailsList_types_1.ColumnActionsMode.disabled) {
                    return;
                }
                if (column.onColumnClick) {
                    column.onColumnClick(ev, column);
                }
                if (onColumnClick) {
                    onColumnClick(ev, column);
                }
            };
            _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) {
                if (_this.props.setDraggedItemIndex) {
                    _this.props.setDraggedItemIndex(itemIndex);
                }
                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();
                }
            };
            Utilities_1.initializeComponentRef(_this);
            _this._async = new Utilities_1.Async(_this);
            _this._events = new Utilities_1.EventGroup(_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, _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 !== DetailsList_types_1.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 ? Icon_1.FontIcon : Icon_1.Icon;
            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(IconComponent, { 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, onClick: this._onColumnClick, "aria-haspopup": column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown, "aria-expanded": column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown ? !!column.isMenuOpen : undefined },
                            React.createElement("span", { id: parentId + "-" + column.key + "-name", className: classNames.cellName },
                                (column.iconName || column.iconClassName) && (React.createElement(IconComponent, { className: classNames.iconClassName, iconName: column.iconName })),
                                column.isIconOnly ? React.createElement("span", { className: classNames.accessibleLabel }, column.name) : column.name),
                            column.isFiltered && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: "Filter" }),
                            column.isSorted && (React.createElement(IconComponent, { className: classNames.sortIcon, iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })),
                            column.isGrouped && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: "GroupedDescending" }),
                            column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown && !column.isIconOnly && (React.createElement(IconComponent, { "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.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._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._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));
    exports.DetailsColumnBase = DetailsColumnBase;
});
//# sourceMappingURL=DetailsColumn.base.js.map