2021-02-03 13:47:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-24 17:11:23 +00:00
|
|
|
import NoUserSelect from "../utils/commonStyles";
|
2021-02-25 21:19:45 +00:00
|
|
|
import Base from "../themes/base";
|
2022-03-11 10:41:20 +00:00
|
|
|
import { isDesktop } from "../utils/device";
|
2021-02-03 13:47:01 +00:00
|
|
|
|
|
|
|
const activeCss = css`
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.backgroundColor.primaryActive
|
|
|
|
: props.theme.button.backgroundColor.baseActive};
|
|
|
|
|
|
|
|
color: ${(props) =>
|
|
|
|
props.primary
|
2021-12-12 11:41:50 +00:00
|
|
|
? props.theme.button.color.primaryActive
|
|
|
|
: props.theme.button.color.baseActive};
|
2021-02-03 13:47:01 +00:00
|
|
|
|
|
|
|
${(props) =>
|
2021-12-12 11:41:50 +00:00
|
|
|
!props.primary
|
|
|
|
? css`
|
|
|
|
border: ${(props) => props.theme.button.border.baseActive};
|
|
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
border: ${(props) => props.theme.button.border.primaryActive};
|
|
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
|
|
`}
|
2021-12-15 08:17:36 +00:00
|
|
|
|
|
|
|
.btnIcon {
|
|
|
|
svg {
|
|
|
|
path {
|
|
|
|
fill: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.color.primaryActive
|
|
|
|
: props.theme.button.color.baseActive};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-02-03 13:47:01 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const hoverCss = css`
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.backgroundColor.primaryHover
|
|
|
|
: props.theme.button.backgroundColor.baseHover};
|
|
|
|
|
|
|
|
color: ${(props) =>
|
|
|
|
props.primary
|
2021-12-12 11:41:50 +00:00
|
|
|
? props.theme.button.color.primaryHover
|
|
|
|
: props.theme.button.color.baseHover};
|
2021-02-03 13:47:01 +00:00
|
|
|
|
|
|
|
${(props) =>
|
2021-12-12 11:41:50 +00:00
|
|
|
!props.primary
|
|
|
|
? css`
|
|
|
|
border: ${(props) => props.theme.button.border.baseHover};
|
|
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
border: ${(props) => props.theme.button.border.primaryHover};
|
|
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
|
|
`}
|
2021-12-15 08:17:36 +00:00
|
|
|
|
|
|
|
.btnIcon {
|
|
|
|
svg {
|
|
|
|
path {
|
|
|
|
fill: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.color.primaryHover
|
|
|
|
: props.theme.button.color.baseHover};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-12-12 11:41:50 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const disableCss = css`
|
|
|
|
background-color: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.backgroundColor.primaryDisabled
|
|
|
|
: props.theme.button.backgroundColor.baseDisabled};
|
|
|
|
|
|
|
|
color: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.color.primaryDisabled
|
|
|
|
: props.theme.button.color.baseDisabled};
|
2021-02-03 13:47:01 +00:00
|
|
|
|
|
|
|
${(props) =>
|
2021-12-12 11:41:50 +00:00
|
|
|
!props.primary
|
|
|
|
? css`
|
|
|
|
border: ${(props) => props.theme.button.border.baseDisabled};
|
|
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
border: ${(props) => props.theme.button.border.primaryDisabled};
|
|
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
|
|
`}
|
2021-12-15 08:17:36 +00:00
|
|
|
|
|
|
|
.btnIcon {
|
|
|
|
svg {
|
|
|
|
path {
|
|
|
|
fill: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.color.primaryDisabled
|
|
|
|
: props.theme.button.color.baseDisabled};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-02-03 13:47:01 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const heightStyle = (props) => props.theme.button.height[props.size];
|
|
|
|
const fontSizeStyle = (props) => props.theme.button.fontSize[props.size];
|
|
|
|
|
2022-03-17 11:49:26 +00:00
|
|
|
const ButtonWrapper = ({
|
|
|
|
primary,
|
|
|
|
scale,
|
|
|
|
size,
|
|
|
|
isHovered,
|
|
|
|
isClicked,
|
|
|
|
isDisabled,
|
|
|
|
disableHover,
|
|
|
|
isLoading,
|
|
|
|
label,
|
|
|
|
innerRef,
|
|
|
|
minWidth,
|
|
|
|
...props
|
|
|
|
}) => {
|
2021-02-03 13:47:01 +00:00
|
|
|
return <button ref={innerRef} type="button" {...props}></button>;
|
|
|
|
};
|
|
|
|
|
|
|
|
const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
|
|
|
disabled: props.isDisabled || props.isLoading ? "disabled" : "",
|
|
|
|
tabIndex: props.tabIndex,
|
2022-03-11 10:41:20 +00:00
|
|
|
size:
|
|
|
|
props.size === "normal"
|
|
|
|
? isDesktop()
|
|
|
|
? "normalDesktop"
|
|
|
|
: "normalTouchscreen"
|
|
|
|
: props.size,
|
2021-02-03 13:47:01 +00:00
|
|
|
}))`
|
|
|
|
height: ${(props) => heightStyle(props)};
|
|
|
|
font-size: ${(props) => fontSizeStyle(props)};
|
|
|
|
|
|
|
|
color: ${(props) =>
|
2021-12-12 11:41:50 +00:00
|
|
|
!props.primary
|
2021-02-03 13:47:01 +00:00
|
|
|
? props.theme.button.color.base
|
2021-12-12 11:41:50 +00:00
|
|
|
: props.theme.button.color.primary};
|
2021-02-03 13:47:01 +00:00
|
|
|
|
|
|
|
background-color: ${(props) =>
|
2021-12-12 11:41:50 +00:00
|
|
|
props.primary
|
|
|
|
? props.theme.button.backgroundColor.primary
|
2021-02-03 13:47:01 +00:00
|
|
|
: props.theme.button.backgroundColor.base};
|
|
|
|
|
2021-12-12 11:41:50 +00:00
|
|
|
border: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.border.primary
|
|
|
|
: props.theme.button.border.base};
|
|
|
|
|
2022-03-14 16:18:17 +00:00
|
|
|
${(props) => props.scale && `width: 100%;`};
|
2022-03-14 16:22:18 +00:00
|
|
|
min-width: ${(props) =>
|
|
|
|
props.minwidth ? props.minwidth : props.theme.button.minWidth[props.size]};
|
|
|
|
|
2022-03-14 16:03:23 +00:00
|
|
|
padding: ${(props) => `${props.theme.button.padding[props.size]}`};
|
2022-03-14 16:10:10 +00:00
|
|
|
|
2021-02-03 13:47:01 +00:00
|
|
|
cursor: ${(props) =>
|
|
|
|
props.isDisabled || props.isLoading ? "default !important" : "pointer"};
|
|
|
|
|
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
|
|
|
margin: ${(props) => props.theme.margin};
|
|
|
|
display: ${(props) => props.theme.button.display};
|
|
|
|
font-weight: ${(props) => props.theme.button.fontWeight};
|
|
|
|
text-align: ${(props) => props.theme.button.textAlign};
|
|
|
|
text-decoration: ${(props) => props.theme.button.textDecoration};
|
|
|
|
vertical-align: ${(props) => props.theme.button.verticalAlign};
|
|
|
|
border-radius: ${(props) => props.theme.button.borderRadius};
|
|
|
|
-moz-border-radius: ${(props) => props.theme.button.borderRadius};
|
|
|
|
-webkit-border-radius: ${(props) => props.theme.button.borderRadius};
|
|
|
|
|
|
|
|
${NoUserSelect};
|
|
|
|
|
|
|
|
stroke: ${(props) => props.theme.button.stroke};
|
|
|
|
overflow: ${(props) => props.theme.button.overflow};
|
|
|
|
text-overflow: ${(props) => props.theme.button.textOverflow};
|
|
|
|
white-space: ${(props) => props.theme.button.whiteSpace};
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
!props.isDisabled &&
|
|
|
|
!props.isLoading &&
|
|
|
|
(props.isHovered
|
|
|
|
? hoverCss
|
|
|
|
: !props.disableHover &&
|
|
|
|
css`
|
|
|
|
&:hover {
|
|
|
|
${hoverCss}
|
|
|
|
}
|
|
|
|
`)}
|
2021-12-12 11:41:50 +00:00
|
|
|
|
|
|
|
${(props) =>
|
2021-02-03 13:47:01 +00:00
|
|
|
!props.isDisabled &&
|
|
|
|
!props.isLoading &&
|
|
|
|
(props.isClicked
|
|
|
|
? activeCss
|
|
|
|
: css`
|
|
|
|
&:active {
|
|
|
|
${activeCss}
|
|
|
|
}
|
|
|
|
`)}
|
2021-12-12 11:41:50 +00:00
|
|
|
|
|
|
|
${(props) => props.isDisabled && disableCss}
|
|
|
|
|
|
|
|
|
2021-02-03 13:47:01 +00:00
|
|
|
&:focus {
|
|
|
|
outline: ${(props) => props.theme.button.outline};
|
|
|
|
}
|
|
|
|
|
2022-03-11 14:21:52 +00:00
|
|
|
.button-content {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2022-03-11 16:43:17 +00:00
|
|
|
gap: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
width: auto;
|
|
|
|
height: 100%;
|
2022-03-14 15:26:13 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2022-03-11 14:21:52 +00:00
|
|
|
}
|
|
|
|
|
2021-02-03 13:47:01 +00:00
|
|
|
.loader {
|
2022-03-11 14:21:52 +00:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2021-12-12 11:41:50 +00:00
|
|
|
svg {
|
|
|
|
stroke: ${(props) =>
|
|
|
|
props.primary
|
|
|
|
? props.theme.button.loader.primary
|
|
|
|
: props.theme.button.loader.base};
|
|
|
|
}
|
2021-02-03 13:47:01 +00:00
|
|
|
vertical-align: ${(props) =>
|
2022-03-11 10:41:20 +00:00
|
|
|
props.size === "normalTouchscreen" || props.size === "extraSmall"
|
2021-02-03 13:47:01 +00:00
|
|
|
? props.theme.button.middleVerticalAlign
|
2022-03-10 12:14:08 +00:00
|
|
|
: props.size === "small"
|
2021-02-03 13:47:01 +00:00
|
|
|
? props.theme.button.bottomVerticalAlign
|
|
|
|
: props.theme.button.topVerticalAlign};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2022-03-14 15:26:13 +00:00
|
|
|
ButtonWrapper.propTypes = {
|
|
|
|
label: PropTypes.string,
|
|
|
|
primary: PropTypes.bool,
|
2022-03-17 11:49:26 +00:00
|
|
|
size: PropTypes.oneOf([
|
|
|
|
"extraSmall",
|
|
|
|
"small",
|
|
|
|
"normal",
|
|
|
|
"medium",
|
|
|
|
"normalDesktop",
|
|
|
|
"normalTouchscreen",
|
|
|
|
]),
|
2022-03-14 15:26:13 +00:00
|
|
|
scale: PropTypes.bool,
|
|
|
|
icon: PropTypes.node,
|
|
|
|
|
|
|
|
tabIndex: PropTypes.number,
|
|
|
|
|
|
|
|
isHovered: PropTypes.bool,
|
|
|
|
isClicked: PropTypes.bool,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
disableHover: PropTypes.bool,
|
|
|
|
isLoading: PropTypes.bool,
|
|
|
|
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2021-02-03 13:47:01 +00:00
|
|
|
StyledButton.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
export default StyledButton;
|