refactor: 💡 Improve hotkeyPreferences proptypes / add lowercase (#1165)

* refactor: 💡 Improve hotkeyPreferences proptypes / add lowercase

Improve hotkeyPreferences proptypes and lowercase event keys to guard
against different browsers casings

* Add isRequired to proptypes and empty hotkeys message
This commit is contained in:
Igor Octaviano 2019-11-14 00:42:49 -03:00 committed by Danny Brown
parent 9edc366ff7
commit 54d2cde6da
3 changed files with 28 additions and 7 deletions

View File

@ -10,7 +10,13 @@ import PropTypes from 'prop-types';
export class HotKeysPreferences extends Component { export class HotKeysPreferences extends Component {
static propTypes = { static propTypes = {
hotkeyDefinitions: PropTypes.array.isRequired, hotkeyDefinitions: PropTypes.arrayOf(
PropTypes.shape({
commandName: PropTypes.string,
keys: PropTypes.arrayOf(PropTypes.string),
label: PropTypes.string,
})
).isRequired,
}; };
constructor(props) { constructor(props) {
@ -76,7 +82,7 @@ export class HotKeysPreferences extends Component {
specialKeyName || specialKeyName ||
keyDownEvent.key || keyDownEvent.key ||
String.fromCharCode(keyDownEvent.keyCode); String.fromCharCode(keyDownEvent.keyCode);
pressedKeys.push(keyName); pressedKeys.push(keyName.toLowerCase());
} }
this.updateHotKeysState(commandName, pressedKeys.join('+')); this.updateHotKeysState(commandName, pressedKeys.join('+'));
@ -123,7 +129,7 @@ export class HotKeysPreferences extends Component {
const hotKey = this.state.hotKeys[hotKeyIndex]; const hotKey = this.state.hotKeys[hotKeyIndex];
const keys = hotKey.keys[0]; const keys = hotKey.keys[0];
const pressedKeys = keys.split('+'); const pressedKeys = keys.split('+');
const lastPressedKey = pressedKeys[pressedKeys.length - 1]; const lastPressedKey = pressedKeys[pressedKeys.length - 1].toLowerCase();
// clear the prior errors // clear the prior errors
this.setState({ errorMessages: {} }, () => { this.setState({ errorMessages: {} }, () => {
@ -156,7 +162,8 @@ export class HotKeysPreferences extends Component {
*/ */
const modifierCommand = pressedKeys const modifierCommand = pressedKeys
.slice(0, pressedKeys.length - 1) .slice(0, pressedKeys.length - 1)
.join('+'); .join('+')
.toLowerCase();
const disallowedCombination = disallowedCombinations[modifierCommand]; const disallowedCombination = disallowedCombinations[modifierCommand];
const hasDisallowedCombinations = disallowedCombination const hasDisallowedCombinations = disallowedCombination
@ -215,7 +222,7 @@ export class HotKeysPreferences extends Component {
this.state.hotKeys.length this.state.hotKeys.length
); );
return ( return this.state.hotKeys.length > 0 ? (
<div className="HotKeysPreferences"> <div className="HotKeysPreferences">
{/* <!-- Column 1 --> */} {/* <!-- Column 1 --> */}
<div className="column"> <div className="column">
@ -250,6 +257,8 @@ export class HotKeysPreferences extends Component {
</table> </table>
</div> </div>
</div> </div>
) : (
<p>{`No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.`}</p>
); );
} }
} }

View File

@ -15,7 +15,13 @@ export class UserPreferences extends Component {
// TODO: Make this more generic. Tabs should not be restricted to these entries // TODO: Make this more generic. Tabs should not be restricted to these entries
static propTypes = { static propTypes = {
hotkeyDefinitions: PropTypes.array.isRequired, hotkeyDefinitions: PropTypes.arrayOf(
PropTypes.shape({
commandName: PropTypes.string,
keys: PropTypes.arrayOf(PropTypes.string),
label: PropTypes.string,
})
).isRequired,
windowLevelData: PropTypes.object.isRequired, windowLevelData: PropTypes.object.isRequired,
generalData: PropTypes.object.isRequired, generalData: PropTypes.object.isRequired,
}; };

View File

@ -15,7 +15,13 @@ class UserPreferencesForm extends Component {
onSave: PropTypes.func, onSave: PropTypes.func,
onResetToDefaults: PropTypes.func, onResetToDefaults: PropTypes.func,
windowLevelData: PropTypes.object, windowLevelData: PropTypes.object,
hotkeyDefinitions: PropTypes.array, hotkeyDefinitions: PropTypes.arrayOf(
PropTypes.shape({
commandName: PropTypes.string,
keys: PropTypes.arrayOf(PropTypes.string),
label: PropTypes.string,
})
).isRequired,
t: PropTypes.func, t: PropTypes.func,
}; };