From a19341b276a2c8e529989595f6aa12fe1b082ca6 Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Fri, 8 Oct 2021 01:05:51 +0200 Subject: [PATCH 1/5] Fix: enabling context menu (with filtering options only) for read-only cells --- .../BrowserCell/BrowserCell.react.js | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index ccf8da4f2f..b48249795b 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -97,7 +97,7 @@ export default class BrowserCell extends Component { } getContextMenuOptions(constraints) { - let { onEditSelectedRow } = this.props; + let { onEditSelectedRow, readonly } = this.props; const contextMenuOptions = []; const setFilterContextMenuOption = this.getSetFilterContextMenuOption(constraints); @@ -109,7 +109,7 @@ export default class BrowserCell extends Component { const relatedObjectsContextMenuOption = this.getRelatedObjectsContextMenuOption(); relatedObjectsContextMenuOption && contextMenuOptions.push(relatedObjectsContextMenuOption); - onEditSelectedRow && contextMenuOptions.push({ + !readonly && onEditSelectedRow && contextMenuOptions.push({ text: 'Edit row', callback: () => { let { objectId, onEditSelectedRow } = this.props; @@ -117,7 +117,7 @@ export default class BrowserCell extends Component { } }); - if ( this.props.type === 'Pointer' ) { + if (this.props.type === 'Pointer') { onEditSelectedRow && contextMenuOptions.push({ text: 'Open pointer in new tab', callback: () => { @@ -264,10 +264,10 @@ export default class BrowserCell extends Component { this.copyableValue = value.id; } else if (type === 'Array') { - if ( value[0] && typeof value[0] === 'object' && value[0].__type === 'Pointer' ) { + if (value[0] && typeof value[0] === 'object' && value[0].__type === 'Pointer') { const array = []; - value.map( (v, i) => { - if ( typeof v !== 'object' || v.__type !== 'Pointer' ) { + value.map((v, i) => { + if (typeof v !== 'object' || v.__type !== 'Pointer') { throw new Error('Invalid type found in pointer array'); } const object = new Parse.Object(v.className); @@ -282,10 +282,10 @@ export default class BrowserCell extends Component { ); }); content = this.copyableValue = JSON.stringify(value); - if ( array.length > 1 ) { + if (array.length > 1) { classes.push(styles.removePadding); } } @@ -339,8 +339,8 @@ export default class BrowserCell extends Component { setRelation(value)} value='View relation' followClick={true} /> ) : ( - 'Relation' - ); + 'Relation' + ); this.copyableValue = undefined; } @@ -359,7 +359,7 @@ export default class BrowserCell extends Component { className={classes.join(' ')} style={{ width }} onClick={(e) => { - if ( e.metaKey === true && type === 'Pointer') { + if (e.metaKey === true && type === 'Pointer') { onPointerCmdClick(value); } else { onSelect({ row, col }); @@ -376,6 +376,7 @@ export default class BrowserCell extends Component { }, 2000); } }} + onContextMenu={this.onContextMenu.bind(this)} > {isNewRow ? '(auto)' : content} @@ -386,7 +387,7 @@ export default class BrowserCell extends Component { className={classes.join(' ')} style={{ width }} onClick={(e) => { - if ( e.metaKey === true && type === 'Pointer' ) { + if (e.metaKey === true && type === 'Pointer') { onPointerCmdClick(value); } else { From d5d70fab4737a102ba165beaf45120da3f1be3fe Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Fri, 8 Oct 2021 01:16:44 +0200 Subject: [PATCH 2/5] Performance optimization: context bind in constructor --- src/components/BrowserCell/BrowserCell.react.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index b48249795b..bf16e956be 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -25,6 +25,7 @@ export default class BrowserCell extends Component { this.state = { showTooltip: false } + this.onContextMenu = this.onContextMenu.bind(this); } @@ -376,7 +377,7 @@ export default class BrowserCell extends Component { }, 2000); } }} - onContextMenu={this.onContextMenu.bind(this)} + onContextMenu={this.onContextMenu} > {isNewRow ? '(auto)' : content} @@ -412,7 +413,7 @@ export default class BrowserCell extends Component { onEditChange(true); } }} - onContextMenu={this.onContextMenu.bind(this)} + onContextMenu={this.onContextMenu} > {content} From 928ef92dad95b3110fd4accea34e515ad9bd7b0a Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Fri, 8 Oct 2021 01:26:42 +0200 Subject: [PATCH 3/5] Context menu: better way of showing long values by trimming them in the middle --- src/components/BrowserCell/BrowserCell.react.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index bf16e956be..6b829ea6cf 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -136,7 +136,10 @@ export default class BrowserCell extends Component { return { text: 'Set filter...', items: constraints.map(constraint => { const definition = Filters.Constraints[constraint]; - const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + this.copyableValue) : ''}`; + // Smart ellipsis for value - it it's long trim it in the middle: Lorem ipsum dolor si... aliqua + let value = this.copyableValue.length < 30 ? this.copyableValue : + `${this.copyableValue.substr(0, 20)}...${this.copyableValue.substr(this.copyableValue.length - 7)}`; + const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + value) : ''}`; return { text, callback: this.pickFilter.bind(this, constraint) From 638572302fe775ce5c36764ee3196bf815961396 Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Fri, 8 Oct 2021 01:35:12 +0200 Subject: [PATCH 4/5] Code cleaning --- src/components/BrowserCell/BrowserCell.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index 6b829ea6cf..58bbb9b817 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -137,7 +137,7 @@ export default class BrowserCell extends Component { text: 'Set filter...', items: constraints.map(constraint => { const definition = Filters.Constraints[constraint]; // Smart ellipsis for value - it it's long trim it in the middle: Lorem ipsum dolor si... aliqua - let value = this.copyableValue.length < 30 ? this.copyableValue : + const value = this.copyableValue.length < 30 ? this.copyableValue : `${this.copyableValue.substr(0, 20)}...${this.copyableValue.substr(this.copyableValue.length - 7)}`; const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + value) : ''}`; return { From 1c6e305d2e81092ce28d0a54fca8ce99eb5c54dc Mon Sep 17 00:00:00 2001 From: Artur Drozdz Date: Fri, 8 Oct 2021 01:49:03 +0200 Subject: [PATCH 5/5] Fixing typo in comment --- src/components/BrowserCell/BrowserCell.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index 58bbb9b817..a2106503dd 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -136,7 +136,7 @@ export default class BrowserCell extends Component { return { text: 'Set filter...', items: constraints.map(constraint => { const definition = Filters.Constraints[constraint]; - // Smart ellipsis for value - it it's long trim it in the middle: Lorem ipsum dolor si... aliqua + // Smart ellipsis for value - if it's long trim it in the middle: Lorem ipsum dolor si... aliqua const value = this.copyableValue.length < 30 ? this.copyableValue : `${this.copyableValue.substr(0, 20)}...${this.copyableValue.substr(this.copyableValue.length - 7)}`; const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + value) : ''}`;