diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index faaa5011db..96d40b8fcc 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -14,7 +14,6 @@ import Pill from 'components/Pill/Pill.react';
import React, { Component } from 'react';
import styles from 'components/BrowserCell/BrowserCell.scss';
import baseStyles from 'stylesheets/base.scss';
-import Tooltip from '../Tooltip/PopperTooltip.react';
import * as ColumnPreferences from 'lib/ColumnPreferences';
export default class BrowserCell extends Component {
@@ -388,8 +387,7 @@ export default class BrowserCell extends Component {
//#endregion
render() {
- let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
- let isNewRow = row < 0;
+ let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, isRequired, markRequiredFieldRow } = this.props;
let classes = [...this.state.classes];
@@ -400,68 +398,37 @@ export default class BrowserCell extends Component {
classes.push(styles.required);
}
- return readonly ? (
-
- {
- if (e.metaKey === true && type === 'Pointer') {
- onPointerCmdClick(value);
- } else {
- onSelect({ row, col });
- setCopyableValue(hidden ? undefined : this.copyableValue);
- }
- }}
- onDoubleClick={() => {
- if (field === 'objectId' && onEditSelectedRow) {
- onEditSelectedRow(true, value);
- } else {
- this.setState({ showTooltip: true });
- setTimeout(() => {
- this.setState({ showTooltip: false });
- }, 2000);
- }
- }}
- onContextMenu={this.onContextMenu}
- >
- {row < 0 || isNewRow ? '(auto)' : this.state.content}
-
-
- ) : (
- {
- if (e.metaKey === true && type === 'Pointer') {
- onPointerCmdClick(value);
- }
- else {
- onSelect({ row, col });
- setCopyableValue(hidden ? undefined : this.copyableValue);
- }
- }}
- onDoubleClick={() => {
- // Since objectId can't be edited, double click event opens edit row dialog
- if (field === 'objectId' && onEditSelectedRow) {
- onEditSelectedRow(true, value);
- } else if (type !== 'Relation') {
- onEditChange(true)
+ return {
+ if (e.metaKey === true && type === 'Pointer') {
+ onPointerCmdClick(value);
+ }
+ else {
+ onSelect({ row, col });
+ setCopyableValue(hidden ? undefined : this.copyableValue);
+ }
+ }}
+ onDoubleClick={() => {
+ // Since objectId can't be edited, double click event opens edit row dialog
+ if (field === 'objectId' && onEditSelectedRow) {
+ onEditSelectedRow(true, value);
+ } else if (type !== 'Relation') {
+ onEditChange(true)
+ }
+ }}
+ onTouchEnd={e => {
+ if (current && type !== 'Relation') {
+ // The touch event may trigger an unwanted change in the column value
+ if (['ACL', 'Boolean', 'File'].includes(type)) {
+ e.preventDefault();
}
- }}
- onTouchEnd={e => {
- if (current && type !== 'Relation') {
- // The touch event may trigger an unwanted change in the column value
- if (['ACL', 'Boolean', 'File'].includes(type)) {
- e.preventDefault();
- }
- }}}
- onContextMenu={this.onContextMenu.bind(this)}
- >
- {this.state.content}
-
- );
+ }}}
+ onContextMenu={this.onContextMenu.bind(this)}
+ >
+ {this.state.content}
+
}
}
diff --git a/src/components/BrowserCell/BrowserCell.scss b/src/components/BrowserCell/BrowserCell.scss
index c435998ea5..8fc90b8eef 100644
--- a/src/components/BrowserCell/BrowserCell.scss
+++ b/src/components/BrowserCell/BrowserCell.scss
@@ -74,3 +74,7 @@
bottom: 0;
}
}
+
+.readonly {
+ color: #04263bd1;
+}
\ No newline at end of file
diff --git a/src/components/StringEditor/StringEditor.react.js b/src/components/StringEditor/StringEditor.react.js
index 58ccda18e2..6141d33b7c 100644
--- a/src/components/StringEditor/StringEditor.react.js
+++ b/src/components/StringEditor/StringEditor.react.js
@@ -49,7 +49,12 @@ export default class StringEditor extends React.Component {
}
render() {
+ let classes = [styles.editor];
let onChange = this.props.readonly ? () => {} : (e) => this.setState({ value: e.target.value });
+ if (this.props.readonly) {
+ classes.push(styles.readonly)
+ }
+
if (this.props.multiline) {
var style = { minWidth: this.props.minWidth };
if (this.props.resizable) {
@@ -66,11 +71,12 @@ export default class StringEditor extends React.Component {
);
}
return (
-
+
+ onChange={onChange}
+ disabled={this.props.readonly} />
);
}
diff --git a/src/components/StringEditor/StringEditor.scss b/src/components/StringEditor/StringEditor.scss
index 6d3f32d430..680f0ab6f8 100644
--- a/src/components/StringEditor/StringEditor.scss
+++ b/src/components/StringEditor/StringEditor.scss
@@ -23,6 +23,15 @@
font-size: 12px;
}
+ &.readonly {
+ box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 20%);
+ }
+
+ input:disabled {
+ background-color: #f2f2f2;
+ color: #666;
+ }
+
textarea {
@include MonospaceFont;
width: 200px;