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
129
|
import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, ObservableSet } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../../../fields/Doc';
import { DragManager } from '../../../util/DragManager';
import { undoBatch } from '../../../util/UndoManager';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { Colors } from '../../global/globalEnums';
import { OpenWhere } from '../../nodes/DocumentView';
import { FieldViewProps } from '../../nodes/FieldView';
import './CollectionSchemaView.scss';
import { SchemaTableCell } from './SchemaTableCell';
import { setupMoveUpEvents, emptyFunction } from '../../../../Utils';
export interface SchemaRowBoxProps extends FieldViewProps {
rowIndex: number;
columnKeys: string[];
columnWidths: number[];
rowMenuWidth: number;
selectedDocs: ObservableSet<Doc>;
selectRow: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => void;
startDrag: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => boolean;
dragging: boolean;
dropIndex: (index: number) => void;
addRowRef: (doc: Doc, ref: HTMLDivElement) => void;
}
@observer
export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
private _ref: HTMLDivElement | null = null;
bounds = () => this._ref?.getBoundingClientRect();
isSelected = () => this.props.selectedDocs.has(this.props.Document);
@action
onRowPointerDown = (e: React.PointerEvent) => {
e.stopPropagation();
setupMoveUpEvents(
this,
e,
e => this.props.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex),
emptyFunction,
e => this.props.selectRow(e, this.props.Document, this._ref!, this.props.rowIndex)
);
};
onPointerEnter = (e: any) => {
if (!this.props.dragging) return;
document.removeEventListener('pointermove', this.onPointerMove);
document.addEventListener('pointermove', this.onPointerMove);
};
onPointerMove = (e: any) => {
if (!this.props.dragging) return;
let dragIsRow: boolean = true;
DragManager.docsBeingDragged.forEach(doc => {
dragIsRow = this.props.selectedDocs.has(doc);
});
if (this._ref && dragIsRow) {
const rect = this._ref.getBoundingClientRect();
const y = e.clientY - rect.top; //y position within the element.
const height = this._ref.clientHeight;
const halfLine = height / 2;
if (y <= halfLine) {
this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`;
this._ref.style.borderBottom = '0px';
this.props.dropIndex(this.props.rowIndex);
} else if (y > halfLine) {
this._ref.style.borderTop = '0px';
this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`;
this.props.dropIndex(this.props.rowIndex + 1);
}
}
};
onPointerLeave = (e: any) => {
if (this._ref) {
this._ref.style.borderTop = '0px';
this._ref.style.borderBottom = '0px';
}
document.removeEventListener('pointermove', this.onPointerMove);
};
render() {
return (
<div
className="schema-row"
style={this.isSelected() ? { backgroundColor: Colors.LIGHT_BLUE, opacity: this.props.dragging ? 0.5 : 1 } : {}}
onPointerDown={this.onRowPointerDown}
onPointerEnter={this.onPointerEnter}
onPointerLeave={this.onPointerLeave}
ref={(row: HTMLDivElement | null) => {
row && this.props.addRowRef(this.props.Document, row);
this._ref = row;
}}>
<div
className="row-menu"
style={{
width: this.props.rowMenuWidth,
}}>
<div
className="schema-row-button"
onPointerDown={undoBatch(e => {
e.stopPropagation();
this.props.removeDocument?.(this.props.Document);
})}>
<FontAwesomeIcon icon="times" />
</div>
<div
className="schema-row-button"
onPointerDown={e => {
e.stopPropagation();
this.props.addDocTab(this.props.Document, OpenWhere.addRight);
}}>
<FontAwesomeIcon icon="external-link-alt" />
</div>
</div>
<div className="row-cells">
{this.props.columnKeys.map((key, index) => (
<SchemaTableCell key={key} Document={this.props.Document} fieldKey={key} columnWidth={this.props.columnWidths[index]} />
))}
</div>
</div>
);
}
}
|
