New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preselect stock #7

Open
wants to merge 3 commits into
base: master
from
Open
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+34 −16
Diff settings

Always

Just for now

Prev

Preload on mouse enter

  • Loading branch information...
pomber committed Nov 20, 2018
commit 0e421ba3a3fc42f99ce090e250ef68c59bc866a6
Copy path View file
@@ -5,31 +5,44 @@ const StockChart = React.lazy(() =>
import(/* webpackChunkName: 'StockChart' */ "./StockChart")
);

const neverResolve = new Promise(() => {});
function Suspender({ suspend }) {
if (suspend) {
throw neverResolve;
} else {
return null;
}
}
function Preload({ show, children }) {
return (
<React.Suspense fallback={show ? undefined : null}>
{children}
<Suspender suspend={!show} />
</React.Suspense>
);
}

class App extends React.Component {
state = {
selectedStock: null
selectedStock: null,
preloadStock: this.props.stocks[0]
};
render() {
const { stocks } = this.props;
const { selectedStock } = this.state;
const { selectedStock, preloadStock } = this.state;
return (
<React.Suspense fallback={<div>Loading...</div>}>
<StockTable
stocks={stocks}
onPreSelect={preloadStock => this.setState({ preloadStock })}
onSelect={selectedStock => this.setState({ selectedStock })}
/>
{selectedStock && (
<Preload show={selectedStock !== null}>
<StockChart
stock={selectedStock}
onClose={() => this.setState({ selectedStock: false })}
stock={selectedStock || preloadStock}
onClose={() => this.setState({ selectedStock: null })}
/>
)}
{/* Preload <StockChart/> */}
<React.Suspense fallback={null}>
<div hidden={true}>
<StockChart stock={stocks[0]} />
</div>
</React.Suspense>
</Preload>
</React.Suspense>
);
}
Copy path View file
@@ -1,21 +1,26 @@
import React from "react";

export default function StockTable({ stocks, onSelect }) {
export default function StockTable({ stocks, onSelect, onPreSelect }) {
return (
<table>
<caption>Stocks</caption>
<tbody>
{stocks.map(stock => (
<Row key={stock.name} stock={stock} onClick={() => onSelect(stock)} />
<Row
key={stock.name}
stock={stock}
onClick={() => onSelect(stock)}
onMouseEnter={() => onPreSelect(stock)}
/>
))}
</tbody>
</table>
);
}

function Row({ stock, onClick }) {
function Row({ stock, onClick, onMouseEnter }) {
return (
<tr key={stock.name} onClick={onClick}>
<tr key={stock.name} onClick={onClick} onMouseEnter={onMouseEnter}>
<td>{stock.name}</td>
<td>{stock.today}</td>
<td style={{ color: stock.change < 0 ? "darkred" : "darkgreen" }}>
ProTip! Use n and p to navigate between commits in a pull request.