From 03d1cd8d220fbb27acb49a3ff9e791db9292b83c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 12 May 2025 07:26:51 -0400
Subject: c

---
 .../DocCreatorMenu/Menu/ConditionalsTextarea.tsx   | 65 ++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx
new file mode 100644
index 000000000..2ca0bde3f
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx
@@ -0,0 +1,65 @@
+import { observer } from "mobx-react";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import { Conditional } from "../Backend/TemplateManager";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import React from "react";
+
+interface ConditionalsTextAreaProps {
+    conditional: Conditional;
+    property: keyof Conditional;
+}
+
+@observer
+export class ConditionalsTextArea extends ObservableReactComponent<ConditionalsTextAreaProps> {
+
+    private mirrorRef: HTMLSpanElement | null = null;
+
+    @observable private inputWidth: string = '60px';
+
+    constructor(props: ConditionalsTextAreaProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    setMirrorRef: React.LegacyRef<HTMLSpanElement> = (node) => { this.mirrorRef = node }
+
+    @action updateInputWidth() {
+        const mirror = this.mirrorRef;
+        if (mirror) {
+            const width = mirror.offsetWidth;
+            if ( width + 8 > 60) this.inputWidth = `${width + 8}px`;
+        }
+    }
+
+    render() {
+        return (
+            <div style={{ display: 'inline-block', position: 'relative' }}>
+                <span
+                    ref={this.setMirrorRef}
+                    style={{
+                        position: 'absolute',
+                        visibility: 'hidden',
+                        whiteSpace: 'pre',
+                        font: 'inherit',
+                        padding: 0,
+                    }}
+                >
+                    {this._props.conditional[this._props.property] || ' '}
+                </span>
+                <input
+                    className="form-row-input"
+                    value={this.props.conditional[this.props.property] ?? ''}
+                    onChange={e => {
+                        runInAction(() => {
+                        this.props.conditional[this.props.property] = e.target.value as any;
+                        });
+                        this.updateInputWidth();
+                    }}
+                    style={{ width: this.inputWidth }}
+                    placeholder={this.props.property}
+                />
+            </div>
+        );
+    }
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2