2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-20 10:19:01 +00:00
|
|
|
import { ReactSVG } from "react-svg";
|
2021-02-20 14:54:12 +00:00
|
|
|
import styled from "styled-components";
|
2021-02-20 08:46:32 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
import Text from "../../text";
|
2021-02-04 10:28:48 +00:00
|
|
|
import {
|
|
|
|
StyledArrowIcon,
|
|
|
|
StyledIcon,
|
|
|
|
StyledOptionalItem,
|
|
|
|
StyledComboButton,
|
|
|
|
} from "./styled-combobutton";
|
2019-09-18 11:44:01 +00:00
|
|
|
|
2021-02-24 17:11:23 +00:00
|
|
|
import ExpanderDownIcon from "../../../../public/images/expander-down.react.svg";
|
|
|
|
import commonIconsStyles from "../../utils/common-icons-style";
|
2021-02-20 14:54:12 +00:00
|
|
|
|
|
|
|
const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
2019-09-18 11:44:01 +00:00
|
|
|
class ComboButton extends React.Component {
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
noBorder,
|
|
|
|
onClick,
|
|
|
|
isDisabled,
|
|
|
|
innerContainer,
|
|
|
|
innerContainerClassName,
|
|
|
|
selectedOption,
|
|
|
|
optionsLength,
|
|
|
|
withOptions,
|
|
|
|
withAdvancedOptions,
|
|
|
|
isOpen,
|
|
|
|
scaled,
|
2020-10-16 13:16:01 +00:00
|
|
|
size,
|
2021-10-13 14:44:40 +00:00
|
|
|
comboIcon,
|
2020-10-16 13:16:01 +00:00
|
|
|
} = this.props;
|
2019-09-18 11:44:01 +00:00
|
|
|
|
2021-02-05 10:10:03 +00:00
|
|
|
const defaultOption = selectedOption.default;
|
2021-12-13 06:47:27 +00:00
|
|
|
const isSelected = selectedOption.key !== 0;
|
2021-02-05 10:10:03 +00:00
|
|
|
|
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}
|
2021-12-13 06:47:27 +00:00
|
|
|
isSelected={isSelected}
|
2020-03-28 10:04:12 +00:00
|
|
|
className="combo-button"
|
2019-09-18 11:44:01 +00:00
|
|
|
>
|
2020-10-16 13:16:01 +00:00
|
|
|
{innerContainer && (
|
|
|
|
<StyledOptionalItem
|
|
|
|
className={innerContainerClassName}
|
2021-02-05 10:10:03 +00:00
|
|
|
isDisabled={isDisabled}
|
|
|
|
defaultOption={defaultOption}
|
2020-10-16 13:16:01 +00:00
|
|
|
>
|
2019-09-18 11:44:01 +00:00
|
|
|
{innerContainer}
|
|
|
|
</StyledOptionalItem>
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
|
|
|
{selectedOption && selectedOption.icon && (
|
2021-02-05 10:10:03 +00:00
|
|
|
<StyledIcon
|
|
|
|
className="forceColor"
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
defaultOption={defaultOption}
|
2021-12-13 07:03:32 +00:00
|
|
|
isSelected={isSelected}
|
2021-02-05 10:10:03 +00:00
|
|
|
>
|
2021-02-20 14:54:12 +00:00
|
|
|
<ReactSVG
|
|
|
|
src={selectedOption.icon}
|
|
|
|
className="combo-button_selected-icon"
|
|
|
|
/>
|
2019-09-18 11:44:01 +00:00
|
|
|
</StyledIcon>
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
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"
|
|
|
|
>
|
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}
|
2020-10-16 13:16:01 +00:00
|
|
|
isOpen={isOpen}
|
2020-10-28 14:36:38 +00:00
|
|
|
className="combo-buttons_arrow-icon"
|
2020-10-16 13:16:01 +00:00
|
|
|
>
|
2021-10-13 14:44:40 +00:00
|
|
|
{(withOptions || withAdvancedOptions) &&
|
|
|
|
(comboIcon ? (
|
|
|
|
<ReactSVG
|
|
|
|
src={comboIcon}
|
2022-03-21 09:38:28 +00:00
|
|
|
className="combo-buttons_expander-icon"
|
2021-10-13 14:44:40 +00:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<StyledExpanderDownIcon
|
|
|
|
size="scale"
|
|
|
|
className="combo-buttons_expander-icon"
|
|
|
|
/>
|
|
|
|
))}
|
2019-09-18 11:44:01 +00:00
|
|
|
</StyledArrowIcon>
|
|
|
|
</StyledComboButton>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ComboButton.propTypes = {
|
|
|
|
noBorder: PropTypes.bool,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
selectedOption: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.object),
|
2020-10-16 13:16:01 +00:00
|
|
|
PropTypes.object,
|
2019-09-18 11:44:01 +00:00
|
|
|
]),
|
|
|
|
withOptions: PropTypes.bool,
|
|
|
|
optionsLength: PropTypes.number,
|
|
|
|
withAdvancedOptions: PropTypes.bool,
|
|
|
|
innerContainer: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2020-10-16 13:16:01 +00:00
|
|
|
PropTypes.node,
|
2019-09-18 11:44:01 +00:00
|
|
|
]),
|
|
|
|
innerContainerClassName: PropTypes.string,
|
|
|
|
isOpen: PropTypes.bool,
|
2020-10-16 13:16:01 +00:00
|
|
|
size: PropTypes.oneOf(["base", "middle", "big", "huge", "content"]),
|
2019-09-18 11:44:01 +00:00
|
|
|
scaled: PropTypes.bool,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: PropTypes.func,
|
2021-10-13 14:44:40 +00:00
|
|
|
comboIcon: PropTypes.string,
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-09-18 11:44:01 +00:00
|
|
|
|
|
|
|
ComboButton.defaultProps = {
|
|
|
|
noBorder: false,
|
|
|
|
isDisabled: false,
|
|
|
|
withOptions: true,
|
|
|
|
withAdvancedOptions: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
innerContainerClassName: "innerContainer",
|
2019-09-18 11:44:01 +00:00
|
|
|
isOpen: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "content",
|
|
|
|
scaled: false,
|
|
|
|
};
|
2019-09-18 11:44:01 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
export default ComboButton;
|