blob: bee76bb24b97eabc5ad667cc22e8e0f9f2c26303 (
plain)
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
|
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>
);
}
}
|
