mirror of https://github.com/sgoudham/carbon.git
Add support to keyboard navigation in Dropdowns
The user can navigate through the Themes and Languages selects using the keyboard arrow down and up keys.main
Bruno C. Couto
7 years ago
committed by
Brian Dennis
parent
46091f6dc5
commit
83d30234a3
@ -1,134 +1,155 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import enhanceWithClickOutside from 'react-click-outside'
|
import Downshift from 'downshift'
|
||||||
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'
|
||||||
|
|
||||||
class Dropdown extends React.Component {
|
const Dropdown = ({ list, selected, onChange }) => {
|
||||||
constructor(props) {
|
return (
|
||||||
super(props)
|
<Downshift
|
||||||
this.state = {
|
render={renderDropdown(list)}
|
||||||
isVisible: false
|
selectedItem={selected}
|
||||||
}
|
defaultHighlightedIndex={list.findIndex(it => it === selected)}
|
||||||
this.select = this.select.bind(this)
|
itemToString={item => item.name}
|
||||||
this.toggle = this.toggle.bind(this)
|
onChange={onChange}
|
||||||
}
|
stateReducer={reduceState(list)}
|
||||||
|
/>
|
||||||
select(item) {
|
)
|
||||||
if (this.props.selected !== item) {
|
}
|
||||||
this.props.onChange(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle() {
|
|
||||||
this.setState({ isVisible: !this.state.isVisible })
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickOutside() {
|
const reduceState = list => (state, changes) => {
|
||||||
this.setState({ isVisible: false })
|
switch (changes.type) {
|
||||||
|
case Downshift.stateChangeTypes.keyDownArrowUp:
|
||||||
|
case Downshift.stateChangeTypes.keyDownArrowDown:
|
||||||
|
return { ...changes, selectedItem: list[changes.highlightedIndex] }
|
||||||
|
default:
|
||||||
|
return changes
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
renderListItems() {
|
const renderDropdown = list => ({
|
||||||
return this.props.list.map((item, i) => (
|
isOpen,
|
||||||
<div className="dropdown-list-item" key={i} onClick={this.select.bind(null, item)}>
|
highlightedIndex,
|
||||||
<span>{item.name}</span>
|
setHighlightedIndex,
|
||||||
{this.props.selected === item ? <Checkmark /> : null}
|
selectHighlightedItem,
|
||||||
<style jsx>{`
|
selectedItem,
|
||||||
.dropdown-list-item {
|
getRootProps,
|
||||||
display: flex;
|
getButtonProps,
|
||||||
align-items: center;
|
getInputProps,
|
||||||
justify-content: space-between;
|
getItemProps
|
||||||
background: ${COLORS.BLACK};
|
}) => {
|
||||||
user-select: none;
|
return (
|
||||||
padding: 8px 16px;
|
<DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth(list)}>
|
||||||
border-bottom: 1px solid ${COLORS.SECONDARY};
|
<SelectedItem {...getButtonProps()} {...getInputProps()} isOpen={isOpen}>
|
||||||
}
|
{selectedItem.name}
|
||||||
|
</SelectedItem>
|
||||||
|
{isOpen ? (
|
||||||
|
<ListItems>
|
||||||
|
{list.map((item, index) => (
|
||||||
|
<ListItem
|
||||||
|
key={index}
|
||||||
|
{...getItemProps({
|
||||||
|
item,
|
||||||
|
isSelected: selectedItem === item,
|
||||||
|
isHighlighted: highlightedIndex === index
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</ListItems>
|
||||||
|
) : null}
|
||||||
|
</DropdownContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-list-item:hover {
|
const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
|
||||||
background: ${COLORS.HOVER};
|
return (
|
||||||
}
|
<div {...rest} ref={innerRef} className="dropdown-container">
|
||||||
|
{children}
|
||||||
|
<style jsx>{`
|
||||||
|
.dropdown-container {
|
||||||
|
min-width: ${minWidth}px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-list-item:last-of-type {
|
const SelectedItem = ({ children, isOpen, ...rest }) => {
|
||||||
border-bottom: none;
|
return (
|
||||||
border-radius: 0px 0px 2px 2px;
|
<span {...rest} tabIndex="0" className="dropdown-display">
|
||||||
}
|
<span className="dropdown-display-text">{children}</span>
|
||||||
`}</style>
|
<div className={`dropdown-arrow ${isOpen ? 'is-reverse' : ''}`}>
|
||||||
|
<ArrowDown />
|
||||||
</div>
|
</div>
|
||||||
))
|
<style jsx>{`
|
||||||
}
|
.dropdown-display {
|
||||||
|
display: flex;
|
||||||
render() {
|
align-items: center;
|
||||||
// find longest list value in number of characters
|
height: 100%;
|
||||||
const MIN_WIDTH = this.props.list.reduce(
|
border: 1px solid ${COLORS.SECONDARY};
|
||||||
(max, { name }) => (name && name.length > max ? name.length : max),
|
border-radius: 3px;
|
||||||
0
|
padding: 8px 16px;
|
||||||
)
|
}
|
||||||
|
.dropdown-display-text {
|
||||||
return (
|
flex-grow: 1;
|
||||||
<div
|
}
|
||||||
className="dropdown-container"
|
.dropdown-arrow.is-reverse {
|
||||||
style={{ minWidth: MIN_WIDTH * 14 }}
|
transform: rotate(180deg);
|
||||||
onClick={this.toggle}
|
}
|
||||||
>
|
`}</style>
|
||||||
<div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
|
</span>
|
||||||
<span>{this.props.selected ? this.props.selected.name : ''}</span>
|
)
|
||||||
<div className="arrow-down">
|
}
|
||||||
<ArrowDown />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="dropdown-list">{this.renderListItems()}</div>
|
|
||||||
<style jsx>{`
|
|
||||||
.arrow-down {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-visible > .arrow-down {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-visible {
|
|
||||||
border-radius: 3px 3px 0px 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-container {
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-display {
|
|
||||||
height: 100%;
|
|
||||||
border: 1px solid ${COLORS.SECONDARY};
|
|
||||||
border-radius: 3px;
|
|
||||||
user-select: none;
|
|
||||||
padding: 8px 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-display:hover {
|
const ListItems = ({ children }) => {
|
||||||
background: ${COLORS.HOVER};
|
return (
|
||||||
}
|
<ul className="dropdown-list">
|
||||||
|
{children}
|
||||||
|
<style jsx>{`
|
||||||
|
.dropdown-list {
|
||||||
|
margin-top: -1px;
|
||||||
|
border: 1px solid ${COLORS.SECONDARY};
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
max-height: 350px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
.is-visible + .dropdown-list {
|
const ListItem = ({ children, isHighlighted, isSelected, ...rest }) => {
|
||||||
display: block;
|
return (
|
||||||
}
|
<li {...rest} className="dropdown-list-item">
|
||||||
|
<span className="dropdown-list-item-text">{children}</span>
|
||||||
|
{isSelected ? <CheckMark /> : null}
|
||||||
|
<style jsx>{`
|
||||||
|
.dropdown-list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: ${isHighlighted ? COLORS.HOVER : COLORS.BLACK};
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-bottom: 1px solid ${COLORS.SECONDARY};
|
||||||
|
}
|
||||||
|
.dropdown-list-item:hover {
|
||||||
|
background: ${COLORS.HOVER};
|
||||||
|
}
|
||||||
|
.dropdown-list-item-text {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-list {
|
function minWidth(list) {
|
||||||
display: none;
|
return list.reduce((max, { name }) => {
|
||||||
margin-top: -1px;
|
const wordSize = name.length * 12
|
||||||
border: 1px solid ${COLORS.SECONDARY};
|
return wordSize > max ? wordSize : max
|
||||||
border-radius: 0px 0px 3px 3px;
|
}, 0)
|
||||||
max-height: 350px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default enhanceWithClickOutside(Dropdown)
|
export default Dropdown
|
||||||
|
|||||||
Loading…
Reference in New Issue