Revert "small customPrompt rework & fix multiple prompts"

JeremyGamer13 · JeremyGamer13 · commit 043ff68fb258 · 2025-08-13T01:19:46.000-06:00
This reverts commit f10c44f.
diff --git a/src/components/box/box.jsx b/src/components/box/box.jsx
@@ -99,12 +99,8 @@ 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.oneOfType([
-        PropTypes.func,
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
-    ]),
+    componentRef: PropTypes.func,
     /** 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,7 +16,6 @@ import styles from './modal.css';
 const ModalComponent = props => (
     <ReactModal
         isOpen
-        ref={props.componentRef}
         className={classNames(styles.modalContent, props.className, {
             [styles.fullScreen]: props.fullScreen
         })}
@@ -25,12 +24,10 @@ 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)}>
@@ -101,16 +98,6 @@ 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,6 +9,7 @@ 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',
@@ -45,13 +46,9 @@ 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 componentRef={props.customRef}>
+            <Box>
             </Box>
             <Box className={styles.buttonRow}>
                 <button
@@ -75,10 +72,6 @@ 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}>
@@ -239,25 +232,11 @@ 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,
-    customRef: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
-    ]),
+    closeTitle: PropTypes.string
 };
 
 export default PromptComponent;
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
@@ -21,7 +21,6 @@ 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';
@@ -77,7 +76,6 @@ const addFunctionListener = (object, property, callback) => {
         return result;
     };
 };
-const isObject = (value) => value && typeof value === 'object' && !Array.isArray(value);
 
 const DroppableBlocks = DropAreaHOC([
     DragConstants.BACKPACK_CODE
@@ -145,12 +143,10 @@ class Blocks extends React.Component {
         this.ScratchBlocks.recordSoundCallback = this.handleOpenSoundRecorder;
 
         this.state = {
-            prompt: null,
-            customPrompts: [],
+            prompt: null
         };
         this.onTargetsUpdate = debounce(this.onTargetsUpdate, 100);
         this.toolboxUpdateQueue = [];
-        this.customModalRefs = new Map();
     }
     componentDidMount () {
         this.props.vm.setCompilerOptions({
@@ -240,8 +236,6 @@ 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 ||
@@ -617,49 +611,46 @@ class Blocks extends React.Component {
         p.prompt.showCloudOption = (optVarType === this.ScratchBlocks.SCALAR_VARIABLE_TYPE) && this.props.canUseCloud;
         this.setState(p);
     }
-    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)");
-            }
+    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);
+        };
 
-            // 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
-                })
-            });
-        });
+        /* 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`);
+        }
     }
     handleConnectionModalStart (extensionId) {
         this.props.onOpenConnectionModal(extensionId);
@@ -676,28 +667,20 @@ 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, customPrompt) {
-        if (customPrompt) {
-            customPrompt.enterInfo.callback();
-            return this.setState({
-                customPrompts: this.state.customPrompts.filter(prompt => prompt !== customPrompt)
-            });
+    handlePromptCallback (input, variableOptions) {
+        if (this.state.prompt.isCustom) {
+            this.state.prompt.enterInfo.callback();
+            this.setState({prompt: null});
+            return;
         }
-
         this.state.prompt.callback(
             input,
             this.props.vm.runtime.getAllVarNamesOfType(this.state.prompt.varType),
             variableOptions);
         this.handlePromptClose();
     }
-    handlePromptClose (customPrompt) {
-        if (customPrompt) {
-            customPrompt.closeInfo.callback();
-            return this.setState({
-                customPrompts: this.state.customPrompts.filter(prompt => prompt !== customPrompt)
-            });
-        }
-
+    handlePromptClose () {
+        if (this.state.prompt.isCustom) this.state.prompt.closeInfo.callback();
         this.setState({prompt: null});
     }
     handleCustomProceduresClose (data) {
@@ -753,7 +736,17 @@ class Blocks extends React.Component {
                     onDrop={this.handleDrop}
                     {...props}
                 />
-                {this.state.prompt ? (
+                {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}
+                    />
+                ) : (
                     <Prompt
                         defaultValue={this.state.prompt.defaultValue}
                         isStage={vm.runtime.getEditingTarget().isStage}
@@ -767,20 +760,6 @@ 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,19 +48,9 @@ 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,17 +62,12 @@ 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 (
@@ -95,10 +90,6 @@ 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}
             />
         );
     }
@@ -115,25 +106,11 @@ 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,
-    customRef: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) })
-    ]),
+    closeTitle: PropTypes.string
 };
 
 export default Prompt;
diff --git a/src/lib/uid.js b/src/lib/uid.js
