"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var stylesImport = require("./DetailsList.scss");
var Utilities_1 = require("../../Utilities");
var DetailsList_Props_1 = require("../DetailsList/DetailsList.Props");
var DetailsHeader_1 = require("../DetailsList/DetailsHeader");
var DetailsRow_1 = require("../DetailsList/DetailsRow");
var FocusZone_1 = require("../../FocusZone");
var index_1 = require("../../utilities/selection/index");
var DragDropHelper_1 = require("../../utilities/dragdrop/DragDropHelper");
var GroupedList_1 = require("../../GroupedList");
var List_1 = require("../../List");
var withViewport_1 = require("../../utilities/decorators/withViewport");
var styles = stylesImport;
var MIN_COLUMN_WIDTH = 100; // this is the global min width
var CHECKBOX_WIDTH = 40;
var GROUP_EXPAND_WIDTH = 36;
var DEFAULT_INNER_PADDING = 16;
var ISPADDED_WIDTH = 24;
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
var DetailsList = (function (_super) {
    tslib_1.__extends(DetailsList, _super);
    function DetailsList(props) {
        var _this = _super.call(this, props) || this;
        _this._activeRows = {};
        _this._columnOverrides = {};
        _this._onColumnIsSizingChanged = _this._onColumnIsSizingChanged.bind(_this);
        _this._onColumnResized = _this._onColumnResized.bind(_this);
        _this._onColumnAutoResized = _this._onColumnAutoResized.bind(_this);
        _this._onRowDidMount = _this._onRowDidMount.bind(_this);
        _this._onRowWillUnmount = _this._onRowWillUnmount.bind(_this);
        _this._onToggleCollapse = _this._onToggleCollapse.bind(_this);
        _this._onActiveRowChanged = _this._onActiveRowChanged.bind(_this);
        _this._onHeaderKeyDown = _this._onHeaderKeyDown.bind(_this);
        _this._onContentKeyDown = _this._onContentKeyDown.bind(_this);
        _this._onRenderCell = _this._onRenderCell.bind(_this);
        _this._onGroupExpandStateChanged = _this._onGroupExpandStateChanged.bind(_this);
        _this.state = {
            lastWidth: 0,
            adjustedColumns: _this._getAdjustedColumns(props),
            isSizing: false,
            isDropping: false,
            isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed,
            isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed
        };
        _this._selection = props.selection || new index_1.Selection({ onSelectionChanged: undefined, getKey: props.getKey });
        _this._selection.setItems(props.items, false);
        _this._dragDropHelper = props.dragDropEvents ? new DragDropHelper_1.DragDropHelper({
            selection: _this._selection,
            minimumPixelsForDrag: props.minimumPixelsForDrag
        }) : null;
        _this._initialFocusedIndex = props.initialFocusedIndex;
        return _this;
    }
    DetailsList.prototype.scrollToIndex = function (index, measureItem) {
        this._list && this._list.scrollToIndex(index, measureItem);
        this._groupedList && this._groupedList.scrollToIndex(index, measureItem);
    };
    DetailsList.prototype.componentWillUnmount = function () {
        if (this._dragDropHelper) {
            this._dragDropHelper.dispose();
        }
    };
    DetailsList.prototype.componentDidUpdate = function (prevProps, prevState) {
        if (this._initialFocusedIndex !== undefined) {
            var item = this.props.items[this._initialFocusedIndex];
            if (item) {
                var itemKey = this._getItemKey(item, this._initialFocusedIndex);
                var row = this._activeRows[itemKey];
                if (row) {
                    this._setFocusToRowIfPending(row);
                }
            }
        }
        if (this.props.onDidUpdate) {
            this.props.onDidUpdate(this);
        }
    };
    DetailsList.prototype.componentWillReceiveProps = function (newProps) {
        var _a = this.props, checkboxVisibility = _a.checkboxVisibility, items = _a.items, setKey = _a.setKey, selectionMode = _a.selectionMode, columns = _a.columns, viewport = _a.viewport;
        var shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
        var shouldForceUpdates = false;
        if (newProps.layoutMode !== this.props.layoutMode) {
            shouldForceUpdates = true;
        }
        if (shouldResetSelection) {
            this._initialFocusedIndex = newProps.initialFocusedIndex;
        }
        if (newProps.items !== items) {
            this._selection.setItems(newProps.items, shouldResetSelection);
        }
        if (newProps.checkboxVisibility !== checkboxVisibility ||
            newProps.columns !== columns ||
            newProps.viewport.width !== viewport.width) {
            shouldForceUpdates = true;
        }
        this._adjustColumns(newProps, true);
        if (newProps.selectionMode !== selectionMode) {
            shouldForceUpdates = true;
        }
        if (shouldForceUpdates) {
            this._forceListUpdates();
        }
    };
    DetailsList.prototype.render = function () {
        var _a = this.props, ariaLabelForListHeader = _a.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, className = _a.className, checkboxVisibility = _a.checkboxVisibility, compact = _a.compact, constrainMode = _a.constrainMode, dragDropEvents = _a.dragDropEvents, groups = _a.groups, groupProps = _a.groupProps, items = _a.items, isHeaderVisible = _a.isHeaderVisible, layoutMode = _a.layoutMode, onItemInvoked = _a.onItemInvoked, onItemContextMenu = _a.onItemContextMenu, onColumnHeaderClick = _a.onColumnHeaderClick, onColumnHeaderContextMenu = _a.onColumnHeaderContextMenu, selectionMode = _a.selectionMode, selectionPreservedOnEmptyClick = _a.selectionPreservedOnEmptyClick, ariaLabel = _a.ariaLabel, ariaLabelForGrid = _a.ariaLabelForGrid, rowElementEventMap = _a.rowElementEventMap, _b = _a.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = _a.getKey, listProps = _a.listProps, usePageCache = _a.usePageCache, onShouldVirtualize = _a.onShouldVirtualize;
        var _c = this.state, adjustedColumns = _c.adjustedColumns, isCollapsed = _c.isCollapsed, isSizing = _c.isSizing, isSomeGroupExpanded = _c.isSomeGroupExpanded;
        var _d = this, selection = _d._selection, dragDropHelper = _d._dragDropHelper;
        var groupNestingDepth = this._getGroupNestingDepth();
        var additionalListProps = tslib_1.__assign({ renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD, renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND, getKey: getKey }, listProps);
        var selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none; // for SelectionMode.none
        if (selectionMode === index_1.SelectionMode.single) {
            selectAllVisibility = DetailsHeader_1.SelectAllVisibility.hidden;
        }
        if (selectionMode === index_1.SelectionMode.multiple) {
            // if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups
            var isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;
            if (isCollapsedGroupSelectVisible === undefined) {
                isCollapsedGroupSelectVisible = true;
            }
            var isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;
            selectAllVisibility = isSelectAllVisible ? DetailsHeader_1.SelectAllVisibility.visible : DetailsHeader_1.SelectAllVisibility.hidden;
        }
        if (checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.hidden) {
            selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none;
        }
        var _e = this.props.onRenderDetailsHeader, onRenderDetailsHeader = _e === void 0 ? this._onRenderDetailsHeader : _e;
        return (
        // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
        // with JAWS.
        React.createElement("div", tslib_1.__assign({ ref: this._resolveRef('_root'), className: Utilities_1.css('ms-DetailsList', styles.root, className, (layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns) && 'is-fixed', (constrainMode === DetailsList_Props_1.ConstrainMode.horizontalConstrained) && ('is-horizontalConstrained ' + styles.rootIsHorizontalConstrained), !!compact && ('ms-DetailsList--Compact ' + styles.rootCompact)), "data-automationid": 'DetailsList', "data-is-scrollable": 'false', "aria-label": ariaLabel }, (shouldApplyApplicationRole ? { role: 'application' } : {})),
            React.createElement("div", { role: 'grid', "aria-label": ariaLabelForGrid, "aria-rowcount": (isHeaderVisible ? 1 : 0) + (items ? items.length : 0), "aria-colcount": (selectAllVisibility !== DetailsHeader_1.SelectAllVisibility.none ? 1 : 0) + (adjustedColumns ? adjustedColumns.length : 0), "aria-readonly": 'true' },
                React.createElement("div", { onKeyDown: this._onHeaderKeyDown, role: 'presentation' }, isHeaderVisible && onRenderDetailsHeader({
                    componentRef: this._resolveRef('_header'),
                    selectionMode: selectionMode,
                    layoutMode: layoutMode,
                    selection: selection,
                    columns: adjustedColumns,
                    onColumnClick: onColumnHeaderClick,
                    onColumnContextMenu: onColumnHeaderContextMenu,
                    onColumnResized: this._onColumnResized,
                    onColumnIsSizingChanged: this._onColumnIsSizingChanged,
                    onColumnAutoResized: this._onColumnAutoResized,
                    groupNestingDepth: groupNestingDepth,
                    isAllCollapsed: isCollapsed,
                    onToggleCollapseAll: this._onToggleCollapse,
                    ariaLabel: ariaLabelForListHeader,
                    ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox,
                    ariaLabelForSelectionColumn: ariaLabelForSelectionColumn,
                    selectAllVisibility: selectAllVisibility,
                    collapseAllVisibility: groupProps && groupProps.collapseAllVisibility
                }, this._onRenderDetailsHeader)),
                React.createElement("div", { onKeyDown: this._onContentKeyDown, role: 'presentation' },
                    React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('_focusZone'), className: styles.focusZone, direction: FocusZone_1.FocusZoneDirection.vertical, isInnerZoneKeystroke: isRightArrow, onActiveElementChanged: this._onActiveRowChanged },
                        React.createElement(index_1.SelectionZone, { ref: this._resolveRef('_selectionZone'), selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu }, groups ? (React.createElement(GroupedList_1.GroupedList, { ref: this._resolveRef('_groupedList'), groups: groups, groupProps: groupProps, items: items, onRenderCell: this._onRenderCell, selection: selection, selectionMode: selectionMode, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: rowElementEventMap, listProps: additionalListProps, onGroupExpandStateChanged: this._onGroupExpandStateChanged, usePageCache: usePageCache, onShouldVirtualize: onShouldVirtualize })) : (React.createElement(List_1.List, tslib_1.__assign({ ref: this._resolveRef('_list'), role: 'presentation', items: items, onRenderCell: this._onRenderListCell(0), usePageCache: usePageCache, onShouldVirtualize: onShouldVirtualize }, additionalListProps)))))))));
    };
    DetailsList.prototype.forceUpdate = function () {
        _super.prototype.forceUpdate.call(this);
        this._forceListUpdates();
    };
    DetailsList.prototype._onRenderRow = function (props, defaultRender) {
        return React.createElement(DetailsRow_1.DetailsRow, tslib_1.__assign({}, props));
    };
    DetailsList.prototype._onRenderDetailsHeader = function (detailsHeaderProps, defaultRender) {
        return React.createElement(DetailsHeader_1.DetailsHeader, tslib_1.__assign({}, detailsHeaderProps));
    };
    DetailsList.prototype._onRenderListCell = function (nestingDepth) {
        var _this = this;
        return function (item, itemIndex) {
            return _this._onRenderCell(nestingDepth, item, itemIndex);
        };
    };
    DetailsList.prototype._onRenderCell = function (nestingDepth, item, index) {
        var _a = this.props, compact = _a.compact, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.rowElementEventMap, onRenderMissingItem = _a.onRenderMissingItem, onRenderItemColumn = _a.onRenderItemColumn, _b = _a.onRenderRow, onRenderRow = _b === void 0 ? this._onRenderRow : _b, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel, checkboxCellClassName = _a.checkboxCellClassName, groupProps = _a.groupProps;
        var collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
        var selection = this._selection;
        var dragDropHelper = this._dragDropHelper;
        var columns = this.state.adjustedColumns;
        if (!item) {
            if (onRenderMissingItem) {
                onRenderMissingItem(index);
            }
            return null;
        }
        return onRenderRow({
            item: item,
            itemIndex: index,
            compact: compact,
            columns: columns,
            groupNestingDepth: nestingDepth,
            selectionMode: selectionMode,
            selection: selection,
            onDidMount: this._onRowDidMount,
            onWillUnmount: this._onRowWillUnmount,
            onRenderItemColumn: onRenderItemColumn,
            eventsToRegister: eventsToRegister,
            dragDropEvents: dragDropEvents,
            dragDropHelper: dragDropHelper,
            viewport: viewport,
            checkboxVisibility: checkboxVisibility,
            collapseAllVisibility: collapseAllVisibility,
            getRowAriaLabel: getRowAriaLabel,
            checkButtonAriaLabel: checkButtonAriaLabel,
            checkboxCellClassName: checkboxCellClassName,
        }, this._onRenderRow);
    };
    DetailsList.prototype._onGroupExpandStateChanged = function (isSomeGroupExpanded) {
        this.setState({ isSomeGroupExpanded: isSomeGroupExpanded });
    };
    DetailsList.prototype._onColumnIsSizingChanged = function (column, isSizing) {
        this.setState({ isSizing: isSizing });
    };
    DetailsList.prototype._onHeaderKeyDown = function (ev) {
        if (ev.which === 40 /* down */) {
            if (this._focusZone && this._focusZone.focus()) {
                ev.preventDefault();
                ev.stopPropagation();
            }
        }
    };
    DetailsList.prototype._onContentKeyDown = function (ev) {
        if (ev.which === 38 /* up */ && !ev.altKey) {
            if (this._header && this._header.focus()) {
                ev.preventDefault();
                ev.stopPropagation();
            }
        }
    };
    DetailsList.prototype._getGroupNestingDepth = function () {
        var groups = this.props.groups;
        var level = 0;
        var groupsInLevel = groups;
        while (groupsInLevel && groupsInLevel.length > 0) {
            level++;
            groupsInLevel = groupsInLevel[0].children;
        }
        return level;
    };
    DetailsList.prototype._onRowDidMount = function (row) {
        var _a = row.props, item = _a.item, itemIndex = _a.itemIndex;
        var itemKey = this._getItemKey(item, itemIndex);
        this._activeRows[itemKey] = row; // this is used for column auto resize
        this._setFocusToRowIfPending(row);
        var onRowDidMount = this.props.onRowDidMount;
        if (onRowDidMount) {
            onRowDidMount(item, itemIndex);
        }
    };
    DetailsList.prototype._setFocusToRowIfPending = function (row) {
        var itemIndex = row.props.itemIndex;
        if (this._initialFocusedIndex !== undefined && itemIndex === this._initialFocusedIndex) {
            if (this._selectionZone) {
                this._selectionZone.ignoreNextFocus();
            }
            this._async.setTimeout(function () {
                row.focus();
            }, 0);
            delete this._initialFocusedIndex;
        }
    };
    DetailsList.prototype._onRowWillUnmount = function (row) {
        var onRowWillUnmount = this.props.onRowWillUnmount;
        var _a = row.props, item = _a.item, itemIndex = _a.itemIndex;
        var itemKey = this._getItemKey(item, itemIndex);
        delete this._activeRows[itemKey];
        if (onRowWillUnmount) {
            onRowWillUnmount(item, itemIndex);
        }
    };
    DetailsList.prototype._onToggleCollapse = function (collapsed) {
        this.setState({
            isCollapsed: collapsed
        });
        if (this._groupedList) {
            this._groupedList.toggleCollapseAll(collapsed);
        }
    };
    DetailsList.prototype._forceListUpdates = function () {
        if (this._groupedList) {
            this._groupedList.forceUpdate();
        }
        if (this._list) {
            this._list.forceUpdate();
        }
    };
    DetailsList.prototype._adjustColumns = function (newProps, forceUpdate) {
        var adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate);
        var viewportWidth = this.props.viewport.width;
        if (adjustedColumns) {
            this.setState({
                adjustedColumns: adjustedColumns,
                lastWidth: viewportWidth,
            });
        }
    };
    /** Returns adjusted columns, given the viewport size and layout mode. */
    DetailsList.prototype._getAdjustedColumns = function (newProps, forceUpdate) {
        var _this = this;
        var newColumns = newProps.columns, newItems = newProps.items, layoutMode = newProps.layoutMode, selectionMode = newProps.selectionMode;
        var viewportWidth = newProps.viewport.width;
        var columns = this.props ? this.props.columns : [];
        var lastWidth = this.state ? this.state.lastWidth : -1;
        var lastSelectionMode = this.state ? this.state.lastSelectionMode : undefined;
        if (viewportWidth !== undefined) {
            if (!forceUpdate &&
                lastWidth === viewportWidth &&
                lastSelectionMode === selectionMode &&
                (!columns || newColumns === columns)) {
                return undefined;
            }
        }
        else {
            viewportWidth = this.props.viewport.width;
        }
        newColumns = newColumns || buildColumns(newItems, true);
        var adjustedColumns;
        if (layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns) {
            adjustedColumns = this._getFixedColumns(newColumns);
            // Preserve adjusted column calculated widths.
            adjustedColumns.forEach(function (column) {
                _this._rememberCalculatedWidth(column, column.calculatedWidth);
            });
        }
        else {
            adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps);
        }
        return adjustedColumns;
    };
    /** Builds a set of columns based on the given columns mixed with the current overrides. */
    DetailsList.prototype._getFixedColumns = function (newColumns) {
        var _this = this;
        return newColumns.map(function (column) {
            var newColumn = Utilities_1.assign({}, column, _this._columnOverrides[column.key]);
            if (!newColumn.calculatedWidth) {
                newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;
            }
            return newColumn;
        });
    };
    /** Builds a set of columns to fix within the viewport width. */
    DetailsList.prototype._getJustifiedColumns = function (newColumns, viewportWidth, props) {
        var _this = this;
        var selectionMode = props.selectionMode, checkboxVisibility = props.checkboxVisibility, groups = props.groups;
        var outerPadding = DEFAULT_INNER_PADDING;
        var rowCheckWidth = (selectionMode !== index_1.SelectionMode.none && checkboxVisibility !== DetailsList_Props_1.CheckboxVisibility.hidden) ? CHECKBOX_WIDTH : 0;
        var groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0;
        var totalWidth = 0; // offset because we have one less inner padding.
        var availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
        var adjustedColumns = newColumns.map(function (column, i) {
            var newColumn = Utilities_1.assign({}, column, {
                calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH
            }, _this._columnOverrides[column.key]);
            if (newColumn.maxWidth && newColumn.calculatedWidth > newColumn.maxWidth) {
                newColumn.calculatedWidth = newColumn.maxWidth;
            }
            totalWidth += newColumn.calculatedWidth + (i > 0 ? DEFAULT_INNER_PADDING : 0) + (column.isPadded ? ISPADDED_WIDTH : 0);
            return newColumn;
        });
        var lastIndex = adjustedColumns.length - 1;
        // Remove collapsable columns.
        while (lastIndex > -1 && totalWidth > availableWidth) {
            var column = adjustedColumns[lastIndex];
            if (column.isCollapsable) {
                totalWidth -= column.calculatedWidth + DEFAULT_INNER_PADDING;
                adjustedColumns.splice(lastIndex, 1);
            }
            lastIndex--;
        }
        // Then expand columns starting at the beginning, until we've filled the width.
        for (var i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {
            var column = adjustedColumns[i];
            var overrides = this._columnOverrides[column.key];
            if (overrides && overrides.calculatedWidth) {
                continue;
            }
            var maxWidth = column.maxWidth;
            var minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;
            var spaceLeft = availableWidth - totalWidth;
            var increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;
            // Add remaining space to the last column.
            if (i === (adjustedColumns.length - 1)) {
                increment = spaceLeft;
            }
            column.calculatedWidth = column.calculatedWidth + increment;
            totalWidth += increment;
        }
        // Mark the last column as not resizable to avoid extra scrolling issues.
        if (adjustedColumns.length) {
            adjustedColumns[adjustedColumns.length - 1].isResizable = false;
        }
        return adjustedColumns;
    };
    DetailsList.prototype._onColumnResized = function (resizingColumn, newWidth) {
        var newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);
        if (this.props.onColumnResize) {
            this.props.onColumnResize(resizingColumn, newCalculatedWidth);
        }
        this._rememberCalculatedWidth(resizingColumn, newCalculatedWidth);
        this._adjustColumns(this.props, true);
        this._forceListUpdates();
    };
    DetailsList.prototype._rememberCalculatedWidth = function (column, newCalculatedWidth) {
        var overrides = this._columnOverrides[column.key] = this._columnOverrides[column.key] || {};
        overrides.calculatedWidth = newCalculatedWidth;
    };
    /**
     * Callback function when double clicked on the details header column resizer
     * which will measure the column cells of all the active rows and resize the
     * column to the max cell width.
     *
     * @private
     * @param {IColumn} column (double clicked column definition)
     * @param {number} columnIndex (double clicked column index)
     * @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
     */
    DetailsList.prototype._onColumnAutoResized = function (column, columnIndex) {
        var _this = this;
        var max = 0;
        var count = 0;
        var totalCount = Object.keys(this._activeRows).length;
        for (var key in this._activeRows) {
            if (this._activeRows.hasOwnProperty(key)) {
                var currentRow = this._activeRows[key];
                currentRow.measureCell(columnIndex, function (width) {
                    max = Math.max(max, width);
                    count++;
                    if (count === totalCount) {
                        _this._onColumnResized(column, max);
                    }
                });
            }
        }
    };
    /**
     * Call back function when an element in FocusZone becomes active. It will transalate it into item
     * and call onActiveItemChanged callback if specified.
     *
     * @private
     * @param {el} row element that became active in Focus Zone
     * @param {ev} focus event from Focus Zone
     */
    DetailsList.prototype._onActiveRowChanged = function (el, ev) {
        var _a = this.props, items = _a.items, onActiveItemChanged = _a.onActiveItemChanged;
        if (!onActiveItemChanged || !el) {
            return;
        }
        var index = Number(el.getAttribute('data-item-index'));
        if (index >= 0) {
            onActiveItemChanged(items[index], index, ev);
        }
    };
    DetailsList.prototype._getItemKey = function (item, itemIndex) {
        var getKey = this.props.getKey;
        var itemKey = undefined;
        if (item) {
            itemKey = item.key;
        }
        if (getKey) {
            itemKey = getKey(item, itemIndex);
        }
        if (!itemKey) {
            itemKey = itemIndex;
        }
        return itemKey;
    };
    DetailsList.defaultProps = {
        layoutMode: DetailsList_Props_1.DetailsListLayoutMode.justified,
        selectionMode: index_1.SelectionMode.multiple,
        constrainMode: DetailsList_Props_1.ConstrainMode.horizontalConstrained,
        checkboxVisibility: DetailsList_Props_1.CheckboxVisibility.onHover,
        isHeaderVisible: true
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DetailsList.prototype, "_onRenderRow", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DetailsList.prototype, "_onRenderDetailsHeader", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], DetailsList.prototype, "_onRenderListCell", null);
    DetailsList = tslib_1.__decorate([
        withViewport_1.withViewport
    ], DetailsList);
    return DetailsList;
}(Utilities_1.BaseComponent));
exports.DetailsList = DetailsList;
function buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline) {
    var columns = [];
    if (items && items.length) {
        var firstItem = items[0];
        var isFirstColumn = true;
        for (var propName in firstItem) {
            if (firstItem.hasOwnProperty(propName)) {
                columns.push({
                    key: propName,
                    name: propName,
                    fieldName: propName,
                    minWidth: MIN_COLUMN_WIDTH,
                    maxWidth: 300,
                    isCollapsable: !!columns.length,
                    isMultiline: (isMultiline === undefined) ? false : isMultiline,
                    isSorted: sortedColumnKey === propName,
                    isSortedDescending: !!isSortedDescending,
                    isRowHeader: false,
                    columnActionsMode: DetailsList_Props_1.ColumnActionsMode.clickable,
                    isResizable: canResizeColumns,
                    onColumnClick: onColumnClick,
                    isGrouped: groupedColumnKey === propName
                });
                isFirstColumn = false;
            }
        }
    }
    return columns;
}
exports.buildColumns = buildColumns;
function isRightArrow(event) {
    return event.which === Utilities_1.getRTLSafeKeyCode(39 /* right */);
}
//# sourceMappingURL=DetailsList.js.map