UNPKG

@blueprintjs/core

Version:

Core styles & components

104 lines 4.63 kB
"use strict"; /* * Copyright 2018 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.Drawer = exports.DrawerSize = 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 Errors = tslib_1.__importStar(require("../../common/errors")); const position_1 = require("../../common/position"); const props_1 = require("../../common/props"); const buttons_1 = require("../button/buttons"); const html_1 = require("../html/html"); const icon_1 = require("../icon/icon"); const overlay2_1 = require("../overlay2/overlay2"); var DrawerSize; (function (DrawerSize) { DrawerSize["SMALL"] = "360px"; DrawerSize["STANDARD"] = "50%"; DrawerSize["LARGE"] = "90%"; })(DrawerSize || (exports.DrawerSize = DrawerSize = {})); class Drawer extends common_1.AbstractPureComponent { render() { var _a; const { hasBackdrop, size, style, position } = this.props; const { className, children, ...overlayProps } = this.props; const realPosition = (0, position_1.getPositionIgnoreAngles)(position); const classes = (0, classnames_1.default)(common_1.Classes.DRAWER, { [(_a = common_1.Classes.positionClass(realPosition)) !== null && _a !== void 0 ? _a : ""]: true, }, className); const styleProp = size == null ? style : { ...style, [(0, position_1.isPositionHorizontal)(realPosition) ? "height" : "width"]: size, }; return ( // N.B. the `OVERLAY_CONTAINER` class is a bit of a misnomer since it is only being used by the Drawer // component, but we keep it for backwards compatibility. React.createElement(overlay2_1.Overlay2, { ...overlayProps, className: (0, classnames_1.default)({ [common_1.Classes.OVERLAY_CONTAINER]: hasBackdrop }) }, React.createElement("div", { className: classes, style: styleProp }, this.maybeRenderHeader(), children))); } validateProps(props) { if (props.title == null) { if (props.icon != null) { console.warn(Errors.DIALOG_WARN_NO_HEADER_ICON); } if (props.isCloseButtonShown != null) { console.warn(Errors.DIALOG_WARN_NO_HEADER_CLOSE_BUTTON); } } if (props.position != null) { if (props.position !== (0, position_1.getPositionIgnoreAngles)(props.position)) { console.warn(Errors.DRAWER_ANGLE_POSITIONS_ARE_CASTED); } } } maybeRenderCloseButton() { // `isCloseButtonShown` can't be defaulted through default props because of props validation // so this check actually defaults it to true (fails only if directly set to false) if (this.props.isCloseButtonShown !== false) { return (React.createElement(buttons_1.Button, { "aria-label": "Close", className: common_1.Classes.DIALOG_CLOSE_BUTTON, icon: React.createElement(icons_1.SmallCross, { size: icons_1.IconSize.LARGE }), onClick: this.props.onClose, variant: "minimal" })); } else { return null; } } maybeRenderHeader() { const { icon, title } = this.props; if (title == null) { return null; } return (React.createElement("div", { className: common_1.Classes.DRAWER_HEADER }, React.createElement(icon_1.Icon, { icon: icon, size: icons_1.IconSize.LARGE }), React.createElement(html_1.H4, null, title), this.maybeRenderCloseButton())); } } exports.Drawer = Drawer; Drawer.displayName = `${props_1.DISPLAYNAME_PREFIX}.Drawer`; Drawer.defaultProps = { canOutsideClickClose: true, isOpen: false, position: "right", style: {}, }; //# sourceMappingURL=drawer.js.map