hasura · Anupam-dagar · Dec 19, 2018
@@ -20,6 +20,15 @@ table thead tr th
   color: #4D4D4D;
   font-weight: 600 !important;
 }
+
+.textareaButtonAlign {
+  position: relative;
+  float: right;
+  margin-left: -30px;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
 .pageSidebar {
   height: calc(100vh - 50px);
   overflow: auto;

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+
+const styles = require('../Common.scss');
+
+class Toggler extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      input_textarea: 0,
+      input_value: this.props.standardProps.defaultValue,
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    const stateValue = this.state.input_textarea;
+    if (stateValue === 0) {
+      this.setState({ input_textarea: 1 });
+    } else {
+      this.setState({ input_textarea: 0 });
+    }
+  }
+
+  render() {
+    return (
+      <span>
+        <label>
+          {this.state.input_textarea === 1 ? (
+            <textarea
+              {...this.props.standardProps}
+              placeholder={this.props.placeholderProp}
+              value={this.state.input_value}
+              onChange={e => {
+                this.setState({ input_value: e.target.value });
+              }}
+              rows="5"
+              cols="5"
+            />
+          ) : (
+            <input
+              {...this.props.standardProps}
+              placeholder={this.props.placeholderProp}
+              value={this.state.input_value}
+              onChange={e => {
+                this.setState({ input_value: e.target.value });
+              }}
+            />
+          )}
+        </label>
+        <i
+          className={
+            this.state.input_textarea === 1
+              ? 'fa fa-compress' + ' ' + styles.textareaButtonAlign
+              : 'fa fa-expand' + ' ' + styles.textareaButtonAlign
+          }
+          onClick={this.handleClick}
+        />
+      </span>
+    );
+  }
+}
+
+export default Toggler;
@@ -6,6 +6,7 @@ import globals from '../../../../Globals';
 import { modalClose } from './EditActions';
 import Button from '../../Layout/Button/Button';
 
+import Toggler from '../../../Common/Toggler/Toggler';
 // import RichTextEditor from 'react-rte';
 import { replace } from 'react-router-redux';
 
@@ -187,37 +188,33 @@ class EditItem extends Component {
           defaultValue = this.state.editorColumnMap[colName];
           currentValue = this.state.editorColumnMap[colName];
         }
+        const standardInputProps = {
+          type: 'text',
+          className: `form-control ${styles.insertBox}`,
+          onClick: clicker,
+          ref: inputRef,
+          onChange: e => {
+            this.onTextChange(e, colName);
+          },
+          defaultValue: currentValue,
+          'data-test': `typed-input-${i}`,
+        };
         if (currentValue !== '') {
           typedInput = (
             <span>
-              <input
-                placeholder={'text'}
-                type="text"
-                className={'form-control ' + styles.insertBox}
-                onClick={clicker}
-                ref={inputRef}
-                onChange={e => {
-                  this.onTextChange(e, colName);
-                }}
-                value={currentValue}
-                data-test={`typed-input-${i}`}
+              <Toggler
+                placeholderProp={'text'}
+                standardProps={standardInputProps}
               />
             </span>
           );
         } else {
+          standardInputProps.defaultValue = defaultValue;
           typedInput = (
             <span>
-              <input
-                placeholder={'text'}
-                type="text"
-                className={'form-control ' + styles.insertBox}
-                onClick={clicker}
-                ref={inputRef}
-                onChange={e => {
-                  this.onTextChange(e, colName);
-                }}
-                value={defaultValue}
-                data-test={`typed-input-${i}`}
+              <Toggler
+                placeholderProp={'text'}
+                standardProps={standardInputProps}
               />
             </span>
           );

@@ -5,6 +5,7 @@ import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
 import Button from '../../Layout/Button/Button';
+import Toggler from '../../../Common/Toggler/Toggler';
 
 class InsertItem extends Component {
   constructor() {
@@ -150,6 +151,15 @@ class InsertItem extends Component {
         );
       }
 
+      if (colType === 'text') {
+        typedInput = (
+          <Toggler
+            standardProps={standardInputProps}
+            placeholderProp={getPlaceholder(colType)}
+          />
+        );
+      }
+
       if (colType === 'json' || colType === 'jsonb') {
         // JSON/JSONB
         typedInput = (