create reusable form

Author: Swolfeyes

src/client/App.js

@@ -5,6 +5,7 @@ import { CSSTransitionGroup } from 'react-transition-group';
 import { showLoadingMessage, showErrorMessage, hideLoadingMessage, getErrorMessage } from './components/Store/Actions.js';
 
 import TopNavBar from './components/TopNavBar/TopNavBar';
+import Form from './components/Form/Form';
 import Tab from './components/Tab/Tab';
 import MessageComp from './components/MessageComp/MessageComp';
 import SettingsBar from './components/SettingsBar/SettingsBar';
@@ -30,7 +31,7 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-class ConnectedApp extends React.Component {
+class App extends React.Component {
   constructor(props) {
     super(props);
 
@@ -152,11 +153,16 @@ class ConnectedApp extends React.Component {
 
     return (
       <div className={styles['app']}>
-        <TopNavBar
-          onInputChange={(e) => this.handleInputChange(e)}
-          onInputSubmit={() => this.handleInputSubmit()}
-          onIconClick={() => this.handleSettingsiconClick()}
-        />
+        <TopNavBar onIconClick={() => this.handleSettingsiconClick()}>
+          <Form 
+            submitButton={true}
+            inputTypes={[{ name: 'contractsPath', placeholder: 'Insert contracts path'}]}
+            buttonValue='Load contracts from URI'
+            onInputChange={(e) => this.handleInputChange(e)}
+            onSubmitForm={() => this.handleInputSubmit()}
+            onInputKeyUp={() => this.handleInputSubmit()}
+            />
+        </TopNavBar>
         <div ref={node => { this.node = node; }}>
           <SettingsBar 
             active={!!settingsVisible}
@@ -208,8 +214,6 @@ class ConnectedApp extends React.Component {
   }
 }
 
-const App = connect(mapStateToProps, mapDispatchToProps)(ConnectedApp);
-
 App.displayName = 'App';
 
-export default App;
+export default connect(mapStateToProps, mapDispatchToProps)(App);;

src/client/components/Form/Form.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import classnames from 'classnames/bind';
+
+const cx = classnames.bind(styles);
+
+import styles from './Form.scss';
+
+class Form extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '',
+    }
+  }
+
+  handleInputChange(event) {    
+    const { name, value } = event.target; 
+
+    this.setState({
+      [name]: value,
+    });
+
+    this.props.onInputChange(event);
+  }
+
+  handleKeyDown(event) {
+    if(event.keyCode === 13) {
+      event.preventDefault();
+    }
+  }
+
+  handleKeyUp(event) {
+    event.preventDefault();
+
+    if(event.keyCode !== 13) {
+      return;
+    }
+
+    this.props.onInputKeyUp();
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+
+    this.props.onSubmitForm();
+  }
+
+  render() {
+
+    const { inputTypes, submitButton, settingsBarForm, buttonValue } = this.props;
+
+    const inputClasses = cx({
+      'settings-bar__item': !!settingsBarForm
+    });
+
+    return (
+      <form className={styles['form']} onSubmit={(e) => this.handleSubmit(e)}>
+        <div className={styles['form__inputs']}>
+          {
+            inputTypes.map(item => {
+              return (
+                <div key={item.name} className={styles['form__inputs__item']}>
+                  <input 
+                    name={item.name}
+                    placeholder={item.placeholder}
+                    onChange={(e) => this.handleInputChange(e)}
+                    onKeyDown={(e) => this.handleKeyDown(e)}
+                    onKeyUp={(e) => this.handleKeyUp(e)}
+                  />
+                </div>
+              )
+            })
+          }
+        </div>
+        {
+          submitButton &&
+          <div className={styles['form__button']}>
+            <button type='submit'><span>{buttonValue}</span></button>
+          </div>
+        }
+      </form>
+    )
+  }
+}
+
+export default Form;

src/client/components/Form/Form.scss

@@ -0,0 +1,60 @@
+.form {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__inputs {
+    flex: 1 1 auto;
+
+    &__item {
+      padding: 5px 10px;
+
+      input {
+        width: 100%;
+        padding: 10px 0;
+        font-size: 14px;
+        background: transparent;
+        color: $color-light-grey;
+        border-bottom: 1px dotted $color-light-grey;
+        transition: border-color 0.2s;
+
+        &:focus {
+          border-color: $color-green;
+          outline: 0 none;
+        }
+      }
+    }
+  }
+
+  button {
+    padding: 10px;
+    border-radius: 5px;
+    background: transparent;
+    border: 1px solid $color-light-grey;
+    cursor: pointer;
+    transition: opacity 0.7, border-color 0.2s;
+
+    &:last-of-type {
+      margin-left: 10px;
+    }
+
+    &:focus {
+      border-color: $color-green;
+      outline: 0 none;
+
+      span {
+        color: $color-green;
+      }
+    }
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    span {
+      color: $color-light-grey;
+      font-size: 14px;
+      transition: color 0.2s;
+    }
+  }
+}

src/client/components/InnerTab/InnerTabPanel/InnerTabPanel.js

@@ -3,6 +3,7 @@ import React from 'react';
 import TransactionDebugger from '../../TransactionDebugger/TransactionDebugger';
 import Disassembler from '../../Disassembler/Disassembler';
 import ControlFlowGraph from '../../ControlFlowGraph/ControlFlowGraph';
+import Storage from '../../Storage/Storage';
 
 import styles from './InnerTabPanel.scss';
 
@@ -38,6 +39,10 @@ const InnerTabPanel = ({ type, active, contractName, contractCode, contractPath,
           graphResponse={graphResponse}
         />
       }
+      {type === 'View Storage' &&
+        <Storage
+        />
+      }
     </div>
   );
 }

src/client/components/Input/Input.js

@@ -1,11 +1,10 @@
 import React from 'react';
 
 import Icon from '../Icon/Icon';
-import Input from '../Input/Input';
 
 import styles from './Modal.scss';
 
-const Modal =  ({ onIconClick, onInputChange, onInputSubmit }) => {
+const Modal =  ({ onIconClick, children }) => {
 
   return (
     <div className={styles['modal']}>
@@ -15,13 +14,8 @@ const Modal =  ({ onIconClick, onInputChange, onInputSubmit }) => {
             <Icon iconName='Cross' />
           </button>
         </div>
-        <div className={styles['modal__main__input']}>
-          <Input 
-            placeholder='Transaction hash'
-            buttonValue='Debug'
-            onChange={onInputChange}
-            onSubmit={onInputSubmit}
-          />
+        <div className={styles['modal__main__body']}>
+          {children}
         </div>
       </div>
     </div>

src/client/components/Input/Input.scss

@@ -39,7 +39,7 @@
       }
     }
 
-    &__input {
+    &__body {
       width: 100%;
     }
   }