text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var React = require("react");
  var Icon_1 = require("../../Icon");
  var Utilities_1 = require("../../Utilities");
  var DetailsList_types_1 = require("./DetailsList.types");
  var DetailsRow_styles_1 = require("./DetailsRow.styles");
  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() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this._root = React.createRef();
          _this._onRenderColumnHeaderTooltip = function (tooltipHostProps, defaultRender) {
              return React.createElement("span", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);
          };
          _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._onRootMouseDown = function (ev) {
              var isDraggable = _this.props.isDraggable;
              // Ignore anything except the primary button.
              if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {
                  ev.stopPropagation();
              }
          };
          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,
              transitionDurationDrag: TRANSITION_DURATION_DRAG,
              transitionDurationDrop: TRANSITION_DURATION_DROP
          });
          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, "aria-expanded": column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.hasDropdown ? (column.isMenuOpen ? true : false) : undefined },
                          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);
                  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;
          }
      };
      DetailsColumnBase.prototype.componentDidUpdate = function () {
          if (!this._dragDropSubscription && 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);
          }
          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) {
          if (column.columnActionsMode === DetailsList_types_1.ColumnActionsMode.disabled) {
              return;
          }
          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._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