-export const ProcessLogCodeSnippet = withStyles(styles)(connect()(
- (props: ProcessLogCodeSnippetProps & WithStyles<CssRules> & DispatchProp) =>
- <MuiThemeProvider theme={theme}>
- <CodeSnippet lines={props.lines} fontSize={props.fontSize}
- customRenderer={renderLinks(props.fontSize, props.dispatch)}
- className={props.wordWrap ? props.classes.wordWrap : undefined}
- containerClassName={props.classes.codeSnippetContainer} />
- </MuiThemeProvider>));
\ No newline at end of file
+const mapStateToProps = (state: RootState): ProcessLogCodeSnippetAuthProps => ({
+ auth: state.auth,
+});
+
+export const ProcessLogCodeSnippet = withStyles(styles)(connect(mapStateToProps)(
+ ({classes, lines, fontSize, auth, dispatch, wordWrap}: ProcessLogCodeSnippetProps & WithStyles<CssRules> & ProcessLogCodeSnippetAuthProps & DispatchProp) => {
+ const [followMode, setFollowMode] = useState<boolean>(true);
+ const scrollRef = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ if (followMode && scrollRef.current && lines.length > 0) {
+ // Scroll to bottom
+ scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+ }
+ }, [followMode, lines, scrollRef]);
+
+ return <MuiThemeProvider theme={theme}>
+ <div ref={scrollRef} className={classes.root}
+ onScroll={(e) => {
+ const elem = e.target as HTMLDivElement;
+ if (elem.scrollTop + (elem.clientHeight*1.1) >= elem.scrollHeight) {
+ setFollowMode(true);
+ } else {
+ setFollowMode(false);
+ }
+ }}>
+ { lines.map((line: string, index: number) =>
+ <Typography key={index} component="pre"
+ className={classNames(classes.logText, wordWrap ? classes.wordWrap : undefined)}>
+ {renderLinks(fontSize, auth, dispatch)(line)}
+ </Typography>
+ ) }
+ </div>
+ </MuiThemeProvider>
+ }));
\ No newline at end of file