Make em toggle affect existing results

This commit is contained in:
BorysLevytskyi
2023-05-06 20:50:22 +02:00
parent e8e6e4697a
commit 6625e475e1
7 changed files with 25 additions and 25 deletions

View File

@@ -5,26 +5,23 @@ import BitwiseResultViewModel from './BitwiseResultViewModel';
import { Expression, ExpressionToken } from '../expression-interfaces'; import { Expression, ExpressionToken } from '../expression-interfaces';
import { OperatorToken, ScalarToken } from '../expression'; import { OperatorToken, ScalarToken } from '../expression';
type BitwiseOperationExpressionViewProps = { type BitwiseResultViewProps = {
expression: Expression; expression: Expression;
emphasizeBytes: boolean; emphasizeBytes: boolean;
} }
type BitwiseOperationExpressionViewState = { type BitwiseResultViewState = {
} }
export default class BitwiseResultView extends React.Component<BitwiseOperationExpressionViewProps, BitwiseOperationExpressionViewState> { export default class BitwiseResultView extends React.Component<BitwiseResultViewProps, BitwiseResultViewState> {
constructor(props: BitwiseOperationExpressionViewProps) { constructor(props: BitwiseResultViewProps) {
super(props); super(props);
this.state = {}; this.state = {};
} }
render() { render() {
var rows = this.getRows(); var rows = this.getRows();
if(!rows) {
return null;
}
return <table className="expression"> return <table className="expression">
<tbody> <tbody>
{rows} {rows}
@@ -32,7 +29,7 @@ export default class BitwiseResultView extends React.Component<BitwiseOperationE
</table> </table>
} }
getRows() : JSX.Element[] | null { getRows() : JSX.Element[] {
var model = BitwiseResultViewModel.createModel(this.props.expression, this.props.emphasizeBytes); var model = BitwiseResultViewModel.createModel(this.props.expression, this.props.emphasizeBytes);
return model.items.map((itm, i) => return model.items.map((itm, i) =>

View File

@@ -12,7 +12,7 @@ const expressionAppModule = {
canHandle: (input:string) => parser.canParse(input), canHandle: (input:string) => parser.canParse(input),
handle: function(c: CommandInput) { handle: function(c: CommandInput) {
var expr = parser.parse(c.input); var expr = parser.parse(c.input);
appState.addCommandResult(c.input, <BitwiseResultView expression={expr!} emphasizeBytes={appState.emphasizeBytes} />); appState.addCommandResult(c.input, () => <BitwiseResultView expression={expr!} emphasizeBytes={appState.emphasizeBytes} />);
} }
}); });
} }

View File

@@ -36,7 +36,7 @@ function initializeModules() {
// Last command handler reports that input is unknown // Last command handler reports that input is unknown
cmd.command({ cmd.command({
canHandle: () => true, canHandle: () => true,
handle: (c: CommandInput) => appData.appState.addCommandResult(c.input, <UnknownInputResultView input={c.input}/>) handle: (c: CommandInput) => appData.appState.addCommandResult(c.input, () => <UnknownInputResultView input={c.input}/>)
}); });
} }

View File

@@ -25,18 +25,18 @@ const networkingAppModule = {
return; return;
if(result instanceof ParsingError) { if(result instanceof ParsingError) {
appState.addCommandResult(c.input, <ErrorResultView errorMessage={result.errorMessage} />); appState.addCommandResult(c.input, () => <ErrorResultView errorMessage={(result as ParsingError).errorMessage} />);
return; return;
} }
if(result instanceof SubnetCommand) { if(result instanceof SubnetCommand) {
appState.addCommandResult(c.input, <SubnetView subnet={result} />); appState.addCommandResult(c.input, () => <SubnetView subnet={result as SubnetCommand} />);
trackCommand('SubnetCommand', c.options); trackCommand('SubnetCommand', c.options);
return; return;
} }
if(result instanceof VpcCommand) { if(result instanceof VpcCommand) {
appState.addCommandResult(c.input, <VpcView vpc={result} />); appState.addCommandResult(c.input, () => <VpcView vpc={result as VpcCommand} />);
trackCommand('VpcCommand', c.options); trackCommand('VpcCommand', c.options);
return; return;
} }
@@ -56,7 +56,7 @@ const networkingAppModule = {
trackCommand("IpAddressesInput", c.options); trackCommand("IpAddressesInput", c.options);
appState.addCommandResult(c.input, <IpAddressView ipAddresses={ipAddresses} />); appState.addCommandResult(c.input, () => <IpAddressView ipAddresses={ipAddresses} />);
} }
}); });

View File

@@ -14,11 +14,13 @@ export type PersistedAppData = {
export type CommandResultView = { export type CommandResultView = {
key: number, key: number,
input: string, input: string,
view: JSX.Element view: ViewFactory
}; };
export type AppStateChangeHandler = (state: AppState) => void; export type AppStateChangeHandler = (state: AppState) => void;
type ViewFactory = () => JSX.Element;
export default class AppState { export default class AppState {
version: number = APP_VERSION; version: number = APP_VERSION;
@@ -47,7 +49,7 @@ export default class AppState {
this.donationClicked = persistData.donationClicked; this.donationClicked = persistData.donationClicked;
} }
addCommandResult(input : string, view : JSX.Element) { addCommandResult(input : string, view : ViewFactory) {
const key = generateKey(); const key = generateKey();
this.commandResults.unshift({key, input, view}); this.commandResults.unshift({key, input, view});
log.debug(`command result added: ${input}`); log.debug(`command result added: ${input}`);

View File

@@ -28,6 +28,7 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
} }
refresh() { refresh() {
console.log('refresh');
this.setState(this.props.appState); this.setState(this.props.appState);
} }
@@ -39,7 +40,7 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
var results = this.state.commandResults.map((r, i) => var results = this.state.commandResults.map((r, i) =>
<DisplayResultView resultIndex={i} resultKey={r.key} key={r.key} input={r.input} inputHash={hash.encodeHash(r.input)} appState={this.props.appState}> <DisplayResultView resultIndex={i} resultKey={r.key} key={r.key} input={r.input} inputHash={hash.encodeHash(r.input)} appState={this.props.appState}>
{r.view} {r.view()}
</DisplayResultView>); </DisplayResultView>);
return results; return results;
} }

View File

@@ -17,19 +17,19 @@ const shellModule = {
cmd.debugMode = appState.debugMode; cmd.debugMode = appState.debugMode;
appState.onChange(() => cmd.debugMode = appState.debugMode); appState.onChange(() => cmd.debugMode = appState.debugMode);
cmd.command("help", (c: CommandInput) => appState.addCommandResult(c.input, <HelpResultView />)); cmd.command("help", (c: CommandInput) => appState.addCommandResult(c.input, () => <HelpResultView />));
cmd.command("clear", () => appState.clearCommandResults()); cmd.command("clear", () => appState.clearCommandResults());
cmd.command("em", () => appState.toggleEmphasizeBytes()); cmd.command("em", () => appState.toggleEmphasizeBytes());
cmd.command("dark", () => appState.setUiTheme('dark')); cmd.command("dark", () => appState.setUiTheme('dark'));
cmd.command("light", () => appState.setUiTheme('light')); cmd.command("light", () => appState.setUiTheme('light'));
cmd.command("midnight", () => appState.setUiTheme('midnight')); cmd.command("midnight", () => appState.setUiTheme('midnight'));
cmd.command("about", (c: CommandInput) => appState.addCommandResult(c.input, <AboutResultView />)); cmd.command("about", (c: CommandInput) => appState.addCommandResult(c.input, () => <AboutResultView />));
cmd.command("whatsnew", (c: CommandInput) => appState.addCommandResult(c.input, <WhatsnewResultView />)); cmd.command("whatsnew", (c: CommandInput) => appState.addCommandResult(c.input, () => <WhatsnewResultView />));
cmd.command("guid", (c: CommandInput) => appState.addCommandResult(c.input, <TextResultView text={uuid()} />)); cmd.command("guid", (c: CommandInput) => appState.addCommandResult(c.input, () => <TextResultView text={uuid()} />));
cmd.command("-notrack", () => {}); cmd.command("-notrack", () => {});
cmd.command("-debug", (c: CommandInput) => { cmd.command("-debug", (c: CommandInput) => {
appState.toggleDebugMode(); appState.toggleDebugMode();
appState.addCommandResult(c.input, <TextResultView text={`Debug Mode: ${appState.debugMode}`}/>); appState.addCommandResult(c.input, () => <TextResultView text={`Debug Mode: ${appState.debugMode}`}/>);
}); });
cmd.command("donate", (c:CommandInput) => { cmd.command("donate", (c:CommandInput) => {
@@ -73,12 +73,12 @@ const shellModule = {
const command = s.input.substring(7).trim(); const command = s.input.substring(7).trim();
const result = executeCommand(command); const result = executeCommand(command);
appState.addCommandResult(s.input, <TextResultView text={result} />); appState.addCommandResult(s.input, () => <TextResultView text={result} />);
} }
}); });
}; };
cmd.onError((input: string, err: Error) => appState.addCommandResult(input, <ErrorResultView errorMessage={err.toString()} />)); cmd.onError((input: string, err: Error) => appState.addCommandResult(input, () => <ErrorResultView errorMessage={err.toString()} />));
} }
} }