UNPKG

@gooddata/react-components

Version:

GoodData.UI - A powerful JavaScript library for building analytical applications

139 lines • 7.44 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // (C) 2019 GoodData Corporation var classNames = require("classnames"); var clamp = require("lodash/clamp"); var js_utils_1 = require("@gooddata/js-utils"); var mappingHeader_1 = require("../../../../helpers/mappingHeader"); var row_1 = require("./row"); var align_1 = require("../constants/align"); var layout_1 = require("../constants/layout"); var HEADER_PADDING = 8; var MOBILE_SORT_TOOLTIP_OFFSET = 20; var isLeftAligned = function (align) { return align === align_1.ALIGN_LEFT; }; var getPoints = function (x, y) { if (y === void 0) { y = -HEADER_PADDING; } return ({ x: x, y: y }); }; // y has always offset var simplifyText = js_utils_1.string.simplifyText; function calculateArrowPosition(columnProperties, tableScrollX, tableWrapRef) { var tableWrapRect = tableWrapRef.getBoundingClientRect(); // diff between table position and fixed tooltip left offset var offsetLeft = tableWrapRect.left - MOBILE_SORT_TOOLTIP_OFFSET; // prevent arrow to show outside the table var min = offsetLeft + HEADER_PADDING; var max = tableWrapRect.right - MOBILE_SORT_TOOLTIP_OFFSET - HEADER_PADDING; var left = columnProperties.width * columnProperties.index - tableScrollX + (isLeftAligned(columnProperties.align) ? HEADER_PADDING : columnProperties.width - HEADER_PADDING) + offsetLeft; return { left: clamp(left, min, max) + "px" }; } exports.calculateArrowPosition = calculateArrowPosition; function getHeaderClassNames(header) { return classNames("gd-table-header-ordering", "s-id-" + simplifyText(mappingHeader_1.getMappingHeaderLocalIdentifier(header))); } exports.getHeaderClassNames = getHeaderClassNames; function getHeaderOffset(hasHiddenRows) { return layout_1.DEFAULT_HEADER_HEIGHT + (hasHiddenRows ? 1.5 : 1) * layout_1.DEFAULT_ROW_HEIGHT; } exports.getHeaderOffset = getHeaderOffset; function isHeaderAtDefaultPosition(stickyHeaderOffset, tableTop) { return tableTop >= stickyHeaderOffset; } exports.isHeaderAtDefaultPosition = isHeaderAtDefaultPosition; function getFooterHeight(totals, totalsEditAllowed, totalsAreVisible) { return ((totalsAreVisible ? totals.length * layout_1.DEFAULT_FOOTER_ROW_HEIGHT : 0) + (totalsEditAllowed ? layout_1.TOTALS_ADD_ROW_HEIGHT : 0)); } exports.getFooterHeight = getFooterHeight; function isFooterAtDefaultPosition(hasHiddenRows, tableBottom, windowHeight) { var hiddenRowsOffset = row_1.getHiddenRowsOffset(hasHiddenRows); return tableBottom - hiddenRowsOffset <= windowHeight; } exports.isFooterAtDefaultPosition = isFooterAtDefaultPosition; function isFooterAtEdgePosition(hasHiddenRows, totals, windowHeight, totalsEditAllowed, totalsAreVisible, tableDimensions) { var tableHeight = tableDimensions.height, tableBottom = tableDimensions.bottom; var footerHeight = getFooterHeight(totals, totalsEditAllowed, totalsAreVisible); var headerOffset = getHeaderOffset(hasHiddenRows); var footerHeightTranslate = tableHeight - footerHeight; return tableBottom + headerOffset >= windowHeight + footerHeightTranslate; } exports.isFooterAtEdgePosition = isFooterAtEdgePosition; function getFooterPositions(hasHiddenRows, totals, windowHeight, totalsEditAllowed, totalsAreVisible, tableDimensions) { var tableHeight = tableDimensions.height, tableBottom = tableDimensions.bottom; var footerHeight = getFooterHeight(totals, totalsEditAllowed, totalsAreVisible); var hiddenRowsOffset = row_1.getHiddenRowsOffset(hasHiddenRows); var headerOffset = getHeaderOffset(hasHiddenRows); var footerHeightTranslate = tableHeight - footerHeight; return { defaultTop: -hiddenRowsOffset, edgeTop: headerOffset - footerHeightTranslate, fixedTop: windowHeight - footerHeightTranslate - footerHeight, absoluteTop: windowHeight - tableBottom, }; } exports.getFooterPositions = getFooterPositions; function isHeaderAtEdgePosition(stickyHeaderOffset, hasHiddenRows, totals, tableBottom, totalsEditAllowed, totalsAreVisible) { var footerHeight = getFooterHeight(totals, totalsEditAllowed, totalsAreVisible); var hiddenRowsOffset = row_1.getHiddenRowsOffset(hasHiddenRows); var headerOffset = getHeaderOffset(hasHiddenRows); return (tableBottom >= stickyHeaderOffset && tableBottom < stickyHeaderOffset + headerOffset + footerHeight + hiddenRowsOffset); } exports.isHeaderAtEdgePosition = isHeaderAtEdgePosition; function getHeaderPositions(stickyHeaderOffset, hasHiddenRows, totals, totalsEditAllowed, totalsAreVisible, tableDimensions) { var tableHeight = tableDimensions.height, tableTop = tableDimensions.top; var footerHeight = getFooterHeight(totals, totalsEditAllowed, totalsAreVisible); var hiddenRowsOffset = row_1.getHiddenRowsOffset(hasHiddenRows); var headerOffset = getHeaderOffset(hasHiddenRows); return { defaultTop: 0, edgeTop: tableHeight - headerOffset - footerHeight - hiddenRowsOffset, fixedTop: stickyHeaderOffset, absoluteTop: stickyHeaderOffset - tableTop, }; } exports.getHeaderPositions = getHeaderPositions; exports.getTooltipAlignPoints = function (columnAlign) { return isLeftAligned(columnAlign) ? [ { align: "bl tl", offset: getPoints(HEADER_PADDING, 0) }, { align: "bl tc", offset: getPoints(HEADER_PADDING, 0) }, { align: "bl tr", offset: getPoints(HEADER_PADDING, 0) }, ] : [ { align: "br tr", offset: getPoints(-HEADER_PADDING, 0) }, { align: "br tc", offset: getPoints(-HEADER_PADDING, 0) }, { align: "br tl", offset: getPoints(-HEADER_PADDING, 0) }, ]; }; function getTooltipSortAlignPoints(columnAlign) { // Known issue - wrong tooltip alignment when // distance between table left side and window is more than cca 20px, // header cell is not fully visible (is scrolled) // last align point is used when header cell is not fully visible (scroll) return isLeftAligned(columnAlign) ? [ { align: "bl tl", offset: getPoints(HEADER_PADDING) }, { align: "bl tc", offset: getPoints(HEADER_PADDING) }, { align: "bl tr", offset: getPoints(HEADER_PADDING) }, { align: "br tl", offset: getPoints(-HEADER_PADDING) }, { align: "tl bl", offset: getPoints(HEADER_PADDING, HEADER_PADDING) }, { align: "tl bc", offset: getPoints(HEADER_PADDING, HEADER_PADDING) }, { align: "tl br", offset: getPoints(HEADER_PADDING, HEADER_PADDING) }, { align: "tr bl", offset: getPoints(-HEADER_PADDING, HEADER_PADDING) }, ] : [ { align: "br tr", offset: getPoints(-HEADER_PADDING) }, { align: "br tc", offset: getPoints(-HEADER_PADDING) }, { align: "br tl", offset: getPoints(-HEADER_PADDING) }, { align: "bl tr", offset: getPoints(HEADER_PADDING) }, { align: "tr br", offset: getPoints(-HEADER_PADDING, HEADER_PADDING) }, { align: "tr bc", offset: getPoints(-HEADER_PADDING, HEADER_PADDING) }, { align: "tr bl", offset: getPoints(-HEADER_PADDING, HEADER_PADDING) }, { align: "tl br", offset: getPoints(HEADER_PADDING, HEADER_PADDING) }, ]; } exports.getTooltipSortAlignPoints = getTooltipSortAlignPoints; //# sourceMappingURL=layout.js.map