fix dropdown sort

main
Mike Fix 6 years ago
parent 7a3930cae6
commit 7c7af92bce

@ -57,62 +57,21 @@ class Dropdown extends React.PureComponent {
userInputtedValue = ''
renderDropdown = ({
isOpen,
highlightedIndex,
selectedItem,
getRootProps,
getToggleButtonProps,
getInputProps,
getItemProps
}) => {
const { list, color, itemWrapper, icon, disableInput, title } = this.props
const { itemsToShow } = this.state
const minWidth = calcMinWidth(itemsToShow)
const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
return (
<DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
{title && <VisuallyHidden id={labelId}>{title}</VisuallyHidden>}
<DropdownIcon isOpen={isOpen}>{icon}</DropdownIcon>
<SelectedItem
getToggleButtonProps={getToggleButtonProps}
getInputProps={getInputProps}
isOpen={isOpen}
color={color}
hasIcon={!!icon}
disabled={disableInput}
>
{selectedItem.name}
</SelectedItem>
{isOpen ? (
<List color={color}>
{list.map((item, index) => (
<ListItem
key={index}
color={color}
item={item}
itemWrapper={itemWrapper}
{...getItemProps({
item,
isSelected: selectedItem.name === item.name,
isHighlighted: highlightedIndex === index
})}
>
{item.name}
</ListItem>
))}
</List>
) : null}
</DropdownContainer>
)
}
render() {
const { innerRef, selected, onChange, title } = this.props
const {
innerRef,
color,
selected,
onChange,
itemWrapper,
icon,
disableInput,
title
} = this.props
const { itemsToShow, inputValue } = this.state
const minWidth = calcMinWidth(itemsToShow)
const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
return (
@ -126,12 +85,77 @@ class Dropdown extends React.PureComponent {
onUserAction={this.onUserAction}
labelId={labelId}
>
{this.renderDropdown}
{renderDropdown({
color,
list: itemsToShow,
selected,
minWidth,
itemWrapper,
icon,
disableInput,
title,
labelId
})}
</Downshift>
)
}
}
const renderDropdown = ({
color,
list,
minWidth,
itemWrapper,
icon,
disableInput,
title,
labelId
}) => ({
isOpen,
highlightedIndex,
selectedItem,
getRootProps,
getToggleButtonProps,
getInputProps,
getItemProps
}) => {
return (
<DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
{title && <VisuallyHidden id={labelId}>{title}</VisuallyHidden>}
<DropdownIcon isOpen={isOpen}>{icon}</DropdownIcon>
<SelectedItem
getToggleButtonProps={getToggleButtonProps}
getInputProps={getInputProps}
isOpen={isOpen}
color={color}
hasIcon={!!icon}
disabled={disableInput}
>
{selectedItem.name}
</SelectedItem>
{isOpen ? (
<ListItems color={color}>
{list.map((item, index) => (
<ListItem
key={index}
color={color}
item={item}
itemWrapper={itemWrapper}
{...getItemProps({
item,
isSelected: selectedItem.name === item.name,
isHighlighted: highlightedIndex === index
})}
>
{item.name}
</ListItem>
))}
</ListItems>
) : null}
</DropdownContainer>
)
}
const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
return (
<div {...rest} ref={innerRef} className="dropdown-container">
@ -174,9 +198,9 @@ const DropdownIcon = ({ children, isOpen }) => {
</style>
</div>
)
} else {
return null
}
return null
}
const SelectedItem = ({
@ -246,7 +270,7 @@ const SelectedItem = ({
)
}
const List = ({ children, color }) => {
const ListItems = ({ children, color }) => {
return (
<ul role="listbox" className="dropdown-list">
{children}

Loading…
Cancel
Save