import React , { useState , PropsWithChildren } from 'react' ; import { Dialog , Classes , RadioGroup , Radio } from '@blueprintjs/core' ; import classNames from 'classnames' ; import { DialogProps } from './DialogController' ; export const DeltaDialogBase = React . memo < React . PropsWithChildren < { isOpen : boolean ; onClose : ( ) => void ; canEscapeKeyClose ? : boolean ; showCloseButton ? : boolean ; fixed ? : boolean ; className ? : string ; style ? : React . CSSProperties ; backdropProps ? : any ; canOutsideClickClose ? : boolean ; } > > ( props => { const isFixed = props . fixed ; return ( < > < Dialog isOpen = { props . isOpen } onClose = { props . onClose } canOutsideClickClose = { typeof props . canOutsideClickClose === 'undefined' ? true : props . canOutsideClickClose } isCloseButtonShown = { props . showCloseButton } canEscapeKeyClose = { true } backdropProps = { props . backdropProps } className = { classNames ( 'delta-dialog' , isFixed === true ? 'FixedDeltaDialog' : 'DeltaDialog' , [ props . className ] ) } style = { props . style } > { props . children } < /Dialog> < />); } ) ; export function DeltaDialogCloseButton ( props ) { return ( < div className = 'header-button-wrapper close-btn' > < button { ... props } aria - label = 'Close' className = 'bp3-dialog-close-button bp3-button bp3-minimal bp3-icon-large bp3-icon-cross' / > < /div>); } function DeltaDialogBackButton ( props ) { return ( < div className = 'header-button-wrapper back-btn' > < button { ... props } className = 'bp3-button bp3-minimal bp3-icon-large bp3-icon-arrow-left' / > < /div>); } function DeltaDialogEditButton ( props ) { return ( < div className = 'header-button-wrapper edit-btn' > < div { ... props } / > < /div>); } const DeltaDialog = React . memo < React . PropsWithChildren < { isOpen : boolean ; onClose : ( ) => void ; title : string ; fixed ? : boolean ; className ? : string ; style ? : React . CSSProperties ; onClickBack ? : ( ) => void ; showBackButton ? : boolean ; showCloseButton ? : boolean ; } > > ( props => { return ( < DeltaDialogBase isOpen = { props . isOpen } onClose = { props . onClose } fixed = { props . fixed } className = { props . className } style = { props . style } showCloseButton = { props . showCloseButton } > < DeltaDialogHeader onClose = { props . onClose } onClickBack = { props . onClickBack } showBackButton = { props . showBackButton } showCloseButton = { props . showCloseButton } title = { props . title } / > { props . children } < /DeltaDialogBase>); } ) ; export default DeltaDialog ; export function useDialog < T extends ( props : any ) => JSX . Element > ( DialogComponent ) { const [ isOpen , setIsOpen ] = useState ( false ) ; const [ props , setProps ] = useState ( { } ) ; const showDialog = ( props ) => { setProps ( props || { } ) ; setIsOpen ( true ) ; } ; const dismissDialog = ( ) => { setIsOpen ( false ) ; } ; const onClose = dismissDialog ; const renderDialog = ( ) => { if ( ! isOpen ) return null ; const Component = DialogComponent as ( props : any ) => JSX . Element ; return < Component { ... { ... props , isOpen , onClose } } / > ; } ; return [ renderDialog , showDialog ] as [ typeof renderDialog , typeof showDialog ] ; } export function DeltaDialogHeader ( props ) { const { onClickBack , title , onClose , onClickEdit , children , showCloseButton , showEditButton , } = props ; let { showBackButton } = props ; if ( typeof showBackButton === 'undefined' ) showBackButton = typeof onClickBack === 'function' ; return ( < div className = { classNames ( Classes . DIALOG_HEADER , 'bp3-dialog-header-border-bottom' ) } > { showBackButton && < DeltaDialogBackButton onClick = { onClickBack } />} { title && < h4 className = 'bp3-heading' > { title } < /h4>} { children } { showEditButton && < DeltaDialogEditButton onClick = { onClickEdit } />} { typeof onClose === 'function' && showCloseButton !== false && ( < DeltaDialogCloseButton onClick = { onClose } />)} < /div>); } export function DeltaDialogFooter ( props ) { const { children } = props ; let { hide } = props ; if ( typeof hide === 'undefined' ) hide = typeof children === 'undefined' ; return ( < div style = { { display : hide ? 'none' : 'block' , ... props . style } } className = { classNames ( Classes . DIALOG_FOOTER , 'bp3-dialog-footer-border-top' ) } > { children } < /div>); } export function DeltaDialogBody ( props ) { const { noFooter , children , style } = props ; return ( < div ref = { props . ref } className = { classNames ( Classes . DIALOG_BODY , { 'bp3-dialog-body-no-footer' : noFooter !== false , } ) } style = { style } > { children } < /div>); } export function DeltaDialogContent ( props ) { const { noPadding , noOverflow } = props ; return ( < div style = { props . style } className = { classNames ( 'delta-dialog-content' , { 'delta-dialog-content--no-padding' : noPadding , 'delta-dialog-content--no-overflow' : noOverflow , } ) } > { props . children } < /div>); } export function DeltaDialogContentTextSeperator ( props ) { return < div className = 'delta-dialog-content-text-seperator' > { props . text } < /div>; } export function DeltaDialogButton ( props ) { return ( < div onClick = { props . onClick } className = 'delta-dialog-button' > { props . children } < /div>); } export function SmallDialog ( props ) { return ( < Dialog isOpen = { props . isOpen } onClose = { props . onClose } canOutsideClickClose className = 'delta-dialog small-dialog' > { props . children } < /Dialog>); } export type SelectDialogOption = [ value : string , label : string ] ; export function SmallSelectDialog ( { selectedValue , values , onSave , title , isOpen , onClose , onSelect , onCancel , } ) { const [ actualSelectedValue , setActualSelectedValue ] = useState < string > ( selectedValue ) ; const onChange = ( event ) => { const actualSelectedValue = String ( event . currentTarget . value ) ; setActualSelectedValue ( actualSelectedValue ) ; onSelect && onSelect ( actualSelectedValue ) ; } ; const saveAndClose = ( ) => { onSave && onSave ( actualSelectedValue ) ; onClose ( ) ; } ; const tx = window . static_translate ; return ( < SmallDialog isOpen = { isOpen } onClose = { onClose } > < DeltaDialogHeader title = { title } /> < DeltaDialogBody > < DeltaDialogContent > < RadioGroup onChange = { onChange } selectedValue = { actualSelectedValue } > { values . map ( ( element , index ) => { const [ value , label ] = element ; return ( < Radio key = { 'select-' + index } label = { label } value = { value } / > ) ; } ) } < /RadioGroup> < /DeltaDialogContent> < /DeltaDialogBody> < DeltaDialogFooter style = { { marginTop : '0px' , padding : '20px' } } > < DeltaDialogFooterActions > < p className = 'delta-button primary bold' onClick = { ( ) => { onCancel && onCancel ( ) ; onClose ( ) ; } } > { tx ( 'cancel' ) } < /p> < p className = 'delta-button primary bold' onClick = { saveAndClose } > { tx ( 'save_desktop' ) } < /p> < /DeltaDialogFooterActions> < /DeltaDialogFooter> < /SmallDialog>); } export function DeltaDialogFooterActions ( { children , style , } ) { return ( < div style = { { justifyContent : 'flex-end' , ... style } } className = { Classes . DIALOG_FOOTER_ACTIONS } > { children } < /div>); } export function DeltaDialogOkCancelFooter ( { onCancel , onOk , } ) { const tx = window . static_translate ; return ( < DeltaDialogFooter > < DeltaDialogFooterActions > < p className = 'delta-button primary bold' style = { { marginRight : '10px' } } onClick = { onCancel } > { tx ( 'cancel' ) } < /p> < p className = { 'delta-button bold primary' } onClick = { onOk } > { tx ( 'ok' ) } < /p> < /DeltaDialogFooterActions> < /DeltaDialogFooter>); } export function DeltaDialogCloseFooter ( { onClose } ) { const tx = window . static_translate ; return ( < DeltaDialogFooter > < DeltaDialogFooterActions > < p className = { 'delta-button bold primary' } onClick = { onClose } > { tx ( 'close' ) } < /p> < /DeltaDialogFooterActions> < /DeltaDialogFooter>); }