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,
|
2022-10-09 07:25:31 +02:00
|
|
|
* all/portfolio mode, etc)
|
2019-04-23 10:23:08 +02:00
|
|
|
*/
|
|
|
|
import * as React from "react";
|
2021-10-01 00:56:09 +02:00
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import TextField from "@mui/material/TextField";
|
2019-04-23 10:23:08 +02:00
|
|
|
|
|
|
|
export enum TickerDisplayMode {
|
2021-09-05 01:09:30 +02:00
|
|
|
AllStocks,
|
|
|
|
Portfolio,
|
2019-04-23 10:23:08 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
type IProps = {
|
2021-09-05 01:09:30 +02:00
|
|
|
changeDisplayMode: () => void;
|
|
|
|
changeWatchlistFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
|
|
tickerDisplayMode: TickerDisplayMode;
|
|
|
|
};
|
2019-04-23 10:23:08 +02:00
|
|
|
|
2021-10-01 00:56:09 +02:00
|
|
|
function DisplayModeButton(props: IProps): React.ReactElement {
|
|
|
|
let txt = "";
|
|
|
|
let tooltip = "";
|
|
|
|
if (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";
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
2019-04-23 10:23:08 +02:00
|
|
|
|
2021-10-01 00:56:09 +02:00
|
|
|
return (
|
|
|
|
<Tooltip title={<Typography>{tooltip}</Typography>}>
|
|
|
|
<Button onClick={props.changeDisplayMode}>{txt}</Button>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
|
2021-10-01 00:56:09 +02:00
|
|
|
export function StockTickersConfig(props: IProps): React.ReactElement {
|
|
|
|
return (
|
2021-10-01 19:08:37 +02:00
|
|
|
<>
|
2021-10-01 00:56:09 +02:00
|
|
|
<DisplayModeButton {...props} />
|
|
|
|
<br />
|
|
|
|
<TextField
|
|
|
|
sx={{ width: "100%" }}
|
|
|
|
onChange={props.changeWatchlistFilter}
|
|
|
|
placeholder="Filter Stocks by symbol (comma-separated list)"
|
|
|
|
type="text"
|
|
|
|
/>
|
2021-10-01 19:08:37 +02:00
|
|
|
</>
|
2021-10-01 00:56:09 +02:00
|
|
|
);
|
2019-04-23 10:23:08 +02:00
|
|
|
}
|