48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
|
|
import withWidth from '@material-ui/core/withWidth';
|
|
|
|
import { Card } from '@material-ui/core';
|
|
import * as Blockly from 'blockly'
|
|
import CardContent from '@material-ui/core/CardContent';
|
|
|
|
import Typography from '@material-ui/core/Typography';
|
|
import ReactMarkdown from 'react-markdown';
|
|
|
|
class TooltipViewer extends Component {
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
<Card className="tooltipViewer" style={{ height: '100%', margin: '1vH 0 0 0', maxHeight: '19vH', overflow: 'auto' }} ref={this.myDiv}>
|
|
<CardContent>
|
|
<Typography variant="h5" component="h2">
|
|
{Blockly.Msg.tooltip_viewer}
|
|
</Typography>
|
|
<Typography variant="body2" component="p">
|
|
<ReactMarkdown linkTarget="_blank">{this.props.tooltip}</ReactMarkdown>
|
|
|
|
{this.props.helpurl !== '' ? <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown> : null}
|
|
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
}
|
|
|
|
TooltipViewer.propTypes = {
|
|
tooltip: PropTypes.string.isRequired,
|
|
helpurl: PropTypes.string.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
tooltip: state.workspace.code.tooltip,
|
|
helpurl: state.workspace.code.helpurl
|
|
});
|
|
|
|
export default connect(mapStateToProps, null)(withWidth()(TooltipViewer));
|