aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-06-14 09:12:13 -0400
committerbobzel <zzzman@gmail.com>2023-06-14 09:12:13 -0400
commit376270791c7fe414c05a87f73afe11146d119c35 (patch)
treec6c788c958a5aaca4a9bbdd709d5e6f1d76dde0d /src/client/views/collections/collectionSchema/SchemaRowBox.tsx
parent2bc89733ce522527c2f27203b537d99395c9479b (diff)
parentbf16eca7a84adfdf1c5970e7e4793568ee70325d (diff)
Merge branch 'master' into advanced-trails
Diffstat (limited to 'src/client/views/collections/collectionSchema/SchemaRowBox.tsx')
-rw-r--r--src/client/views/collections/collectionSchema/SchemaRowBox.tsx46
1 files changed, 35 insertions, 11 deletions
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 856537927..4f3503751 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -2,9 +2,12 @@ import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { computed } from 'mobx';
import { observer } from 'mobx-react';
+import { computedFn } from 'mobx-utils';
+import { Doc } from '../../../../fields/Doc';
+import { BoolCast } from '../../../../fields/Types';
import { DragManager } from '../../../util/DragManager';
import { SnappingManager } from '../../../util/SnappingManager';
-import { undoBatch } from '../../../util/UndoManager';
+import { undoable } from '../../../util/UndoManager';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { Colors } from '../../global/globalEnums';
import { OpenWhere } from '../../nodes/DocumentView';
@@ -12,6 +15,7 @@ import { FieldView, FieldViewProps } from '../../nodes/FieldView';
import { CollectionSchemaView } from './CollectionSchemaView';
import './CollectionSchemaView.scss';
import { SchemaTableCell } from './SchemaTableCell';
+import { Transform } from '../../../util/Transform';
@observer
export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -24,8 +28,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
bounds = () => this._ref?.getBoundingClientRect();
@computed get schemaView() {
- const vpath = this.props.docViewPath();
- return vpath.length > 1 ? (vpath[vpath.length - 2].ComponentView as CollectionSchemaView) : undefined;
+ return this.props.DocumentView?.().props.docViewPath().lastElement()?.ComponentView as CollectionSchemaView;
}
@computed get schemaDoc() {
@@ -57,7 +60,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
onPointerMove = (e: any) => {
if (!SnappingManager.GetIsDragging()) return;
- const dragIsRow = DragManager.docsBeingDragged.some(doc => doc.context === this.schemaDoc); // this.schemaView?._selectedDocs.has(doc) ?? false;
+ const dragIsRow = DragManager.docsBeingDragged.some(doc => doc.embedContainer === this.schemaDoc); // this.schemaView?._selectedDocs.has(doc) ?? false;
if (this._ref && dragIsRow) {
const rect = this._ref.getBoundingClientRect();
@@ -84,11 +87,17 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
document.removeEventListener('pointermove', this.onPointerMove);
};
+ getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey));
+ selectCell = (doc: Doc, col: number) => this.schemaView?.selectCell(doc, col);
+ deselectCell = () => this.schemaView?.deselectCell();
+ selectedCell = () => this.schemaView?._selectedCell;
+ setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false;
+ columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
render() {
return (
<div
className="schema-row"
- style={{ height: CollectionSchemaView._rowHeight, backgroundColor: this.props.isSelected() ? Colors.LIGHT_BLUE : undefined, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined }}
+ style={{ height: this.props.PanelHeight(), backgroundColor: this.props.isSelected() ? Colors.LIGHT_BLUE : undefined }}
onPointerEnter={this.onPointerEnter}
onPointerLeave={this.onPointerLeave}
ref={(row: HTMLDivElement | null) => {
@@ -103,18 +112,18 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
}}>
<div
className="schema-row-button"
- onPointerDown={undoBatch(e => {
+ onPointerDown={undoable(e => {
e.stopPropagation();
this.props.removeDocument?.(this.rootDoc);
- })}>
+ }, 'Delete Row')}>
<FontAwesomeIcon icon="times" />
</div>
<div
className="schema-row-button"
- onPointerDown={e => {
+ onPointerDown={undoable(e => {
e.stopPropagation();
this.props.addDocTab(this.rootDoc, OpenWhere.addRight);
- }}>
+ }, 'Open Doc on Right')}>
<FontAwesomeIcon icon="external-link-alt" />
</div>
</div>
@@ -123,10 +132,25 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
<SchemaTableCell
key={key}
Document={this.rootDoc}
+ col={index}
fieldKey={key}
- columnWidth={this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth}
+ allowCRs={false} // to enter text with new lines, must use \n
+ columnWidth={this.columnWidth(index)}
+ rowHeight={this.schemaView.rowHeightFunc}
isRowActive={this.props.isContentActive}
- setColumnValues={(field, value) => this.schemaView?.setColumnValues(field, value) ?? false}
+ getFinfo={this.getFinfo}
+ selectCell={this.selectCell}
+ deselectCell={this.deselectCell}
+ selectedCell={this.selectedCell}
+ setColumnValues={this.setColumnValues}
+ oneLine={BoolCast(this.schemaDoc?._singleLine)}
+ menuTarget={this.schemaView.MenuTarget}
+ transform={() => {
+ const ind = index === this.schemaView.columnKeys.length - 1 ? this.schemaView.columnKeys.length - 3 : index;
+ const x = this.schemaView?.displayColumnWidths.reduce((p, c, i) => (i <= ind ? p + c : p), 0);
+ const y = (this.props.yPadding ?? 0) * this.props.PanelHeight();
+ return new Transform(x + CollectionSchemaView._rowMenuWidth, y, 1);
+ }}
/>
))}
</div>