use standard modal style and persist state until save clicked

monome · Jul 2, 2018 · 86d9150 · 86d9150
1 parent ec89d02
commit 86d9150
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/app/src/configure-activity.css b/app/src/configure-activity.css
@@ -4,7 +4,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 0 10px;
 }
 
 .configure-upper {

diff --git a/app/src/configure-activity.js b/app/src/configure-activity.js
@@ -15,23 +15,36 @@ class ConfigureActivity extends Component {
         height: props.height,
         width: props.width,
       },
+      editorConfig: { ...this.props.editorOptions },
     };
 
     props.editorConfig(api.editorConfigResource());
   }
 
+  componentDidMount() {
+    this.props.onRef(this);
+  }
+
+  componentWillUnmount() {
+    this.props.onRef(undefined);
+  }
+
   updateConfiguration(key, val) {
-    const newEditorConfig = { ...this.props.editorOptions, [key]: val };
+    this.setState({
+      editorConfig: { ...this.state.editorConfig, [key]: val },
+    });
+  }
 
-    this.props.updateEditorConfig(api.editorConfigResource(), newEditorConfig);
+  save() {
+    this.props.updateEditorConfig(api.editorConfigResource(), this.state.editorConfig);
   }
 
   renderEditorOption(key, val, label) {
     const editorOptionClasses = (key, val) => {
       if (val) {
-        return cx('configure-option', { 'is-selected': this.props.editorOptions[key] === val });
+        return cx('configure-option', { 'is-selected': this.state.editorConfig[key] === val });
       }
-      return cx('configure-option', { 'is-selected': !this.props.editorOptions[key] });
+      return cx('configure-option', { 'is-selected': !this.state.editorConfig[key] });
     };
 
     return (

diff --git a/app/src/workspace.js b/app/src/workspace.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ReactModal from 'react-modal';
+import ModalContent from './modal-content';
 import BoundConfigureActivity from './bound-configure-activity';
 import ActivityBar from './activity-bar';
 import activities from './activities';
@@ -108,6 +109,13 @@ class Workspace extends Component {
         this.props.toggleComponent('config');
     }
 
+    handleConfigModalAction = (choice) => {
+        if (choice === 'ok') {
+            this.child.save();
+        }
+        this.handleCloseConfigModal();
+    }
+
     render() {
         const selectedActivity = this.props.activities.find(a => {
             return this.props.selected === a.selector
@@ -136,23 +144,15 @@ class Workspace extends Component {
                 </ReactModal>
                 <ReactModal
                     isOpen={!this.props.configHidden}
-                    onRequestClose={this.handleCloseConfigModal}
                     contentLabel={"configure"}
                     className="workspace-modal workspace-modal--config"
                     overlayClassName="workspace-modal-overlay"
                 >
-                    <div className="workspace-modal-close-container">
-                        <IconButton
-                            key="cancel"
-                            action={() => this.props.toggleComponent('config')}
-                            tooltipMessage="cancel"
-                            tooltipPosition="left"
-                            icon={ICONS.cross}
-                            color="hsl(0, 0%, 59%)"
-                            size="12"
-                        />
-                    </div>
-                    <BoundConfigureActivity></BoundConfigureActivity>
+                    <ModalContent
+                        message={"configure"}
+                        buttonAction={this.handleConfigModalAction}>
+                            <BoundConfigureActivity onRef={ref => (this.child = ref)}></BoundConfigureActivity>
+                    </ModalContent>
                 </ReactModal>
             </div>
         )