improve modal dialogs

This commit is contained in:
Bilal
2020-10-08 23:17:49 +03:00
parent 6da39656f1
commit 7c0a23251e
3 changed files with 11 additions and 22 deletions

View File

@@ -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}

View File

@@ -0,0 +1,3 @@
.bump {
margin-left: 1em !important;
}

View File

@@ -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}