diff --git a/src/ActionsMenuItem.js b/src/ActionsMenuItem.js index 80818ffc..58b1ce0b 100644 --- a/src/ActionsMenuItem.js +++ b/src/ActionsMenuItem.js @@ -12,6 +12,7 @@ import './ActionsMenuItem.scss'; type ActionsMenuItemProps = { intl: IntlShape, isAllowed?: boolean, + isSelected?: boolean, isUsed?: boolean, itemKey: string, onChange: (event: Event) => void @@ -26,7 +27,7 @@ export class ActionsMenuItem extends React.Component< ActionsMenuItemProps, {} > handleChange = (event: Event) => { // Always reenabled disallowed commands, but do not disable used ones. - if (!this.props.isAllowed || !this.props.isUsed) { + if (!this.props.isAllowed || !(this.props.isSelected || this.props.isUsed)) { event.preventDefault(); this.props.onChange(event); } @@ -39,6 +40,10 @@ export class ActionsMenuItem extends React.Component< ActionsMenuItemProps, {} > if (this.props.isUsed) { commandName += " " + usedLabel; } + if (this.props.isSelected) { + const selectedLabel = this.props.intl.formatMessage({ id: 'ActionsMenuItem.selectedActionToggleLabel' }); + commandName += " " + selectedLabel + } const checkboxId = `actions-menu-item-${this.props.itemKey}`; @@ -55,7 +60,7 @@ export class ActionsMenuItem extends React.Component< ActionsMenuItemProps, {} > } // Disable the checkbox if the button is allowed and used. - const isCheckboxDisabled = (this.props.isAllowed && this.props.isUsed); + const isCheckboxDisabled = (this.props.isAllowed && (this.props.isUsed || this.props.isSelected)); return (
, programSequence: ProgramSequence, allowedActions: ActionToggleRegister, + // TODO: Make this and App.js use CommandName. + selectedAction?: null|string, show: boolean }; @@ -124,6 +126,7 @@ class ActionsSimplificationModal extends React.Component { }); } - handleToggleAllowedCommand = (event: Event, commandName: CommandName) => { - // TODO: Use the function form of setState() as the new state - // depends on the current state - const currentIsAllowed = this.state.allowedActions[commandName]; - if (this.state.programSequence.usesAction(commandName) && currentIsAllowed) { - event.preventDefault(); - } - else { - const newAllowedActions= Object.assign({}, this.state.allowedActions); - newAllowedActions[commandName] = !currentIsAllowed; - this.setState({ allowedActions: newAllowedActions}) - } - } - changeProgramSpeedIndex = (newSpeedIndex: number) => { if (newSpeedIndex >= 0 && newSpeedIndex <= (this.speedLookUp.length - 1)) { this.interpreter.setStepTime(this.speedLookUp[newSpeedIndex]); @@ -1357,6 +1343,7 @@ export class App extends React.Component { onConfirm={this.handleChangeAllowedActions} allowedActions={this.state.allowedActions} programSequence={this.state.programSequence} + selectedAction={this.state.selectedAction} /> ); diff --git a/src/messages.json b/src/messages.json index 207cc728..59350711 100644 --- a/src/messages.json +++ b/src/messages.json @@ -21,6 +21,7 @@ "ActionsMenuItem.command.right180": "Turn right 180 degrees", "ActionsMenuItem.unusedItemToggleLabel": "{action}", "ActionsMenuItem.usedItemToggleLabel": "(Used)", + "ActionsMenuItem.selectedActionToggleLabel": "(Selected)", "ActionsSimplificationModal.cancel": "Cancel", "ActionsSimplificationModal.save": "Save", "ActionsSimplificationModal.title": "Available Actions",