|
|
@ -1,5 +1,5 @@ |
|
|
|
import React, { useRef, useState, useEffect } from 'react' |
|
|
|
import React, { useRef, useState, useEffect } from 'react' // eslint-disable-line
|
|
|
|
import { ModalDialogProps } from './types' |
|
|
|
import { ModalDialogProps } from './types' // eslint-disable-line
|
|
|
|
|
|
|
|
|
|
|
|
import './remix-ui-modal-dialog.css' |
|
|
|
import './remix-ui-modal-dialog.css' |
|
|
|
|
|
|
|
|
|
|
@ -12,7 +12,7 @@ export const ModalDialog = (props: ModalDialogProps) => { |
|
|
|
props.hide() |
|
|
|
props.hide() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
useEffect ( |
|
|
|
useEffect( |
|
|
|
() => { |
|
|
|
() => { |
|
|
|
modal.current.focus() |
|
|
|
modal.current.focus() |
|
|
|
}, [] |
|
|
|
}, [] |
|
|
@ -26,13 +26,13 @@ export const ModalDialog = (props: ModalDialogProps) => { |
|
|
|
enterHandler() |
|
|
|
enterHandler() |
|
|
|
} else if (keyCode === 37) { |
|
|
|
} else if (keyCode === 37) { |
|
|
|
// todo && footerIsActive) { // Arrow Left
|
|
|
|
// todo && footerIsActive) { // Arrow Left
|
|
|
|
setState((prevState)=>{return {...prevState, toggleBtn: true}}) |
|
|
|
setState((prevState) => { return { ...prevState, toggleBtn: true } }) |
|
|
|
} else if (keyCode === 39) { |
|
|
|
} else if (keyCode === 39) { |
|
|
|
// todo && footerIsActive) { // Arrow Right
|
|
|
|
// todo && footerIsActive) { // Arrow Right
|
|
|
|
setState((prevState)=>{return {...prevState, toggleBtn: false}}) |
|
|
|
setState((prevState) => { return { ...prevState, toggleBtn: false } }) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const enterHandler = () => { |
|
|
|
const enterHandler = () => { |
|
|
|
if (state.toggleBtn) { |
|
|
|
if (state.toggleBtn) { |
|
|
|
if (props.ok && props.ok.fn) props.ok.fn() |
|
|
|
if (props.ok && props.ok.fn) props.ok.fn() |
|
|
@ -45,10 +45,10 @@ export const ModalDialog = (props: ModalDialogProps) => { |
|
|
|
<div |
|
|
|
<div |
|
|
|
id="modal-dialog" |
|
|
|
id="modal-dialog" |
|
|
|
data-id="modalDialogContainer" |
|
|
|
data-id="modalDialogContainer" |
|
|
|
data-backdrop="static"
|
|
|
|
data-backdrop="static" |
|
|
|
data-keyboard="false" |
|
|
|
data-keyboard="false" |
|
|
|
tabIndex={-1} |
|
|
|
tabIndex={-1} |
|
|
|
className={"modal d-block"} |
|
|
|
className="modal d-block" |
|
|
|
role="dialog" |
|
|
|
role="dialog" |
|
|
|
> |
|
|
|
> |
|
|
|
<div id="modal-background" className="modal-dialog" role="document"> |
|
|
|
<div id="modal-background" className="modal-dialog" role="document"> |
|
|
@ -59,12 +59,12 @@ export const ModalDialog = (props: ModalDialogProps) => { |
|
|
|
handleHide() |
|
|
|
handleHide() |
|
|
|
}} |
|
|
|
}} |
|
|
|
ref={modal} |
|
|
|
ref={modal} |
|
|
|
className={"modal-content remixModalContent " + (props.opts ? props.opts.class ? props.opts.class : '': '')} |
|
|
|
className={'modal-content remixModalContent ' + (props.opts ? props.opts.class ? props.opts.class : '' : '')} |
|
|
|
onKeyDown={({keyCode})=>{modalKeyEvent(keyCode)}} |
|
|
|
onKeyDown={({ keyCode }) => { modalKeyEvent(keyCode) }} |
|
|
|
> |
|
|
|
> |
|
|
|
<div className="modal-header"> |
|
|
|
<div className="modal-header"> |
|
|
|
<h6 className="modal-title" data-id="modalDialogModalTitle"> |
|
|
|
<h6 className="modal-title" data-id="modalDialogModalTitle"> |
|
|
|
{props.title && props.title} |
|
|
|
{props.title && props.title} |
|
|
|
</h6> |
|
|
|
</h6> |
|
|
|
{!props.opts.hideClose && |
|
|
|
{!props.opts.hideClose && |
|
|
|
<span className="modal-close" onClick={() => handleHide()}> |
|
|
|
<span className="modal-close" onClick={() => handleHide()}> |
|
|
@ -82,19 +82,19 @@ export const ModalDialog = (props: ModalDialogProps) => { |
|
|
|
{props.ok && |
|
|
|
{props.ok && |
|
|
|
<span |
|
|
|
<span |
|
|
|
id="modal-footer-ok" |
|
|
|
id="modal-footer-ok" |
|
|
|
className={"modal-ok btn btn-sm " + (state.toggleBtn ? "btn-dark" : "btn-light")} |
|
|
|
className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')} |
|
|
|
onClick={() => { |
|
|
|
onClick={() => { |
|
|
|
if (props.ok && props.ok.fn) props.ok.fn() |
|
|
|
if (props.ok && props.ok.fn) props.ok.fn() |
|
|
|
handleHide() |
|
|
|
handleHide() |
|
|
|
}} |
|
|
|
}} |
|
|
|
tabIndex={1} |
|
|
|
tabIndex={1} |
|
|
|
> |
|
|
|
> |
|
|
|
{props.ok && props.ok.label ? props.ok.label: 'OK'} |
|
|
|
{props.ok && props.ok.label ? props.ok.label : 'OK'} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
} |
|
|
|
} |
|
|
|
<span |
|
|
|
<span |
|
|
|
id="modal-footer-cancel" |
|
|
|
id="modal-footer-cancel" |
|
|
|
className={"modal-cancel btn btn-sm " + (state.toggleBtn ? "btn-light" : "btn-dark")} |
|
|
|
className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')} |
|
|
|
data-dismiss="modal" |
|
|
|
data-dismiss="modal" |
|
|
|
onClick={() => { |
|
|
|
onClick={() => { |
|
|
|
if (props.cancel && props.cancel.fn) props.cancel.fn() |
|
|
|
if (props.cancel && props.cancel.fn) props.cancel.fn() |
|
|
@ -102,13 +102,13 @@ export const ModalDialog = (props: ModalDialogProps) => { |
|
|
|
}} |
|
|
|
}} |
|
|
|
tabIndex={2} |
|
|
|
tabIndex={2} |
|
|
|
> |
|
|
|
> |
|
|
|
{props.cancel && props.cancel.label ? props.cancel.label: 'Cancel'} |
|
|
|
{props.cancel && props.cancel.label ? props.cancel.label : 'Cancel'} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</>); |
|
|
|
</>) |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export default ModalDialog; |
|
|
|
export default ModalDialog |
|
|
|