import * as React from "react" ; import { ModalDialogManager } from "@itwin/appui-react" ; import { Dialog } from "@itwin/core-react" ; import { DialogButtonType } from "@itwin/appui-abstract" ; import { UiItemsProvidersTest } from "../../ui-items-providers-test" ; /**
 *  This is an example of how to create a React-based modal dialog that can be opened via a toolbutton or a key-in.
 */ export function SampleModalDialog ( ) { const title = React . useRef ( UiItemsProvidersTest . translate ( "Dialogs.SampleModal.title" ) ) ; const closeDialog = React . useCallback ( ( ) => { ModalDialogManager . closeDialog ( ) ; } , [ ] ) ; const handleOK = React . useCallback ( ( ) => { closeDialog ( ) ; } , [ closeDialog ] ) ; const handleCancel = React . useCallback ( ( ) => { closeDialog ( ) ; } , [ closeDialog ] ) ; return ( < Dialog title = { title . current } opened = { true } modal = { true } width = { 450 } height = { 300 } onClose = { handleCancel } onEscape = { handleCancel } onOutsideClick = { handleCancel } buttonCluster = { [ { type : DialogButtonType . OK , onClick : handleOK } , { type : DialogButtonType . Cancel , onClick : handleCancel } , ] } > Lorem ipsum dolor sit amet , posse imperdiet ius in , mundi cotidieque ei per . Vel scripta ornatus assentior cu . Duo nonumy equidem te , per ad malis deserunt consetetur . In per invidunt conceptam . Ea pri aeque corrumpit . Eum ea ipsum perfecto vulputate , an cum oblique ornatus . < /Dialog>); }