small customPrompt rework & fix multiple prompts

JeremyGamer13 · JeremyGamer13 · commit f10c44f70705 · 2025-08-13T01:19:38.000-06:00
diff --git a/src/components/box/box.jsx b/src/components/box/box.jsx
@@ -99,8 +99,12 @@ Box.propTypes = {
     /**
      * A callback function whose first parameter is the underlying dom elements.
      * This call back will be executed immediately after the component is mounted or unmounted
+     * Can also be a ref of Element
      */
-    componentRef: PropTypes.func,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
     /** https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction */
     direction: PropTypes.oneOf([
         'row', 'row-reverse', 'column', 'column-reverse'
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
@@ -16,6 +16,7 @@ import styles from './modal.css';
 const ModalComponent = props => (
     <ReactModal
         isOpen
+        ref={props.componentRef}
         className={classNames(styles.modalContent, props.className, {
             [styles.fullScreen]: props.fullScreen
         })}
@@ -24,10 +25,12 @@ const ModalComponent = props => (
             [styles.scrollable]: props.scrollable
         })}
         onRequestClose={props.onRequestClose}
+        style={{ content: props.styleContent, overlay: props.styleOverlay }}
     >
         <Box
             dir={props.isRtl ? 'rtl' : 'ltr'}
             direction="column"
+            componentRef={props.boxRef}
             grow={1}
         >
             <div className={classNames(styles.header, props.headerClassName)}>
@@ -98,6 +101,16 @@ const ModalComponent = props => (
 
 ModalComponent.propTypes = {
     children: PropTypes.node,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    boxRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    styleContent: PropTypes.object,
+    styleOverlay: PropTypes.object,
     className: PropTypes.string,
     contentLabel: PropTypes.oneOfType([
         PropTypes.string,
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
@@ -9,7 +9,6 @@ import Modal from '../../containers/modal.jsx';
 import styles from './prompt.css';
 import { SCRATCH_MAX_CLOUD_VARIABLES } from '../../lib/tw-cloud-limits.js';
 
-
 const messages = defineMessages({
     forAllSpritesMessage: {
         defaultMessage: 'For all sprites',
@@ -46,9 +45,13 @@ const PromptComponent = props => props.isCustom ? (
         contentLabel={props.title}
         id="customModal"
         onRequestClose={props.onCancel}
+        componentRef={props.ref}
+        boxRef={props.boxRef}
+        styleContent={props.styleContent}
+        styleOverlay={props.styleOverlay}
     >
         <Box className={styles.body}>
-            <Box>
+            <Box componentRef={props.customRef}>
             </Box>
             <Box className={styles.buttonRow}>
                 <button
@@ -72,6 +75,10 @@ const PromptComponent = props => props.isCustom ? (
         contentLabel={props.title}
         id="variableModal"
         onRequestClose={props.onCancel}
+        componentRef={props.componentRef}
+        boxRef={props.boxRef}
+        styleContent={props.styleContent}
+        styleOverlay={props.styleOverlay}
     >
         <Box className={styles.body}>
             <Box className={styles.label}>
@@ -232,11 +239,25 @@ PromptComponent.propTypes = {
     onScopeOptionSelection: PropTypes.func,
     showCloudOption: PropTypes.bool,
     showVariableOptions: PropTypes.bool,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    boxRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    styleContent: PropTypes.object,
+    styleOverlay: PropTypes.object,
 
     /* custom modals */
     isCustom: PropTypes.bool,
     enterTitle: PropTypes.string,
-    closeTitle: PropTypes.string
+    closeTitle: PropTypes.string,
+    customRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
 };
 
 export default PromptComponent;
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
@@ -21,6 +21,7 @@ import DragConstants from '../lib/drag-constants';
 import defineDynamicBlock from '../lib/define-dynamic-block';
 import AddonHooks from '../addons/hooks';
 import LoadScratchBlocksHOC from '../lib/tw-load-scratch-blocks-hoc.jsx';
+import uid from "../lib/uid.js";
 
 import {connect} from 'react-redux';
 import {updateToolbox} from '../reducers/toolbox';
@@ -76,6 +77,7 @@ const addFunctionListener = (object, property, callback) => {
         return result;
     };
 };
+const isObject = (value) => value && typeof value === 'object' && !Array.isArray(value);
 
 const DroppableBlocks = DropAreaHOC([
     DragConstants.BACKPACK_CODE
@@ -143,10 +145,12 @@ class Blocks extends React.Component {
         this.ScratchBlocks.recordSoundCallback = this.handleOpenSoundRecorder;
 
         this.state = {
-            prompt: null
+            prompt: null,
+            customPrompts: [],
         };
         this.onTargetsUpdate = debounce(this.onTargetsUpdate, 100);
         this.toolboxUpdateQueue = [];
+        this.customModalRefs = new Map();
     }
     componentDidMount () {
         this.props.vm.setCompilerOptions({
@@ -236,6 +240,8 @@ class Blocks extends React.Component {
     shouldComponentUpdate (nextProps, nextState) {
         return (
             this.state.prompt !== nextState.prompt ||
+            this.state.customPrompts !== nextState.customPrompts ||
+            (nextState.customPrompts && this.state.customPrompts.length !== nextState.customPrompts.length) ||
             this.props.isVisible !== nextProps.isVisible ||
             this._renderedToolboxXML !== nextProps.toolboxXML ||
             this.props.extensionLibraryVisible !== nextProps.extensionLibraryVisible ||
@@ -611,46 +617,49 @@ class Blocks extends React.Component {
         p.prompt.showCloudOption = (optVarType === this.ScratchBlocks.SCALAR_VARIABLE_TYPE) && this.props.canUseCloud;
         this.setState(p);
     }
-    handleCustomPrompt (title, scale, enterInfo, closeInfo) {
-        const isObject = (value) => typeof value === 'object' && !Array.isArray(value);
-        let needsExit = false;
-        const exitFunc = (message) => {
-            needsExit = true;
-            console.error(message);
-        };
+    handleCustomPrompt (config, styles, enterInfo, closeInfo) {
+        return new Promise((resolve, reject) => {
+            /* validate arguments */
+            if (config && isObject(config)) {
+                if (!config.title) return reject("Custom Modal -- Missing 'title' (string) property in Param 1");
+            } else {
+                return reject("Custom Modal -- Param 1 must be an object with at least properties: 'title' (string)");
+            }
+            if (styles && !isObject(styles)) {
+                return reject("Custom Modal -- Param 2 must be an object");
+            }
+            if (styles && (!styles.content && !styles.overlay)) {
+                return reject("Custom Modal -- If Param 2 is specified, specify CSS styles within either: 'content' or 'overlay'");
+            }
+            if (isObject(enterInfo)) {
+                if (!enterInfo.name || !enterInfo.callback) return reject("Custom Modal -- Missing name/callback property in Param 3");
+                if (enterInfo.callback && typeof enterInfo.callback !== 'function') return reject("Custom Modal -- callback property in Param 3 must be a function");
+            } else {
+                return reject("Custom Modal -- Param 3 must be a object with properties: 'name' (string) and 'callback' (function)");
+            }
+            if (isObject(closeInfo)) {
+                if (!closeInfo.name || !closeInfo.callback) return reject("Custom Modal -- Missing name/callback property in Param 4");
+                if (closeInfo.callback && typeof closeInfo.callback !== 'function') return reject("Custom Modal -- callback property in Param 4 must be a function");
+            } else {
+                return reject("Custom Modal -- Param 4 must be a object with properties: 'name' (string) and 'callback' (function)");
+            }
 
-        /* validate arguments */
-        if (isObject(scale)) {
-            if (!scale.width || !scale.height) exitFunc("Custom Modal -- Missing width/height number property in Param 2");
-        } else {
-            exitFunc("Custom Modal -- Param 2 must be a object with 'width' and 'height' number properties");
-        }
-        if (isObject(enterInfo)) {
-            if (!enterInfo.name || !enterInfo.callback) exitFunc("Custom Modal -- Missing name/callback property in Param 3");
-            if (enterInfo.callback && typeof enterInfo.callback !== 'function') exitFunc("Custom Modal -- callback property in Param 3 must be a function");
-        } else {
-            exitFunc("Custom Modal -- Param 3 must be a object with properties: 'name' (string) and 'callback' (function)");
-        }
-        if (isObject(closeInfo)) {
-            if (!closeInfo.name || !closeInfo.callback) exitFunc("Custom Modal -- Missing name/callback property in Param 4");
-            if (closeInfo.callback && typeof closeInfo.callback !== 'function') exitFunc("Custom Modal -- callback property in Param 4 must be a function");
-        } else {
-            exitFunc("Custom Modal -- Param 4 must be a object with properties: 'name' (string) and 'callback' (function)");
-        }
-        if (needsExit) return;
-
-        this.setState({prompt: {
-            isCustom: true,
-            title, enterInfo, closeInfo
-        }});
-
-        const modal = document.querySelector(`div[class="ReactModalPortal"]`);
-        if (modal) {
-            const inner = modal.firstChild.firstChild;
-            inner.style.width = typeof scale.width === 'number' ? `${scale.width}px` : scale.width;
-            inner.style.height = typeof scale.height === 'number' ? `${scale.height}px` : scale.height;
-            return inner.querySelector(`div[class*="prompt_body_"] div`);
-        }
+            // create the callback for when the node is created. an HTML element (or modal) with ref={functionHere} will run the function with the HTMLElement as 1st arg
+            const thisPromptId = uid();
+            this.customModalRefs.set(thisPromptId, (node) => {
+                resolve(node);
+            })
+
+            // Setting state with this info will cause blocks.jsx to re-render, rendering the modal before any code after setState can run.
+            // However, the callback & ref are not be usable until slightly later. this is why ref is set to a callback above.
+            // This is one of many reasons why React is pretty stupid.
+            this.setState({
+                customPrompts: this.state.customPrompts.concat({
+                    id: thisPromptId,
+                    config, styles, enterInfo, closeInfo
+                })
+            });
+        });
     }
     handleConnectionModalStart (extensionId) {
         this.props.onOpenConnectionModal(extensionId);
@@ -667,20 +676,28 @@ class Blocks extends React.Component {
      * and additional potentially conflicting variable names from the VM
      * to the variable validation prompt callback used in scratch-blocks.
      */
-    handlePromptCallback (input, variableOptions) {
-        if (this.state.prompt.isCustom) {
-            this.state.prompt.enterInfo.callback();
-            this.setState({prompt: null});
-            return;
+    handlePromptCallback (input, variableOptions, customPrompt) {
+        if (customPrompt) {
+            customPrompt.enterInfo.callback();
+            return this.setState({
+                customPrompts: this.state.customPrompts.filter(prompt => prompt !== customPrompt)
+            });
         }
+
         this.state.prompt.callback(
             input,
             this.props.vm.runtime.getAllVarNamesOfType(this.state.prompt.varType),
             variableOptions);
         this.handlePromptClose();
     }
-    handlePromptClose () {
-        if (this.state.prompt.isCustom) this.state.prompt.closeInfo.callback();
+    handlePromptClose (customPrompt) {
+        if (customPrompt) {
+            customPrompt.closeInfo.callback();
+            return this.setState({
+                customPrompts: this.state.customPrompts.filter(prompt => prompt !== customPrompt)
+            });
+        }
+
         this.setState({prompt: null});
     }
     handleCustomProceduresClose (data) {
@@ -736,17 +753,7 @@ class Blocks extends React.Component {
                     onDrop={this.handleDrop}
                     {...props}
                 />
-                {this.state.prompt ? this.state.prompt.isCustom ? (
-                    <Prompt
-                        isCustom={this.state.prompt.isCustom}
-                        title={this.state.prompt.title}
-                        enterTitle={this.state.prompt.enterInfo.name}
-                        closeTitle={this.state.prompt.closeInfo.name}
-                        vm={vm}
-                        onCancel={this.handlePromptClose}
-                        onOk={this.handlePromptCallback}
-                    />
-                ) : (
+                {this.state.prompt ? (
                     <Prompt
                         defaultValue={this.state.prompt.defaultValue}
                         isStage={vm.runtime.getEditingTarget().isStage}
@@ -760,6 +767,20 @@ class Blocks extends React.Component {
                         onOk={this.handlePromptCallback}
                     />
                 ) : null}
+                {this.state.customPrompts.map(prompt => (
+                    <Prompt
+                        isCustom={true}
+                        vm={vm}
+                        customRef={this.customModalRefs.get(prompt.id)}
+                        title={prompt.config.title}
+                        styleContent={prompt.styles ? prompt.styles.content : null}
+                        styleOverlay={prompt.styles ? prompt.styles.overlay : null}
+                        enterTitle={prompt.enterInfo.name}
+                        closeTitle={prompt.closeInfo.name}
+                        onCancel={() => this.handlePromptClose(prompt)}
+                        onOk={() => this.handlePromptCallback(null, null, prompt)}
+                    />
+                ))}
                 {extensionLibraryVisible ? (
                     <ExtensionLibrary
                         vm={vm}
diff --git a/src/containers/modal.jsx b/src/containers/modal.jsx
@@ -48,9 +48,19 @@ class Modal extends React.Component {
 
 Modal.propTypes = {
     id: PropTypes.string.isRequired,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    boxRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
     isRtl: PropTypes.bool,
     onRequestClose: PropTypes.func,
     onRequestOpen: PropTypes.func,
+    styleContent: PropTypes.object,
+    styleOverlay: PropTypes.object,
     scrollable: PropTypes.bool
 };
 
diff --git a/src/containers/prompt.jsx b/src/containers/prompt.jsx
@@ -62,12 +62,17 @@ class Prompt extends React.Component {
         if (this.props.isCustom) return (
             <PromptComponent
                 isCustom={this.props.isCustom}
+                componentRef={this.props.componentRef}
+                boxRef={this.props.boxRef}
+                styleContent={this.props.styleContent}
+                styleOverlay={this.props.styleOverlay}
                 title={this.props.title}
                 enterTitle={this.props.enterTitle}
                 closeTitle={this.props.closeTitle}
                 onOk={this.handleOk}
                 onCancel={this.handleCancel}
                 onKeyPress={this.handleKeyPress}
+                customRef={this.props.customRef}
             />
         )
         else return (
@@ -90,6 +95,10 @@ class Prompt extends React.Component {
                 onKeyPress={this.handleKeyPress}
                 onOk={this.handleOk}
                 onScopeOptionSelection={this.handleScopeOptionSelection}
+                componentRef={this.props.componentRef}
+                styleContent={this.props.styleContent}
+                styleOverlay={this.props.styleOverlay}
+                boxRef={this.props.boxRef}
             />
         );
     }
@@ -106,11 +115,25 @@ Prompt.propTypes = {
     showCloudOption: PropTypes.bool,
     showVariableOptions: PropTypes.bool,
     vm: PropTypes.instanceOf(VM),
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    boxRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
+    styleContent: PropTypes.object,
+    styleOverlay: PropTypes.object,
 
     /* custom modals */
     isCustom: PropTypes.bool,
     enterTitle: PropTypes.string,
-    closeTitle: PropTypes.string
+    closeTitle: PropTypes.string,
+    customRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+    ]),
 };
 
 export default Prompt;
diff --git a/src/lib/uid.js b/src/lib/uid.js
