confirm component is added
This commit is contained in:
parent
bbd4ae4bba
commit
e87de4262d
|
@ -90,7 +90,7 @@ const propTypes = {
|
|||
const Logout = ({ visible, onHide, onLogout }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
onHide={onHide}
|
||||
onOutside={onHide}
|
||||
transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
|
||||
transitionLeave={`${transitions.slideUp} .5s ease-in-out`}
|
||||
transitionEnterTimeout={500}
|
||||
|
|
|
@ -7,6 +7,7 @@ import { media, transitions } from 'helpers/style-utils';
|
|||
|
||||
import Modal from './Modal';
|
||||
import Button from './Button';
|
||||
import Dimmed from './Dimmed';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
|
@ -33,11 +34,12 @@ const Buttons = styled.div`
|
|||
padding: 1rem;
|
||||
`
|
||||
|
||||
const Confirm = ({ visible, message, buttons, onHide }) => {
|
||||
const Confirm = ({ visible, onOutside, message, buttons }) => {
|
||||
const buttonList = buttons
|
||||
.map(button =>
|
||||
<Button
|
||||
clear
|
||||
key={button.text}
|
||||
clear={true}
|
||||
danger={button.danger === true}
|
||||
info={button.info === true}
|
||||
onClick={button.action}>
|
||||
|
@ -45,13 +47,26 @@ const Confirm = ({ visible, message, buttons, onHide }) => {
|
|||
</Button>
|
||||
);
|
||||
return (
|
||||
<Modal visible={visible} onHide={onHide}>
|
||||
<div>
|
||||
<Modal visible={visible} onOutside={onOutside} zindex='1000'>
|
||||
<Wrapper>
|
||||
<Message>{message}</Message>
|
||||
<Buttons>{buttonList}</Buttons>
|
||||
</Wrapper>
|
||||
</Modal>
|
||||
<Dimmed visible={visible} zindex='999'/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Confirm.propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
onOutside: PropTypes.func,
|
||||
}
|
||||
|
||||
Confirm.defaultProps = {
|
||||
visible: false,
|
||||
onOutside: () => {},
|
||||
}
|
||||
|
||||
export default Confirm;
|
|
@ -25,7 +25,7 @@ Dimmed.propTypes = {
|
|||
|
||||
Dimmed.defaultProps = {
|
||||
visible: false,
|
||||
zindex: '5'
|
||||
zindex: '300'
|
||||
}
|
||||
|
||||
export default Dimmed;
|
|
@ -10,6 +10,7 @@ import JsonSchemaForm from 'react-jsonschema-form';
|
|||
import Modal from './Modal';
|
||||
import Button from './Button';
|
||||
import Spinner from './Spinner';
|
||||
import Confirm from './Confirm';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
|
@ -143,25 +144,55 @@ class Form extends Component {
|
|||
title: ""
|
||||
};
|
||||
|
||||
state = {
|
||||
editing: false,
|
||||
confirm: false
|
||||
};
|
||||
|
||||
handleChange = data => {
|
||||
const {
|
||||
onChange
|
||||
} = this.props;
|
||||
|
||||
this.setState({ editing: true })
|
||||
onChange(data.formData, data.errors)
|
||||
}
|
||||
|
||||
handleSubmitButton = () => {
|
||||
this.setState({ editing: false })
|
||||
this.submitButton.click();
|
||||
}
|
||||
|
||||
handleChange = data => {
|
||||
const { formData, errors } = data;
|
||||
handleOutside = () => {
|
||||
const {
|
||||
onHide
|
||||
} = this.props;
|
||||
|
||||
if (this.state.editing === true) {
|
||||
this.setState({ confirm: true })
|
||||
} else {
|
||||
onHide();
|
||||
}
|
||||
}
|
||||
|
||||
handleClose = () => {
|
||||
const {
|
||||
onHide
|
||||
} = this.props;
|
||||
|
||||
let disableSubmitButton = (errors.length !== 0);
|
||||
// I think there is a library bug React or Jsonschema
|
||||
// For workaround, I'll simply add 'formData' in setState
|
||||
this.setState({
|
||||
disableSubmitButton,
|
||||
formData
|
||||
});
|
||||
editing: false,
|
||||
confirm: false
|
||||
})
|
||||
onHide();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
handleSubmitButton
|
||||
handleChange,
|
||||
handleSubmitButton,
|
||||
handleOutside,
|
||||
handleClose
|
||||
} = this;
|
||||
|
||||
const {
|
||||
|
@ -174,15 +205,16 @@ class Form extends Component {
|
|||
isLoading,
|
||||
disableSubmitButton,
|
||||
validate,
|
||||
onHide,
|
||||
onChange,
|
||||
onSubmit
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Modal
|
||||
visible={visible}
|
||||
onHide={onHide}>
|
||||
onOutside={handleOutside}
|
||||
disableOnClickOutside={this.state.confirm}>
|
||||
<Wrapper id='nprogress-base-form'>
|
||||
<Header>
|
||||
{title}
|
||||
|
@ -209,7 +241,7 @@ class Form extends Component {
|
|||
showErrorList={false}
|
||||
transformErrors={transformErrors}
|
||||
autocomplete="off"
|
||||
onChange={data => onChange(data.formData, data.errors)}
|
||||
onChange={handleChange}
|
||||
onSubmit={data => onSubmit(data.formData)}>
|
||||
<div>
|
||||
<button type="submit" ref={(el => this.submitButton = el)}/>
|
||||
|
@ -223,7 +255,7 @@ class Form extends Component {
|
|||
}
|
||||
</Body>
|
||||
<Footer>
|
||||
<Button clear disabled={disabled} onClick={onHide}>
|
||||
<Button clear disabled={disabled} onClick={handleClose}>
|
||||
CANCEL
|
||||
</Button>
|
||||
<Button clear disabled={disabled || disableSubmitButton} onClick={handleSubmitButton}>
|
||||
|
@ -232,6 +264,14 @@ class Form extends Component {
|
|||
</Footer>
|
||||
</Wrapper>
|
||||
</Modal>
|
||||
<Confirm
|
||||
visible={this.state.confirm}
|
||||
message="You have unsaved changes. Are you sure you want to close?"
|
||||
buttons={[
|
||||
{ text: "CLOSE", action: handleClose, info:true },
|
||||
{ text: "NO", action: () => this.setState({ confirm: false })}
|
||||
]}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,7 +28,7 @@ const Wrapper = styled.div`
|
|||
class Modal extends Component {
|
||||
static propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
onHide: PropTypes.func,
|
||||
onOutside: PropTypes.func,
|
||||
zindex: PropTypes.string,
|
||||
transitionEnter: PropTypes.string,
|
||||
transitionLeave: PropTypes.string,
|
||||
|
@ -37,7 +37,7 @@ class Modal extends Component {
|
|||
}
|
||||
|
||||
static defaultProps = {
|
||||
zindex: '10',
|
||||
zindex: '500',
|
||||
transitionEnter: `${transitions.stretchOut} .25s ease-in`,
|
||||
transitionLeave: `${transitions.shrinkIn} .25s ease-in`,
|
||||
transitionEnterTimeout: 300,
|
||||
|
@ -45,16 +45,16 @@ class Modal extends Component {
|
|||
}
|
||||
|
||||
handleClickOutside = (e) => {
|
||||
const { visible, onHide } = this.props;
|
||||
const { visible, onOutside } = this.props;
|
||||
|
||||
if (!visible) return null;
|
||||
onHide();
|
||||
onOutside();
|
||||
}
|
||||
|
||||
handleKeyUp = (e) => {
|
||||
const { onHide } = this.props
|
||||
const { onOutside } = this.props
|
||||
if (e.keyCode === 27) {
|
||||
onHide();
|
||||
onOutside();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -13,7 +13,8 @@ import {
|
|||
Spinner,
|
||||
FloatingButton,
|
||||
Blank,
|
||||
Dimmed
|
||||
Dimmed,
|
||||
Confirm
|
||||
} from 'components';
|
||||
|
||||
import Document from './Document';
|
||||
|
|
Loading…
Reference in New Issue