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
129
130
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* 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>
);
}
}
|
