2019-09-18 11:44:01 +00:00
|
|
|
import React from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import styled from 'styled-components';
|
2019-09-30 11:52:23 +00:00
|
|
|
import { Icons } from '../../icons';
|
2019-12-04 09:36:13 +00:00
|
|
|
import Text from '../../text'
|
2019-09-18 11:44:01 +00:00
|
|
|
|
|
|
|
const StyledComboButton = styled.div`
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2020-02-03 13:08:18 +00:00
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
2019-09-18 11:44:01 +00:00
|
|
|
|
|
|
|
height: ${props => props.noBorder ? `18px` : `30px`};
|
|
|
|
width: ${props =>
|
|
|
|
(props.scaled && '100%') ||
|
|
|
|
(props.size === 'base' && '173px') ||
|
|
|
|
(props.size === 'middle' && '300px') ||
|
|
|
|
(props.size === 'big' && '350px') ||
|
|
|
|
(props.size === 'huge' && '500px') ||
|
|
|
|
(props.size === 'content' && 'fit-content')
|
|
|
|
};
|
|
|
|
|
|
|
|
-webkit-touch-callout: none;
|
|
|
|
-webkit-user-select: none;
|
|
|
|
-moz-user-select: none;
|
|
|
|
-ms-user-select: none;
|
|
|
|
user-select: none;
|
|
|
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
|
|
|
background: ${props => !props.noBorder ? '#FFFFFF' : 'none'};
|
|
|
|
|
|
|
|
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
|
|
|
|
|
2019-12-05 11:15:03 +00:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
2019-09-18 11:44:01 +00:00
|
|
|
${props => !props.noBorder && `
|
|
|
|
border: 1px solid #D0D5DA;
|
|
|
|
border-radius: 3px;
|
|
|
|
`}
|
2019-12-27 13:29:50 +00:00
|
|
|
|
|
|
|
border-color: ${props => props.isOpen && '#2DA7DB'};
|
2019-09-18 11:44:01 +00:00
|
|
|
|
|
|
|
${props => props.isDisabled && !props.noBorder && `
|
|
|
|
border-color: #ECEEF1;
|
|
|
|
background: #F8F9F9;
|
|
|
|
`}
|
|
|
|
|
|
|
|
${props => !props.noBorder && `
|
|
|
|
height: 32px;
|
|
|
|
`}
|
|
|
|
|
|
|
|
:hover{
|
|
|
|
border-color: ${props => props.isOpen ? '#2DA7DB' : '#A3A9AE'};
|
2019-09-19 10:44:53 +00:00
|
|
|
cursor: ${props => (props.isDisabled || (!props.containOptions && !props.withAdvancedOptions))
|
2019-12-04 09:36:13 +00:00
|
|
|
? 'default'
|
|
|
|
: 'pointer'};
|
2019-09-18 11:44:01 +00:00
|
|
|
|
|
|
|
${props => props.isDisabled && `
|
|
|
|
border-color: #ECEEF1;
|
|
|
|
`}
|
|
|
|
}
|
2019-09-30 11:52:23 +00:00
|
|
|
.combo-button-label{
|
2019-12-27 10:26:11 +00:00
|
|
|
margin-right: ${props => props.noBorder ? `4px` : `8px`};
|
2019-12-27 13:10:06 +00:00
|
|
|
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
|
2019-09-30 11:52:23 +00:00
|
|
|
max-width: 175px;
|
|
|
|
${props => props.noBorder && `
|
2019-12-16 11:14:19 +00:00
|
|
|
line-height: 15px;
|
2020-01-10 15:27:22 +00:00
|
|
|
text-decoration: underline dashed transparent;
|
2019-09-30 11:52:23 +00:00
|
|
|
`}
|
2019-12-27 13:51:13 +00:00
|
|
|
|
|
|
|
${props => props.isOpen && props.noBorder && `
|
2020-01-10 15:27:22 +00:00
|
|
|
text-decoration: underline dashed;
|
2019-12-27 13:51:13 +00:00
|
|
|
`};
|
2019-09-30 11:52:23 +00:00
|
|
|
}
|
|
|
|
.combo-button-label:hover{
|
2019-12-27 10:26:11 +00:00
|
|
|
${props => props.noBorder && !props.isDisabled && `
|
2020-01-10 15:27:22 +00:00
|
|
|
text-decoration: underline dashed;
|
2019-09-30 11:52:23 +00:00
|
|
|
`}
|
|
|
|
}
|
2019-09-18 11:44:01 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledOptionalItem = styled.div`
|
|
|
|
margin-right: 8px;
|
2019-12-27 11:41:01 +00:00
|
|
|
|
|
|
|
path {
|
|
|
|
fill: ${props => props.color && props.color};
|
|
|
|
}
|
2019-09-18 11:44:01 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledIcon = styled.div`
|
|
|
|
width: 16px;
|
|
|
|
margin-right: 8px;
|
|
|
|
margin-top: -2px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledArrowIcon = styled.div`
|
|
|
|
display: flex;
|
|
|
|
align-self: start;
|
|
|
|
width: ${props => props.needDisplay ? '8px' : '0px'};
|
|
|
|
flex: 0 0 ${props => props.needDisplay ? '8px' : '0px'};
|
|
|
|
margin-top: ${props => props.noBorder ? `5px` : `12px`};
|
|
|
|
margin-right: ${props => props.needDisplay ? '8px' : '0px'};
|
|
|
|
margin-left: ${props => props.needDisplay ? 'auto' : '0px'};
|
|
|
|
|
|
|
|
${props => props.isOpen && `
|
|
|
|
transform: scale(1, -1);
|
|
|
|
`}
|
|
|
|
`;
|
|
|
|
|
|
|
|
class ComboButton extends React.Component {
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
noBorder,
|
|
|
|
onClick,
|
|
|
|
isDisabled,
|
|
|
|
innerContainer,
|
|
|
|
innerContainerClassName,
|
|
|
|
selectedOption,
|
|
|
|
optionsLength,
|
|
|
|
withOptions,
|
|
|
|
withAdvancedOptions,
|
|
|
|
isOpen,
|
|
|
|
scaled,
|
|
|
|
size } = this.props;
|
|
|
|
|
|
|
|
const boxIconColor = isDisabled ? '#D0D5DA' : '#333333';
|
|
|
|
const arrowIconColor = isDisabled ? '#D0D5DA' : '#A3A9AE';
|
2019-12-27 11:41:01 +00:00
|
|
|
const defaultIconColor = selectedOption.default ? arrowIconColor : boxIconColor;
|
2019-09-18 11:44:01 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledComboButton
|
|
|
|
isOpen={isOpen}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
noBorder={noBorder}
|
|
|
|
containOptions={optionsLength}
|
2019-09-19 10:44:53 +00:00
|
|
|
withAdvancedOptions={withAdvancedOptions}
|
2019-09-18 11:44:01 +00:00
|
|
|
onClick={onClick}
|
|
|
|
scaled={scaled}
|
|
|
|
size={size}
|
2020-03-28 10:04:12 +00:00
|
|
|
className="combo-button"
|
2019-09-18 11:44:01 +00:00
|
|
|
>
|
|
|
|
{innerContainer &&
|
2019-12-27 11:41:01 +00:00
|
|
|
<StyledOptionalItem className={innerContainerClassName} color={defaultIconColor}>
|
2019-09-18 11:44:01 +00:00
|
|
|
{innerContainer}
|
|
|
|
</StyledOptionalItem>
|
|
|
|
}
|
|
|
|
{selectedOption && selectedOption.icon &&
|
2019-12-27 11:41:01 +00:00
|
|
|
<StyledIcon className="forceColor">
|
2019-09-18 11:44:01 +00:00
|
|
|
{React.createElement(Icons[selectedOption.icon],
|
|
|
|
{
|
|
|
|
size: 'scale',
|
2019-12-27 11:41:01 +00:00
|
|
|
color: defaultIconColor,
|
2019-09-18 11:44:01 +00:00
|
|
|
isfill: true
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</StyledIcon>
|
|
|
|
}
|
2019-12-04 09:36:13 +00:00
|
|
|
<Text
|
2019-09-30 11:52:23 +00:00
|
|
|
noBorder={noBorder}
|
|
|
|
title={selectedOption.label}
|
|
|
|
as="div"
|
|
|
|
truncate={true}
|
|
|
|
fontWeight={600}
|
|
|
|
className="combo-button-label"
|
2020-02-12 10:07:39 +00:00
|
|
|
//color={selectedOption.default ? arrowIconColor +' !important' : boxIconColor}
|
2019-09-30 11:52:23 +00:00
|
|
|
>
|
2019-09-18 11:44:01 +00:00
|
|
|
{selectedOption.label}
|
2019-12-04 09:36:13 +00:00
|
|
|
</Text>
|
2019-09-18 11:44:01 +00:00
|
|
|
<StyledArrowIcon
|
|
|
|
needDisplay={withOptions || withAdvancedOptions}
|
|
|
|
noBorder={noBorder}
|
|
|
|
isOpen={isOpen}>
|
|
|
|
{(withOptions || withAdvancedOptions) &&
|
|
|
|
React.createElement(Icons['ExpanderDownIcon'],
|
|
|
|
{
|
|
|
|
size: 'scale',
|
|
|
|
color: arrowIconColor,
|
|
|
|
isfill: true
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</StyledArrowIcon>
|
|
|
|
</StyledComboButton>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ComboButton.propTypes = {
|
|
|
|
noBorder: PropTypes.bool,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
selectedOption: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.object),
|
|
|
|
PropTypes.object
|
|
|
|
]),
|
|
|
|
withOptions: PropTypes.bool,
|
|
|
|
optionsLength: PropTypes.number,
|
|
|
|
withAdvancedOptions: PropTypes.bool,
|
|
|
|
innerContainer: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
innerContainerClassName: PropTypes.string,
|
|
|
|
isOpen: PropTypes.bool,
|
|
|
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'content']),
|
|
|
|
scaled: PropTypes.bool,
|
|
|
|
onClick: PropTypes.func
|
|
|
|
}
|
|
|
|
|
|
|
|
ComboButton.defaultProps = {
|
|
|
|
noBorder: false,
|
|
|
|
isDisabled: false,
|
|
|
|
withOptions: true,
|
|
|
|
withAdvancedOptions: false,
|
|
|
|
innerContainerClassName: 'innerContainer',
|
|
|
|
isOpen: false,
|
|
|
|
size: 'content',
|
|
|
|
scaled: false
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ComboButton;
|