1 files changed, 53 insertions, 0 deletions
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
new file mode 100644
index 000000000..bee76bb24
--- /dev/null
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -0,0 +1,53 @@
+import React = require('react');
+import { computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { EditableView } from '../../EditableView';
+import './CollectionSchemaView.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export interface SchemaColumnHeaderProps {
+    columnKeys: string[];
+    columnWidths: number[];
+    columnIndex: number;
+    changeColumnKey: (index: number, newKey: string) => boolean;
+    addColumn: (index: number) => void;
+    removeColumn: (index: number) => void;
+    resizeColumn: (e: any, index: number, left: boolean) => void;
+}
+
+@observer
+export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+    @computed get fieldKey() {
+        return this.props.columnKeys[this.props.columnIndex];
+    }
+
+    render() {
+        return (
+            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}>
+                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, true)}></div>
+                <div className="schema-column-title">
+                    <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} />
+                </div>
+
+                <div className="schema-header-menu">
+                    <div
+                        className="schema-header-button"
+                        onPointerDown={e => {
+                            this.props.addColumn(this.props.columnIndex + 1);
+                        }}>
+                        <FontAwesomeIcon icon="plus" />
+                    </div>
+                    <div
+                        className="schema-header-button"
+                        onPointerDown={e => {
+                            this.props.removeColumn(this.props.columnIndex);
+                        }}>
+                        <FontAwesomeIcon icon="trash" />
+                    </div>
+                </div>
+
+                <div className="schema-column-resizer right" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, false)}></div>
+            </div>
+        );
+    }
+}