aboutsummaryrefslogtreecommitdiff
path: root/src/client/util/Import & Export/ImportMetadataEntry.tsx
blob: 63dedf8204f7fbc73af194c6a5d4d961b93ce521 (plain)
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>
        );
    }
}