improve modal dialogs
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import React, { useRef } from 'react';
|
||||
import {Modal, Button, Row, Col} from 'react-materialize';
|
||||
import {Modal, Button} from 'react-materialize';
|
||||
import "./Modal.css";
|
||||
|
||||
const InputModal = (props) => {
|
||||
const { title, body, confirmAction, stopAction, triggerNode, defaultInputValue, inputLabel } = props;
|
||||
@@ -8,17 +9,9 @@ const InputModal = (props) => {
|
||||
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>
|
||||
<Button modal="confirm" node="button" className="orange" onClick={() => confirmAction(inputField.current.value)}>Do it</Button>,
|
||||
<Button modal="close" node="button" className="bump" onClick={stopAction}>Nope</Button>
|
||||
]}
|
||||
bottomSheet
|
||||
fixedFooter={false}
|
||||
header={title}
|
||||
id="Modal-1"
|
||||
open={false}
|
||||
|
||||
3
client/src/common/Modal.css
Normal file
3
client/src/common/Modal.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.bump {
|
||||
margin-left: 1em !important;
|
||||
}
|
||||
@@ -1,22 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Modal, Button, Row, Col } from 'react-materialize';
|
||||
import { Modal, Button } from 'react-materialize';
|
||||
import "./Modal.css";
|
||||
|
||||
const YesNoModal = (props) => {
|
||||
const { title, body, yesAction, noAction, triggerNode } = props;
|
||||
return(
|
||||
<Modal
|
||||
actions={[
|
||||
<Row>
|
||||
<Col s={3}>
|
||||
<Button modal="confirm" node="button" waves="green" onClick={yesAction}>Yes</Button>
|
||||
</Col>
|
||||
<Col s={3}>
|
||||
<Button modal="close" node="button" waves="red" onClick={noAction}>No</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button modal="confirm" node="button" className="orange" onClick={yesAction}>Do it</Button>,
|
||||
<Button modal="close" node="button" className="bump" onClick={noAction}>Nope</Button>
|
||||
]}
|
||||
bottomSheet
|
||||
fixedFooter={false}
|
||||
header={title}
|
||||
id="Modal-0"
|
||||
open={false}
|
||||
|
||||
Reference in New Issue
Block a user