p5.js-web-editor/client/modules/IDE/components/Console.jsx

197 lines
7.2 KiB
React
Raw Normal View History

import PropTypes from 'prop-types';
import React from 'react';
2020-07-15 23:17:01 +02:00
import { useSelector, useDispatch, connect } from 'react-redux';
import classNames from 'classnames';
import { Console as ConsoleFeed } from 'console-feed';
import {
CONSOLE_FEED_WITHOUT_ICONS, CONSOLE_FEED_LIGHT_STYLES,
CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_CONTRAST_STYLES
} from '../../../styles/components/_console-feed.scss';
2020-04-30 00:34:37 +02:00
import warnLightUrl from '../../../images/console-warn-light.svg?byUrl';
import warnDarkUrl from '../../../images/console-warn-dark.svg?byUrl';
import warnContrastUrl from '../../../images/console-warn-contrast.svg?byUrl';
import errorLightUrl from '../../../images/console-error-light.svg?byUrl';
import errorDarkUrl from '../../../images/console-error-dark.svg?byUrl';
import errorContrastUrl from '../../../images/console-error-contrast.svg?byUrl';
import debugLightUrl from '../../../images/console-debug-light.svg?byUrl';
import debugDarkUrl from '../../../images/console-debug-dark.svg?byUrl';
import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl';
import infoLightUrl from '../../../images/console-info-light.svg?byUrl';
import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl';
import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
2020-04-30 00:34:37 +02:00
import UpArrowIcon from '../../../images/up-arrow.svg';
import DownArrowIcon from '../../../images/down-arrow.svg';
2020-07-15 23:17:01 +02:00
import * as IDEActions from '../../IDE/actions/ide';
import * as ConsoleActions from '../../IDE/actions/console';
class ConsoleComponent extends React.Component {
componentDidUpdate(prevProps) {
this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
if (this.props.theme !== prevProps.theme) {
this.props.clearConsole();
this.props.dispatchConsoleEvent(this.props.consoleEvents);
}
2018-09-12 07:00:29 +02:00
2018-09-13 04:00:19 +02:00
if (this.props.fontSize !== prevProps.fontSize) {
2018-09-12 07:00:29 +02:00
this.props.clearConsole();
this.props.dispatchConsoleEvent(this.props.consoleEvents);
}
}
getConsoleFeedStyle(theme, times) {
const style = {};
const CONSOLE_FEED_LIGHT_ICONS = {
LOG_WARN_ICON: `url(${warnLightUrl})`,
LOG_ERROR_ICON: `url(${errorLightUrl})`,
LOG_DEBUG_ICON: `url(${debugLightUrl})`,
2018-09-13 20:14:58 +02:00
LOG_INFO_ICON: `url(${infoLightUrl})`
};
const CONSOLE_FEED_DARK_ICONS = {
LOG_WARN_ICON: `url(${warnDarkUrl})`,
LOG_ERROR_ICON: `url(${errorDarkUrl})`,
LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
2018-09-13 20:14:58 +02:00
LOG_INFO_ICON: `url(${infoDarkUrl})`
2018-09-13 17:50:07 +02:00
};
2020-04-27 23:47:28 +02:00
const CONSOLE_FEED_CONTRAST_ICONS = {
LOG_WARN_ICON: `url(${warnContrastUrl})`,
LOG_ERROR_ICON: `url(${errorContrastUrl})`,
LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
LOG_INFO_ICON: `url(${infoContrastUrl})`
};
2018-09-13 20:14:58 +02:00
const CONSOLE_FEED_SIZES = {
2018-09-23 08:56:39 +02:00
TREENODE_LINE_HEIGHT: 1.2,
2018-09-14 18:44:41 +02:00
BASE_FONT_SIZE: this.props.fontSize,
2018-09-13 20:14:58 +02:00
ARROW_FONT_SIZE: this.props.fontSize,
2018-09-14 18:44:41 +02:00
LOG_ICON_WIDTH: this.props.fontSize,
2018-09-23 08:56:39 +02:00
LOG_ICON_HEIGHT: 1.45 * this.props.fontSize,
};
2018-09-13 17:50:07 +02:00
if (times > 1) {
Object.assign(style, CONSOLE_FEED_WITHOUT_ICONS);
}
switch (theme) {
case 'light':
2018-09-13 20:14:58 +02:00
return Object.assign(CONSOLE_FEED_LIGHT_STYLES, CONSOLE_FEED_LIGHT_ICONS, CONSOLE_FEED_SIZES, style);
case 'dark':
2018-09-13 20:14:58 +02:00
return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
case 'contrast':
2020-04-27 23:47:28 +02:00
return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
default:
return '';
}
}
render() {
const consoleClass = classNames({
'preview-console': true,
'preview-console--collapsed': !this.props.isExpanded
});
return (
<section className={consoleClass} >
<header className="preview-console__header">
<h2 className="preview-console__header-title">Console</h2>
<div className="preview-console__header-buttons">
<button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
Clear
</button>
2017-06-06 04:33:32 +02:00
<button
className="preview-console__collapse"
onClick={this.props.collapseConsole}
aria-label="Close console"
2017-06-06 04:33:32 +02:00
>
<DownArrowIcon focusable="false" aria-hidden="true" />
</button>
<button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="Open console" >
<UpArrowIcon focusable="false" aria-hidden="true" />
</button>
</div>
</header>
<div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
{this.props.consoleEvents.map((consoleEvent) => {
const { method, times } = consoleEvent;
const { theme } = this.props;
return (
<div key={consoleEvent.id} className={`preview-console__message preview-console__message--${method}`}>
{ times > 1 &&
<div
className="preview-console__logged-times"
style={{ fontSize: this.props.fontSize, borderRadius: this.props.fontSize / 2 }}
>
{times}
</div>
}
<ConsoleFeed
styles={this.getConsoleFeedStyle(theme, times)}
logs={[consoleEvent]}
/>
</div>
);
})}
2016-07-21 06:05:47 +02:00
</div>
</section>
);
}
}
2020-07-15 23:17:01 +02:00
ConsoleComponent.propTypes = {
consoleEvents: PropTypes.arrayOf(PropTypes.shape({
method: PropTypes.string.isRequired,
args: PropTypes.arrayOf(PropTypes.string)
})),
isExpanded: PropTypes.bool.isRequired,
collapseConsole: PropTypes.func.isRequired,
2016-10-06 19:01:48 +02:00
expandConsole: PropTypes.func.isRequired,
clearConsole: PropTypes.func.isRequired,
dispatchConsoleEvent: PropTypes.func.isRequired,
2018-09-12 07:24:05 +02:00
theme: PropTypes.string.isRequired,
2018-09-13 04:12:50 +02:00
fontSize: PropTypes.number.isRequired
};
2020-07-15 23:17:01 +02:00
ConsoleComponent.defaultProps = {
consoleEvents: []
};
// TODO: Use Hooks implementation. Requires react-redux 7.1.0
/*
const Console = () => {
const consoleEvents = useSelector(state => state.console);
const { consoleIsExpanded } = useSelector(state => state.ide);
const { theme, fontSize } = useSelector(state => state.preferences);
const dispatch = useDispatch();
return (
<ConsoleComponent
consoleEvents={consoleEvents}
isExpanded={consoleIsExpanded}
theme={theme}
fontSize={fontSize}
collapseConsole={() => dispatch({})}
expandConsole={() => dispatch({})}
clearConsole={() => dispatch({})}
dispatchConsoleEvent={() => dispatch({})}
/>
);
};
*/
2020-07-15 23:17:01 +02:00
const Console = connect(
state => ({
consoleEvents: state.console,
isExpanded: state.ide.consoleIsExpanded,
theme: state.preferences.theme,
fontSize: state.preferences.fontSize
}),
dispatch => ({
collapseConsole: () => dispatch(IDEActions.collapseConsole()),
expandConsole: () => dispatch(IDEActions.expandConsole()),
clearConsole: () => dispatch(ConsoleActions.clearConsole()),
dispatchConsoleEvent: msgs => dispatch(ConsoleActions.dispatchConsoleEvent(msgs)),
})
)(ConsoleComponent);
export default Console;