@itwin/core-react
Version:
A react component library of iTwin.js UI general purpose components
205 lines • 9.88 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Dialog
*/
import classnames from "classnames";
import * as React from "react";
import { Key } from "ts-key-enum";
import { DialogButtonType } from "@itwin/appui-abstract";
import { Dialog as BaseDialog, Button } from "@itwin/itwinui-react";
import { DivWithOutsideClick } from "../base/DivWithOutsideClick.js";
import "./Dialog.scss";
import { useTranslation } from "../l10n/useTranslation.js";
/** Enum for dialog alignment
* @public
* @deprecated in 4.12.0. Enum used in a deprecated component {@link Dialog}.
*/
export var DialogAlignment;
(function (DialogAlignment) {
DialogAlignment["TopLeft"] = "top-left";
DialogAlignment["Top"] = "top";
DialogAlignment["TopRight"] = "top-right";
DialogAlignment["Left"] = "left";
DialogAlignment["Center"] = "center";
DialogAlignment["Right"] = "right";
DialogAlignment["BottomLeft"] = "bottom-left";
DialogAlignment["Bottom"] = "bottom";
DialogAlignment["BottomRight"] = "bottom-right";
})(DialogAlignment || (DialogAlignment = {}));
/** Dialog React component with optional resizing and dragging functionality
* @public
* @deprecated in 4.12.0. Use {@link https://itwinui.bentley.com/docs/dialog iTwinUI dialog} instead.
*/
// eslint-disable-next-line @typescript-eslint/no-deprecated
export class Dialog extends React.Component {
// eslint-disable-next-line @typescript-eslint/no-deprecated
constructor(props) {
super(props);
this._parentDocument = document;
this.handleRefSet = (containerDiv) => {
if (containerDiv)
this._parentDocument = containerDiv.ownerDocument;
};
this._handleKeyUp = (event) => {
if (event.key === Key.Escape.valueOf() &&
this.props.opened &&
this.props.onEscape) {
this.props.onEscape();
}
};
this._handleContainerPointerDown = (event) => {
if (!this.props.modal) {
if (this.props.onModelessPointerDown && this.props.modelessId)
this.props.onModelessPointerDown(event, this.props.modelessId);
}
};
}
componentWillUnmount() {
this._parentDocument.removeEventListener("keyup", this._handleKeyUp, true);
}
componentDidMount() {
this._parentDocument.addEventListener("keyup", this._handleKeyUp, true);
}
render() {
const { opened, title, footer, buttonCluster, onClose, onEscape, onOutsideClick, minWidth, minHeight, x, y, width, height, maxHeight, maxWidth, backgroundStyle, titleStyle, footerStyle, style, contentStyle, contentClassName, modal, resizable, movable, className, alignment, inset, trapFocus, modelessId, onModelessPointerDown, hideHeader, header, as, ...props } = this.props;
let initialOffset = {};
if (x || y) {
initialOffset = {
left: x ?? 0,
top: y ?? 0,
transform: "none",
};
}
const containerStyle = {
...initialOffset,
margin: "",
width,
height,
};
const minMaxStyle = {
minWidth,
minHeight,
maxWidth,
maxHeight,
};
const dialogBaseContainerStyle = {
...containerStyle,
...minMaxStyle,
};
// eslint-disable-next-line @typescript-eslint/no-deprecated
const buttons = this.getFooterButtons(buttonCluster, "high-visibility", true);
return (React.createElement(BaseDialog, { isOpen: opened, onClose: onClose, closeOnExternalClick: false, closeOnEsc: false, style: style, className: classnames("core-dialog", className), isDraggable: movable, isResizable: resizable, trapFocus: trapFocus && modal, preventDocumentScroll: true, "data-testid": "core-dialog-root", ...props },
modal && React.createElement(BaseDialog.Backdrop, { style: backgroundStyle }),
React.createElement(DivWithOutsideClick, { onOutsideClick: onOutsideClick },
React.createElement(BaseDialog.Main, { className: classnames("core-dialog-main", alignment && this.getCSSClassNameFromAlignment(alignment)), "data-testid": "core-dialog-container", style: dialogBaseContainerStyle, onPointerDown: this._handleContainerPointerDown },
!hideHeader &&
(header || (React.createElement(BaseDialog.TitleBar, { titleText: title, style: titleStyle, "data-testid": "core-dialog-head" }))),
React.createElement(BaseDialog.Content, { className: contentClassName, style: { padding: inset ? undefined : 0, ...contentStyle } }, this.props.children),
footer ||
(buttons && (React.createElement(BaseDialog.ButtonBar, { style: footerStyle }, buttons)))))));
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
getCSSClassNameFromAlignment(alignment) {
switch (alignment) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.TopLeft:
return "core-align-top-left";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.Top:
return "core-align-top";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.TopRight:
return "core-align-top-right";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.Left:
return "core-align-left";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.Center:
return "core-align-center";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.Right:
return "core-align-right";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.BottomLeft:
return "core-align-bottom-left";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.Bottom:
return "core-align-bottom";
// eslint-disable-next-line @typescript-eslint/no-deprecated
case DialogAlignment.BottomRight:
return "core-align-bottom-right";
}
}
/** @deprecated in 4.12.0. Use iTwinUI Button instead. */
getFooterButtons(buttonCluster, primaryStyleType = "cta", noCoreButtonClasses = false) {
if (buttonCluster === undefined)
return undefined;
const buttons = [];
buttonCluster.forEach((button, index) => {
buttons.push(React.createElement(DialogButton, { key: index.toString(), button: button, primaryStyleType: primaryStyleType, noCoreButtonClasses: noCoreButtonClasses }));
});
return buttons;
}
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
Dialog.defaultProps = {
maxWidth: "100%",
width: "50%",
hideHeader: false,
resizable: false,
movable: false,
modal: true,
inset: true,
trapFocus: false,
};
function DialogButton({ button, primaryStyleType, noCoreButtonClasses, }) {
const { translate } = useTranslation();
let buttonText = "";
let buttonClass = classnames(!noCoreButtonClasses && "core-dialog-button", !noCoreButtonClasses && `dialog-button-${button.type}`, button.className);
let usePrimaryStyleType = false;
switch (button.type) {
case DialogButtonType.OK:
buttonText = translate("dialog.ok");
buttonClass = classnames(buttonClass, button.buttonStyle);
usePrimaryStyleType = true;
break;
case DialogButtonType.Retry:
buttonText = translate("dialog.retry");
buttonClass = classnames(buttonClass, button.buttonStyle);
usePrimaryStyleType = true;
break;
case DialogButtonType.Yes:
buttonText = translate("dialog.yes");
buttonClass = classnames(buttonClass, button.buttonStyle);
usePrimaryStyleType = true;
break;
case DialogButtonType.No:
buttonText = translate("dialog.no");
buttonClass = classnames(buttonClass, button.buttonStyle);
break;
case DialogButtonType.Cancel:
buttonText = translate("dialog.cancel");
buttonClass = classnames(buttonClass, button.buttonStyle);
break;
case DialogButtonType.Close:
buttonText = translate("dialog.close");
buttonClass = classnames(buttonClass, button.buttonStyle);
break;
case DialogButtonType.Next:
buttonText = translate("dialog.next");
buttonClass = classnames(buttonClass, button.buttonStyle);
usePrimaryStyleType = true;
break;
case DialogButtonType.Previous:
buttonText = translate("dialog.previous");
buttonClass = classnames(buttonClass, button.buttonStyle);
usePrimaryStyleType = true;
break;
}
buttonText = button.label || buttonText;
return (React.createElement(Button, { className: buttonClass, disabled: button.disabled, styleType: usePrimaryStyleType ? primaryStyleType : undefined, onClick: button.onClick }, buttonText));
}
//# sourceMappingURL=Dialog.js.map