2019-04-23 10:23:08 +02:00
|
|
|
/**
|
|
|
|
* React component for the tickers configuration section of the Stock Market UI.
|
|
|
|
* This config lets you change the way stock tickers are displayed (watchlist,
|
|
|
|
* all/portoflio mode, etc)
|
|
|
|
*/
|
|
|
|
import * as React from "react";
|
|
|
|
|
|
|
|
import { StdButton } from "../../ui/React/StdButton";
|
|
|
|
|
|
|
|
export enum TickerDisplayMode {
|
|
|
|
AllStocks,
|
|
|
|
Portfolio,
|
|
|
|
}
|
|
|
|
|
|
|
|
type IProps = {
|
|
|
|
changeDisplayMode: () => void;
|
|
|
|
changeWatchlistFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
2019-04-30 05:54:20 +02:00
|
|
|
collapseAllTickers: () => void;
|
|
|
|
expandAllTickers: () => void;
|
2019-04-23 10:23:08 +02:00
|
|
|
tickerDisplayMode: TickerDisplayMode;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class StockTickersConfig extends React.Component<IProps, any> {
|
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
2021-05-01 09:17:31 +02:00
|
|
|
renderDisplayModeButton(): React.ReactNode {
|
2021-04-30 05:52:56 +02:00
|
|
|
let txt = "";
|
|
|
|
let tooltip = "";
|
2019-04-23 10:23:08 +02:00
|
|
|
if (this.props.tickerDisplayMode === TickerDisplayMode.Portfolio) {
|
|
|
|
txt = "Switch to 'All Stocks' Mode";
|
|
|
|
tooltip = "Displays all stocks on the WSE";
|
|
|
|
} else {
|
|
|
|
txt = "Switch to 'Portfolio' Mode";
|
|
|
|
tooltip = "Displays only the stocks for which you have shares or orders";
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StdButton
|
|
|
|
onClick={this.props.changeDisplayMode}
|
|
|
|
text={txt}
|
|
|
|
tooltip={tooltip}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-01 09:17:31 +02:00
|
|
|
render(): React.ReactNode {
|
2019-04-23 10:23:08 +02:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{this.renderDisplayModeButton()}
|
2019-04-30 05:54:20 +02:00
|
|
|
<StdButton
|
|
|
|
onClick={this.props.expandAllTickers}
|
|
|
|
text="Expand Tickers"
|
|
|
|
/>
|
|
|
|
<StdButton
|
|
|
|
onClick={this.props.collapseAllTickers}
|
|
|
|
text="Collapse Tickers"
|
|
|
|
/>
|
2019-04-23 10:23:08 +02:00
|
|
|
|
|
|
|
<input
|
|
|
|
className="text-input"
|
|
|
|
id="stock-market-watchlist-filter"
|
|
|
|
onChange={this.props.changeWatchlistFilter}
|
|
|
|
placeholder="Filter Stocks by symbol (comma-separated list)"
|
|
|
|
type="text"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|