|
|
@ -58,10 +58,10 @@ class Dropdown extends React.PureComponent {
|
|
|
|
userInputtedValue = ''
|
|
|
|
userInputtedValue = ''
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const { button, color, selected, onChange, itemWrapper } = this.props
|
|
|
|
const { color, selected, onChange, itemWrapper } = this.props
|
|
|
|
const { itemsToShow, inputValue } = this.state
|
|
|
|
const { itemsToShow, inputValue } = this.state
|
|
|
|
|
|
|
|
|
|
|
|
const minWidth = calcMinWidth(button, selected, itemsToShow)
|
|
|
|
const minWidth = calcMinWidth(itemsToShow)
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Downshift
|
|
|
|
<Downshift
|
|
|
@ -72,13 +72,13 @@ class Dropdown extends React.PureComponent {
|
|
|
|
onChange={onChange}
|
|
|
|
onChange={onChange}
|
|
|
|
onUserAction={this.onUserAction}
|
|
|
|
onUserAction={this.onUserAction}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{renderDropdown({ button, color, list: itemsToShow, selected, minWidth, itemWrapper })}
|
|
|
|
{renderDropdown({ color, list: itemsToShow, selected, minWidth, itemWrapper })}
|
|
|
|
</Downshift>
|
|
|
|
</Downshift>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const renderDropdown = ({ button, color, list, minWidth, itemWrapper }) => ({
|
|
|
|
const renderDropdown = ({ color, list, minWidth, itemWrapper }) => ({
|
|
|
|
isOpen,
|
|
|
|
isOpen,
|
|
|
|
highlightedIndex,
|
|
|
|
highlightedIndex,
|
|
|
|
selectedItem,
|
|
|
|
selectedItem,
|
|
|
@ -94,7 +94,6 @@ const renderDropdown = ({ button, color, list, minWidth, itemWrapper }) => ({
|
|
|
|
getInputProps={getInputProps}
|
|
|
|
getInputProps={getInputProps}
|
|
|
|
isOpen={isOpen}
|
|
|
|
isOpen={isOpen}
|
|
|
|
color={color}
|
|
|
|
color={color}
|
|
|
|
button={button}
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{selectedItem.name}
|
|
|
|
{selectedItem.name}
|
|
|
|
</SelectedItem>
|
|
|
|
</SelectedItem>
|
|
|
@ -137,7 +136,7 @@ const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, color, button }) => {
|
|
|
|
const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, color }) => {
|
|
|
|
const itemColor = color || COLORS.SECONDARY
|
|
|
|
const itemColor = color || COLORS.SECONDARY
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
@ -146,14 +145,10 @@ const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, c
|
|
|
|
tabIndex="0"
|
|
|
|
tabIndex="0"
|
|
|
|
className={`dropdown-display ${isOpen ? 'is-open' : ''}`}
|
|
|
|
className={`dropdown-display ${isOpen ? 'is-open' : ''}`}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{button ? (
|
|
|
|
|
|
|
|
<span className="dropdown-display-text">{children}</span>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
<input
|
|
|
|
<input
|
|
|
|
{...getInputProps({ placeholder: children, id: `downshift-input-${children}` })}
|
|
|
|
{...getInputProps({ placeholder: children, id: `downshift-input-${children}` })}
|
|
|
|
className="dropdown-display-text"
|
|
|
|
className="dropdown-display-text"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<div className="dropdown-arrow">
|
|
|
|
<div className="dropdown-arrow">
|
|
|
|
<ArrowDown fill={itemColor} />
|
|
|
|
<ArrowDown fill={itemColor} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -252,9 +247,7 @@ const ListItem = ({ children, color, isHighlighted, isSelected, itemWrapper, ...
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function calcMinWidth(isButton, selected, list) {
|
|
|
|
function calcMinWidth(items) {
|
|
|
|
const items = isButton ? [...list, selected] : list
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return items.reduce((max, { name }) => {
|
|
|
|
return items.reduce((max, { name }) => {
|
|
|
|
const wordSize = name.length * 10 + 32
|
|
|
|
const wordSize = name.length * 10 + 32
|
|
|
|
return wordSize > max ? wordSize : max
|
|
|
|
return wordSize > max ? wordSize : max
|
|
|
|