@blueprintjs/table
Version:
Scalable interactive table component
97 lines • 5.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnHeaderCell = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
/*
* Copyright 2022 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 core_1 = require("@blueprintjs/core");
const Classes = tslib_1.__importStar(require("../common/classes"));
const loadableContent_1 = require("../common/loadableContent");
const utils_1 = require("../common/utils");
const headerCell_1 = require("./headerCell");
const horizontalCellDivider_1 = require("./horizontalCellDivider");
/**
* Column header cell component.
*
* @see https://blueprintjs.com/docs/#table/api.columnheadercell
*/
class ColumnHeaderCell extends core_1.AbstractPureComponent {
static displayName = `${core_1.DISPLAYNAME_PREFIX}.ColumnHeaderCell`;
static defaultProps = {
enableColumnInteractionBar: false,
isActive: false,
menuIcon: "chevron-down",
selectCellsOnMenuClick: true,
};
/**
* This method determines if a `MouseEvent` was triggered on a target that
* should be used as the header click/drag target. This enables users of
* this component to render fully interactive components in their header
* cells without worry of selection or resize operations from capturing
* their mouse events.
*/
static isHeaderMouseTarget(target) {
return (target.classList.contains(Classes.TABLE_HEADER) ||
target.classList.contains(Classes.TABLE_COLUMN_NAME) ||
target.classList.contains(Classes.TABLE_INTERACTION_BAR) ||
target.classList.contains(Classes.TABLE_HEADER_CONTENT));
}
state = {
isActive: false,
};
render() {
const { enableColumnInteractionBar, enableColumnReordering, isColumnSelected, menuIcon, name, nameRenderer, ...spreadableProps } = this.props;
const classes = (0, classnames_1.default)(spreadableProps.className, Classes.TABLE_COLUMN_HEADER_CELL, {
[Classes.TABLE_HAS_INTERACTION_BAR]: enableColumnInteractionBar,
[Classes.TABLE_HAS_REORDER_HANDLE]: this.props.reorderHandle != null,
});
return ((0, jsx_runtime_1.jsxs)(headerCell_1.HeaderCell, { isReorderable: enableColumnReordering, isSelected: isColumnSelected, ...spreadableProps, className: classes, children: [this.renderName(), this.maybeRenderContent(), this.props.loading ? undefined : this.props.resizeHandle] }));
}
renderName() {
const { enableColumnInteractionBar, index, loading, name, nameRenderer, reorderHandle } = this.props;
const dropdownMenu = this.maybeRenderDropdownMenu();
const defaultName = (0, jsx_runtime_1.jsx)("div", { className: Classes.TABLE_TRUNCATED_TEXT, children: name });
const nameComponent = ((0, jsx_runtime_1.jsx)(loadableContent_1.LoadableContent, { loading: loading ?? false, variableLength: true, children: nameRenderer?.(name, index) ?? defaultName }));
if (enableColumnInteractionBar) {
return ((0, jsx_runtime_1.jsxs)("div", { className: Classes.TABLE_COLUMN_NAME, title: name, children: [(0, jsx_runtime_1.jsxs)("div", { className: Classes.TABLE_INTERACTION_BAR, children: [reorderHandle, dropdownMenu] }), (0, jsx_runtime_1.jsx)(horizontalCellDivider_1.HorizontalCellDivider, {}), (0, jsx_runtime_1.jsx)("div", { className: Classes.TABLE_COLUMN_NAME_TEXT, children: nameComponent })] }));
}
else {
return ((0, jsx_runtime_1.jsxs)("div", { className: Classes.TABLE_COLUMN_NAME, title: name, children: [reorderHandle, dropdownMenu, (0, jsx_runtime_1.jsx)("div", { className: Classes.TABLE_COLUMN_NAME_TEXT, children: nameComponent })] }));
}
}
maybeRenderContent() {
if (this.props.children === null) {
return undefined;
}
return (0, jsx_runtime_1.jsx)("div", { className: Classes.TABLE_HEADER_CONTENT, children: this.props.children });
}
maybeRenderDropdownMenu() {
const { index, menuIcon, menuPopoverProps, menuRenderer, selectCellsOnMenuClick } = this.props;
if (!core_1.Utils.isFunction(menuRenderer)) {
return undefined;
}
const classes = (0, classnames_1.default)(Classes.TABLE_TH_MENU_CONTAINER, utils_1.CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT, {
[Classes.TABLE_TH_MENU_OPEN]: this.state.isActive,
[Classes.TABLE_TH_MENU_SELECT_CELLS]: selectCellsOnMenuClick,
});
return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)("div", { className: Classes.TABLE_TH_MENU_CONTAINER_BACKGROUND }), (0, jsx_runtime_1.jsx)(core_1.PopoverNext, { className: (0, classnames_1.default)(Classes.TABLE_TH_MENU, menuPopoverProps?.className), content: menuRenderer(index), onClosing: this.handlePopoverClosing, onOpened: this.handlePopoverOpened, placement: "bottom", rootBoundary: "document", ...(0, core_1.popoverPropsToNextProps)(menuPopoverProps), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { icon: menuIcon }) })] }));
}
handlePopoverOpened = () => this.setState({ isActive: true });
handlePopoverClosing = () => this.setState({ isActive: false });
}
exports.ColumnHeaderCell = ColumnHeaderCell;
//# sourceMappingURL=columnHeaderCell.js.map