table inputs support submit by Enter, highlight row with context menu…

… open
dsheiko · Dec 18, 2018 · 52234ad · 52234ad
1 parent 2fd8e23
commit 52234ad
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 7 deletions.
diff --git a/app/assets/app.css b/app/assets/app.css
@@ -6,6 +6,14 @@
   --rhythm: 8px;
 }
 
+.ant-form.cell-form .ant-form-explain {
+  z-index: 1;
+}
+
+.ant-table-row.is-right-clicked {
+  background: #f0f2f5;
+}
+
 body .smalltalk {
   z-index: 1500;
 }

diff --git a/src/component/AppLayout/Main/AbstractDnDTable.jsx b/src/component/AppLayout/Main/AbstractDnDTable.jsx
@@ -29,6 +29,12 @@ export default class AbstractDnDTable extends React.Component {
     e.preventDefault();
     const menu = new Menu();
 
+
+    this.setState({ contextMenuAnchor: record.id });
+    menu.on( "menu-will-close", () => {
+      this.setState({ contextMenuAnchor: null });
+    });
+
     menu.append( new MenuItem({
       label: "Edit",
       click: () => this.onEdit( record )
@@ -66,6 +72,17 @@ export default class AbstractDnDTable extends React.Component {
     });
   }
 
+  getRightClickClassName( record ) {
+    if ( !this.state || !this.state.contextMenuAnchor ) {
+      return "";
+    }
+    return this.state.contextMenuAnchor === record.id ? "is-right-clicked" : "";
+  }
+
+  onRowClassName = ( record ) => {
+    return this.getRightClickClassName( record );
+  }
+
   onRow = ( record, index ) => ({
     index,
     moveRow: this.moveRow,

diff --git a/src/component/AppLayout/Main/AbstractEditableTable.jsx b/src/component/AppLayout/Main/AbstractEditableTable.jsx
@@ -7,6 +7,7 @@ export default class AbstractEditableTable extends AbstractDnDTable {
 
   state = {
     id: "",
+    contextMenuAnchor: null,
     fieldState: {
     }
   }
@@ -69,7 +70,7 @@ export default class AbstractEditableTable extends AbstractDnDTable {
     }
   }
 
-  onSubmit( id ) {
+  onSubmit = ( id ) => {
     const form = this.state.fieldState[ id ],
           options = this.fields.reduce( ( carry, field ) => {
             carry[ field ] = form[ field ].value;
@@ -122,6 +123,7 @@ export default class AbstractEditableTable extends AbstractDnDTable {
               tabIndex={20}
               type="primary"
               size="small"
+              className={ `btn--submit-editable model--${ this.model }` }
               disabled={ this.hasErrors( record.id ) }
               onClick={( () => this.onSubmit( record.id ) )}
             >Save</Button>

diff --git a/src/component/AppLayout/Main/DragableRow.jsx b/src/component/AppLayout/Main/DragableRow.jsx
@@ -61,7 +61,7 @@ class BodyRow extends React.Component {
       )
     );
   }
-}
+};
 
 function getModel( className ) {
   return className.split( " " )

diff --git a/src/component/AppLayout/Main/EditableCell.jsx b/src/component/AppLayout/Main/EditableCell.jsx
@@ -7,6 +7,7 @@ export class EditableCell extends React.Component {
 
   static propTypes = {
     dataIndex: PropTypes.string.isRequired,
+    onSubmit: PropTypes.func,
     placeholder: PropTypes.string.isRequired,
     className: PropTypes.string,
     record: PropTypes.object.isRequired,
@@ -43,6 +44,14 @@ export class EditableCell extends React.Component {
     liftFormStateUp( dataIndex, state, record.id );
   }
 
+  onKeyPress = ( e, record ) => {
+    switch ( e.key ){
+      case "Enter":
+        this.props.onSubmit && this.props.onSubmit( record.id );
+        return;
+    }
+  }
+
   /**
    * Lift state even before first input
    */
@@ -70,7 +79,8 @@ export class EditableCell extends React.Component {
                   prefix={ prefixIcon || null }
                   defaultValue={value}
                   className={ className || null }
-                  onChange={this.onChange}
+                  onChange={ this.onChange }
+                  onKeyPress={ ( e ) => this.onKeyPress( e, record ) }
                   placeholder={placeholder}
                   tabIndex={ dataIndex === "select" ? 2 : 1 }
                 />

diff --git a/src/component/AppLayout/Main/GroupTable.jsx b/src/component/AppLayout/Main/GroupTable.jsx
@@ -21,6 +21,7 @@ export class GroupTable extends AbstractEditableTable {
           <EditableCell
             prefixIcon={ recordPrefIcon }
             record={ record }
+            onSubmit={ this.onSubmit }
             className="input--title"
             dataIndex="title"
             placeholder="Describe target or scenario you want to test"
@@ -62,7 +63,7 @@ export class GroupTable extends AbstractEditableTable {
   }
 
   onRowClassName = ( record ) => {
-    return `model--group${ record.disabled ? " row-disabled" : "" }` ;
+    return `model--group${ record.disabled ? " row-disabled" : "" } ` + this.getRightClickClassName( record );
   }
 
   render() {

diff --git a/src/component/AppLayout/Main/GroupTable/TestTable.jsx b/src/component/AppLayout/Main/GroupTable/TestTable.jsx
@@ -21,6 +21,7 @@ export class TestTable extends AbstractEditableTable {
         render: ( text, record ) => (
           <EditableCell
             prefixIcon={ recordPrefIcon }
+            onSubmit={ this.onSubmit }
             className="input--title"
             record={ record }
             dataIndex="title"
@@ -70,7 +71,7 @@ export class TestTable extends AbstractEditableTable {
   }
 
   onRowClassName = ( record ) => {
-    return `model--test${ record.disabled ? " row-disabled" : "" }` ;
+    return `model--test${ record.disabled ? " row-disabled" : "" } ` + this.getRightClickClassName( record );
   }
 
   render() {

diff --git a/src/component/AppLayout/Main/GroupTable/TestTable/CommandTable.jsx b/src/component/AppLayout/Main/GroupTable/TestTable/CommandTable.jsx
@@ -12,6 +12,10 @@ const { Menu, MenuItem } = remote;
 @connectDnD
 export class CommandTable extends AbstractDnDTable {
 
+  state = {
+    contextMenuAnchor: null
+  }
+
   constructor( props ) {
     super( props );
     this.columns = [
@@ -38,6 +42,11 @@ export class CommandTable extends AbstractDnDTable {
     e.preventDefault();
     const menu = new Menu();
 
+    this.setState({ contextMenuAnchor: record.id });
+    menu.on( "menu-will-close", () => {
+      this.setState({ contextMenuAnchor: null });
+    });
+
     menu.append( new MenuItem({
       label: "Edit",
       click: () => this.onEditCommand( record )
@@ -134,7 +143,7 @@ export class CommandTable extends AbstractDnDTable {
   }
 
   onRowClassName = ( record ) => {
-    return `model--command${ record.disabled ? " row-disabled" : "" }` ;
+    return `model--command${ record.disabled ? " row-disabled" : "" } ` + this.getRightClickClassName( record );
   }
 
   render() {

diff --git a/src/component/AppLayout/Main/TargetTable.jsx b/src/component/AppLayout/Main/TargetTable.jsx
@@ -19,6 +19,7 @@ export class TargetTable extends AbstractEditableTable {
         render: ( text, record ) => (
           <EditableCell
             record={ record }
+            onSubmit={ this.onSubmit }
             dataIndex="target"
             className="input--target"
             placeholder="Enter target name"
@@ -34,6 +35,7 @@ export class TargetTable extends AbstractEditableTable {
         render: ( text, record ) => (
           <EditableCell
             record={ record }
+            onSubmit={ this.onSubmit }
             dataIndex="selector"
             className="input--selector"
             placeholder="Enter selector"
@@ -47,6 +49,10 @@ export class TargetTable extends AbstractEditableTable {
 
   }
 
+  onRowClassName = ( record ) => {
+    return "model--target " + this.getRightClickClassName( record );
+  }
+
   fields = [ "target", "selector" ];
 
   model = "Target";
@@ -60,12 +66,13 @@ export class TargetTable extends AbstractEditableTable {
             id="cTargetTable"
             className="draggable-table"
             components={this.components}
+            rowClassName={ this.onRowClassName }
             onRow={this.onRow}
             showHeader={ true }
             dataSource={ data }
             columns={this.columns}
             pagination={false}
-            rowClassName="model--target"
+
             footer={() => ( <Button id="cTargetTableAddBtn"
               onClick={ this.addRecord }><Icon type="plus" />Add a target</Button> )}
           />