r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

♻️ remove getConsoleFeedStyle from Console

Browse source
This commit is contained in:
ghalestrilo 2020-07-17 16:52:45 -03:00
parent d3f7d3de39
commit 9447bb5754
1 changed files with 65 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
client/modules/IDE/components/Console.jsx
View file

@ -1,5 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React, { useEffect, useRef } from 'react';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
@ -28,21 +29,19 @@ import DownArrowIcon from '../../../images/down-arrow.svg';
import * as IDEActions from '../../IDE/actions/ide'; import * as IDEActions from '../../IDE/actions/ide';
import * as ConsoleActions from '../../IDE/actions/console'; import * as ConsoleActions from '../../IDE/actions/console';
class ConsoleComponent extends React.Component { const useDidUpdate = (callback, deps) => {
componentDidUpdate(prevProps) { const hasMount = useRef(false);
this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
if (this.props.theme !== prevProps.theme) {
this.props.clearConsole();
this.props.dispatchConsoleEvent(this.props.consoleEvents);
}
if (this.props.fontSize !== prevProps.fontSize) { useEffect(() => {
this.props.clearConsole(); if (hasMount.current) {
this.props.dispatchConsoleEvent(this.props.consoleEvents); callback();
} } else {
hasMount.current = true;
} }
}, deps);
};
getConsoleFeedStyle(theme, times) { const getConsoleFeedStyle = (theme, times, fontSize) => {
const style = {}; const style = {};
const CONSOLE_FEED_LIGHT_ICONS = { const CONSOLE_FEED_LIGHT_ICONS = {
LOG_WARN_ICON: `url(${warnLightUrl})`, LOG_WARN_ICON: `url(${warnLightUrl})`,
@ -64,10 +63,10 @@ class ConsoleComponent extends React.Component {
}; };
const CONSOLE_FEED_SIZES = { const CONSOLE_FEED_SIZES = {
TREENODE_LINE_HEIGHT: 1.2, TREENODE_LINE_HEIGHT: 1.2,
BASE_FONT_SIZE: this.props.fontSize, BASE_FONT_SIZE: fontSize,
ARROW_FONT_SIZE: this.props.fontSize, ARROW_FONT_SIZE: fontSize,
LOG_ICON_WIDTH: this.props.fontSize, LOG_ICON_WIDTH: fontSize,
LOG_ICON_HEIGHT: 1.45 * this.props.fontSize, LOG_ICON_HEIGHT: 1.45 * fontSize,
}; };
if (times > 1) { if (times > 1) {
@ -83,6 +82,11 @@ class ConsoleComponent extends React.Component {
default: default:
return ''; return '';
} }
};
class ConsoleComponent extends React.Component {
componentDidUpdate(prevProps) {
this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
} }
render() { render() {
@ -91,6 +95,8 @@ class ConsoleComponent extends React.Component {
'preview-console--collapsed': !this.props.isExpanded 'preview-console--collapsed': !this.props.isExpanded
}); });
console.log(this.props.isExpanded);
return ( return (
<section className={consoleClass} > <section className={consoleClass} >
<header className="preview-console__header"> <header className="preview-console__header">
@ -126,7 +132,7 @@ class ConsoleComponent extends React.Component {
</div> </div>
} }
<ConsoleFeed <ConsoleFeed
styles={this.getConsoleFeedStyle(theme, times)} styles={getConsoleFeedStyle(theme, times, this.props.fontSize)}
logs={[consoleEvent]} logs={[consoleEvent]}
/> />
</div> </div>
@ -147,7 +153,6 @@ ConsoleComponent.propTypes = {
collapseConsole: PropTypes.func.isRequired, collapseConsole: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired, expandConsole: PropTypes.func.isRequired,
clearConsole: PropTypes.func.isRequired, clearConsole: PropTypes.func.isRequired,
dispatchConsoleEvent: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired, theme: PropTypes.string.isRequired,
fontSize: PropTypes.number.isRequired fontSize: PropTypes.number.isRequired
}; };
@ -165,6 +170,11 @@ const Console = () => {
collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent
} = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch()); } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
useDidUpdate(() => {
clearConsole();
dispatchConsoleEvent(consoleEvents);
}, [theme, fontSize]);
return ( return (
<ConsoleComponent <ConsoleComponent
consoleEvents={consoleEvents} consoleEvents={consoleEvents}
@ -179,19 +189,4 @@ const Console = () => {
); );
}; };
// 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; export default Console;