From f4f5023fa39ed517ce6c71c5575eba134f4878de Mon Sep 17 00:00:00 2001
From: Umang darji <umang.darji@v.curefit.com>
Date: Mon, 10 Feb 2020 18:22:59 +0530
Subject: [PATCH] Back drop fix.

---
 src/components/ModalComponent.tsx | 67 ++++++++++++++++---------------
 1 file changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/components/ModalComponent.tsx b/src/components/ModalComponent.tsx
index 0a8d253..3153e3d 100644
--- a/src/components/ModalComponent.tsx
+++ b/src/components/ModalComponent.tsx
@@ -92,7 +92,7 @@ export class ModalComponent extends React.Component<ModalComponentProps, any> {
 
     modelChanged = (value: any) => {
         this.setState((prevState: any) => {
-            return { item: Object.assign({}, prevState.item, value)}
+            return { item: Object.assign({}, prevState.item, value) }
         })
     }
 
@@ -122,63 +122,64 @@ export class ModalComponent extends React.Component<ModalComponentProps, any> {
         const errorClassName = this.state.error ? "error-animate" : ""
         return <Modal
             show={this.props.showModal}
+            backdrop={'static'}
             onHide={this.closeModal}
             container={this}
             aria-labelledby="contained-modal-title"
             dialogClassName={this.props.constants.largeEdit ? `${errorClassName} large-modal` : `${errorClassName}`}>
             <Modal.Header closeButton>
                 {this.props.modalType === "CREATE" &&
-                <Modal.Title id="contained-modal-title">{"+ New " + this.props.constants.creationTitle}</Modal.Title>}
+                    <Modal.Title id="contained-modal-title">{"+ New " + this.props.constants.creationTitle}</Modal.Title>}
                 {this.props.modalType === "EDIT" && <Modal.Title
                     id="contained-modal-title">{"Edit " + this.props.constants.creationTitle + " - " + this.props.item[this.getRepField().field]}</Modal.Title>}
                 {this.props.modalType === "FILTER" &&
-                <Modal.Title id="contained-modal-title">{"Filter " + this.props.constants.creationTitle}</Modal.Title>}
+                    <Modal.Title id="contained-modal-title">{"Filter " + this.props.constants.creationTitle}</Modal.Title>}
                 {this.props.modalType === "CUSTOM" &&
-                <Modal.Title id="contained-modal-title">{"Custom " + this.props.constants.creationTitle + " - " + this.props.item[this.getRepField().field]}</Modal.Title>}
+                    <Modal.Title id="contained-modal-title">{"Custom " + this.props.constants.creationTitle + " - " + this.props.item[this.getRepField().field]}</Modal.Title>}
             </Modal.Header>
             <Modal.Body ref={reactComponent => this.modalBodyRef = ReactDOM.findDOMNode(reactComponent)} className="modal-height">
                 {this.state.error &&
-                <Alert bsStyle="danger">
-                    {
-                        <div>
-                            {errorType && <b>{errorType}</b>}
-                            {errorMessage && <div>{errorMessage}</div>}
-                        </div>
-                    }
-                </Alert>
+                    <Alert bsStyle="danger">
+                        {
+                            <div>
+                                {errorType && <b>{errorType}</b>}
+                                {errorMessage && <div>{errorMessage}</div>}
+                            </div>
+                        }
+                    </Alert>
                 }
                 <NestedEditComponent field={this.props.constants} modalType={this.props.modalType}
-                                     readonly={this.props.modalType !== "CREATE" && this.props.constants.readonly === true}
-                                     additionalModels={this.props.additionalModels} fetch={this.props.fetch}
-                                     modelChanged={this.modelChanged} currentModel={this.state.item}
-                                     additionalProps={this.props.additionalProps}
-                                     showTitle={false}
-                                     parentModel={{}}
+                    readonly={this.props.modalType !== "CREATE" && this.props.constants.readonly === true}
+                    additionalModels={this.props.additionalModels} fetch={this.props.fetch}
+                    modelChanged={this.modelChanged} currentModel={this.state.item}
+                    additionalProps={this.props.additionalProps}
+                    showTitle={false}
+                    parentModel={{}}
                 />
             </Modal.Body>
             <Modal.Footer>
                 {this.props.deleteModel && this.props.modalType === "EDIT" &&
-                <div className="btn btn-danger" style={{ float: "left" }} onClick={this.openDeleteModal}>
-                    Delete</div>}
+                    <div className="btn btn-danger" style={{ float: "left" }} onClick={this.openDeleteModal}>
+                        Delete</div>}
                 {this.state.deleteModal &&
-                <Modal show={this.state.deleteModal} onHide={this.closeDeleteModal} container={this}>
-                    <Modal.Header closeButton>
-                        {"Delete " + this.props.constants.creationTitle}
-                    </Modal.Header>
-                    <Modal.Body>
-                        {"Are you sure you want to delete " + this.props.item[this.getRepField().field] + " ?"}
-                    </Modal.Body>
-                    <Modal.Footer>
-                        <div className="btn btn-danger" onClick={this.deleteModel}>Delete</div>
-                        <div className="btn btn-secondary" onClick={this.closeDeleteModal}>Cancel</div>
-                    </Modal.Footer>
-                </Modal>
+                    <Modal show={this.state.deleteModal} onHide={this.closeDeleteModal} container={this}>
+                        <Modal.Header closeButton>
+                            {"Delete " + this.props.constants.creationTitle}
+                        </Modal.Header>
+                        <Modal.Body>
+                            {"Are you sure you want to delete " + this.props.item[this.getRepField().field] + " ?"}
+                        </Modal.Body>
+                        <Modal.Footer>
+                            <div className="btn btn-danger" onClick={this.deleteModel}>Delete</div>
+                            <div className="btn btn-secondary" onClick={this.closeDeleteModal}>Cancel</div>
+                        </Modal.Footer>
+                    </Modal>
                 }
                 {this.props.modalType === "EDIT" ?
                     <>
                         <div className="btn btn-primary" onClick={this.modalPerformOperation(this.props.modalType, true)}>Update</div>
                         {this.props.constants.saveAsNew &&
-                        <div className="btn btn-primary" onClick={this.modalPerformOperation(this.props.modalType, false)}>Save as New</div>}
+                            <div className="btn btn-primary" onClick={this.modalPerformOperation(this.props.modalType, false)}>Save as New</div>}
                     </> : null}
                 {this.props.modalType === "CREATE" || this.props.modalType === "CUSTOM" ? (
                     <div className="btn btn-primary" onClick={this.modalPerformOperation(this.props.modalType, false)}>{this.props.successButtonLabel || "Create"}</div>