diff options
| -rw-r--r-- | src/client/views/nodes/KeyValuePair.tsx | 28 |
1 files changed, 15 insertions, 13 deletions
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 93f5231cb..4c082b2ad 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -60,19 +60,20 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> { }; render() { + let doc = this._props.keyName.startsWith('_') ? Doc.Layout(this._props.doc) : this._props.doc; // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")"; - const layoutField = this._props.keyName.startsWith('_'); - let doc = layoutField ? Doc.Layout(this._props.doc) : this._props.doc; - let protoCount = doc !== this._props.doc && !layoutField ? 1 : 0; + const layoutField = doc !== this._props.doc; + const key = layoutField ? this._props.keyName.replace(/^_/, '') : this._props.keyName; + let protoCount = 0; while (doc) { - if (Object.keys(doc).includes(this._props.keyName.replace(/^_/, ''))) { + if (Object.keys(doc).includes(key)) { break; } protoCount++; doc = DocCast(doc.proto); } - const parenCount = Math.max(0, protoCount); - const keyStyle = protoCount === 0 && doc === this._props.doc ? 'black' : 'blue'; + const parenCount = Math.max(0, protoCount - 1); + const keyStyle = layoutField ? 'red' : protoCount === 0 ? 'black' : 'blue'; const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 }; @@ -92,17 +93,18 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> { style={hover} className="keyValuePair-td-key-delete" onClick={undoable(() => { - if (Object.keys(this._props.doc).indexOf(this._props.keyName) !== -1) { - delete this._props.doc[this._props.keyName]; - } else delete DocCast(this._props.doc.proto)?.[this._props.keyName]; + if (Object.keys(this._props.doc).indexOf(key) !== -1) { + delete this._props.doc[key]; + } else delete DocCast(this._props.doc.proto)?.[key]; }, 'set key value')}> X </button> <input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} /> - <Tooltip title={Object.entries(new DocumentOptions()).find((pair: [string, FInfo]) => pair[0].replace(/^_/, '') === this._props.keyName)?.[1].description ?? ''}> - <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (this._props.keyName.replace(/__/g, '').replace(/^_/, '').match(/_/g)?.length || 0), color: keyStyle }}> - {(layoutField ? '_' : '$').repeat(parenCount)} - {(keyStyle === 'blue' && !layoutField && !parenCount ? '$' : '') + this._props.keyName} + <Tooltip title={Object.entries(new DocumentOptions()).find((pair: [string, FInfo]) => pair[0].replace(/^_/, '') === key)?.[1].description ?? ''}> + <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (key.match(/_/g)?.length || 0), color: keyStyle }}> + {'('.repeat(parenCount)} + {(keyStyle === 'black' ? '' : layoutField ? '_' : '$') + key} + {')'.repeat(parenCount)} </div> </Tooltip> </div> |