@blueprintjs/table
Version:
Scalable interactive table component
165 lines • 8.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TruncatedFormat = exports.TruncatedPopoverMode = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
/*
* Copyright 2016 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const core_1 = require("@blueprintjs/core");
const icons_1 = require("@blueprintjs/icons");
const Classes = tslib_1.__importStar(require("../../common/classes"));
const utils_1 = require("../../common/utils");
const locator_1 = require("../../locator");
// amount in pixels that the content div width changes when truncated vs when
// not truncated. Note: could be modified by styles
// Note 2: this doesn't come from the width of the popover element, but the "right" style
// on the div, which comes from styles
const CONTENT_DIV_WIDTH_DELTA = 25;
var TruncatedPopoverMode;
(function (TruncatedPopoverMode) {
TruncatedPopoverMode["ALWAYS"] = "always";
TruncatedPopoverMode["NEVER"] = "never";
TruncatedPopoverMode["WHEN_TRUNCATED"] = "when-truncated";
TruncatedPopoverMode["WHEN_TRUNCATED_APPROX"] = "when-truncated-approx";
})(TruncatedPopoverMode || (exports.TruncatedPopoverMode = TruncatedPopoverMode = {}));
/**
* Truncated cell format component.
*
* @see https://blueprintjs.com/docs/#table/api.truncatedformat
*/
class TruncatedFormat extends react_1.PureComponent {
static displayName = `${core_1.DISPLAYNAME_PREFIX}.TruncatedFormat`;
static defaultProps = {
detectTruncation: false,
measureByApproxOptions: {
approximateCharWidth: 8,
approximateLineHeight: 18,
cellHorizontalPadding: 2 * locator_1.LocatorImpl.CELL_HORIZONTAL_PADDING,
numBufferLines: 0,
},
preformatted: false,
showPopover: TruncatedPopoverMode.WHEN_TRUNCATED,
truncateLength: 2000,
truncationSuffix: "...",
};
state = {
isPopoverOpen: false,
isTruncated: false,
};
contentDiv;
handleContentDivRef = (ref) => (this.contentDiv = ref);
componentDidMount() {
this.setTruncationState();
}
componentDidUpdate() {
this.setTruncationState();
}
render() {
const { children, detectTruncation, truncateLength, truncationSuffix } = this.props;
const content = "" + children;
let cellContent = content;
if (!detectTruncation && truncateLength > 0 && cellContent.length > truncateLength) {
cellContent = cellContent.substring(0, truncateLength) + truncationSuffix;
}
if (this.shouldShowPopover(content)) {
const className = (0, classnames_1.default)(this.props.className, Classes.TABLE_TRUNCATED_FORMAT);
return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("div", { className: Classes.TABLE_TRUNCATED_VALUE, ref: this.handleContentDivRef, children: cellContent }), this.renderPopover()] }));
}
else {
const className = (0, classnames_1.default)(this.props.className, Classes.TABLE_TRUNCATED_FORMAT_TEXT);
return ((0, jsx_runtime_1.jsx)("div", { className: className, ref: this.handleContentDivRef, children: cellContent }));
}
}
renderPopover() {
const { children, preformatted } = this.props;
// `<PopoverNext>` will always check the content's position on update
// regardless if it is open or not. This negatively affects perf due to
// layout thrashing. So instead we manage the popover state ourselves
// and mimic its popover target
if (this.state.isPopoverOpen) {
const popoverClasses = (0, classnames_1.default)(Classes.TABLE_TRUNCATED_POPOVER, preformatted ? Classes.TABLE_POPOVER_WHITESPACE_PRE : Classes.TABLE_POPOVER_WHITESPACE_NORMAL);
const popoverContent = (0, jsx_runtime_1.jsx)("div", { className: popoverClasses, children: children });
return ((0, jsx_runtime_1.jsx)(core_1.PopoverNext, { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, content: popoverContent, isOpen: true, onClose: this.handlePopoverClose, placement: "bottom", rootBoundary: "document", shouldReturnFocusOnClose: false, children: (0, jsx_runtime_1.jsx)(icons_1.More, {}) }));
}
else {
// NOTE: This structure matches what `<PopoverNext>` does internally. If `<PopoverNext>` changes, this must be updated.
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
(0, jsx_runtime_1.jsx)("span", { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, onClick: this.handlePopoverOpen, children: (0, jsx_runtime_1.jsx)(icons_1.More, {}) }));
}
}
handlePopoverOpen = () => {
this.setState({ isPopoverOpen: true });
};
handlePopoverClose = () => {
this.setState({ isPopoverOpen: false });
};
shouldShowPopover(content) {
const { detectTruncation, measureByApproxOptions, showPopover, truncateLength } = this.props;
switch (showPopover) {
case TruncatedPopoverMode.ALWAYS:
return true;
case TruncatedPopoverMode.NEVER:
return false;
case TruncatedPopoverMode.WHEN_TRUNCATED:
return detectTruncation
? this.state.isTruncated
: truncateLength > 0 && content.length > truncateLength;
case TruncatedPopoverMode.WHEN_TRUNCATED_APPROX:
if (!detectTruncation) {
return truncateLength > 0 && content.length > truncateLength;
}
if (this.props.parentCellHeight == null || this.props.parentCellWidth == null) {
return false;
}
const { approximateCharWidth, approximateLineHeight, cellHorizontalPadding, numBufferLines } = measureByApproxOptions;
const cellWidth = this.props.parentCellWidth;
const approxCellHeight = utils_1.Utils.getApproxCellHeight(content, cellWidth, approximateCharWidth, approximateLineHeight, cellHorizontalPadding, numBufferLines);
const shouldTruncate = approxCellHeight > this.props.parentCellHeight;
return shouldTruncate;
default:
return false;
}
}
setTruncationState() {
if (!this.props.detectTruncation || this.props.showPopover !== TruncatedPopoverMode.WHEN_TRUNCATED) {
return;
}
if (this.contentDiv == null) {
this.setState({ isTruncated: false });
return;
}
const { isTruncated } = this.state;
// take all measurements at once to avoid excessive DOM reflows.
const { clientHeight: containerHeight, clientWidth: containerWidth, scrollHeight: actualContentHeight, scrollWidth: contentWidth, } = this.contentDiv;
// if the content is truncated, then a popover handle will be present as a
// sibling of the content. we don't want to consider that handle when
// calculating the width of the actual content, so subtract it.
const actualContentWidth = isTruncated ? contentWidth - CONTENT_DIV_WIDTH_DELTA : contentWidth;
// we of course truncate the content if it doesn't fit in the container. but we
// also aggressively truncate if they're the same size with truncation enabled;
// this addresses browser-crashing stack-overflow bugs at various zoom levels.
// (see: https://github.com/palantir/blueprint/pull/1519)
const shouldTruncate = (isTruncated && actualContentWidth === containerWidth) ||
actualContentWidth > containerWidth ||
actualContentHeight > containerHeight;
this.setState({ isTruncated: shouldTruncate });
}
}
exports.TruncatedFormat = TruncatedFormat;
//# sourceMappingURL=truncatedFormat.js.map