50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
|
import React, { useRef } from 'react';
|
||
|
|
import {Modal, Button, Row, Col} from 'react-materialize';
|
||
|
|
|
||
|
|
const InputModal = (props) => {
|
||
|
|
const { title, body, confirmAction, stopAction, triggerNode, defaultInputValue, inputLabel } = props;
|
||
|
|
const inputField = useRef(null);
|
||
|
|
|
||
|
|
return(
|
||
|
|
<Modal
|
||
|
|
actions={[
|
||
|
|
<Row>
|
||
|
|
<Col s={3}>
|
||
|
|
<Button modal="confirm" node="button" waves="green" onClick={() => confirmAction(inputField.current.value)}>Do it</Button>
|
||
|
|
</Col>
|
||
|
|
<Col s={3}>
|
||
|
|
<Button modal="close" node="button" waves="red" onClick={stopAction}>Stop</Button>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
]}
|
||
|
|
bottomSheet
|
||
|
|
fixedFooter={false}
|
||
|
|
header={title}
|
||
|
|
id="Modal-1"
|
||
|
|
open={false}
|
||
|
|
options={{
|
||
|
|
dismissible: true,
|
||
|
|
endingTop: '10%',
|
||
|
|
inDuration: 250,
|
||
|
|
onCloseEnd: null,
|
||
|
|
onCloseStart: null,
|
||
|
|
onOpenEnd: null,
|
||
|
|
onOpenStart: null,
|
||
|
|
opacity: 0.5,
|
||
|
|
outDuration: 250,
|
||
|
|
preventScrolling: true,
|
||
|
|
startingTop: '4%'
|
||
|
|
}}
|
||
|
|
trigger={triggerNode}
|
||
|
|
>
|
||
|
|
<p><strong>{body}</strong></p>
|
||
|
|
<br/>
|
||
|
|
<div className="input-field col s6">
|
||
|
|
<input ref={inputField} defaultValue={defaultInputValue} id="input-num" type="number" className="validate" />
|
||
|
|
<label className="active" htmlFor="input-num">{inputLabel}</label>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default InputModal;
|