♻️ remove getConsoleFeedStyle from Console
This commit is contained in:
ghalestrilo
parent
d3f7d3de39
commit
9447bb5754
1 changed files with 65 additions and 70 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
|
|
@ -28,61 +29,64 @@ import DownArrowIcon from '../../../images/down-arrow.svg';
|
|||
import * as IDEActions from '../../IDE/actions/ide';
|
||||
import * as ConsoleActions from '../../IDE/actions/console';
|
||||
|
||||
const useDidUpdate = (callback, deps) => {
|
||||
const hasMount = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasMount.current) {
|
||||
callback();
|
||||
} else {
|
||||
hasMount.current = true;
|
||||
}
|
||||
}, deps);
|
||||
};
|
||||
|
||||
const getConsoleFeedStyle = (theme, times, fontSize) => {
|
||||
const style = {};
|
||||
const CONSOLE_FEED_LIGHT_ICONS = {
|
||||
LOG_WARN_ICON: `url(${warnLightUrl})`,
|
||||
LOG_ERROR_ICON: `url(${errorLightUrl})`,
|
||||
LOG_DEBUG_ICON: `url(${debugLightUrl})`,
|
||||
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})`,
|
||||
LOG_INFO_ICON: `url(${infoDarkUrl})`
|
||||
};
|
||||
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})`
|
||||
};
|
||||
const CONSOLE_FEED_SIZES = {
|
||||
TREENODE_LINE_HEIGHT: 1.2,
|
||||
BASE_FONT_SIZE: fontSize,
|
||||
ARROW_FONT_SIZE: fontSize,
|
||||
LOG_ICON_WIDTH: fontSize,
|
||||
LOG_ICON_HEIGHT: 1.45 * fontSize,
|
||||
};
|
||||
|
||||
if (times > 1) {
|
||||
Object.assign(style, CONSOLE_FEED_WITHOUT_ICONS);
|
||||
}
|
||||
switch (theme) {
|
||||
case 'light':
|
||||
return Object.assign(CONSOLE_FEED_LIGHT_STYLES, CONSOLE_FEED_LIGHT_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
case 'dark':
|
||||
return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
case 'contrast':
|
||||
return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
if (this.props.fontSize !== prevProps.fontSize) {
|
||||
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})`,
|
||||
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})`,
|
||||
LOG_INFO_ICON: `url(${infoDarkUrl})`
|
||||
};
|
||||
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})`
|
||||
};
|
||||
const CONSOLE_FEED_SIZES = {
|
||||
TREENODE_LINE_HEIGHT: 1.2,
|
||||
BASE_FONT_SIZE: this.props.fontSize,
|
||||
ARROW_FONT_SIZE: this.props.fontSize,
|
||||
LOG_ICON_WIDTH: this.props.fontSize,
|
||||
LOG_ICON_HEIGHT: 1.45 * this.props.fontSize,
|
||||
};
|
||||
|
||||
if (times > 1) {
|
||||
Object.assign(style, CONSOLE_FEED_WITHOUT_ICONS);
|
||||
}
|
||||
switch (theme) {
|
||||
case 'light':
|
||||
return Object.assign(CONSOLE_FEED_LIGHT_STYLES, CONSOLE_FEED_LIGHT_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
case 'dark':
|
||||
return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
case 'contrast':
|
||||
return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -91,6 +95,8 @@ class ConsoleComponent extends React.Component {
|
|||
'preview-console--collapsed': !this.props.isExpanded
|
||||
});
|
||||
|
||||
console.log(this.props.isExpanded);
|
||||
|
||||
return (
|
||||
<section className={consoleClass} >
|
||||
<header className="preview-console__header">
|
||||
|
|
@ -126,7 +132,7 @@ class ConsoleComponent extends React.Component {
|
|||
</div>
|
||||
}
|
||||
<ConsoleFeed
|
||||
styles={this.getConsoleFeedStyle(theme, times)}
|
||||
styles={getConsoleFeedStyle(theme, times, this.props.fontSize)}
|
||||
logs={[consoleEvent]}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -147,7 +153,6 @@ ConsoleComponent.propTypes = {
|
|||
collapseConsole: PropTypes.func.isRequired,
|
||||
expandConsole: PropTypes.func.isRequired,
|
||||
clearConsole: PropTypes.func.isRequired,
|
||||
dispatchConsoleEvent: PropTypes.func.isRequired,
|
||||
theme: PropTypes.string.isRequired,
|
||||
fontSize: PropTypes.number.isRequired
|
||||
};
|
||||
|
|
@ -165,6 +170,11 @@ const Console = () => {
|
|||
collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent
|
||||
} = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
|
||||
|
||||
useDidUpdate(() => {
|
||||
clearConsole();
|
||||
dispatchConsoleEvent(consoleEvents);
|
||||
}, [theme, fontSize]);
|
||||
|
||||
return (
|
||||
<ConsoleComponent
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue