Skip to content

Commit

Permalink
Refactor how input classes are computed
Browse files Browse the repository at this point in the history
The string concatenation was a little long to be in the JSX, and required each part to include a leading space
Using an Array and join makes things a little easier to follow and less prone to forgetting a space
  • Loading branch information
romaricpascal committed Jan 12, 2024
1 parent 140183a commit b09fcec
Showing 1 changed file with 13 additions and 8 deletions.
21 changes: 13 additions & 8 deletions src/autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -433,12 +433,7 @@ export default class Autocomplete extends Component {
inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough

const wrapperClassName = `${cssNamespace}__wrapper`

const inputClassName = `${cssNamespace}__input`
const statusClassName = `${cssNamespace}__status`
const componentIsFocused = focused !== null
const inputModifierFocused = componentIsFocused ? ` ${inputClassName}--focused` : ''
const inputModifierType = this.props.showAllValues ? ` ${inputClassName}--show-all-values` : ` ${inputClassName}--default`
const dropdownArrowClassName = `${cssNamespace}__dropdown-arrow-down`
const optionFocused = focused !== -1 && focused !== null

Expand Down Expand Up @@ -474,9 +469,19 @@ export default class Autocomplete extends Component {
}
}

let inputClassesFinal = ''
const inputClassName = `${cssNamespace}__input`
const inputClassList = [
inputClassName,
this.props.showAllValues ? `${inputClassName}--show-all-values` : `${inputClassName}--default`
]

const componentIsFocused = focused !== null
if (componentIsFocused) {
inputClassList.push(`${inputClassName}--focused`)
}

if (inputClasses) {
inputClassesFinal = ' ' + inputClasses
inputClassList.push(inputClasses)
}

return (
Expand Down Expand Up @@ -508,7 +513,7 @@ export default class Autocomplete extends Component {
aria-autocomplete={(this.hasAutoselect()) ? 'both' : 'list'}
{...ariaDescribedProp}
autoComplete='off'
className={`${inputClassName}${inputModifierFocused}${inputModifierType}${inputClassesFinal}`}
className={inputClassList.join(' ')}
id={id}
onClick={(event) => this.handleInputClick(event)}
onBlur={this.handleInputBlur}
Expand Down

0 comments on commit b09fcec

Please sign in to comment.