1 files changed, 30 insertions, 54 deletions

diff --git a/src/client/util/Import & Export/ImportMetadataEntry.tsx b/src/client/util/Import & Export/ImportMetadataEntry.tsx
index 45d8c0c63..58a09b9c9 100644
--- a/src/client/util/Import & Export/ImportMetadataEntry.tsx
+++ b/src/client/util/Import & Export/ImportMetadataEntry.tsx
@@ -1,10 +1,10 @@
-import React = require("react");
-import { observer } from "mobx-react";
-import { EditableView } from "../../views/EditableView";
-import { action, computed } from "mobx";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Doc } from "../../../fields/Doc";
-import { StrCast, BoolCast } from "../../../fields/Types";
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { EditableView } from '../../views/EditableView';
+import { action, computed } from 'mobx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Doc } from '../../../fields/Doc';
+import { StrCast, BoolCast } from '../../../fields/Types';
 
 interface KeyValueProps {
     Document: Doc;
@@ -12,19 +12,18 @@ interface KeyValueProps {
     next: () => void;
 }
 
-export const keyPlaceholder = "Key";
-export const valuePlaceholder = "Value";
+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);
+        return this.key.length > 0 && this.key !== keyPlaceholder && this.value.length > 0 && this.value !== valuePlaceholder;
     }
 
     @computed
@@ -66,7 +65,7 @@ export default class ImportMetadataEntry extends React.Component<KeyValueProps>
         this.valueRef.current && this.valueRef.current.setIsFocused(true);
         this.key.length === 0 && (this.key = keyPlaceholder);
         return true;
-    }
+    };
 
     @action
     updateValue = (newValue: string, shiftDown: boolean) => {
@@ -75,68 +74,45 @@ export default class ImportMetadataEntry extends React.Component<KeyValueProps>
         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%",
+            width: '50%',
             opacity: this.valid ? 1 : 0.5,
         };
         return (
             <div
                 style={{
-                    display: "flex",
-                    flexDirection: "row",
+                    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={true}
-                    />
+                    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={true} />
                 </div>
-                <div
-                    className={"value_container"}
-                    style={keyValueStyle}>
-                    <EditableView
-                        ref={this.valueRef}
-                        contents={this.value}
-                        SetValue={this.updateValue}
-                        GetValue={() => ""}
-                        oneLine={true}
-                    />
+                <div className={'value_container'} style={keyValueStyle}>
+                    <EditableView ref={this.valueRef} contents={this.value} SetValue={this.updateValue} GetValue={() => ''} oneLine={true} />
                 </div>
-                <div onClick={() => this.props.remove(this)} title={"Delete Entry"}>
+                <div onClick={() => this.props.remove(this)} title={'Delete Entry'}>
                     <FontAwesomeIcon
-                        icon={"plus"}
-                        color={"red"}
-                        size={"1x"}
+                        icon={'plus'}
+                        color={'red'}
+                        size={'1x'}
                         style={{
                             marginLeft: 15,
                             marginRight: 15,
-                            transform: "rotate(45deg)"
+                            transform: 'rotate(45deg)',
                         }}
                     />
                 </div>
             </div>
         );
     }
-
-}
\ No newline at end of file
+}