Implement typeable dropdowns (#283)

* Implement typeable dropdowns

- Closes #276

* Fix up and down arrows

* Use instance variables for state and user input

* Bug fixes

* Pass getButtonProps
main
Michael Fix 7 years ago committed by GitHub
parent c47eb97c3a
commit d77ff14e05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,30 +1,65 @@
import React from 'react' import React, { Component } from 'react'
import Downshift from 'downshift' import Downshift from 'downshift'
import matchSorter from 'match-sorter'
import ArrowDown from './svg/Arrowdown' import ArrowDown from './svg/Arrowdown'
import CheckMark from './svg/Checkmark' import CheckMark from './svg/Checkmark'
import { COLORS } from '../lib/constants' import { COLORS } from '../lib/constants'
const Dropdown = ({ button, color, list, selected, onChange }) => { class Dropdown extends Component {
state = {
inputValue: this.props.selected.name,
itemsToShow: this.props.list
}
userInputtedValue = ''
onUserAction = changes => {
this.setState(({ inputValue, itemsToShow }) => {
const clearUserInput = changes.hasOwnProperty('isOpen')
if (changes.hasOwnProperty('inputValue')) {
if (changes.type === Downshift.stateChangeTypes.keyDownEscape) {
inputValue = this.userInputtedValue
} else {
inputValue = changes.inputValue
this.userInputtedValue = changes.inputValue
}
}
itemsToShow = this.userInputtedValue
? matchSorter(this.props.list, this.userInputtedValue, { keys: ['name'] })
: this.props.list
if (
changes.hasOwnProperty('highlightedIndex') &&
(changes.type === Downshift.stateChangeTypes.keyDownArrowUp ||
changes.type === Downshift.stateChangeTypes.keyDownArrowDown)
) {
inputValue = itemsToShow[changes.highlightedIndex].name
}
if (clearUserInput) {
this.userInputtedValue = ''
}
return { inputValue, itemsToShow }
})
}
render() {
const { button, color, list, selected, onChange } = this.props
return ( return (
<Downshift <Downshift
render={renderDropdown({ button, color, list, selected })} inputValue={this.state.inputValue}
render={renderDropdown({ button, color, list: this.state.itemsToShow, selected })}
selectedItem={selected} selectedItem={selected}
defaultHighlightedIndex={list.findIndex(it => it === selected)} defaultHighlightedIndex={list.findIndex(it => it === selected)}
itemToString={item => item.name} itemToString={item => item.name}
onChange={onChange} onChange={onChange}
stateReducer={reduceState(list)} onUserAction={this.onUserAction}
/> />
) )
} }
const reduceState = list => (state, changes) => {
switch (changes.type) {
case Downshift.stateChangeTypes.keyDownArrowUp:
case Downshift.stateChangeTypes.keyDownArrowDown:
return { ...changes, selectedItem: list[changes.highlightedIndex] }
default:
return changes
}
} }
const renderDropdown = ({ button, color, list, selected }) => ({ const renderDropdown = ({ button, color, list, selected }) => ({
@ -43,7 +78,13 @@ const renderDropdown = ({ button, color, list, selected }) => ({
{...getRootProps({ refKey: 'innerRef' })} {...getRootProps({ refKey: 'innerRef' })}
minWidth={minWidth(button, selected, list)} minWidth={minWidth(button, selected, list)}
> >
<SelectedItem {...getButtonProps()} {...getInputProps()} isOpen={isOpen} color={color}> <SelectedItem
getButtonProps={getButtonProps}
getInputProps={getInputProps}
isOpen={isOpen}
color={color}
button={button}
>
{selectedItem.name} {selectedItem.name}
</SelectedItem> </SelectedItem>
{isOpen ? ( {isOpen ? (
@ -82,12 +123,20 @@ const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
) )
} }
const SelectedItem = ({ children, isOpen, color, ...rest }) => { const SelectedItem = ({ getButtonProps, getInputProps, children, isOpen, color, button }) => {
const itemColor = color || COLORS.SECONDARY const itemColor = color || COLORS.SECONDARY
return ( return (
<span {...rest} tabIndex="0" className={`dropdown-display ${isOpen ? 'is-open' : ''}`}> <span
{...getButtonProps()}
tabIndex="0"
className={`dropdown-display ${isOpen ? 'is-open' : ''}`}
>
{button ? (
<span className="dropdown-display-text">{children}</span> <span className="dropdown-display-text">{children}</span>
) : (
<input {...getInputProps({ placeholder: children })} className="dropdown-display-text" />
)}
<div role="button" className={`dropdown-arrow`}> <div role="button" className={`dropdown-arrow`}>
<ArrowDown fill={itemColor} /> <ArrowDown fill={itemColor} />
</div> </div>
@ -112,6 +161,11 @@ const SelectedItem = ({ children, isOpen, color, ...rest }) => {
.dropdown-display-text { .dropdown-display-text {
flex-grow: 1; flex-grow: 1;
color: ${itemColor}; color: ${itemColor};
background: transparent;
border: none;
outline: none;
font-size: inherit;
font-family: inherit;
} }
.is-open > .dropdown-arrow { .is-open > .dropdown-arrow {
transform: rotate(180deg); transform: rotate(180deg);

@ -32,6 +32,7 @@
"highlight.js": "^9.12.0", "highlight.js": "^9.12.0",
"history": "^4.7.2", "history": "^4.7.2",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"match-sorter": "^2.2.0",
"morgan": "^1.8.2", "morgan": "^1.8.2",
"morphmorph": "^0.0.2", "morphmorph": "^0.0.2",
"ms": "^2.0.0", "ms": "^2.0.0",

@ -1688,6 +1688,10 @@ detect-libc@^1.0.2:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
diacritic@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/diacritic/-/diacritic-0.0.2.tgz#fc2a887b5a5bc0a0a854fb614c7c2f209061ee04"
diffie-hellman@^5.0.0: diffie-hellman@^5.0.0:
version "5.0.2" version "5.0.2"
resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e" resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
@ -3265,6 +3269,12 @@ make-dir@^1.0.0:
dependencies: dependencies:
pify "^3.0.0" pify "^3.0.0"
match-sorter@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-2.2.0.tgz#3e88661aab7b8320836f67731cf7f9d3cb889761"
dependencies:
diacritic "0.0.2"
material-colors@^1.2.1: material-colors@^1.2.1:
version "1.2.5" version "1.2.5"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1" resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"

Loading…
Cancel
Save