1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.DetailsHeaderBase = void 0;
|
4 | var tslib_1 = require("tslib");
|
5 | var React = require("react");
|
6 | var Utilities_1 = require("../../Utilities");
|
7 | var DetailsList_types_1 = require("./DetailsList.types");
|
8 | var FocusZone_1 = require("../../FocusZone");
|
9 | var Icon_1 = require("../../Icon");
|
10 | var Layer_1 = require("../../Layer");
|
11 | var GroupSpacer_1 = require("../GroupedList/GroupSpacer");
|
12 | var GroupedList_1 = require("../../GroupedList");
|
13 | var DetailsRowCheck_1 = require("./DetailsRowCheck");
|
14 | var Selection_1 = require("../../Selection");
|
15 | var DragDrop_1 = require("../../DragDrop");
|
16 | var DetailsColumn_1 = require("../../components/DetailsList/DetailsColumn");
|
17 | var DetailsHeader_types_1 = require("./DetailsHeader.types");
|
18 | var getClassNames = Utilities_1.classNamesFunction();
|
19 | var MOUSEDOWN_PRIMARY_BUTTON = 0;
|
20 | var MOUSEMOVE_PRIMARY_BUTTON = 1;
|
21 | var NO_COLUMNS = [];
|
22 | var DetailsHeaderBase = (function (_super) {
|
23 | tslib_1.__extends(DetailsHeaderBase, _super);
|
24 | function DetailsHeaderBase(props) {
|
25 | var _this = _super.call(this, props) || this;
|
26 | _this._rootElement = React.createRef();
|
27 | _this._rootComponent = React.createRef();
|
28 | _this._draggedColumnIndex = -1;
|
29 | _this._dropHintDetails = {};
|
30 | _this._updateDroppingState = function (newValue, event) {
|
31 | if (_this._draggedColumnIndex >= 0 && event.type !== 'drop' && !newValue) {
|
32 | _this._resetDropHints();
|
33 | }
|
34 | };
|
35 | _this._onDragOver = function (item, event) {
|
36 | if (_this._draggedColumnIndex >= 0) {
|
37 | event.stopPropagation();
|
38 | _this._computeDropHintToBeShown(event.clientX);
|
39 | }
|
40 | };
|
41 | _this._onDrop = function (item, event) {
|
42 |
|
43 | var columnReorderProps = _this._getColumnReorderProps();
|
44 |
|
45 | if (_this._draggedColumnIndex >= 0 && event) {
|
46 | var targetIndex = _this._draggedColumnIndex > _this._currentDropHintIndex
|
47 | ? _this._currentDropHintIndex
|
48 | : _this._currentDropHintIndex - 1;
|
49 | var isValidDrop = _this._isValidCurrentDropHintIndex();
|
50 | event.stopPropagation();
|
51 | if (isValidDrop) {
|
52 | _this._onDropIndexInfo.sourceIndex = _this._draggedColumnIndex;
|
53 | _this._onDropIndexInfo.targetIndex = targetIndex;
|
54 | if (columnReorderProps.onColumnDrop) {
|
55 | var dragDropDetails = {
|
56 | draggedIndex: _this._draggedColumnIndex,
|
57 | targetIndex: targetIndex,
|
58 | };
|
59 | columnReorderProps.onColumnDrop(dragDropDetails);
|
60 |
|
61 | }
|
62 | else if (columnReorderProps.handleColumnReorder) {
|
63 | columnReorderProps.handleColumnReorder(_this._draggedColumnIndex, targetIndex);
|
64 |
|
65 | }
|
66 | }
|
67 | }
|
68 | _this._resetDropHints();
|
69 | _this._dropHintDetails = {};
|
70 | _this._draggedColumnIndex = -1;
|
71 | };
|
72 | _this._updateDragInfo = function (props, event) {
|
73 |
|
74 | var columnReorderProps = _this._getColumnReorderProps();
|
75 | var itemIndex = props.itemIndex;
|
76 | if (itemIndex >= 0) {
|
77 |
|
78 | _this._draggedColumnIndex = _this._isCheckboxColumnHidden() ? itemIndex - 1 : itemIndex - 2;
|
79 | _this._getDropHintPositions();
|
80 | if (columnReorderProps.onColumnDragStart) {
|
81 | columnReorderProps.onColumnDragStart(true);
|
82 | }
|
83 | }
|
84 | else if (event && _this._draggedColumnIndex >= 0) {
|
85 | _this._resetDropHints();
|
86 | _this._draggedColumnIndex = -1;
|
87 | _this._dropHintDetails = {};
|
88 | if (columnReorderProps.onColumnDragEnd) {
|
89 | var columnDragEndLocation = _this._isEventOnHeader(event);
|
90 | columnReorderProps.onColumnDragEnd({ dropLocation: columnDragEndLocation }, event);
|
91 | }
|
92 | }
|
93 | };
|
94 | _this._getDropHintPositions = function () {
|
95 | var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
|
96 |
|
97 | var columnReorderProps = _this._getColumnReorderProps();
|
98 | var prevX = 0;
|
99 | var prevMid = 0;
|
100 | var prevRef;
|
101 | var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;
|
102 | var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;
|
103 | for (var i = frozenColumnCountFromStart; i < columns.length - frozenColumnCountFromEnd + 1; i++) {
|
104 | if (_this._rootElement.current) {
|
105 | var dropHintElement = _this._rootElement.current.querySelectorAll('#columnDropHint_' + i)[0];
|
106 | if (dropHintElement) {
|
107 | if (i === frozenColumnCountFromStart) {
|
108 | prevX = dropHintElement.offsetLeft;
|
109 | prevMid = dropHintElement.offsetLeft;
|
110 | prevRef = dropHintElement;
|
111 | }
|
112 | else {
|
113 | var newMid = (dropHintElement.offsetLeft + prevX) / 2;
|
114 | _this._dropHintDetails[i - 1] = {
|
115 | originX: prevX,
|
116 | startX: prevMid,
|
117 | endX: newMid,
|
118 | dropHintElementRef: prevRef,
|
119 | };
|
120 | prevMid = newMid;
|
121 | prevRef = dropHintElement;
|
122 | prevX = dropHintElement.offsetLeft;
|
123 | if (i === columns.length - frozenColumnCountFromEnd) {
|
124 | _this._dropHintDetails[i] = {
|
125 | originX: prevX,
|
126 | startX: prevMid,
|
127 | endX: dropHintElement.offsetLeft,
|
128 | dropHintElementRef: prevRef,
|
129 | };
|
130 | }
|
131 | }
|
132 | }
|
133 | }
|
134 | }
|
135 | };
|
136 | |
137 |
|
138 |
|
139 | _this._computeDropHintToBeShown = function (clientX) {
|
140 | var isRtl = Utilities_1.getRTL(_this.props.theme);
|
141 | if (_this._rootElement.current) {
|
142 | var clientRect = _this._rootElement.current.getBoundingClientRect();
|
143 | var headerOriginX = clientRect.left;
|
144 | var eventXRelativePosition = clientX - headerOriginX;
|
145 | var currentDropHintIndex = _this._currentDropHintIndex;
|
146 | if (_this._isValidCurrentDropHintIndex()) {
|
147 | if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex].startX, _this._dropHintDetails[currentDropHintIndex].endX)) {
|
148 | return;
|
149 | }
|
150 | }
|
151 | var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
|
152 |
|
153 | var columnReorderProps = _this._getColumnReorderProps();
|
154 | var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;
|
155 | var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;
|
156 | var currentIndex = frozenColumnCountFromStart;
|
157 | var lastValidColumn = columns.length - frozenColumnCountFromEnd;
|
158 | var indexToUpdate = -1;
|
159 | if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[currentIndex].endX)) {
|
160 | indexToUpdate = currentIndex;
|
161 | }
|
162 | else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[lastValidColumn].startX)) {
|
163 | indexToUpdate = lastValidColumn;
|
164 | }
|
165 | else if (_this._isValidCurrentDropHintIndex()) {
|
166 | if (_this._dropHintDetails[currentDropHintIndex + 1] &&
|
167 | _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex + 1].startX, _this._dropHintDetails[currentDropHintIndex + 1].endX)) {
|
168 | indexToUpdate = currentDropHintIndex + 1;
|
169 | }
|
170 | else if (_this._dropHintDetails[currentDropHintIndex - 1] &&
|
171 | _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex - 1].startX, _this._dropHintDetails[currentDropHintIndex - 1].endX)) {
|
172 | indexToUpdate = currentDropHintIndex - 1;
|
173 | }
|
174 | }
|
175 | if (indexToUpdate === -1) {
|
176 | var startIndex = frozenColumnCountFromStart;
|
177 | var endIndex = lastValidColumn;
|
178 | while (startIndex < endIndex) {
|
179 | var middleIndex = Math.ceil((endIndex + startIndex) / 2);
|
180 | if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].startX, _this._dropHintDetails[middleIndex].endX)) {
|
181 | indexToUpdate = middleIndex;
|
182 | break;
|
183 | }
|
184 | else if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {
|
185 | endIndex = middleIndex;
|
186 | }
|
187 | else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {
|
188 | startIndex = middleIndex;
|
189 | }
|
190 | }
|
191 | }
|
192 | if (indexToUpdate === _this._draggedColumnIndex || indexToUpdate === _this._draggedColumnIndex + 1) {
|
193 | if (_this._isValidCurrentDropHintIndex()) {
|
194 | _this._resetDropHints();
|
195 | }
|
196 | }
|
197 | else if (currentDropHintIndex !== indexToUpdate && indexToUpdate >= 0) {
|
198 | _this._resetDropHints();
|
199 | _this._updateDropHintElement(_this._dropHintDetails[indexToUpdate].dropHintElementRef, 'inline-block');
|
200 | _this._currentDropHintIndex = indexToUpdate;
|
201 | }
|
202 | }
|
203 | };
|
204 | _this._renderColumnSizer = function (_a) {
|
205 | var _b;
|
206 | var columnIndex = _a.columnIndex;
|
207 | var _c = _this.props.columns, columns = _c === void 0 ? NO_COLUMNS : _c;
|
208 | var column = columns[columnIndex];
|
209 | var columnResizeDetails = _this.state.columnResizeDetails;
|
210 | var classNames = _this._classNames;
|
211 | return column.isResizable ? (React.createElement("div", { key: column.key + "_sizer", "aria-hidden": true, role: "button", "data-is-focusable": false, onClick: _stopPropagation, "data-sizer-index": columnIndex, onBlur: _this._onSizerBlur, className: Utilities_1.css(classNames.cellSizer, columnIndex < columns.length - 1 ? classNames.cellSizerStart : classNames.cellSizerEnd, (_b = {},
|
212 | _b[classNames.cellIsResizing] = columnResizeDetails && columnResizeDetails.columnIndex === columnIndex,
|
213 | _b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) })) : null;
|
214 | };
|
215 | _this._onRenderColumnHeaderTooltip = function (tooltipHostProps) {
|
216 | return React.createElement("span", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);
|
217 | };
|
218 | |
219 |
|
220 |
|
221 | _this._onSelectAllClicked = function () {
|
222 | var selection = _this.props.selection;
|
223 | if (selection) {
|
224 | selection.toggleAllSelected();
|
225 | }
|
226 | };
|
227 | _this._onRootMouseDown = function (ev) {
|
228 | var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
|
229 | var columnIndex = Number(columnIndexAttr);
|
230 | var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
|
231 | if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
|
232 |
|
233 | return;
|
234 | }
|
235 | _this.setState({
|
236 | columnResizeDetails: {
|
237 | columnIndex: columnIndex,
|
238 | columnMinWidth: columns[columnIndex].calculatedWidth,
|
239 | originX: ev.clientX,
|
240 | },
|
241 | });
|
242 | ev.preventDefault();
|
243 | ev.stopPropagation();
|
244 | };
|
245 | _this._onRootMouseMove = function (ev) {
|
246 | var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
|
247 | if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
|
248 | _this.setState({ isSizing: true });
|
249 | }
|
250 | };
|
251 | _this._onRootKeyDown = function (ev) {
|
252 | var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
|
253 | var _b = _this.props, _c = _b.columns, columns = _c === void 0 ? NO_COLUMNS : _c, onColumnResized = _b.onColumnResized;
|
254 | var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
|
255 | if (!columnIndexAttr || isSizing) {
|
256 | return;
|
257 | }
|
258 | var columnIndex = Number(columnIndexAttr);
|
259 | if (!columnResizeDetails) {
|
260 |
|
261 | if (ev.which === Utilities_1.KeyCodes.enter) {
|
262 | _this.setState({
|
263 | columnResizeDetails: {
|
264 | columnIndex: columnIndex,
|
265 | columnMinWidth: columns[columnIndex].calculatedWidth,
|
266 | },
|
267 | });
|
268 | ev.preventDefault();
|
269 | ev.stopPropagation();
|
270 | }
|
271 | }
|
272 | else {
|
273 | var increment = void 0;
|
274 |
|
275 | if (ev.which === Utilities_1.KeyCodes.enter) {
|
276 | _this.setState({
|
277 | columnResizeDetails: undefined,
|
278 | });
|
279 | ev.preventDefault();
|
280 | ev.stopPropagation();
|
281 |
|
282 | }
|
283 | else if (ev.which === Utilities_1.KeyCodes.left) {
|
284 | increment = Utilities_1.getRTL(_this.props.theme) ? 1 : -1;
|
285 |
|
286 | }
|
287 | else if (ev.which === Utilities_1.KeyCodes.right) {
|
288 | increment = Utilities_1.getRTL(_this.props.theme) ? -1 : 1;
|
289 | }
|
290 | if (increment) {
|
291 | if (!ev.shiftKey) {
|
292 | increment *= 10;
|
293 | }
|
294 | _this.setState({
|
295 | columnResizeDetails: tslib_1.__assign(tslib_1.__assign({}, columnResizeDetails), { columnMinWidth: columnResizeDetails.columnMinWidth + increment }),
|
296 | });
|
297 | if (onColumnResized) {
|
298 | onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);
|
299 | }
|
300 | ev.preventDefault();
|
301 | ev.stopPropagation();
|
302 | }
|
303 | }
|
304 | };
|
305 | |
306 |
|
307 |
|
308 |
|
309 |
|
310 |
|
311 | _this._onSizerMouseMove = function (ev) {
|
312 | var
|
313 |
|
314 |
|
315 | buttons = ev.buttons;
|
316 | var _a = _this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;
|
317 | var columnResizeDetails = _this.state.columnResizeDetails;
|
318 | if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
|
319 |
|
320 | _this._onSizerMouseUp(ev);
|
321 | return;
|
322 | }
|
323 | if (ev.clientX !== columnResizeDetails.originX) {
|
324 | if (onColumnIsSizingChanged) {
|
325 | onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
|
326 | }
|
327 | }
|
328 | if (onColumnResized) {
|
329 | var movement = ev.clientX - columnResizeDetails.originX;
|
330 | if (Utilities_1.getRTL(_this.props.theme)) {
|
331 | movement = -movement;
|
332 | }
|
333 | onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement, columnResizeDetails.columnIndex);
|
334 | }
|
335 | };
|
336 | _this._onSizerBlur = function (ev) {
|
337 | var columnResizeDetails = _this.state.columnResizeDetails;
|
338 | if (columnResizeDetails) {
|
339 | _this.setState({
|
340 | columnResizeDetails: undefined,
|
341 | isSizing: false,
|
342 | });
|
343 | }
|
344 | };
|
345 | |
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 | _this._onSizerMouseUp = function (ev) {
|
353 | var _a = _this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;
|
354 | var columnResizeDetails = _this.state.columnResizeDetails;
|
355 | _this.setState({
|
356 | columnResizeDetails: undefined,
|
357 | isSizing: false,
|
358 | });
|
359 | if (onColumnIsSizingChanged) {
|
360 | onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);
|
361 | }
|
362 | };
|
363 | _this._onToggleCollapseAll = function () {
|
364 | var onToggleCollapseAll = _this.props.onToggleCollapseAll;
|
365 | var newCollapsed = !_this.state.isAllCollapsed;
|
366 | _this.setState({
|
367 | isAllCollapsed: newCollapsed,
|
368 | });
|
369 | if (onToggleCollapseAll) {
|
370 | onToggleCollapseAll(newCollapsed);
|
371 | }
|
372 | };
|
373 | Utilities_1.initializeComponentRef(_this);
|
374 | _this._events = new Utilities_1.EventGroup(_this);
|
375 | _this.state = {
|
376 | columnResizeDetails: undefined,
|
377 | isAllCollapsed: _this.props.isAllCollapsed,
|
378 | isAllSelected: !!_this.props.selection && _this.props.selection.isAllSelected(),
|
379 | };
|
380 | _this._onDropIndexInfo = {
|
381 | sourceIndex: -1,
|
382 | targetIndex: -1,
|
383 | };
|
384 | _this._id = Utilities_1.getId('header');
|
385 | _this._currentDropHintIndex = -1;
|
386 |
|
387 |
|
388 | _this._dragDropHelper = new DragDrop_1.DragDropHelper({
|
389 | selection: {
|
390 | getSelection: function () {
|
391 | return;
|
392 | },
|
393 | },
|
394 | minimumPixelsForDrag: _this.props.minimumPixelsForDrag,
|
395 | });
|
396 | return _this;
|
397 | }
|
398 | DetailsHeaderBase.prototype.componentDidMount = function () {
|
399 | var selection = this.props.selection;
|
400 | this._events.on(selection, Selection_1.SELECTION_CHANGE, this._onSelectionChanged);
|
401 |
|
402 | if (this._rootElement.current) {
|
403 |
|
404 | this._events.on(this._rootElement.current, 'mousedown', this._onRootMouseDown);
|
405 | this._events.on(this._rootElement.current, 'keydown', this._onRootKeyDown);
|
406 | if (this._getColumnReorderProps()) {
|
407 | this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());
|
408 | }
|
409 | }
|
410 | };
|
411 | DetailsHeaderBase.prototype.componentDidUpdate = function (prevProps) {
|
412 | if (this._getColumnReorderProps()) {
|
413 | if (!this._subscriptionObject && this._rootElement.current) {
|
414 | this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());
|
415 | }
|
416 | }
|
417 | else if (this._subscriptionObject) {
|
418 | this._subscriptionObject.dispose();
|
419 | delete this._subscriptionObject;
|
420 | }
|
421 | if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {
|
422 | var _a = prevProps.columns, previousColumns = _a === void 0 ? NO_COLUMNS : _a;
|
423 | var _b = this.props.columns, columns = _b === void 0 ? NO_COLUMNS : _b;
|
424 | if (previousColumns[this._onDropIndexInfo.sourceIndex].key === columns[this._onDropIndexInfo.targetIndex].key) {
|
425 | this._onDropIndexInfo = {
|
426 | sourceIndex: -1,
|
427 | targetIndex: -1,
|
428 | };
|
429 | }
|
430 | }
|
431 | if (this.props.isAllCollapsed !== prevProps.isAllCollapsed) {
|
432 | this.setState({ isAllCollapsed: this.props.isAllCollapsed });
|
433 | }
|
434 | };
|
435 | DetailsHeaderBase.prototype.componentWillUnmount = function () {
|
436 | if (this._subscriptionObject) {
|
437 | this._subscriptionObject.dispose();
|
438 | delete this._subscriptionObject;
|
439 | }
|
440 | this._dragDropHelper.dispose();
|
441 | this._events.dispose();
|
442 | };
|
443 | DetailsHeaderBase.prototype.render = function () {
|
444 | var _this = this;
|
445 | var _a = this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, ariaLabel = _a.ariaLabel, ariaLabelForToggleAllGroupsButton = _a.ariaLabelForToggleAllGroupsButton, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, indentWidth = _a.indentWidth, onColumnClick = _a.onColumnClick, onColumnContextMenu = _a.onColumnContextMenu, _c = _a.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _c === void 0 ? this._onRenderColumnHeaderTooltip : _c, styles = _a.styles, selectionMode = _a.selectionMode, theme = _a.theme, onRenderDetailsCheckbox = _a.onRenderDetailsCheckbox, groupNestingDepth = _a.groupNestingDepth, useFastIcons = _a.useFastIcons, checkboxVisibility = _a.checkboxVisibility, className = _a.className;
|
446 | var _d = this.state, isAllSelected = _d.isAllSelected, columnResizeDetails = _d.columnResizeDetails, isSizing = _d.isSizing, isAllCollapsed = _d.isAllCollapsed;
|
447 | var showCheckbox = selectAllVisibility !== DetailsHeader_types_1.SelectAllVisibility.none;
|
448 | var isCheckboxHidden = selectAllVisibility === DetailsHeader_types_1.SelectAllVisibility.hidden;
|
449 | var isCheckboxAlwaysVisible = checkboxVisibility === DetailsList_types_1.CheckboxVisibility.always;
|
450 | var columnReorderProps = this._getColumnReorderProps();
|
451 | var frozenColumnCountFromStart = columnReorderProps && columnReorderProps.frozenColumnCountFromStart
|
452 | ? columnReorderProps.frozenColumnCountFromStart
|
453 | : 0;
|
454 | var frozenColumnCountFromEnd = columnReorderProps && columnReorderProps.frozenColumnCountFromEnd
|
455 | ? columnReorderProps.frozenColumnCountFromEnd
|
456 | : 0;
|
457 | this._classNames = getClassNames(styles, {
|
458 | theme: theme,
|
459 | isAllSelected: isAllSelected,
|
460 | isSelectAllHidden: selectAllVisibility === DetailsHeader_types_1.SelectAllVisibility.hidden,
|
461 | isResizingColumn: !!columnResizeDetails && isSizing,
|
462 | isSizing: isSizing,
|
463 | isAllCollapsed: isAllCollapsed,
|
464 | isCheckboxHidden: isCheckboxHidden,
|
465 | className: className,
|
466 | });
|
467 | var classNames = this._classNames;
|
468 | var IconComponent = useFastIcons ? Icon_1.FontIcon : Icon_1.Icon;
|
469 | var showGroupExpander = groupNestingDepth > 0 && this.props.collapseAllVisibility === GroupedList_1.CollapseAllVisibility.visible;
|
470 | var columnIndexOffset = 1 + (showCheckbox ? 1 : 0) + (showGroupExpander ? 1 : 0);
|
471 | var isRTL = Utilities_1.getRTL(theme);
|
472 | return (React.createElement(FocusZone_1.FocusZone, { role: "row", "aria-label": ariaLabel, className: classNames.root, componentRef: this._rootComponent, elementRef: this._rootElement, onMouseMove: this._onRootMouseMove, "data-automationid": "DetailsHeader", direction: FocusZone_1.FocusZoneDirection.horizontal },
|
473 | showCheckbox
|
474 | ? [
|
475 | React.createElement("div", { key: "__checkbox", className: classNames.cellIsCheck, "aria-labelledby": this._id + "-checkTooltip", onClick: !isCheckboxHidden ? this._onSelectAllClicked : undefined, role: 'columnheader' }, onRenderColumnHeaderTooltip({
|
476 | hostClassName: classNames.checkTooltip,
|
477 | id: this._id + "-checkTooltip",
|
478 | setAriaDescribedBy: false,
|
479 | content: ariaLabelForSelectAllCheckbox,
|
480 | children: (React.createElement(DetailsRowCheck_1.DetailsRowCheck, { id: this._id + "-check", "aria-label": selectionMode === Selection_1.SelectionMode.multiple
|
481 | ? ariaLabelForSelectAllCheckbox
|
482 | : ariaLabelForSelectionColumn, "data-is-focusable": !isCheckboxHidden || undefined, isHeader: true, selected: isAllSelected, anySelected: false, canSelect: !isCheckboxHidden, className: classNames.check, onRenderDetailsCheckbox: onRenderDetailsCheckbox, useFastIcons: useFastIcons, isVisible: isCheckboxAlwaysVisible })),
|
483 | }, this._onRenderColumnHeaderTooltip)),
|
484 | !this.props.onRenderColumnHeaderTooltip ? (ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (React.createElement("label", { key: "__checkboxLabel", id: this._id + "-checkTooltip", className: classNames.accessibleLabel, "aria-hidden": true }, ariaLabelForSelectAllCheckbox)) : ariaLabelForSelectionColumn && isCheckboxHidden ? (React.createElement("label", { key: "__checkboxLabel", id: this._id + "-checkTooltip", className: classNames.accessibleLabel, "aria-hidden": true }, ariaLabelForSelectionColumn)) : null) : null,
|
485 | ]
|
486 | : null,
|
487 | showGroupExpander ? (React.createElement("div", { className: classNames.cellIsGroupExpander, onClick: this._onToggleCollapseAll, "data-is-focusable": true, "aria-label": ariaLabelForToggleAllGroupsButton, "aria-expanded": !isAllCollapsed, role: "columnheader" },
|
488 | React.createElement(IconComponent, { className: classNames.collapseButton, iconName: isRTL ? 'ChevronLeftMed' : 'ChevronRightMed' }),
|
489 | React.createElement("span", { className: classNames.accessibleLabel }, ariaLabelForToggleAllGroupsButton))) : null,
|
490 | React.createElement(GroupSpacer_1.GroupSpacer, { indentWidth: indentWidth, role: "gridcell", count: groupNestingDepth - 1 }),
|
491 | columns.map(function (column, columnIndex) {
|
492 | var _isDraggable = columnReorderProps
|
493 | ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd
|
494 | : false;
|
495 | return [
|
496 | columnReorderProps &&
|
497 | (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&
|
498 | _this._renderDropHint(columnIndex),
|
499 | React.createElement(DetailsColumn_1.DetailsColumn, { column: column, styles: column.styles, key: column.key, columnIndex: columnIndexOffset + columnIndex, parentId: _this._id, isDraggable: _isDraggable, updateDragInfo: _this._updateDragInfo, dragDropHelper: _this._dragDropHelper, onColumnClick: onColumnClick, onColumnContextMenu: onColumnContextMenu,
|
500 |
|
501 | onRenderColumnHeaderTooltip: _this.props.onRenderColumnHeaderTooltip, isDropped: _this._onDropIndexInfo.targetIndex === columnIndex, cellStyleProps: _this.props.cellStyleProps, useFastIcons: useFastIcons }),
|
502 | _this._renderColumnDivider(columnIndex),
|
503 | ];
|
504 | }),
|
505 | columnReorderProps && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length),
|
506 | isSizing && (React.createElement(Layer_1.Layer, null,
|
507 | React.createElement("div", { className: classNames.sizingOverlay, onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));
|
508 | };
|
509 |
|
510 | DetailsHeaderBase.prototype.focus = function () {
|
511 | var _a;
|
512 | return !!((_a = this._rootComponent.current) === null || _a === void 0 ? void 0 : _a.focus());
|
513 | };
|
514 | |
515 |
|
516 |
|
517 |
|
518 |
|
519 | DetailsHeaderBase.prototype._getColumnReorderProps = function () {
|
520 | var _a = this.props, columnReorderOptions = _a.columnReorderOptions, columnReorderProps = _a.columnReorderProps;
|
521 | return columnReorderProps || (columnReorderOptions && tslib_1.__assign(tslib_1.__assign({}, columnReorderOptions), { onColumnDragEnd: undefined }));
|
522 | };
|
523 | DetailsHeaderBase.prototype._getHeaderDragDropOptions = function () {
|
524 | var options = {
|
525 | selectionIndex: 1,
|
526 | context: { data: this, index: 0 },
|
527 | canDrag: function () { return false; },
|
528 | canDrop: function () { return true; },
|
529 | onDragStart: function () { return undefined; },
|
530 | updateDropState: this._updateDroppingState,
|
531 | onDrop: this._onDrop,
|
532 | onDragEnd: function () { return undefined; },
|
533 | onDragOver: this._onDragOver,
|
534 | };
|
535 | return options;
|
536 | };
|
537 | DetailsHeaderBase.prototype._isValidCurrentDropHintIndex = function () {
|
538 | return this._currentDropHintIndex >= 0;
|
539 | };
|
540 | |
541 |
|
542 |
|
543 | DetailsHeaderBase.prototype._isCheckboxColumnHidden = function () {
|
544 | var _a = this.props, selectionMode = _a.selectionMode, checkboxVisibility = _a.checkboxVisibility;
|
545 | return selectionMode === Selection_1.SelectionMode.none || checkboxVisibility === DetailsList_types_1.CheckboxVisibility.hidden;
|
546 | };
|
547 | DetailsHeaderBase.prototype._resetDropHints = function () {
|
548 | if (this._currentDropHintIndex >= 0) {
|
549 | this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'none');
|
550 | this._currentDropHintIndex = -1;
|
551 | }
|
552 | };
|
553 | DetailsHeaderBase.prototype._updateDropHintElement = function (element, displayProperty) {
|
554 | element.childNodes[1].style.display = displayProperty;
|
555 | element.childNodes[0].style.display = displayProperty;
|
556 | };
|
557 | DetailsHeaderBase.prototype._isEventOnHeader = function (event) {
|
558 | if (this._rootElement.current) {
|
559 | var clientRect = this._rootElement.current.getBoundingClientRect();
|
560 | if (event.clientX > clientRect.left &&
|
561 | event.clientX < clientRect.right &&
|
562 | event.clientY > clientRect.top &&
|
563 | event.clientY < clientRect.bottom) {
|
564 | return DetailsList_types_1.ColumnDragEndLocation.header;
|
565 | }
|
566 | }
|
567 | };
|
568 | DetailsHeaderBase.prototype._renderColumnDivider = function (columnIndex) {
|
569 | var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;
|
570 | var column = columns[columnIndex];
|
571 | var onRenderDivider = column.onRenderDivider;
|
572 | return onRenderDivider
|
573 | ? onRenderDivider({ column: column, columnIndex: columnIndex }, this._renderColumnSizer)
|
574 | : this._renderColumnSizer({ column: column, columnIndex: columnIndex });
|
575 | };
|
576 | DetailsHeaderBase.prototype._renderDropHint = function (dropHintIndex) {
|
577 | var classNames = this._classNames;
|
578 | var IconComponent = this.props.useFastIcons ? Icon_1.FontIcon : Icon_1.Icon;
|
579 | return (React.createElement("div", { key: 'dropHintKey', className: classNames.dropHintStyle, id: "columnDropHint_" + dropHintIndex },
|
580 | React.createElement("div", { role: "presentation", key: "dropHintCircleKey", className: classNames.dropHintCaretStyle, "data-is-focusable": false, "data-sizer-index": dropHintIndex, "aria-hidden": true },
|
581 | React.createElement(IconComponent, { iconName: 'CircleShapeSolid' })),
|
582 | React.createElement("div", { key: "dropHintLineKey", "aria-hidden": true, "data-is-focusable": false, "data-sizer-index": dropHintIndex, className: classNames.dropHintLineStyle })));
|
583 | };
|
584 | |
585 |
|
586 |
|
587 |
|
588 |
|
589 |
|
590 |
|
591 | DetailsHeaderBase.prototype._onSizerDoubleClick = function (columnIndex, ev) {
|
592 | var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;
|
593 | if (onColumnAutoResized) {
|
594 | onColumnAutoResized(columns[columnIndex], columnIndex);
|
595 | }
|
596 | };
|
597 | DetailsHeaderBase.prototype._onSelectionChanged = function () {
|
598 | var isAllSelected = !!this.props.selection && this.props.selection.isAllSelected();
|
599 | if (this.state.isAllSelected !== isAllSelected) {
|
600 | this.setState({
|
601 | isAllSelected: isAllSelected,
|
602 | });
|
603 | }
|
604 | };
|
605 | DetailsHeaderBase.defaultProps = {
|
606 | selectAllVisibility: DetailsHeader_types_1.SelectAllVisibility.visible,
|
607 | collapseAllVisibility: GroupedList_1.CollapseAllVisibility.visible,
|
608 | useFastIcons: true,
|
609 | };
|
610 | return DetailsHeaderBase;
|
611 | }(React.Component));
|
612 | exports.DetailsHeaderBase = DetailsHeaderBase;
|
613 | function _liesBetween(rtl, target, left, right) {
|
614 | return rtl ? target <= left && target >= right : target >= left && target <= right;
|
615 | }
|
616 | function _isBefore(rtl, a, b) {
|
617 | return rtl ? a >= b : a <= b;
|
618 | }
|
619 | function _isAfter(rtl, a, b) {
|
620 | return rtl ? a <= b : a >= b;
|
621 | }
|
622 | function _stopPropagation(ev) {
|
623 | ev.stopPropagation();
|
624 | }
|
625 |
|
\ | No newline at end of file |