UNPKG

@blueprintjs/core

Version:

Core styles & components

75 lines 5.18 kB
"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