@blueprintjs/core
Version:
Core styles & components
75 lines • 5.18 kB
JavaScript
"use strict";
/*
* Copyright 2023 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.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.Section = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@blueprintjs/icons");
const common_1 = require("../../common");
const props_1 = require("../../common/props");
const utils_1 = require("../../common/utils");
const card_1 = require("../card/card");
const collapse_1 = require("../collapse/collapse");
const html_1 = require("../html/html");
const icon_1 = require("../icon/icon");
/**
* Section component.
*
* @see https://blueprintjs.com/docs/#core/components/section
*/
exports.Section = React.forwardRef((props, ref) => {
var _a;
const { children, className, collapseProps, collapsible, compact = false, elevation = common_1.Elevation.ZERO, icon, rightElement, subtitle, title, titleRenderer = html_1.H6, ...htmlProps } = props;
// Determine whether to use controlled or uncontrolled state.
const isControlled = (collapseProps === null || collapseProps === void 0 ? void 0 : collapseProps.isOpen) != null;
// The initial useState value is negated in order to conform to the `isCollapsed` expectation.
const [isCollapsedUncontrolled, setIsCollapsed] = React.useState(!((_a = collapseProps === null || collapseProps === void 0 ? void 0 : collapseProps.defaultIsOpen) !== null && _a !== void 0 ? _a : true));
const isCollapsed = isControlled ? !(collapseProps === null || collapseProps === void 0 ? void 0 : collapseProps.isOpen) : isCollapsedUncontrolled;
const toggleIsCollapsed = React.useCallback(() => {
var _a;
if (isControlled) {
(_a = collapseProps === null || collapseProps === void 0 ? void 0 : collapseProps.onToggle) === null || _a === void 0 ? void 0 : _a.call(collapseProps);
}
else {
setIsCollapsed(!isCollapsed);
}
}, [collapseProps, isCollapsed, isControlled]);
const isHeaderRightContainerVisible = rightElement != null || collapsible;
const sectionId = (0, utils_1.uniqueId)("section");
const sectionTitleId = title ? (0, utils_1.uniqueId)("section-title") : undefined;
return (React.createElement(card_1.Card, { className: (0, classnames_1.default)(className, common_1.Classes.SECTION, {
[common_1.Classes.COMPACT]: compact,
[common_1.Classes.SECTION_COLLAPSED]: (collapsible && isCollapsed) || common_1.Utils.isReactNodeEmpty(children),
}), elevation: elevation, ref: ref, "aria-labelledby": sectionTitleId, ...htmlProps, id: sectionId },
title && (React.createElement("div", { className: (0, classnames_1.default)(common_1.Classes.SECTION_HEADER, {
[common_1.Classes.INTERACTIVE]: collapsible,
}), onClick: collapsible ? toggleIsCollapsed : undefined },
React.createElement("div", { className: common_1.Classes.SECTION_HEADER_LEFT },
icon && React.createElement(icon_1.Icon, { icon: icon, "aria-hidden": true, tabIndex: -1, className: common_1.Classes.TEXT_MUTED }),
React.createElement("div", null,
React.createElement(titleRenderer, { className: common_1.Classes.SECTION_HEADER_TITLE, id: sectionTitleId }, title),
subtitle && (React.createElement("div", { className: (0, classnames_1.default)(common_1.Classes.TEXT_MUTED, common_1.Classes.SECTION_HEADER_SUB_TITLE) }, subtitle)))),
isHeaderRightContainerVisible && (React.createElement("div", { className: common_1.Classes.SECTION_HEADER_RIGHT },
rightElement,
collapsible && (React.createElement("span", { role: "button", tabIndex: 0, "aria-pressed": isCollapsed, "aria-expanded": isCollapsed, "aria-controls": sectionId, "aria-label": isCollapsed ? "expand section" : "collapse section",
// no OnClick, click event triggers header below
onKeyDown: (0, utils_1.clickElementOnKeyPress)(["Enter", " "]), className: (0, classnames_1.default)(common_1.Classes.TEXT_MUTED, common_1.Classes.SECTION_HEADER_COLLAPSE_CARET) }, isCollapsed ? React.createElement(icons_1.ChevronDown, null) : React.createElement(icons_1.ChevronUp, null))))))),
collapsible ? (React.createElement(collapse_1.Collapse, { ...collapseProps, isOpen: !isCollapsed }, children)) : (children)));
});
exports.Section.displayName = `${props_1.DISPLAYNAME_PREFIX}.Section`;
//# sourceMappingURL=section.js.map