aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
blob: 5f8ffe8b05e8fcce69120944a150d408ca1141c6 (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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React = require('react');
import { observer } from 'mobx-react';
import { Doc, Field } from '../../../../fields/Doc';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils';
import { Transform } from '../../../util/Transform';
import { EditableView } from '../../EditableView';
import { FieldView, FieldViewProps } from '../../nodes/FieldView';
import { KeyValueBox } from '../../nodes/KeyValueBox';
import { DefaultStyleProvider } from '../../StyleProvider';
import { CollectionSchemaView } from './CollectionSchemaView';
import './CollectionSchemaView.scss';

export interface SchemaTableCellProps {
    Document: Doc;
    fieldKey: string;
    columnWidth: number;
    isRowActive: () => boolean | undefined;
    setColumnValues: (field: string, value: string) => boolean;
}

@observer
export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
    render() {
        const props: FieldViewProps = {
            Document: this.props.Document,
            docFilters: returnEmptyFilter,
            docRangeFilters: returnEmptyFilter,
            searchFilterDocs: returnEmptyDoclist,
            styleProvider: DefaultStyleProvider,
            docViewPath: returnEmptyDoclist,
            fieldKey: this.props.fieldKey,
            rootSelected: returnFalse,
            isSelected: returnFalse,
            setHeight: returnFalse,
            select: emptyFunction,
            dropAction: 'alias',
            bringToFront: emptyFunction,
            renderDepth: 1,
            isContentActive: returnFalse,
            whenChildContentsActiveChanged: emptyFunction,
            ScreenToLocalTransform: Transform.Identity,
            focus: emptyFunction,
            PanelWidth: () => this.props.columnWidth,
            PanelHeight: () => CollectionSchemaView._rowHeight,
            addDocTab: returnFalse,
            pinToPres: returnZero,
        };

        return (
            <div className="schema-table-cell" style={{ width: this.props.columnWidth }}>
                <div className="schemacell-edit-wrapper" style={this.props.isRowActive() ? { cursor: 'text', pointerEvents: 'auto' } : { cursor: 'default', pointerEvents: 'none' }}>
                    <EditableView
                        contents={<FieldView {...props} />}
                        GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)}
                        SetValue={(value: string, shiftDown?: boolean, enterKey?: boolean) => {
                            if (shiftDown && enterKey) {
                                this.props.setColumnValues(this.props.fieldKey, value);
                            }
                            return KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value);
                        }}
                        editing={this.props.isRowActive() ? undefined : false}
                    />
                </div>
            </div>
        );
    }
}