Merge branch 'master' into UI_Update_Eric_Ma

1 files changed, 79 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..243fe0c61
--- /dev/null
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -0,0 +1,79 @@
+import React = require('react');
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
+import { Colors } from '../../global/globalEnums';
+import './CollectionSchemaView.scss';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { DragManager } from '../../../util/DragManager';
+
+export interface SchemaColumnHeaderProps {
+    columnKeys: string[];
+    columnWidths: number[];
+    columnIndex: number;
+    sortField: string;
+    sortDesc: boolean;
+    setSort: (field: string | undefined, desc?: boolean) => void;
+    removeColumn: (index: number) => void;
+    resizeColumn: (e: any, index: number) => void;
+    dragColumn: (e: any, index: number) => boolean;
+    openContextMenu: (x: number, y: number, index: number) => void;
+    setColRef: (index: number, ref: HTMLDivElement) => void;
+}
+
+@observer
+export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+    @observable _ref: HTMLDivElement | null = null;
+
+    @computed get fieldKey() {
+        return this.props.columnKeys[this.props.columnIndex];
+    }
+
+    @action
+    sortClicked = (e: React.PointerEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (this.props.sortField == this.fieldKey && this.props.sortDesc) {
+            this.props.setSort(undefined);
+        } else if (this.props.sortField == this.fieldKey) {
+            this.props.setSort(this.fieldKey, true);
+        } else {
+            this.props.setSort(this.fieldKey, false);
+        }
+    };
+
+    @action
+    onPointerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction, false);
+    };
+
+    render() {
+        return (
+            <div
+                className="schema-column-header"
+                style={{
+                    width: this.props.columnWidths[this.props.columnIndex],
+                }}
+                onPointerDown={this.onPointerDown}
+                ref={col => {
+                    if (col) {
+                        this._ref = col;
+                        this.props.setColRef(this.props.columnIndex, col);
+                    }
+                }}>
+                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)}></div>
+                <div className="schema-column-title">{this.fieldKey}</div>
+
+                <div className="schema-header-menu">
+                    <div className="schema-header-button" onPointerDown={e => this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}>
+                        <FontAwesomeIcon icon="ellipsis-h" />
+                    </div>
+                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this.props.sortField == this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
+                        <FontAwesomeIcon icon="caret-right" style={this.props.sortField == this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}