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

265 lines
7.0 KiB
JavaScript

import React 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 React.PureComponent {
state = {
inputValue: this.props.selected.name,
itemsToShow: this.props.list
}
onUserAction = changes => {
this.setState(({ inputValue, itemsToShow }) => {
if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
if (changes.type === Downshift.stateChangeTypes.keyDownEscape) {
inputValue = this.userInputtedValue
} else if (changes.type === Downshift.stateChangeTypes.changeInput) {
inputValue = changes.inputValue
this.userInputtedValue = changes.inputValue
} else {
inputValue = changes.inputValue
}
}
itemsToShow = this.userInputtedValue
? matchSorter(this.props.list, this.userInputtedValue, { keys: ['name'] })
: this.props.list
if (
Object.prototype.hasOwnProperty.call(changes, 'highlightedIndex') &&
(changes.type === Downshift.stateChangeTypes.keyDownArrowUp ||
changes.type === Downshift.stateChangeTypes.keyDownArrowDown)
) {
inputValue = itemsToShow[changes.highlightedIndex].name
this.props.onChange(itemsToShow[changes.highlightedIndex])
}
if (Object.prototype.hasOwnProperty.call(changes, '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 }
})
}
userInputtedValue = ''
render() {
const { button, color, selected, onChange, itemWrapper } = this.props
const { itemsToShow, inputValue } = this.state
const minWidth = calcMinWidth(button, selected, itemsToShow)
return (
<Downshift
inputValue={inputValue}
selectedItem={selected}
defaultHighlightedIndex={itemsToShow.findIndex(it => it === selected)}
itemToString={item => item.name}
onChange={onChange}
onUserAction={this.onUserAction}
>
{renderDropdown({ button, color, list: itemsToShow, selected, minWidth, itemWrapper })}
</Downshift>
)
}
}
const renderDropdown = ({ button, color, list, minWidth, itemWrapper }) => ({
isOpen,
highlightedIndex,
selectedItem,
getRootProps,
getToggleButtonProps,
getInputProps,
getItemProps
}) => {
return (
<DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
<SelectedItem
getToggleButtonProps={getToggleButtonProps}
getInputProps={getInputProps}
isOpen={isOpen}
color={color}
button={button}
>
{selectedItem.name}
</SelectedItem>
{isOpen ? (
<ListItems color={color}>
{list.map((item, index) => (
<ListItem
key={index}
color={color}
itemWrapper={itemWrapper}
{...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 = ({ getToggleButtonProps, getInputProps, children, isOpen, color, button }) => {
const itemColor = color || COLORS.SECONDARY
return (
<span
{...getToggleButtonProps()}
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 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;
border-width: 2px;
}
.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: -2px;
border: 2px solid ${color || COLORS.SECONDARY};
border-radius: 0 0 3px 3px;
max-height: 350px;
overflow-y: scroll;
}
`}
</style>
</ul>
)
}
const ListItem = ({ children, color, isHighlighted, isSelected, itemWrapper, ...rest }) => {
const itemColor = color || COLORS.SECONDARY
return (
<li {...rest} role="option" className="dropdown-list-item">
{itemWrapper ? (
itemWrapper({ children, color: itemColor })
) : (
<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 calcMinWidth(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