basic selection complete

1 files changed, 26 insertions, 9 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 50e2502dc..33f4e0bfc 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,25 +1,42 @@
 import React = require('react');
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, ObservableMap, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
-import './CollectionSchemaView.scss';
-import { ViewBoxAnnotatableComponent, ViewBoxBaseComponent } from '../../DocComponent';
+import { Doc } from '../../../../fields/Doc';
+import { undoBatch } from '../../../util/UndoManager';
+import { ViewBoxBaseComponent } from '../../DocComponent';
+import { Colors } from '../../global/globalEnums';
 import { FieldViewProps } from '../../nodes/FieldView';
+import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { undoBatch } from '../../../util/UndoManager';
 
 export interface SchemaRowBoxProps extends FieldViewProps {
     columnKeys: string[];
     columnWidths: number[];
+    rowMenuWidth: number;
+    selectedRows: ObservableSet<Doc>;
+    selectRow: (doc: Doc, cmd?: boolean, shift?: boolean) => void;
 }
 
 @observer
-export class SchemaRowBox extends ViewBoxAnnotatableComponent<SchemaRowBoxProps>() {
+export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
+    isSelected = () => this.props.selectedRows.has(this.props.Document);
+
+    @action
+    onRowPointerDown = (e: React.PointerEvent) => {
+        e.stopPropagation();
+        this.props.selectRow(this.props.Document, e.ctrlKey || e.metaKey, e.shiftKey);
+    }
+
     render() {
         return (
-            <div className="schema-row" /*style={this.props.isSelected() ? { backgroundColor: 'grey' } : {}}*/>
-                <div className="row-menu">
-                    <div className="row-button" onPointerDown={undoBatch(() => this.props.removeDocument?.(this.props.Document))}>
-                        <FontAwesomeIcon icon={'times'} />
+            <div className="schema-row" style={this.isSelected() ? { backgroundColor: Colors.LIGHT_BLUE } : {}} onPointerDown={this.onRowPointerDown}>
+                <div className="row-menu" style={{width: this.props.rowMenuWidth}}>
+                    <div className="row-button" onPointerDown={undoBatch((e) => {e.stopPropagation(); this.props.removeDocument?.(this.props.Document)})}>
+                        <FontAwesomeIcon icon="times" />
+                    </div>
+                    <div className="row-button" onPointerDown={(e) => {e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right')}}>
+                        <FontAwesomeIcon icon="external-link-alt" />
                     </div>
                 </div>
                 <div className="row-cells">