react-console-emulator icon indicating copy to clipboard operation
react-console-emulator copied to clipboard

Support for confirmation lines?

Open jhtgiles opened this issue 4 years ago • 2 comments

I've looked through the docs and so far as I can tell there isn't something like:

terminal.pushToStdoutWithResponse('Would you like to play a game? [Y/N]: ').

Is this something that's available that I've just missed or would this need to be a code change to accomodate?

jhtgiles avatar Sep 14 '20 12:09 jhtgiles

No, currently there's no support for something like readline.question() from Node. I'll consider implementing something like this in the future though, if it's feasible to do so.

linuswillner avatar Sep 14 '20 12:09 linuswillner

I was about to open the similar feature request, but I found a workaround. The idea is to have terminal commands as the part of the parent component's state, and override it as necessary.

Here is an example:

class TerminalWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.commands = {
            prompt: {
                fn: () => {
                    this.setState({
                        prompt: {
                            welcomeMessage: 'Prompt Y/n',
                            commands: {
                                'Y': {
                                    fn: () => {
                                        // ...
                                        this.setState({prompt: false})
                                        return "Y"
                                    }
                                },
                                'n': {
                                    fn: () => {
                                        // ...
                                        this.setState({prompt: false})
                                        return "n"
                                    }
                                }
                            }
                        }
                    })
                    return "Prompt Y/n"
                }
            }
        }
    }

    render() {
        return (
            <Terminal
                commands={this.state.prompt ? this.state.prompt.commands : this.commands}
                welcomeMessage={this.state.prompt ? this.state.prompt.welcomeMessage : 'Default welcome message'}
            />
        )
    }
}

By carefully managing the parent component's state, interactions of arbitrary complexity can be programmed. Hope this helps.

Aivean avatar Jun 25 '21 01:06 Aivean