fix(pixel-perfecting): dropdown component exploding
This commit is contained in:
parent
45fcb6245d
commit
8658830622
|
@ -9,6 +9,8 @@ import ClickOutside from 'react-click-outside';
|
||||||
|
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
|
import truncateAddress from '../utils/truncateAddress';
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
const MenuWrapper = styled.div`
|
const MenuWrapper = styled.div`
|
||||||
background-image: ${props => `linear-gradient(to right, ${darken(
|
background-image: ${props => `linear-gradient(to right, ${darken(
|
||||||
|
@ -30,6 +32,7 @@ const MenuItem = styled.button`
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
|
@ -50,16 +53,24 @@ const MenuItem = styled.button`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Option = styled(TextComponent)`
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
`;
|
||||||
|
|
||||||
const PopoverWithStyle = styled(Popover)`
|
const PopoverWithStyle = styled(Popover)`
|
||||||
& > .Popover-tip {
|
& > .Popover-tip {
|
||||||
fill: ${props => props.theme.colors.activeItem};
|
fill: ${props => props.theme.colors.activeItem};
|
||||||
}
|
}
|
||||||
|
left: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
renderTrigger: (toggleVisibility: () => void, isOpen: boolean) => Node,
|
renderTrigger: (toggleVisibility: () => void, isOpen: boolean) => Node,
|
||||||
options: Array<{ label: string, onClick: () => void }>,
|
options: Array<{ label: string, onClick: () => void }>,
|
||||||
label?: string | null,
|
label?: string | null,
|
||||||
|
truncate?: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -73,11 +84,14 @@ export class DropdownComponent extends Component<Props, State> {
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
label: null,
|
label: null,
|
||||||
|
truncate: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isOpen } = this.state;
|
const { isOpen } = this.state;
|
||||||
const { label, options, renderTrigger } = this.props;
|
const {
|
||||||
|
label, options, truncate, renderTrigger,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
const body = [
|
const body = [
|
||||||
<ClickOutside
|
<ClickOutside
|
||||||
|
@ -91,7 +105,7 @@ export class DropdownComponent extends Component<Props, State> {
|
||||||
)}
|
)}
|
||||||
{options.map(({ label: optionLabel, onClick }) => (
|
{options.map(({ label: optionLabel, onClick }) => (
|
||||||
<MenuItem onClick={onClick} key={optionLabel}>
|
<MenuItem onClick={onClick} key={optionLabel}>
|
||||||
<TextComponent value={optionLabel} />
|
<Option value={truncate ? truncateAddress(optionLabel) : optionLabel} />
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
))}
|
))}
|
||||||
</MenuWrapper>
|
</MenuWrapper>
|
||||||
|
|
Loading…
Reference in New Issue