|
|
@ -59,10 +59,12 @@ class Dropdown extends Component {
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const { button, color, list, selected, onChange } = this.props
|
|
|
|
const { button, color, list, selected, onChange } = this.props
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const minWidth = calcMinWidth(button, selected, list)
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Downshift
|
|
|
|
<Downshift
|
|
|
|
inputValue={this.state.inputValue}
|
|
|
|
inputValue={this.state.inputValue}
|
|
|
|
render={renderDropdown({ button, color, list: this.state.itemsToShow, selected })}
|
|
|
|
render={renderDropdown({ button, color, list: this.state.itemsToShow, selected, minWidth })}
|
|
|
|
selectedItem={selected}
|
|
|
|
selectedItem={selected}
|
|
|
|
defaultHighlightedIndex={list.findIndex(it => it === selected)}
|
|
|
|
defaultHighlightedIndex={list.findIndex(it => it === selected)}
|
|
|
|
itemToString={item => item.name}
|
|
|
|
itemToString={item => item.name}
|
|
|
@ -73,7 +75,7 @@ class Dropdown extends Component {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const renderDropdown = ({ button, color, list, selected }) => ({
|
|
|
|
const renderDropdown = ({ button, color, list, minWidth, selected }) => ({
|
|
|
|
isOpen,
|
|
|
|
isOpen,
|
|
|
|
highlightedIndex,
|
|
|
|
highlightedIndex,
|
|
|
|
setHighlightedIndex,
|
|
|
|
setHighlightedIndex,
|
|
|
@ -85,10 +87,7 @@ const renderDropdown = ({ button, color, list, selected }) => ({
|
|
|
|
getItemProps
|
|
|
|
getItemProps
|
|
|
|
}) => {
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<DropdownContainer
|
|
|
|
<DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
|
|
|
|
{...getRootProps({ refKey: 'innerRef' })}
|
|
|
|
|
|
|
|
minWidth={minWidth(button, selected, list)}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<SelectedItem
|
|
|
|
<SelectedItem
|
|
|
|
getButtonProps={getButtonProps}
|
|
|
|
getButtonProps={getButtonProps}
|
|
|
|
getInputProps={getInputProps}
|
|
|
|
getInputProps={getInputProps}
|
|
|
@ -238,7 +237,7 @@ const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function minWidth(isButton, selected, list) {
|
|
|
|
function calcMinWidth(isButton, selected, list) {
|
|
|
|
const items = isButton ? [...list, selected] : list
|
|
|
|
const items = isButton ? [...list, selected] : list
|
|
|
|
|
|
|
|
|
|
|
|
return items.reduce((max, { name }) => {
|
|
|
|
return items.reduce((max, { name }) => {
|
|
|
|