1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, Field } from '../../../fields/Doc';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../Utils';
import { Transform } from '../../util/Transform';
import { undoBatch } from '../../util/UndoManager';
import { ContextMenu } from '../ContextMenu';
import { EditableView } from '../EditableView';
import { DefaultStyleProvider } from '../StyleProvider';
import { OpenWhere } from './DocumentView';
import { FieldView, FieldViewProps } from './FieldView';
import { KeyValueBox } from './KeyValueBox';
import './KeyValueBox.scss';
import './KeyValuePair.scss';
import React = require('react');
import { DocCast } from '../../../fields/Types';
// Represents one row in a key value plane
export interface KeyValuePairProps {
rowStyle: string;
keyName: string;
doc: Doc;
keyWidth: number;
PanelHeight: () => number;
PanelWidth: () => number;
addDocTab: (doc: Doc, where: OpenWhere) => boolean;
}
@observer
export class KeyValuePair extends React.Component<KeyValuePairProps> {
@observable private isPointerOver = false;
@observable public isChecked = false;
private checkbox = React.createRef<HTMLInputElement>();
@action
handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
this.isChecked = e.currentTarget.checked;
};
@action
uncheck = () => {
this.checkbox.current!.checked = false;
this.isChecked = false;
};
onContextMenu = (e: React.MouseEvent) => {
const value = this.props.doc[this.props.keyName];
if (value instanceof Doc) {
e.stopPropagation();
e.preventDefault();
ContextMenu.Instance.addItem({ description: 'Open Fields', event: () => this.props.addDocTab(value, ((OpenWhere.addRight as string) + 'KeyValue') as OpenWhere), icon: 'layer-group' });
ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
}
};
render() {
const props: FieldViewProps = {
Document: this.props.doc,
DataDoc: this.props.doc,
docFilters: returnEmptyFilter,
docRangeFilters: returnEmptyFilter,
searchFilterDocs: returnEmptyDoclist,
styleProvider: DefaultStyleProvider,
docViewPath: returnEmptyDoclist,
fieldKey: this.props.keyName,
rootSelected: returnFalse,
isSelected: returnFalse,
setHeight: returnFalse,
select: emptyFunction,
dropAction: 'embed',
bringToFront: emptyFunction,
renderDepth: 1,
isContentActive: returnFalse,
whenChildContentsActiveChanged: emptyFunction,
ScreenToLocalTransform: Transform.Identity,
focus: emptyFunction,
PanelWidth: this.props.PanelWidth,
PanelHeight: this.props.PanelHeight,
addDocTab: returnFalse,
pinToPres: returnZero,
};
const contents = <FieldView {...props} />;
// let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
let protoCount = 0;
let doc: Doc | undefined = props.Document;
while (doc) {
if (Object.keys(doc).includes(props.fieldKey)) {
break;
}
protoCount++;
doc = DocCast(doc.proto);
}
const parenCount = Math.max(0, protoCount - 1);
const keyStyle = protoCount === 0 ? 'black' : 'blue';
const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 };
return (
<tr className={this.props.rowStyle} onPointerEnter={action(() => (this.isPointerOver = true))} onPointerLeave={action(() => (this.isPointerOver = false))}>
<td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
<div className="keyValuePair-td-key-container">
<button
style={hover}
className="keyValuePair-td-key-delete"
onClick={undoBatch(() => {
if (Object.keys(props.Document).indexOf(props.fieldKey) !== -1) {
delete props.Document[props.fieldKey];
} else delete DocCast(props.Document.proto)?.[props.fieldKey];
})}>
X
</button>
<input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} />
<div className="keyValuePair-keyField" style={{ marginLeft: 35 * (props.fieldKey.match(/_/g)?.length || 0), color: keyStyle }}>
{'('.repeat(parenCount)}
{props.fieldKey}
{')'.repeat(parenCount)}
</div>
</div>
</td>
<td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }} onContextMenu={this.onContextMenu}>
<div className="keyValuePair-td-value-container">
<EditableView contents={contents} GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)} SetValue={(value: string) => KeyValueBox.SetField(props.Document, props.fieldKey, value)} />
</div>
</td>
</tr>
);
}
}
|
