Skip to content
This repository has been archived by the owner on Aug 8, 2023. It is now read-only.

Commit

Permalink
Minimize use of let, reassigning of variables, and loops
Browse files Browse the repository at this point in the history
  • Loading branch information
@gnestor
gnestor committed Jul 18, 2018
1 parent 67c5369 commit 8df852e
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 101 deletions.
3 changes: 0 additions & 3 deletions src/components/ShortcutButton.tsx
View file
Expand Up @@ -26,9 +26,6 @@ export interface IShortcutButtonProps {

/** React component for an interactive button displaying a command's keyboard shortcut */
export class ShortcutButton extends React.Component<IShortcutButtonProps, {}> {
constructor(props) {
super(props)
}
render() {
return (
<button
Expand Down
24 changes: 10 additions & 14 deletions src/components/ShortcutInput.tsx
View file
Expand Up @@ -48,14 +48,14 @@ export class ShortcutInput extends React.Component<IShortcutInputProps, IShortcu

/** Get array of keys from user input */
keysFromValue = (value) => {
let keys: string[] = value.split(',')
const keys: string[] = value.split(',')
return keys
}

/** Parse user input for chained shortcuts */
parseChaining = (event: any, value: string, userInput: string) : string => {
event.preventDefault()
let wordKeys =
const wordKeys =
[
'Tab',
'Shift',
Expand All @@ -81,7 +81,7 @@ export class ShortcutInput extends React.Component<IShortcutInputProps, IShortcu
}
)
} else if (event.key !== 'CapsLock') {
let lastKey = (userInput.substr(userInput.lastIndexOf(' ') + 1, userInput.length)).trim()
const lastKey = (userInput.substr(userInput.lastIndexOf(' ') + 1, userInput.length)).trim()
if (wordKeys.lastIndexOf(lastKey) === -1 && lastKey != '') {
userInput = (userInput + ',');
if (event.ctrlKey && event.key != 'Control') {
Expand Down Expand Up @@ -132,11 +132,11 @@ export class ShortcutInput extends React.Component<IShortcutInputProps, IShortcu
* */
checkNonFunctional = (shortcut: string) : boolean =>
{
let dontEnd = ['Ctrl','Alt','Accel','Shift']
let shortcutKeys = shortcut.split(', ')
let last = shortcutKeys[shortcutKeys.length-1]
this.setState({isFunctional: !(dontEnd.includes(last) || shortcut==='')})
return (dontEnd.includes(last) || shortcut==='')
const dontEnd = ['Ctrl','Alt','Accel','Shift']
const shortcutKeys = shortcut.split(', ')
const last = shortcutKeys[shortcutKeys.length-1]
this.setState({isFunctional: !(dontEnd.includes(last) || shortcut === '')})
return (dontEnd.includes(last) || shortcut === '')
}

/** Check if shortcut being typed is already taken */
Expand Down Expand Up @@ -175,12 +175,8 @@ export class ShortcutInput extends React.Component<IShortcutInputProps, IShortcu

/** Parse and normalize user input */
handleInput = (event: any) : void => {
let value = this.state.value
let userInput = this.state.userInput

userInput = this.parseChaining(event, value, userInput)

value = this.props.toSymbols(userInput)
const userInput = this.parseChaining(event, this.state.value, this.state.userInput)
const value = this.props.toSymbols(userInput)
let keys = this.keysFromValue(userInput)
let takenBy = this.checkShortcutAvailability(userInput, keys)
this.checkConflict(takenBy)
Expand Down
55 changes: 31 additions & 24 deletions src/components/ShortcutItem.tsx
View file
Expand Up @@ -51,11 +51,8 @@ export interface IShortcutItemState {

/** React component for each command shortcut item */
export class ShortcutItem extends React.Component<IShortcutItemProps, IShortcutItemState> {
constructor(props) {
super(props)
this.state = {
displayInput: false
}
state = {
displayInput: false
}

/** Toggle display state of input box */
Expand All @@ -69,8 +66,7 @@ export class ShortcutItem extends React.Component<IShortcutItemProps, IShortcutI

/** Transform special key names into unicode characters */
toSymbols = (value: string): string => {
let display: string[] = new Array<string>()
let wordKeys =
const wordKeys =
[
'Tab',
'Enter',
Expand All @@ -80,25 +76,41 @@ export class ShortcutItem extends React.Component<IShortcutItemProps, IShortcutI
'ArrowLeft',
'Escape'
]
for (let key of value.split(' ')) {
// const display = value.split(' ').map(key => {
// if (key === 'Ctrl') {
// return '⌃'
// } else if (key === 'Accel') {
// return '⌘'
// } else if (key === 'Shift') {
// return '⇧'
// } else if (key === 'Alt') {
// return '⌥'
// } else if (wordKeys.includes(key)) {
// return key
// } else {
// return key.toUpperCase()
// }
// })
// return display.join(' ')
return value.split(' ').reduce((result, key) => {
if (key === 'Ctrl') {
display.push('⌃')
return result + '⌃'
} else if (key === 'Accel') {
display.push('⌘')
return result + '⌘'
} else if (key === 'Shift') {
display.push('⇧')
return result + '⇧'
} else if (key === 'Alt') {
display.push('⌥')
return result + '⌥'
} else if (wordKeys.includes(key)) {
display.push(key)
return result + key
} else {
display.push(key.toUpperCase())
return result + key.toUpperCase()
}
}
return display.join(' ')
}, '')
}

render() {
const nonEmptyKeys = Object.keys(this.props.shortcut.keys).filter(key => this.props.shortcut.keys[key][0] !== '')
return (
<div
className={this.props.shortcut.hasConflict ? classes(RowStyle, ConflictRowStyle) : RowStyle}>
Expand All @@ -111,9 +123,7 @@ export class ShortcutItem extends React.Component<IShortcutItemProps, IShortcutI
<div className={CellStyle}>
<div className={ShortcutCellStyle}>
{/** Create shortcut boxes and delete buttons for each shortcut */}
{Object.keys(this.props.shortcut.keys).filter(key =>
this.props.shortcut.keys[key][0] !== '')
.map((key, index) =>
{nonEmptyKeys.map((key, index) =>
<div className={ShortcutContainerStyle} key={key + '_' + index}>
{this.props.shortcut.keys[key]
.map((keyBinding, index) =>
Expand All @@ -137,8 +147,7 @@ export class ShortcutItem extends React.Component<IShortcutItemProps, IShortcutI
toSymbols={this.toSymbols}
index={index}
/>
{(index === 0 && Object.keys(this.props.shortcut.keys).filter(key =>
this.props.shortcut.keys[key][0] !== '').length > 1)
{(index === 0 && nonEmptyKeys.length > 1)
? <div className={OrStyle}>or</div>
: null
}
Expand All @@ -147,9 +156,7 @@ export class ShortcutItem extends React.Component<IShortcutItemProps, IShortcutI
}

{/** Add a plus for adding new shortcuts if there are less than two set */}
{Object.keys(this.props.shortcut.keys).filter(key =>
this.props.shortcut.keys[key][0] !== '')
.length < 2 &&
{nonEmptyKeys.length < 2 &&
<span
className={(!this.state.displayInput)
? PlusStyle
Expand Down
25 changes: 13 additions & 12 deletions src/components/ShortcutList.tsx
View file
Expand Up @@ -25,18 +25,19 @@ export class ShortcutList extends React.Component<IShortcutListProps, {}> {
render() {
return (
<div className={ShortcutListStyle}>
{Object(this.props.shortcuts).map(shortcut =>
<ShortcutItem key={shortcut.commandName + "_" + shortcut.selector}
resetShortcut={this.props.resetShortcut}
shortcut={shortcut}
handleUpdate={this.props.handleUpdate}
deleteShortcut={this.props.deleteShortcut}
showSelectors={this.props.showSelectors}
keyBindingsUsed={this.props.keyBindingsUsed}
sortConflict={this.props.sortConflict}
clearConflicts={this.props.clearConflicts}
/>
)}
{Object.keys(this.props.shortcuts).map(key => {
const shortcut = this.props.shortcuts[key];
return <ShortcutItem key={shortcut.commandName + "_" + shortcut.selector}
resetShortcut={this.props.resetShortcut}
shortcut={shortcut}
handleUpdate={this.props.handleUpdate}
deleteShortcut={this.props.deleteShortcut}
showSelectors={this.props.showSelectors}
keyBindingsUsed={this.props.keyBindingsUsed}
sortConflict={this.props.sortConflict}
clearConflicts={this.props.clearConflicts}
/>
})}
</div>
)
}
Expand Down

0 comments on commit 8df852e

Please sign in to comment.