ApfelTeeSaft/LiveSplitOne
1
0
Fork 0
mirror of https://github.com/ApfelTeeSaft/LiveSplitOne.git synced 2026-09-02 11:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extract shared logic for auto refreshing

Browse Source
This commit is contained in:
wooferzfg
2020-02-23 12:32:27 -06:00
parent 7edcc735ee
commit 3f31b50ca9
4 changed files with 83 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/AutoRefreshLayout.tsx
+13 -21
View File
@@ -1,5 +1,6 @@
import * as React from "react";
import { LayoutStateJson } from "../livesplit-core";
import AutoRefresh from "../util/AutoRefresh";
import Layout from "./Layout";
export interface Props {
@@ -14,8 +15,6 @@ export interface State {
}
export default class AutoRefreshLayout extends React.Component<Props, State> {
private reqId: any;
constructor(props: Props) {
super(props);
@@ -24,29 +23,22 @@ export default class AutoRefreshLayout extends React.Component<Props, State> {
};
}
public componentWillMount() {
let tick = () => {
this.setState({
layoutState: this.props.getState(),
});
this.reqId = requestAnimationFrame(tick)
}
this.reqId = requestAnimationFrame(tick)
}
public componentWillUnmount() {
cancelAnimationFrame(this.reqId);
public refreshLayout() {
this.setState({
layoutState: this.props.getState(),
});
}
public render() {
return (
<Layout
state={this.state.layoutState}
allowResize={this.props.allowResize}
width={this.props.width}
onResize={this.props.onResize}
/>
<AutoRefresh update={() => this.refreshLayout()} >
<Layout
state={this.state.layoutState}
allowResize={this.props.allowResize}
width={this.props.width}
onResize={this.props.onResize}
/>
</AutoRefresh>
);
}
}
src/layout/DragAutoRefreshLayout.tsx
+12 -16
View File
@@ -1,5 +1,6 @@
import * as React from "react";
import { LayoutStateJson } from "../livesplit-core";
import AutoRefresh from "../util/AutoRefresh";
import { colorToCss, gradientToCss } from "../util/ColorUtil";
import { Option } from "../util/OptionUtil";
import Component from "./Component";
@@ -21,8 +22,6 @@ export interface State {
}
export default class AutoRefreshLayout extends React.Component<Props, State> {
private reqId: any;
constructor(props: Props) {
super(props);
@@ -33,26 +32,17 @@ export default class AutoRefreshLayout extends React.Component<Props, State> {
};
}
public componentWillMount() {
let tick = () => {
this.setState({
layoutState: this.props.getState(),
});
this.reqId = requestAnimationFrame(tick)
}
this.reqId = requestAnimationFrame(tick)
}
public componentWillUnmount() {
cancelAnimationFrame(this.reqId);
public refreshLayout() {
this.setState({
layoutState: this.props.getState(),
});
}
public render() {
const layoutState = this.state.layoutState;
const counts = new Map<string, number>();
return (
const dragLayout = (
<div
className="layout"
style={{
@@ -128,6 +118,12 @@ export default class AutoRefreshLayout extends React.Component<Props, State> {
}
</div>
);
return (
<AutoRefresh update={() => this.refreshLayout()}>
{dragLayout}
</AutoRefresh>
);
}
}
src/ui/SideBarContent.tsx
+20 -21
View File
@@ -1,5 +1,6 @@
import * as React from "react";
import { SharedTimerRef, TimingMethod } from "../livesplit-core";
import AutoRefresh from "../util/AutoRefresh";
import { Option } from "../util/OptionUtil";
import { MenuKind } from "./LiveSplit";
@@ -47,8 +48,6 @@ export interface State {
}
export class SideBarContent extends React.Component<Props, State> {
private reqId: any;
constructor(props: Props) {
super(props);
@@ -58,23 +57,12 @@ export class SideBarContent extends React.Component<Props, State> {
};
}
public componentWillMount() {
let tick = () => {
this.update();
this.reqId = requestAnimationFrame(tick)
}
this.reqId = requestAnimationFrame(tick)
}
public componentWillUnmount() {
cancelAnimationFrame(this.reqId);
}
public render() {
let sidebarContent;
switch (this.props.menu) {
case MenuKind.Splits: {
return (
sidebarContent = (
<div className="sidebar-buttons">
<h2>Splits</h2>
<hr />
@@ -105,9 +93,10 @@ export class SideBarContent extends React.Component<Props, State> {
</button>
</div>
);
break;
}
case MenuKind.RunEditor: {
return (
sidebarContent = (
<div className="sidebar-buttons">
<h2>Splits Editor</h2>
<hr />
@@ -127,9 +116,10 @@ export class SideBarContent extends React.Component<Props, State> {
</div>
</div>
);
break;
}
case MenuKind.Layout: {
return (
sidebarContent = (
<div className="sidebar-buttons">
<h2>Layout</h2>
<hr />
@@ -154,9 +144,10 @@ export class SideBarContent extends React.Component<Props, State> {
</button>
</div>
);
break;
}
case MenuKind.LayoutEditor: {
return (
sidebarContent = (
<div className="sidebar-buttons">
<h2>Layout Editor</h2>
<hr />
@@ -176,9 +167,10 @@ export class SideBarContent extends React.Component<Props, State> {
</div>
</div>
);
break;
}
case MenuKind.SettingsEditor: {
return (
sidebarContent = (
<div className="sidebar-buttons">
<h2>Settings</h2>
<hr />
@@ -198,9 +190,10 @@ export class SideBarContent extends React.Component<Props, State> {
</div>
</div>
);
break;
}
case MenuKind.Timer: {
return (
sidebarContent = (
<div className="sidebar-buttons">
<div className="livesplit-title">
<span className="livesplit-icon">
@@ -285,8 +278,14 @@ export class SideBarContent extends React.Component<Props, State> {
</button>
</div >
);
break;
}
}
return (
<AutoRefresh update={() => this.update()}>
{sidebarContent}
</AutoRefresh>
);
}
private update() {
src/util/AutoRefresh.tsx
+38
View File
@@ -0,0 +1,38 @@
import * as React from "react";
export interface Props {
update(): void,
}
export default class AutoRefresh extends React.Component<Props> {
private reqId: number | null;
constructor(props: Props) {
super(props);
this.reqId = null;
}
public componentWillMount() {
this.requestFrame();
}
public componentWillUnmount() {
if (this.reqId) {
cancelAnimationFrame(this.reqId);
}
}
public render() {
return this.props.children;
}
private requestFrame() {
this.reqId = requestAnimationFrame(() => this.tick());
}
private tick() {
this.props.update();
this.requestFrame();
}
}