2021-02-10 11:32:42 +00:00
|
|
|
import styled, { css } from "styled-components";
|
2021-02-25 21:19:45 +00:00
|
|
|
import Base from "../themes/base";
|
2021-02-24 17:11:23 +00:00
|
|
|
import { tablet } from "../utils/device";
|
2021-02-10 11:32:42 +00:00
|
|
|
|
|
|
|
const itemTruncate = css`
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const fontStyle = css`
|
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
|
|
|
font-style: normal;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const disabledAndHeaderStyle = css`
|
|
|
|
color: ${(props) => props.theme.dropDownItem.disableColor};
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: default;
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.theme.dropDownItem.hoverDisabledBackgroundColor};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledDropdownItem = styled.div`
|
|
|
|
display: ${(props) => (props.textOverflow ? "block" : "flex")};
|
|
|
|
width: ${(props) => props.theme.dropDownItem.width};
|
|
|
|
max-width: ${(props) => props.theme.dropDownItem.maxWidth};
|
|
|
|
border: ${(props) => props.theme.dropDownItem.border};
|
|
|
|
cursor: pointer;
|
|
|
|
margin: ${(props) => props.theme.dropDownItem.margin};
|
|
|
|
padding: ${(props) => props.theme.dropDownItem.padding};
|
|
|
|
line-height: ${(props) => props.theme.dropDownItem.lineHeight};
|
|
|
|
box-sizing: border-box;
|
|
|
|
text-align: left;
|
|
|
|
background: none;
|
|
|
|
text-decoration: none;
|
|
|
|
user-select: none;
|
|
|
|
outline: 0 !important;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
|
|
|
|
|
.drop-down-item_icon {
|
|
|
|
path {
|
|
|
|
fill: ${(props) =>
|
|
|
|
props.disabled
|
|
|
|
? props.theme.dropDownItem.icon.disableColor
|
|
|
|
: props.theme.dropDownItem.icon.color};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
${fontStyle}
|
|
|
|
|
|
|
|
font-weight: ${(props) => props.theme.dropDownItem.fontWeight};
|
|
|
|
font-size: ${(props) => props.theme.dropDownItem.fontSize};
|
|
|
|
color: ${(props) => props.theme.dropDownItem.color};
|
|
|
|
text-transform: none;
|
|
|
|
|
|
|
|
${itemTruncate}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.noHover
|
|
|
|
? props.theme.dropDownItem.backgroundColor
|
|
|
|
: props.theme.dropDownItem.hoverBackgroundColor};
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.isSeparator &&
|
|
|
|
css`
|
|
|
|
padding: ${props.theme.dropDownItem.separator.padding};
|
|
|
|
border-bottom: ${props.theme.dropDownItem.separator.borderBottom};
|
|
|
|
cursor: default;
|
|
|
|
margin: ${props.theme.dropDownItem.separator.margin};
|
|
|
|
line-height: ${props.theme.dropDownItem.separator.lineHeight};
|
|
|
|
height: ${props.theme.dropDownItem.separator.height};
|
|
|
|
width: ${props.theme.dropDownItem.separator.width};
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
`}
|
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.isHeader &&
|
2021-03-18 13:24:48 +00:00
|
|
|
css`
|
|
|
|
${disabledAndHeaderStyle}
|
2021-02-10 11:32:42 +00:00
|
|
|
|
2021-03-18 13:24:48 +00:00
|
|
|
text-transform: uppercase;
|
|
|
|
break-before: column;
|
|
|
|
`}
|
2021-02-10 11:32:42 +00:00
|
|
|
|
|
|
|
@media ${tablet} {
|
|
|
|
line-height: ${(props) => props.theme.dropDownItem.tabletLineHeight};
|
|
|
|
}
|
|
|
|
|
|
|
|
${(props) => props.disabled && disabledAndHeaderStyle}
|
|
|
|
`;
|
|
|
|
StyledDropdownItem.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
const IconWrapper = styled.div`
|
|
|
|
display: flex;
|
2021-09-09 10:05:56 +00:00
|
|
|
align-items: center;
|
2021-02-10 11:32:42 +00:00
|
|
|
width: ${(props) => props.theme.dropDownItem.icon.width};
|
|
|
|
margin-right: ${(props) => props.theme.dropDownItem.icon.marginRight};
|
|
|
|
line-height: ${(props) => props.theme.dropDownItem.icon.lineHeight};
|
2021-02-20 14:54:12 +00:00
|
|
|
svg {
|
|
|
|
&:not(:root) {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
2021-02-10 11:32:42 +00:00
|
|
|
`;
|
|
|
|
IconWrapper.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
export { StyledDropdownItem, IconWrapper };
|