remove button option for dropdown

main
Mike Fix 6 years ago
parent 02debae7e2
commit 7772108f01

@ -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

Loading…
Cancel
Save