You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/Dropdown.js

251 lines
6.5 KiB
JavaScript

import React, { Component } from 'react'
import Downshift from 'downshift'
import matchSorter from 'match-sorter'
import ArrowDown from './svg/Arrowdown'
import CheckMark from './svg/Checkmark'
import { COLORS } from '../lib/constants'
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
this.props.onChange(itemsToShow[changes.highlightedIndex])
}
if (changes.hasOwnProperty('isOpen')) {
this.userInputtedValue = ''
// clear on open
if (changes.isOpen) {
inputValue = ''
}
// set on close
if (changes.isOpen === false && !inputValue) {
inputValue = this.props.selected.name
}
}
return { inputValue, itemsToShow }
})
}
render() {
const { button, color, list, selected, onChange } = this.props
return (
<Downshift
inputValue={this.state.inputValue}
render={renderDropdown({ button, color, list: this.state.itemsToShow, selected })}
selectedItem={selected}
defaultHighlightedIndex={list.findIndex(it => it === selected)}
itemToString={item => item.name}
onChange={onChange}
onUserAction={this.onUserAction}
/>
)
}
}
const renderDropdown = ({ button, color, list, selected }) => ({
isOpen,
highlightedIndex,
setHighlightedIndex,
selectHighlightedItem,
selectedItem,
getRootProps,
getButtonProps,
getInputProps,
getItemProps
}) => {
return (
<DropdownContainer
{...getRootProps({ refKey: 'innerRef' })}
minWidth={minWidth(button, selected, list)}
>
<SelectedItem
getButtonProps={getButtonProps}
getInputProps={getInputProps}
isOpen={isOpen}
color={color}
button={button}
>
{selectedItem.name}
</SelectedItem>
{isOpen ? (
<ListItems color={color}>
{list.map((item, index) => (
<ListItem
key={index}
color={color}
{...getItemProps({
item,
isSelected: selectedItem === item,
isHighlighted: highlightedIndex === index
})}
>
{item.name}
</ListItem>
))}
</ListItems>
) : null}
</DropdownContainer>
)
}
const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
return (
<div {...rest} ref={innerRef} className="dropdown-container">
{children}
<style jsx>{`
.dropdown-container {
min-width: ${minWidth}px;
cursor: pointer;
user-select: none;
}
`}</style>
</div>
)
}
const SelectedItem = ({ getButtonProps, getInputProps, children, isOpen, color, button }) => {
const itemColor = color || COLORS.SECONDARY
return (
<span
{...getButtonProps()}
tabIndex="0"
className={`dropdown-display ${isOpen ? 'is-open' : ''}`}
>
{button ? (
<span className="dropdown-display-text">{children}</span>
) : (
<input
{...getInputProps({ placeholder: children, id: `downshift-input-${children}` })}
className="dropdown-display-text"
/>
)}
<div role="button" className={`dropdown-arrow`}>
<ArrowDown fill={itemColor} />
</div>
<style jsx>{`
.dropdown-display {
display: flex;
align-items: center;
height: 100%;
border: 1px solid ${itemColor};
border-radius: 3px;
padding: 8px 16px;
outline: none;
}
.dropdown-display:hover {
background: ${COLORS.HOVER};
}
.dropdown-display.is-open {
border-radius: 3px 3px 0 0;
}
.dropdown-display-text {
flex-grow: 1;
color: ${itemColor};
background: transparent;
border: none;
outline: none;
font-size: inherit;
font-family: inherit;
}
.is-open > .dropdown-arrow {
transform: rotate(180deg);
}
`}</style>
</span>
)
}
const ListItems = ({ children, color }) => {
return (
<ul role="listbox" className="dropdown-list">
{children}
<style jsx>{`
.dropdown-list {
margin-top: -1px;
border: 1px solid ${color || COLORS.SECONDARY};
border-radius: 0 0 3px 3px;
max-height: 350px;
overflow-y: scroll;
}
`}</style>
</ul>
)
}
const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
const itemColor = color || COLORS.SECONDARY
return (
<li {...rest} role="option" 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 ${itemColor};
}
.dropdown-list-item:last-child {
border-bottom: none;
}
.dropdown-list-item:hover {
background: ${COLORS.HOVER};
}
.dropdown-list-item-text {
flex-grow: 1;
color: ${itemColor};
}
`}</style>
</li>
)
}
function minWidth(isButton, selected, list) {
const items = isButton ? [...list, selected] : list
return items.reduce((max, { name }) => {
const wordSize = name.length * 10 + 32
return wordSize > max ? wordSize : max
}, 0)
}
export default Dropdown