aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/KeyValueBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/KeyValueBox.tsx')
-rw-r--r--src/client/views/nodes/KeyValueBox.tsx84
1 files changed, 49 insertions, 35 deletions
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 60417430f..88a82e8e6 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -3,35 +3,37 @@ import { observer } from 'mobx-react';
import { Doc, Field, FieldResult } from '../../../fields/Doc';
import { List } from '../../../fields/List';
import { RichTextField } from '../../../fields/RichTextField';
-import { listSpec } from '../../../fields/Schema';
import { ComputedField, ScriptField } from '../../../fields/ScriptField';
-import { Cast, DocCast, FieldValue, NumCast } from '../../../fields/Types';
+import { DocCast, NumCast } from '../../../fields/Types';
import { ImageField } from '../../../fields/URLField';
+import { returnAll, returnAlways, returnTrue } from '../../../Utils';
import { Docs } from '../../documents/Documents';
import { SetupDrag } from '../../util/DragManager';
import { CompiledScript, CompileScript, ScriptOptions } from '../../util/Scripting';
import { undoBatch } from '../../util/UndoManager';
-import { FieldView, FieldViewProps } from './FieldView';
-import './KeyValueBox.scss';
-import { KeyValuePair } from './KeyValuePair';
-import React = require('react');
import { ContextMenu } from '../ContextMenu';
import { ContextMenuProps } from '../ContextMenuItem';
-import e = require('express');
+import { OpenWhere } from './DocumentView';
+import { FieldView, FieldViewProps } from './FieldView';
import { FormattedTextBox } from './formattedText/FormattedTextBox';
import { ImageBox } from './ImageBox';
-import { OpenWhere } from './DocumentView';
+import './KeyValueBox.scss';
+import { KeyValuePair } from './KeyValuePair';
+import React = require('react');
+import { DocumentManager } from '../../util/DocumentManager';
+import { ScriptingGlobals } from '../../util/ScriptingGlobals';
+import { ScriptingRepl } from '../ScriptingRepl';
+import { DocumentIconContainer } from './DocumentIcon';
export type KVPScript = {
script: CompiledScript;
type: 'computed' | 'script' | false;
onDelegate: boolean;
};
-
@observer
export class KeyValueBox extends React.Component<FieldViewProps> {
- public static LayoutString(fieldStr: string) {
- return FieldView.LayoutString(KeyValueBox, fieldStr);
+ public static LayoutString() {
+ return FieldView.LayoutString(KeyValueBox, 'data');
}
private _mainCont = React.createRef<HTMLDivElement>();
@@ -39,13 +41,20 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
private _keyInput = React.createRef<HTMLInputElement>();
private _valInput = React.createRef<HTMLInputElement>();
+ componentDidMount() {
+ this.props.setContentView?.(this);
+ }
+ reverseNativeScaling = returnTrue;
+ able = returnAlways;
+ layout_fitWidth = returnTrue;
+ overridePointerEvents = returnAll;
+ onClickScriptDisable = returnAlways;
+
@observable private rows: KeyValuePair[] = [];
+ @observable _splitPercentage = 50;
- @computed get splitPercentage() {
- return NumCast(this.props.Document.schemaSplitPercentage, 50);
- }
get fieldDocToLayout() {
- return this.props.fieldKey ? Cast(this.props.Document[this.props.fieldKey], Doc, null) : this.props.Document;
+ return this.props.fieldKey ? DocCast(this.props.Document[this.props.fieldKey], DocCast(this.props.Document)) : this.props.Document;
}
@action
@@ -63,12 +72,12 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
};
public static CompileKVPScript(value: string): KVPScript | undefined {
const eq = value.startsWith('=');
- value = eq ? value.substr(1) : value;
- const dubEq = value.startsWith(':=') ? 'computed' : value.startsWith(';=') ? 'script' : false;
- value = dubEq ? value.substr(2) : value;
- const options: ScriptOptions = { addReturn: true, typecheck: false, params: { this: Doc.name, self: Doc.name, _last_: 'any', _readOnly_: 'boolean' }, editable: false };
+ value = eq ? value.substring(1) : value;
+ const dubEq = value.startsWith(':=') ? 'computed' : value.startsWith('$=') ? 'script' : false;
+ value = dubEq ? value.substring(2) : value;
+ const options: ScriptOptions = { addReturn: true, typecheck: false, params: { this: Doc.name, self: Doc.name, _last_: 'any', _readOnly_: 'boolean' }, editable: true };
if (dubEq) options.typecheck = false;
- const script = CompileScript(value, options);
+ const script = CompileScript(value, { ...options, transformer: DocumentIconContainer.getTransformer() });
return !script.compiled ? undefined : { script, type: dubEq, onDelegate: eq };
}
@@ -82,11 +91,14 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
} else if (type === 'script') {
field = new ScriptField(script);
} else {
- const res = script.run({ this: target }, console.log);
- if (!res.success) return false;
+ const res = script.run({ this: Doc.Layout(doc), self: doc }, console.log);
+ if (!res.success) {
+ target[key] = script.originalScript;
+ return true;
+ }
field = res.result;
}
- if (Field.IsField(field, true)) {
+ if (Field.IsField(field, true) && (key !== 'proto' || field !== target)) {
target[key] = field;
return true;
}
@@ -133,7 +145,9 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
const rows: JSX.Element[] = [];
let i = 0;
const self = this;
- for (const key of Object.keys(ids).slice().sort()) {
+ const keys = Object.keys(ids).slice();
+ //for (const key of [...keys.filter(id => id !== 'layout' && !id.includes('_')).sort(), ...keys.filter(id => id === 'layout' || id.includes('_')).sort()]) {
+ for (const key of keys.sort()) {
rows.push(
<KeyValuePair
doc={realDoc}
@@ -148,7 +162,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
if (el) self.rows.push(el);
};
})()}
- keyWidth={100 - this.splitPercentage}
+ keyWidth={100 - this._splitPercentage}
rowStyle={'keyValueBox-' + (i++ % 2 ? 'oddRow' : 'evenRow')}
key={key}
keyName={key}
@@ -166,7 +180,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
this._keyInput.current!.select();
e.stopPropagation();
}}
- style={{ width: `${100 - this.splitPercentage}%` }}>
+ style={{ width: `${100 - this._splitPercentage}%` }}>
<input style={{ width: '100%' }} ref={this._keyInput} type="text" placeholder="Key" />
</td>
<td
@@ -175,7 +189,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
this._valInput.current!.select();
e.stopPropagation();
}}
- style={{ width: `${this.splitPercentage}%` }}>
+ style={{ width: `${this._splitPercentage}%` }}>
<input style={{ width: '100%' }} ref={this._valInput} type="text" placeholder="Value" onKeyDown={this.onEnterKey} />
</td>
</tr>
@@ -185,7 +199,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
@action
onDividerMove = (e: PointerEvent): void => {
const nativeWidth = this._mainCont.current!.getBoundingClientRect();
- this.props.Document.schemaSplitPercentage = Math.max(0, 100 - Math.round(((e.clientX - nativeWidth.left) / nativeWidth.width) * 100));
+ this._splitPercentage = Math.max(0, 100 - Math.round(((e.clientX - nativeWidth.left) / nativeWidth.width) * 100));
};
@action
onDividerUp = (e: PointerEvent): void => {
@@ -202,7 +216,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
getFieldView = async () => {
const rows = this.rows.filter(row => row.isChecked);
if (rows.length > 1) {
- const parent = Docs.Create.StackingDocument([], { _autoHeight: true, _width: 300, title: `field views for ${DocCast(this.props.Document.data).title}`, _chromeHidden: true });
+ const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this.props.Document.data).title}`, _chromeHidden: true });
for (const row of rows) {
const field = this.createFieldView(DocCast(this.props.Document.data), row);
field && Doc.AddDocToList(parent, 'data', field);
@@ -215,9 +229,9 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
createFieldView = (templateDoc: Doc, row: KeyValuePair) => {
const metaKey = row.props.keyName;
- const fieldTemplate = Doc.IsDelegateField(templateDoc, metaKey) ? Doc.MakeDelegate(templateDoc) : Doc.MakeAlias(templateDoc);
+ const fieldTemplate = Doc.IsDelegateField(templateDoc, metaKey) ? Doc.MakeDelegate(templateDoc) : Doc.MakeEmbedding(templateDoc);
fieldTemplate.title = metaKey;
- fieldTemplate.fitWidth = true;
+ fieldTemplate.layout_fitWidth = true;
fieldTemplate._xMargin = 10;
fieldTemplate._yMargin = 10;
fieldTemplate._width = 100;
@@ -270,8 +284,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
render() {
const dividerDragger =
- this.splitPercentage === 0 ? null : (
- <div className="keyValueBox-dividerDragger" style={{ transform: `translate(calc(${100 - this.splitPercentage}% - 5px), 0px)` }}>
+ this._splitPercentage === 0 ? null : (
+ <div className="keyValueBox-dividerDragger" style={{ transform: `translate(calc(${100 - this._splitPercentage}% - 5px), 0px)` }}>
<div className="keyValueBox-dividerDraggerThumb" onPointerDown={this.onDividerDown} />
</div>
);
@@ -281,10 +295,10 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
<table className="keyValueBox-table">
<tbody className="keyValueBox-tbody">
<tr className="keyValueBox-header">
- <th className="keyValueBox-key" style={{ width: `${100 - this.splitPercentage}%` }} ref={this._keyHeader} onPointerDown={SetupDrag(this._keyHeader, this.getFieldView)}>
+ <th className="keyValueBox-key" style={{ width: `${100 - this._splitPercentage}%` }} ref={this._keyHeader} onPointerDown={SetupDrag(this._keyHeader, this.getFieldView)}>
Key
</th>
- <th className="keyValueBox-fields" style={{ width: `${this.splitPercentage}%` }}>
+ <th className="keyValueBox-fields" style={{ width: `${this._splitPercentage}%` }}>
Fields
</th>
</tr>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 23:33:13 +0000