confirm component is added
This commit is contained in:
parent
bbd4ae4bba
commit
e87de4262d
|
@ -90,7 +90,7 @@ const propTypes = {
|
||||||
const Logout = ({ visible, onHide, onLogout }) => (
|
const Logout = ({ visible, onHide, onLogout }) => (
|
||||||
<Modal
|
<Modal
|
||||||
visible={visible}
|
visible={visible}
|
||||||
onHide={onHide}
|
onOutside={onHide}
|
||||||
transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
|
transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
|
||||||
transitionLeave={`${transitions.slideUp} .5s ease-in-out`}
|
transitionLeave={`${transitions.slideUp} .5s ease-in-out`}
|
||||||
transitionEnterTimeout={500}
|
transitionEnterTimeout={500}
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { media, transitions } from 'helpers/style-utils';
|
||||||
|
|
||||||
import Modal from './Modal';
|
import Modal from './Modal';
|
||||||
import Button from './Button';
|
import Button from './Button';
|
||||||
|
import Dimmed from './Dimmed';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -33,11 +34,12 @@ const Buttons = styled.div`
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
`
|
`
|
||||||
|
|
||||||
const Confirm = ({ visible, message, buttons, onHide }) => {
|
const Confirm = ({ visible, onOutside, message, buttons }) => {
|
||||||
const buttonList = buttons
|
const buttonList = buttons
|
||||||
.map(button =>
|
.map(button =>
|
||||||
<Button
|
<Button
|
||||||
clear
|
key={button.text}
|
||||||
|
clear={true}
|
||||||
danger={button.danger === true}
|
danger={button.danger === true}
|
||||||
info={button.info === true}
|
info={button.info === true}
|
||||||
onClick={button.action}>
|
onClick={button.action}>
|
||||||
|
@ -45,13 +47,26 @@ const Confirm = ({ visible, message, buttons, onHide }) => {
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<Modal visible={visible} onHide={onHide}>
|
<div>
|
||||||
<Wrapper>
|
<Modal visible={visible} onOutside={onOutside} zindex='1000'>
|
||||||
<Message>{message}</Message>
|
<Wrapper>
|
||||||
<Buttons>{buttonList}</Buttons>
|
<Message>{message}</Message>
|
||||||
</Wrapper>
|
<Buttons>{buttonList}</Buttons>
|
||||||
</Modal>
|
</Wrapper>
|
||||||
|
</Modal>
|
||||||
|
<Dimmed visible={visible} zindex='999'/>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Confirm.propTypes = {
|
||||||
|
visible: PropTypes.bool,
|
||||||
|
onOutside: PropTypes.func,
|
||||||
|
}
|
||||||
|
|
||||||
|
Confirm.defaultProps = {
|
||||||
|
visible: false,
|
||||||
|
onOutside: () => {},
|
||||||
|
}
|
||||||
|
|
||||||
export default Confirm;
|
export default Confirm;
|
|
@ -25,7 +25,7 @@ Dimmed.propTypes = {
|
||||||
|
|
||||||
Dimmed.defaultProps = {
|
Dimmed.defaultProps = {
|
||||||
visible: false,
|
visible: false,
|
||||||
zindex: '5'
|
zindex: '300'
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Dimmed;
|
export default Dimmed;
|
|
@ -10,6 +10,7 @@ import JsonSchemaForm from 'react-jsonschema-form';
|
||||||
import Modal from './Modal';
|
import Modal from './Modal';
|
||||||
import Button from './Button';
|
import Button from './Button';
|
||||||
import Spinner from './Spinner';
|
import Spinner from './Spinner';
|
||||||
|
import Confirm from './Confirm';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -143,25 +144,55 @@ class Form extends Component {
|
||||||
title: ""
|
title: ""
|
||||||
};
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
editing: false,
|
||||||
|
confirm: false
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChange = data => {
|
||||||
|
const {
|
||||||
|
onChange
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
this.setState({ editing: true })
|
||||||
|
onChange(data.formData, data.errors)
|
||||||
|
}
|
||||||
|
|
||||||
handleSubmitButton = () => {
|
handleSubmitButton = () => {
|
||||||
|
this.setState({ editing: false })
|
||||||
this.submitButton.click();
|
this.submitButton.click();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange = data => {
|
handleOutside = () => {
|
||||||
const { formData, errors } = data;
|
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({
|
this.setState({
|
||||||
disableSubmitButton,
|
editing: false,
|
||||||
formData
|
confirm: false
|
||||||
});
|
})
|
||||||
|
onHide();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
handleSubmitButton
|
handleChange,
|
||||||
|
handleSubmitButton,
|
||||||
|
handleOutside,
|
||||||
|
handleClose
|
||||||
} = this;
|
} = this;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
@ -174,64 +205,73 @@ class Form extends Component {
|
||||||
isLoading,
|
isLoading,
|
||||||
disableSubmitButton,
|
disableSubmitButton,
|
||||||
validate,
|
validate,
|
||||||
onHide,
|
|
||||||
onChange,
|
onChange,
|
||||||
onSubmit
|
onSubmit
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<div>
|
||||||
visible={visible}
|
<Modal
|
||||||
onHide={onHide}>
|
visible={visible}
|
||||||
<Wrapper id='nprogress-base-form'>
|
onOutside={handleOutside}
|
||||||
<Header>
|
disableOnClickOutside={this.state.confirm}>
|
||||||
{title}
|
<Wrapper id='nprogress-base-form'>
|
||||||
</Header>
|
<Header>
|
||||||
<Body>
|
{title}
|
||||||
{isLoading && <Spinner/>}
|
</Header>
|
||||||
{!isLoading &&
|
<Body>
|
||||||
<JsonSchemaForm
|
{isLoading && <Spinner/>}
|
||||||
schema={schema}
|
{!isLoading &&
|
||||||
uiSchema={
|
<JsonSchemaForm
|
||||||
disabled ? {
|
schema={schema}
|
||||||
"ui:disabled": true,
|
uiSchema={
|
||||||
...uiSchema
|
disabled ? {
|
||||||
} : {
|
"ui:disabled": true,
|
||||||
...uiSchema
|
...uiSchema
|
||||||
}
|
} : {
|
||||||
}
|
...uiSchema
|
||||||
formData={formData}
|
|
||||||
disableSubmitButton={disableSubmitButton}
|
|
||||||
fields={fields}
|
|
||||||
FieldTemplate={CustomFieldTemplate}
|
|
||||||
liveValidate
|
|
||||||
validate={validate}
|
|
||||||
showErrorList={false}
|
|
||||||
transformErrors={transformErrors}
|
|
||||||
autocomplete="off"
|
|
||||||
onChange={data => onChange(data.formData, data.errors)}
|
|
||||||
onSubmit={data => onSubmit(data.formData)}>
|
|
||||||
<div>
|
|
||||||
<button type="submit" ref={(el => this.submitButton = el)}/>
|
|
||||||
<style jsx>{`
|
|
||||||
button {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
kkk`}</style>
|
}
|
||||||
</div>
|
formData={formData}
|
||||||
</JsonSchemaForm>
|
disableSubmitButton={disableSubmitButton}
|
||||||
}
|
fields={fields}
|
||||||
</Body>
|
FieldTemplate={CustomFieldTemplate}
|
||||||
<Footer>
|
liveValidate
|
||||||
<Button clear disabled={disabled} onClick={onHide}>
|
validate={validate}
|
||||||
CANCEL
|
showErrorList={false}
|
||||||
</Button>
|
transformErrors={transformErrors}
|
||||||
<Button clear disabled={disabled || disableSubmitButton} onClick={handleSubmitButton}>
|
autocomplete="off"
|
||||||
SAVE
|
onChange={handleChange}
|
||||||
</Button>
|
onSubmit={data => onSubmit(data.formData)}>
|
||||||
</Footer>
|
<div>
|
||||||
</Wrapper>
|
<button type="submit" ref={(el => this.submitButton = el)}/>
|
||||||
</Modal>
|
<style jsx>{`
|
||||||
|
button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
kkk`}</style>
|
||||||
|
</div>
|
||||||
|
</JsonSchemaForm>
|
||||||
|
}
|
||||||
|
</Body>
|
||||||
|
<Footer>
|
||||||
|
<Button clear disabled={disabled} onClick={handleClose}>
|
||||||
|
CANCEL
|
||||||
|
</Button>
|
||||||
|
<Button clear disabled={disabled || disableSubmitButton} onClick={handleSubmitButton}>
|
||||||
|
SAVE
|
||||||
|
</Button>
|
||||||
|
</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 {
|
class Modal extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
visible: PropTypes.bool,
|
visible: PropTypes.bool,
|
||||||
onHide: PropTypes.func,
|
onOutside: PropTypes.func,
|
||||||
zindex: PropTypes.string,
|
zindex: PropTypes.string,
|
||||||
transitionEnter: PropTypes.string,
|
transitionEnter: PropTypes.string,
|
||||||
transitionLeave: PropTypes.string,
|
transitionLeave: PropTypes.string,
|
||||||
|
@ -37,7 +37,7 @@ class Modal extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
zindex: '10',
|
zindex: '500',
|
||||||
transitionEnter: `${transitions.stretchOut} .25s ease-in`,
|
transitionEnter: `${transitions.stretchOut} .25s ease-in`,
|
||||||
transitionLeave: `${transitions.shrinkIn} .25s ease-in`,
|
transitionLeave: `${transitions.shrinkIn} .25s ease-in`,
|
||||||
transitionEnterTimeout: 300,
|
transitionEnterTimeout: 300,
|
||||||
|
@ -45,16 +45,16 @@ class Modal extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClickOutside = (e) => {
|
handleClickOutside = (e) => {
|
||||||
const { visible, onHide } = this.props;
|
const { visible, onOutside } = this.props;
|
||||||
|
|
||||||
if (!visible) return null;
|
if (!visible) return null;
|
||||||
onHide();
|
onOutside();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleKeyUp = (e) => {
|
handleKeyUp = (e) => {
|
||||||
const { onHide } = this.props
|
const { onOutside } = this.props
|
||||||
if (e.keyCode === 27) {
|
if (e.keyCode === 27) {
|
||||||
onHide();
|
onOutside();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,8 @@ import {
|
||||||
Spinner,
|
Spinner,
|
||||||
FloatingButton,
|
FloatingButton,
|
||||||
Blank,
|
Blank,
|
||||||
Dimmed
|
Dimmed,
|
||||||
|
Confirm
|
||||||
} from 'components';
|
} from 'components';
|
||||||
|
|
||||||
import Document from './Document';
|
import Document from './Document';
|
||||||
|
|
Loading…
Reference in New Issue