diff options
Diffstat (limited to 'src/client/views/ScriptBox.tsx')
-rw-r--r-- | src/client/views/ScriptBox.tsx | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/src/client/views/ScriptBox.tsx b/src/client/views/ScriptBox.tsx deleted file mode 100644 index c2fbef5a5..000000000 --- a/src/client/views/ScriptBox.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { action, makeObservable, observable } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { emptyFunction } from '../../Utils'; -import { Doc, Opt } from '../../fields/Doc'; -import { ScriptField } from '../../fields/ScriptField'; -import { ScriptCast } from '../../fields/Types'; -import { DragManager } from '../util/DragManager'; -import { CompileScript } from '../util/Scripting'; -import { EditableView } from './EditableView'; -import { OverlayView } from './OverlayView'; -import './ScriptBox.scss'; -import { DocumentIconContainer } from './nodes/DocumentIcon'; - -export interface ScriptBoxProps { - onSave: (text: string, onError: (error: string) => void) => void; - onCancel?: () => void; - initialText?: string; - showDocumentIcons?: boolean; - setParams?: (p: string[]) => void; -} - -@observer -export class ScriptBox extends React.Component<ScriptBoxProps> { - @observable - private _scriptText: string; - overlayDisposer?: () => void; - - constructor(props: ScriptBoxProps) { - super(props); - makeObservable(this); - this._scriptText = props.initialText || ''; - } - - @action - onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { - this._scriptText = e.target.value; - }; - - @action - onError = (error: string) => { - console.log('ScriptBox: ' + error); - }; - - onFocus = () => { - this.overlayDisposer?.(); - this.overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 }); - }; - - onBlur = () => { - this.overlayDisposer?.(); - }; - - render() { - let onFocus: Opt<() => void>; - let onBlur: Opt<() => void>; - if (this.props.showDocumentIcons) { - onFocus = this.onFocus; - onBlur = this.onBlur; - } - const params = ( - <EditableView - contents="" - display="block" - maxHeight={72} - height={35} - fontSize={28} - GetValue={() => ''} - SetValue={(value: string) => { - this.props.setParams?.(value.split(' ').filter(s => s !== ' ')); - return true; - }} - /> - ); - return ( - <div className="scriptBox-outerDiv"> - <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}> - <textarea className="scriptBox-textarea" onChange={this.onChange} value={this._scriptText} onFocus={onFocus} onBlur={onBlur} /> - <div style={{ background: 'beige' }}>{params}</div> - </div> - <div className="scriptBox-toolbar"> - <button - type="button" - onClick={e => { - this.props.onSave(this._scriptText, this.onError); - e.stopPropagation(); - }}> - Save - </button> - <button - type="button" - onClick={e => { - this.props.onCancel && this.props.onCancel(); - e.stopPropagation(); - }}> - Cancel - </button> - </div> - </div> - ); - } - // let l = docList(this.source[0].data).length; if (l) { let ind = this.target[0].index !== undefined ? (this.target[0].index+1) % l : 0; this.target[0].index = ind; this.target[0].proto = getProto(docList(this.source[0].data)[ind]);} - public static EditButtonScript(title: string, doc: Doc, fieldKey: string, clientX: number, clientY: number, contextParams?: { [name: string]: string }, defaultScript?: ScriptField) { - let overlayDisposer: () => void = emptyFunction; - const script = ScriptCast(doc[fieldKey]) || defaultScript; - let originalText: string | undefined; - if (script) { - originalText = script.script.originalScript; - } - // tslint:disable-next-line: no-unnecessary-callback-wrapper - const params: string[] = []; - const setParams = (p: string[]) => params.splice(0, params.length, ...p); - const scriptingBox = ( - <ScriptBox - initialText={originalText} - setParams={setParams} - onCancel={overlayDisposer} - onSave={(text, onError) => { - if (!text) { - doc['$' + fieldKey] = undefined; - } else { - const compScript = CompileScript(text, { - params: { this: Doc.name, ...contextParams }, - typecheck: false, - editable: true, - transformer: DocumentIconContainer.getTransformer(), - }); - if (!compScript.compiled) { - onError(compScript.errors.map(error => error.messageText).join('\n')); - return; - } - - const div = document.createElement('div'); - div.style.width = '90px'; - div.style.height = '20px'; - div.style.background = 'gray'; - div.style.position = 'absolute'; - div.style.display = 'inline-block'; - div.style.transform = `translate(${clientX}px, ${clientY}px)`; - div.innerHTML = 'button'; - params.length && DragManager.StartButtonDrag([div], text, doc.title + '-instance', {}, params, () => {}, clientX, clientY); - - doc['$' + fieldKey] = new ScriptField(compScript); - overlayDisposer(); - } - }} - showDocumentIcons - /> - ); - overlayDisposer = OverlayView.Instance.addWindow(scriptingBox, { x: 400, y: 200, width: 500, height: 400, title }); - } -} |