2021-10-14 15:18:08 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import { ReactSVG } from "react-svg";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import Button from "../button";
|
2022-08-18 12:38:21 +00:00
|
|
|
import DropDown from "../drop-down";
|
|
|
|
import DropDownItem from "../drop-down-item";
|
2022-06-21 13:27:35 +00:00
|
|
|
import { mobile, tablet, hugeMobile } from "../utils/device";
|
2022-04-05 07:45:55 +00:00
|
|
|
import { Base } from "../themes";
|
2022-06-22 11:47:46 +00:00
|
|
|
import { isChrome, browserVersion } from "react-device-detect";
|
2021-10-14 15:18:08 +00:00
|
|
|
|
|
|
|
const StyledButton = styled(Button)`
|
|
|
|
border: none;
|
2022-08-18 07:10:09 +00:00
|
|
|
padding: 0 10px;
|
|
|
|
height: 100%;
|
2021-10-15 11:33:48 +00:00
|
|
|
min-width: fit-content;
|
2021-10-14 15:18:08 +00:00
|
|
|
|
2022-04-05 08:05:00 +00:00
|
|
|
background-color: ${(props) => props.theme.button.backgroundColor.base};
|
|
|
|
|
2022-08-18 07:10:09 +00:00
|
|
|
.combo-button_selected-icon {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
2022-04-05 08:05:00 +00:00
|
|
|
:hover {
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.theme.button.backgroundColor.baseHover};
|
|
|
|
}
|
|
|
|
:active {
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.theme.button.backgroundColor.baseActive};
|
|
|
|
}
|
2022-04-05 07:45:55 +00:00
|
|
|
|
2022-03-21 09:33:28 +00:00
|
|
|
svg {
|
2022-07-20 05:40:11 +00:00
|
|
|
path[fill] {
|
2022-03-21 09:33:28 +00:00
|
|
|
fill: ${(props) => props.theme.button.color.base};
|
|
|
|
}
|
2022-07-20 05:40:11 +00:00
|
|
|
|
|
|
|
path[stroke] {
|
|
|
|
stroke: ${(props) => props.theme.button.color.base};
|
|
|
|
}
|
2022-03-21 09:33:28 +00:00
|
|
|
}
|
|
|
|
|
2021-10-15 11:33:48 +00:00
|
|
|
:hover,
|
|
|
|
:active {
|
2021-10-14 15:18:08 +00:00
|
|
|
border: none;
|
2021-10-22 12:53:26 +00:00
|
|
|
background-color: unset;
|
2022-05-15 19:56:13 +00:00
|
|
|
}
|
2022-03-21 09:33:28 +00:00
|
|
|
|
2022-05-15 19:56:13 +00:00
|
|
|
:hover {
|
2022-03-21 09:33:28 +00:00
|
|
|
svg {
|
2022-07-20 05:40:11 +00:00
|
|
|
path[fill] {
|
2022-03-21 09:33:28 +00:00
|
|
|
fill: ${(props) => props.theme.button.color.baseHover};
|
|
|
|
}
|
2022-07-20 05:40:11 +00:00
|
|
|
|
|
|
|
path[stroke] {
|
|
|
|
stroke: ${(props) => props.theme.button.color.baseHover};
|
|
|
|
}
|
2022-03-21 09:33:28 +00:00
|
|
|
}
|
2021-10-14 15:18:08 +00:00
|
|
|
}
|
|
|
|
|
2022-05-15 19:56:13 +00:00
|
|
|
:active {
|
|
|
|
svg {
|
2022-07-20 05:40:11 +00:00
|
|
|
path[fill] {
|
2022-05-15 19:56:13 +00:00
|
|
|
fill: ${(props) => props.theme.button.color.baseActive};
|
|
|
|
}
|
2022-07-20 05:40:11 +00:00
|
|
|
|
|
|
|
path[stroke] {
|
|
|
|
stroke: ${(props) => props.theme.button.color.baseActive};
|
|
|
|
}
|
2022-05-15 19:56:13 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-14 15:18:08 +00:00
|
|
|
.btnIcon {
|
|
|
|
padding-right: 8px;
|
|
|
|
}
|
|
|
|
|
2022-03-24 14:57:36 +00:00
|
|
|
.button-content {
|
|
|
|
@media ${tablet} {
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 0px;
|
|
|
|
}
|
2022-06-22 11:47:46 +00:00
|
|
|
|
|
|
|
${isChrome &&
|
|
|
|
browserVersion <= 85 &&
|
|
|
|
`
|
|
|
|
/* TODO: remove if editors core version 85+ */
|
|
|
|
> div {
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
|
|
@media ${tablet} {
|
|
|
|
margin-right: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`}
|
2022-03-24 14:57:36 +00:00
|
|
|
}
|
|
|
|
|
2021-10-14 15:18:08 +00:00
|
|
|
@media ${tablet} {
|
|
|
|
display: flex;
|
2022-03-25 09:10:23 +00:00
|
|
|
justify-content: center;
|
2021-10-14 15:18:08 +00:00
|
|
|
flex-direction: column;
|
2022-03-25 09:10:23 +00:00
|
|
|
padding: 0px 12px;
|
2021-10-14 15:18:08 +00:00
|
|
|
.btnIcon {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
}
|
2021-10-15 11:33:48 +00:00
|
|
|
|
2022-06-21 14:11:29 +00:00
|
|
|
@media ${mobile}, ${hugeMobile} {
|
2022-03-25 09:10:23 +00:00
|
|
|
padding: 0 16px;
|
2021-10-15 11:33:48 +00:00
|
|
|
font-size: 0;
|
|
|
|
line-height: 0;
|
|
|
|
}
|
2021-10-14 15:18:08 +00:00
|
|
|
`;
|
|
|
|
|
2022-04-05 07:45:55 +00:00
|
|
|
StyledButton.defaultProps = { theme: Base };
|
|
|
|
|
2021-10-14 15:18:08 +00:00
|
|
|
const GroupMenuItem = ({ item }) => {
|
2022-08-18 12:38:21 +00:00
|
|
|
const buttonRef = React.useRef(null);
|
|
|
|
|
|
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
|
|
|
|
const onClickOutside = () => {
|
|
|
|
setOpen(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onClickAction = (e) => {
|
|
|
|
onClick && onClick(e);
|
|
|
|
|
|
|
|
if (withDropDown) {
|
|
|
|
setOpen(true);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const {
|
|
|
|
label,
|
|
|
|
disabled,
|
|
|
|
onClick,
|
|
|
|
iconUrl,
|
|
|
|
title,
|
|
|
|
withDropDown,
|
|
|
|
options,
|
|
|
|
} = item;
|
2021-10-14 15:18:08 +00:00
|
|
|
return (
|
2022-04-20 13:57:06 +00:00
|
|
|
<>
|
|
|
|
{disabled ? (
|
|
|
|
<></>
|
|
|
|
) : (
|
2022-08-18 12:38:21 +00:00
|
|
|
<>
|
|
|
|
<StyledButton
|
|
|
|
label={label}
|
|
|
|
title={title || label}
|
|
|
|
isDisabled={disabled}
|
|
|
|
onClick={onClickAction}
|
|
|
|
icon={
|
|
|
|
<ReactSVG src={iconUrl} className="combo-button_selected-icon" />
|
|
|
|
}
|
|
|
|
ref={buttonRef}
|
|
|
|
/>
|
|
|
|
{withDropDown && (
|
|
|
|
<DropDown
|
|
|
|
open={open}
|
|
|
|
clickOutsideAction={onClickOutside}
|
|
|
|
forwardedRef={buttonRef}
|
|
|
|
>
|
|
|
|
{options.map((option) => (
|
|
|
|
<DropDownItem {...option} />
|
|
|
|
))}
|
|
|
|
</DropDown>
|
|
|
|
)}
|
|
|
|
</>
|
2022-04-20 13:57:06 +00:00
|
|
|
)}
|
|
|
|
</>
|
2021-10-14 15:18:08 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
GroupMenuItem.propTypes = {
|
|
|
|
item: PropTypes.object,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default GroupMenuItem;
|