2021-06-29 12:27:46 +00:00
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
import Base from "../themes/base";
|
|
|
|
|
|
|
|
const StyledViewSelector = styled.div`
|
|
|
|
height: 32px;
|
2021-06-29 19:02:12 +00:00
|
|
|
width: ${(props) => `calc(${props.countItems} * 32px)`};
|
2021-06-29 12:27:46 +00:00
|
|
|
position: relative;
|
|
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
2021-06-29 19:02:12 +00:00
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.countItems > 2
|
|
|
|
? css`
|
|
|
|
.view-selector-icon:hover {
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
.view-selector-icon:not(:first-child) {
|
|
|
|
margin-left: -1px;
|
|
|
|
}
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
.view-selector-icon:first-child {
|
|
|
|
border-right: none;
|
|
|
|
}
|
|
|
|
.view-selector-icon:last-child {
|
|
|
|
border-left: none;
|
|
|
|
}
|
|
|
|
`}
|
2021-06-29 12:27:46 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const firstItemStyle = css`
|
|
|
|
border-top-left-radius: 3px;
|
|
|
|
border-bottom-left-radius: 3px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const lastItemStyle = css`
|
|
|
|
border-top-right-radius: 3px;
|
|
|
|
border-bottom-right-radius: 3px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const IconWrapper = styled.div`
|
|
|
|
position: relative;
|
|
|
|
width: 32px;
|
|
|
|
height: 100%;
|
|
|
|
padding: 8px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border: 1px solid;
|
|
|
|
|
2021-06-29 19:02:12 +00:00
|
|
|
${(props) => props.isChecked && `z-index: 1;`}
|
|
|
|
|
2021-06-29 12:27:46 +00:00
|
|
|
border-color: ${(props) =>
|
|
|
|
props.isDisabled
|
|
|
|
? props.theme.viewSelector.disabledFillColor
|
|
|
|
: props.isChecked
|
|
|
|
? props.theme.viewSelector.checkedFillColor
|
|
|
|
: props.theme.viewSelector.borderColor};
|
|
|
|
|
|
|
|
${(props) => props.firstItem && firstItemStyle}
|
|
|
|
${(props) => props.lastItem && lastItemStyle}
|
|
|
|
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.isChecked
|
|
|
|
? props.isDisabled
|
|
|
|
? props.theme.viewSelector.disabledFillColor
|
|
|
|
: props.theme.viewSelector.checkedFillColor
|
|
|
|
: props.isDisabled
|
|
|
|
? props.theme.viewSelector.fillColorDisabled
|
|
|
|
: props.theme.viewSelector.fillColor};
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
${(props) =>
|
|
|
|
props.isDisabled || props.isChecked
|
|
|
|
? css`
|
|
|
|
cursor: default;
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
cursor: pointer;
|
|
|
|
border: 1px solid
|
|
|
|
${(props) => props.theme.viewSelector.hoverBorderColor};
|
|
|
|
`}
|
|
|
|
}
|
|
|
|
svg {
|
|
|
|
width: 15px;
|
|
|
|
height: 15px;
|
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
!props.isDisabled
|
|
|
|
? !props.isChecked
|
|
|
|
? css`
|
|
|
|
path {
|
|
|
|
fill: ${(props) => props.theme.viewSelector.checkedFillColor};
|
|
|
|
}
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
path {
|
|
|
|
fill: ${(props) => props.theme.viewSelector.fillColor};
|
|
|
|
}
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
path {
|
|
|
|
fill: ${(props) =>
|
|
|
|
props.theme.viewSelector.disabledFillColorInner};
|
|
|
|
}
|
|
|
|
`};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
IconWrapper.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
StyledViewSelector.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
export { StyledViewSelector, IconWrapper };
|