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:
parent
9edc366ff7
commit
54d2cde6da
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user