Blocks---render

render () {
    /* eslint-disable no-unused-vars */
    const {
        anyModalVisible,
        canUseCloud,
        customProceduresVisible,
        extensionLibraryVisible,
        options,
        stageSize,
        vm,
        isRtl,
        isVisible,
        onActivateColorPicker,
        onOpenConnectionModal,
        onOpenSoundRecorder,
        updateToolboxState,
        onActivateCustomProcedures,
        onRequestCloseExtensionLibrary,
        onRequestCloseCustomProcedures,
        toolboxXML,
        ...props
    } = this.props;
    /* eslint-enable no-unused-vars */
    return (
        <React.Fragment>
            <DroppableBlocks
                componentRef={this.setBlocks}
                onDrop={this.handleDrop}
                {...props}
            />
            {this.state.prompt ? (
                <Prompt
                    defaultValue={this.state.prompt.defaultValue}
                    isStage={vm.runtime.getEditingTarget().isStage}
                    label={this.state.prompt.message}
                    showCloudOption={this.state.prompt.showCloudOption}
                    showVariableOptions={this.state.prompt.showVariableOptions}
                    title={this.state.prompt.title}
                    vm={vm}
                    onCancel={this.handlePromptClose}
                    onOk={this.handlePromptCallback}
                />
            ) : null}
            {extensionLibraryVisible ? (
                <ExtensionLibrary
                    vm={vm}
                    onCategorySelected={this.handleCategorySelected}
                    onRequestClose={onRequestCloseExtensionLibrary}
                />
            ) : null}
            {customProceduresVisible ? (
                <CustomProcedures
                    options={{
                        media: options.media
                    }}
                    onRequestClose={this.handleCustomProceduresClose}
                />
            ) : null}
        </React.Fragment>
    );
}