update draggable dan visualisasi

package-lock.json

@@ -7281,6 +7281,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
       "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
     },
+    "immutability-helper": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
+      "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -11906,6 +11911,18 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-draggable-list": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-draggable-list/-/react-draggable-list-4.0.3.tgz",
+      "integrity": "sha512-+6v+5ZrkaSeGlEMyFnVoWt/n3ANhQstsfV3RnFUbEI5DS2q/YwRbEbVlgq9bUQ4kn06MJ1PBCPEJpqq/VobAqA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "immutability-helper": "^3.0.0",
+        "prop-types": "^15.6.0",
+        "react-motion": "^0.5.2",
+        "react-multi-ref": "^1.0.0"
+      }
+    },
     "react-dropzone": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.2.tgz",
@@ -11941,6 +11958,31 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "^0.2.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
+    "react-multi-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-multi-ref/-/react-multi-ref-1.0.0.tgz",
+      "integrity": "sha512-LJuQXEabnv8JLcvcWeJcTogxG4eXVFiPfQ9CECuwWUbfJdrVpPf13m9RxmImyJS0J99BWokGn7dlR1dR06XPDw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "react-number-format": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-4.4.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "react-bootstrap": "^1.3.0",
     "react-d3-donut": "^1.1.2",
     "react-dom": "^16.13.1",
+    "react-draggable-list": "^4.0.3",
     "react-dropzone": "^11.0.2",
     "react-excel-renderer": "^1.1.0",
     "react-number-format": "^4.4.1",

src/container/ApprovalMatrix/ApprovalMatrix.js

@@ -73,6 +73,7 @@ export default class ApprovalMatrix extends Component {
 
     componentDidMount() {
         this.getData()
+        console.log(this.props.height)
     }
 
     getData() {
@@ -330,6 +331,12 @@ export default class ApprovalMatrix extends Component {
                         </div>
                     </div>
                     :
+                    this.state.visibleVisual == true ?
+                    <VisualisasiAM
+                        onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })}
+                        height= {this.props.height}
+                    />
+                    :
                     <div style={{ height: this.props.height }}>
                         <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
                         <div> 
@@ -367,6 +374,7 @@ export default class ApprovalMatrix extends Component {
                         </div>
                     </div>
                 }
+
                 {this.state.visibleCreate && (
                     <CreateApprovalMatrix
                         onClickClose={() => this.setState({ visibleCreate: false })}
@@ -381,11 +389,6 @@ export default class ApprovalMatrix extends Component {
                         data={this.state.listData[this.state.selectIndex]}
                     />
                 )}
-                {this.state.visibleVisual && (
-                    <VisualisasiAM
-                        onClickClose={() => this.setState({ visibleVisual: false })}
-                    />
-                )}
                 {this.state.visibleUpload && (
                     <div className="test app-popup-show">
                         <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>