View/Edit single row modal (parse-community#1448)

* EditRowDialog - initial version

* TextInput - change focus to new input/textarea field when multiline props has changed

* EditRowDialg - removed custom FormModal width

* EditRowDialog - initial version

* TextInput - change focus to new input/textarea field when multiline props has changed

* EditRowDialg - removed custom FormModal width

* package-lock.json sync after rebase from master

* EditRowDialog - moved objectId, createdAt, updatedAt to dialog title. ACL added as confim button in footer. Also removed these fields from content

* EditRowDialog - creating new objects with modal implemented

* EditRowDialog:
- fixed bug when creating new objects with modal;
- ACL modal visible without closing editRowDialog;
- fixed bug when relation clicked after newly saved object
- FormModal replaced with Modal component

* EditRowDialog - picker for pointer and relation

Co-authored-by: Antonio Davi Macedo Coelho de Castro <adavimacedo@gmail.com>

Author: 2 people

package-lock.json

@@ -24,10 +24,12 @@ export default class BrowserCell extends Component {
   componentDidUpdate() {
     if (this.props.current) {
       const node = this.cellRef.current;
+      const { setRelation } = this.props;
       const { left, right, bottom, top } = node.getBoundingClientRect();
 
       // Takes into consideration Sidebar width when over 980px wide.
-      const leftBoundary = window.innerWidth > 980 ? 300 : 0;
+      // If setRelation is undefined, DataBrowser is used as ObjectPicker, so it does not have a sidebar.
+      const leftBoundary = window.innerWidth > 980 && setRelation ? 300 : 0;
 
       // BrowserToolbar + DataBrowserHeader height
       const topBoundary = 126;
@@ -63,7 +65,7 @@ export default class BrowserCell extends Component {
   }
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, name, onEditSelectedRow } = this.props;
     let content = value;
     this.copyableValue = content;
     let classes = [styles.cell, unselectable];
@@ -89,10 +91,12 @@ export default class BrowserCell extends Component {
         object.id = value.objectId;
         value = object;
       }
-      content = (
+      content = onPointerClick ? (
         <a href='javascript:;' onClick={onPointerClick.bind(undefined, value)}>
           <Pill value={value.id} />
         </a>
+      ) : (
+        value.id
       );
       this.copyableValue = value.id;
     } else if (type === 'Date') {
@@ -136,10 +140,12 @@ export default class BrowserCell extends Component {
     } else if (type === 'Polygon') {
       this.copyableValue = content = value.coordinates.map(coord => `(${coord})`)
     } else if (type === 'Relation') {
-      content = (
+      content = setRelation ? (
         <div style={{ textAlign: 'center', cursor: 'pointer' }}>
           <Pill onClick={() => setRelation(value)} value='View relation' />
         </div>
+      ) : (
+        'Relation'
       );
       this.copyableValue = undefined;
     }
@@ -157,7 +163,10 @@ export default class BrowserCell extends Component {
           setCopyableValue(hidden ? undefined : this.copyableValue);
         }}
         onDoubleClick={() => {
-          if (type !== 'Relation') {
+          // Since objectId can't be edited, double click event opens edit row dialog
+          if (name === 'objectId' && onEditSelectedRow) {
+            onEditSelectedRow(true, value);
+          } else if (type !== 'Relation') {
             onEditChange(true)
           }
         }}

src/components/BrowserCell/BrowserCell.react.js

@@ -18,14 +18,16 @@ import styles        from 'components/BrowserFilter/BrowserFilter.scss';
 import { List, Map } from 'immutable';
 
 const BLACKLISTED_FILTERS = [ 'containsAny', 'doesNotContainAny' ];
+const POPOVER_CONTENT_ID = 'browserFilterPopover';
 
 export default class BrowserFilter extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       open: false,
       filters: new List(),
+      blacklistedFilters: BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
     };
     this.toggle = this.toggle.bind(this)
   }
@@ -43,7 +45,7 @@ export default class BrowserFilter extends React.Component {
   toggle() {
     let filters = this.props.filters;
     if (this.props.filters.size === 0) {
-      let available = Filters.availableFilters(this.props.schema, null, BLACKLISTED_FILTERS);
+      let available = Filters.availableFilters(this.props.schema, null, this.state.blacklistedFilters);
       let field = Object.keys(available)[0];
       filters = new List([new Map({ field: field, constraint: available[field][0] })]);
     }
@@ -55,7 +57,7 @@ export default class BrowserFilter extends React.Component {
   }
 
   addRow() {
-    let available = Filters.availableFilters(this.props.schema, this.state.filters, BLACKLISTED_FILTERS);
+    let available = Filters.availableFilters(this.props.schema, this.state.filters, this.state.blacklistedFilters);
     let field = Object.keys(available)[0];
     this.setState(({ filters }) => ({
       filters: filters.push(new Map({ field: field, constraint: available[field][0] })),
@@ -92,12 +94,12 @@ export default class BrowserFilter extends React.Component {
       }
       let available = Filters.availableFilters(this.props.schema, this.state.filters);
       popover = (
-        <Popover fixed={true} position={position} onExternalClick={this.toggle}>
-          <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)}>
+        <Popover fixed={true} position={position} onExternalClick={this.toggle} contentId={POPOVER_CONTENT_ID}>
+          <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)} id={POPOVER_CONTENT_ID}>
             <div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
             <div className={styles.body}>
               <Filter
-                blacklist={BLACKLISTED_FILTERS}
+                blacklist={this.state.blacklistedFilters}
                 schema={this.props.schema}
                 filters={this.state.filters}
                 onChange={(filters) => this.setState({ filters: filters })}

src/components/BrowserFilter/BrowserFilter.react.js

@@ -68,6 +68,12 @@
   }
 }
 
+.objectPickerContent {
+  .entry svg {
+    fill: rgba(0, 0, 0, 0.3);
+  }
+}
+
 .body {
   position: absolute;
   top: 30px;

src/components/BrowserFilter/BrowserFilter.scss

@@ -19,7 +19,7 @@ export default class BrowserRow extends Component {
   }
 
   render() {
-    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation } = this.props;
+    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow } = this.props;
     let attributes = obj.attributes;
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth }}>
@@ -61,6 +61,7 @@ export default class BrowserRow extends Component {
           return (
             <BrowserCell
               key={name}
+              name={name}
               row={row}
               col={j}
               type={type}
@@ -73,7 +74,8 @@ export default class BrowserRow extends Component {
               setRelation={setRelation}
               value={attr}
               hidden={hidden}
-              setCopyableValue={setCopyableValue} />
+              setCopyableValue={setCopyableValue}
+              onEditSelectedRow={onEditSelectedRow} />
           );
         })}
       </div>

src/components/BrowserRow/BrowserRow.react.js

@@ -77,7 +77,7 @@ export default class ChromeDropdown extends React.Component {
       widthStyle = { width: measuredWidth };
       content = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
-          <div style={widthStyle} className={[styles.menu, styles[color]].join(' ')}>
+          <div style={widthStyle} className={[styles.menu, styles[color], "chromeDropdown"].join(' ')}>
             {this.props.options.map((o) => {
               let key = o;
               let value = o;

src/components/ChromeDropdown/ChromeDropdown.react.js

@@ -10,6 +10,8 @@ import Icon from 'components/Icon/Icon.react';
 import Popover from 'components/Popover/Popover.react';
 import Position from 'lib/Position';
 
+const POPOVER_CONTENT_ID = 'columnsConfigurationPopover';
+
 export default class ColumnsConfiguration extends React.Component {
   constructor() {
     super();
@@ -57,8 +59,8 @@ export default class ColumnsConfiguration extends React.Component {
     let popover = null;
     if (this.state.open) {
       popover = (
-        <Popover fixed={true} position={Position.inDocument(this.node)} onExternalClick={this.toggle.bind(this)}>
-          <div className={styles.popover}>
+        <Popover fixed={true} position={Position.inDocument(this.node)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
+          <div className={styles.popover} id={POPOVER_CONTENT_ID}>
             {title}
             <div className={styles.body}>
               <div className={styles.columnConfigContainer}>

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -42,6 +42,12 @@
   }
 }
 
+.objectPickerContent {
+  .entry svg {
+    fill: rgba(0, 0, 0, 0.3);
+  }
+}
+
 .body {
   color: white;
   position: absolute;

src/components/ColumnsConfiguration/ColumnsConfiguration.scss

@@ -60,25 +60,27 @@ export default class DataBrowserHeaderBar extends React.Component {
       );
     });
 
-    let finalStyle = {};
-    if (headers.length % 2) {
-      finalStyle.background = 'rgba(224,224,234,0.10)';
+    if (onAddColumn) {
+      let finalStyle = {};
+      if (headers.length % 2) {
+        finalStyle.background = 'rgba(224,224,234,0.10)';
+      }
+  
+      elements.push(
+        readonly || preventSchemaEdits ? null : (
+          <div key='add' className={styles.addColumn} style={finalStyle}>
+            <a
+              href='javascript:;'
+              role='button'
+              className={styles.addColumnButton}
+              onClick={onAddColumn}>
+              Add a new column
+            </a>
+          </div>
+        )
+      );
     }
 
-    elements.push(
-      readonly || preventSchemaEdits ? null : (
-        <div key='add' className={styles.addColumn} style={finalStyle}>
-          <a
-            href='javascript:;'
-            role='button'
-            className={styles.addColumnButton}
-            onClick={onAddColumn}>
-            Add a new column
-          </a>
-        </div>
-      )
-    );
-
     return (
       <DndProvider backend={HTML5Backend}>
         <div className={styles.bar}>{elements}</div>

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -64,3 +64,11 @@
   margin: 0 -4px;
   cursor: ew-resize;
 }
+
+.pickerPointer {
+  .check {
+    input {
+      display: none;
+    }
+  }
+}

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -20,6 +20,7 @@ export default class FileEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.removeFile = this.removeFile.bind(this);
   }
 
   componentDidMount() {
@@ -33,18 +34,20 @@ export default class FileEditor extends React.Component {
   }
 
   checkExternalClick(e) {
-    if (!hasAncestor(e.target, this.refs.input)) {
-      this.props.onCommit(this.state.value);
+    const { onCancel } = this.props;
+    if (!hasAncestor(e.target, this.refs.input) && onCancel) {
+      onCancel();
     }
   }
 
   handleKey(e) {
-    if (e.keyCode === 13) {
-      this.props.onCommit(this.state.value);
+    const { onCancel } = this.props;
+    if (e.keyCode === 13 && onCancel) {
+      onCancel();
     }
   }
 
-  getBase64(file){
+  getBase64(file) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
@@ -53,6 +56,11 @@ export default class FileEditor extends React.Component {
     });
   }
 
+  removeFile() {
+    this.refs.fileInput.value = '';
+    this.props.onCommit(undefined);
+  }
+
   async handleChange(e) {
     let file = e.target.files[0];
     if (file) {
@@ -67,10 +75,10 @@ export default class FileEditor extends React.Component {
       <div ref='input' style={{ minWidth: this.props.width }} className={styles.editor}>
         {file && file.url() ? <a href={file.url()} target='_blank' role='button' className={styles.download}>Download</a> : null}
         <a className={styles.upload}>
-          <input type='file' onChange={this.handleChange.bind(this)} />
+          <input ref='fileInput' type='file' onChange={this.handleChange.bind(this)} />
           <span>{file ? 'Replace file' : 'Upload file'}</span>
         </a>
-        {file ? <a href='javascript:;' role='button' className={styles.delete} onClick={() => this.props.onCommit(undefined)}>Delete</a> : null}
+        {file ? <a href='javascript:;' role='button' className={styles.delete} onClick={this.removeFile}>Delete</a> : null}
       </div>
     );
   }

src/components/FileEditor/FileEditor.react.js

@@ -41,8 +41,8 @@
     opacity: 0;
     top: 0;
     right: 0;
-    left: -100px;
     bottom: 0;
     cursor: pointer;
+    width: 100%;
   }
 }

src/components/FileEditor/FileEditor.scss

@@ -6,7 +6,6 @@
  * the root directory of this source tree.
  */
 import { GeoPoint }    from 'parse';
-import hasAncestor     from 'lib/hasAncestor';
 import React           from 'react';
 import styles          from 'components/GeoPointEditor/GeoPointEditor.scss';
 import validateNumeric from 'lib/validateNumeric';
@@ -26,23 +25,31 @@ export default class GeoPointEditor extends React.Component {
   }
 
   componentDidMount() {
-    this.refs.latitude.focus();
+    if (!this.props.disableAutoFocus) {
+      this.refs.latitude.focus();
+    }
     this.refs.latitude.setSelectionRange(0, String(this.state.latitude).length);
-    document.body.addEventListener('click', this.checkExternalClick);
     this.refs.latitude.addEventListener('keypress', this.handleKeyLatitude);
     this.refs.longitude.addEventListener('keypress', this.handleKeyLongitude);
   }
 
   componentWillUnmount() {
-    document.body.removeEventListener('click', this.checkExternalClick);
     this.refs.latitude.removeEventListener('keypress', this.handleKeyLatitude);
     this.refs.longitude.removeEventListener('keypress', this.handleKeyLongitude);
   }
 
-  checkExternalClick(e) {
-    if (!hasAncestor(e.target, this.refs.input)) {
-      this.commitValue();
-    }
+  checkExternalClick() {
+    // timeout needed because activeElement is set after onBlur event is done
+    setTimeout(function() {
+      // check if activeElement is something else from input fields,
+      // to avoid commiting new value on every switch of focus beetween latitude and longitude fields
+      if (
+        document.activeElement !== this.refs.latitude &&
+        document.activeElement !== this.refs.longitude
+      ) {
+        this.commitValue();
+      }
+    }.bind(this), 1);
   }
 
   handleKeyLatitude(e) {
@@ -112,14 +119,16 @@ export default class GeoPointEditor extends React.Component {
       this.setState({ [target]: validateNumeric(value) ? value : this.state[target] });
     };
     return (
-      <div ref='input' style={{ width: this.props.width }} className={styles.editor}>
+      <div ref='input' style={{ width: this.props.width, ...this.props.style }} className={styles.editor}>
         <input
           ref='latitude'
           value={this.state.latitude}
+          onBlur={this.checkExternalClick}
           onChange={onChange.bind(this, 'latitude')} />
         <input
           ref='longitude'
           value={this.state.longitude}
+          onBlur={this.checkExternalClick}
           onChange={onChange.bind(this, 'longitude')} />
       </div>
     );