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
|
/* eslint-disable no-use-before-define */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../fields/Doc';
import { BoolCast, StrCast } from '../../../fields/Types';
import { EditableView } from '../../views/EditableView';
interface KeyValueProps {
Document: Doc;
remove: (self: ImportMetadataEntry) => void;
next: () => void;
}
export const keyPlaceholder = 'Key';
export const valuePlaceholder = 'Value';
@observer
export default class ImportMetadataEntry extends React.Component<KeyValueProps> {
private keyRef = React.createRef<EditableView>();
private valueRef = React.createRef<EditableView>();
private checkRef = React.createRef<HTMLInputElement>();
@computed
public get valid() {
return this.key.length > 0 && this.key !== keyPlaceholder && this.value.length > 0 && this.value !== valuePlaceholder;
}
@computed
private get backing() {
return this.props.Document;
}
@computed
public get onDataDoc() {
return BoolCast(this.backing.checked);
}
public set onDataDoc(value: boolean) {
this.backing.checked = value;
}
@computed
public get key() {
return StrCast(this.backing.key);
}
public set key(value: string) {
this.backing.key = value;
}
@computed
public get value() {
return StrCast(this.backing.value);
}
public set value(value: string) {
this.backing.value = value;
}
@action
updateKey = (newKey: string) => {
this.key = newKey;
this.keyRef.current && this.keyRef.current.setIsFocused(false);
this.valueRef.current && this.valueRef.current.setIsFocused(true);
this.key.length === 0 && (this.key = keyPlaceholder);
return true;
};
@action
updateValue = (newValue: string, shiftDown: boolean) => {
this.value = newValue;
this.valueRef.current && this.valueRef.current.setIsFocused(false);
this.value.length > 0 && shiftDown && this.props.next();
this.value.length === 0 && (this.value = valuePlaceholder);
return true;
};
render() {
const keyValueStyle: React.CSSProperties = {
paddingLeft: 10,
width: '50%',
opacity: this.valid ? 1 : 0.5,
};
return (
<div
style={{
display: 'flex',
flexDirection: 'row',
paddingBottom: 5,
paddingRight: 5,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
}}>
<input
onChange={e => {
this.onDataDoc = e.target.checked;
}}
ref={this.checkRef}
style={{ margin: '0 10px 0 15px' }}
type="checkbox"
title="Add to Data Document?"
checked={this.onDataDoc}
/>
<div className="key_container" style={keyValueStyle}>
<EditableView ref={this.keyRef} contents={this.key} SetValue={this.updateKey} GetValue={() => ''} oneLine />
</div>
<div className="value_container" style={keyValueStyle}>
<EditableView ref={this.valueRef} contents={this.value} SetValue={this.updateValue} GetValue={() => ''} oneLine />
</div>
<div onClick={() => this.props.remove(this)} title="Delete Entry">
<FontAwesomeIcon
icon="plus"
color="red"
size="1x"
style={{
marginLeft: 15,
marginRight: 15,
transform: 'rotate(45deg)',
}}
/>
</div>
</div>
);
}
}
|
