264 lines
7.0 KiB
JavaScript
264 lines
7.0 KiB
JavaScript
import React from "react";
|
|
import styled, { css } from "styled-components";
|
|
import PropTypes from "prop-types";
|
|
import NoUserSelect from "../utils/commonStyles";
|
|
import Base from "../themes/base";
|
|
|
|
const activeCss = css`
|
|
background-color: ${(props) =>
|
|
props.primary
|
|
? props.theme.button.backgroundColor.primaryActive
|
|
: props.theme.button.backgroundColor.baseActive};
|
|
|
|
color: ${(props) =>
|
|
props.primary
|
|
? props.theme.button.color.primary
|
|
: props.theme.button.color.base};
|
|
|
|
${(props) =>
|
|
!props.primary &&
|
|
css`
|
|
border: ${(props) => props.theme.button.border.baseActive};
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
`}
|
|
`;
|
|
|
|
const hoverCss = css`
|
|
background-color: ${(props) =>
|
|
props.primary
|
|
? props.theme.button.backgroundColor.primaryHover
|
|
: props.theme.button.backgroundColor.baseHover};
|
|
|
|
color: ${(props) =>
|
|
props.primary
|
|
? props.theme.button.color.primary
|
|
: props.theme.button.color.base};
|
|
|
|
${(props) =>
|
|
!props.primary &&
|
|
css`
|
|
border: ${(props) => props.theme.button.border.baseHover};
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
`}
|
|
`;
|
|
|
|
const heightStyle = (props) => props.theme.button.height[props.size];
|
|
const lineHeightStyle = (props) => props.theme.button.lineHeight[props.size];
|
|
const fontSizeStyle = (props) => props.theme.button.fontSize[props.size];
|
|
|
|
const ButtonWrapper = ({
|
|
primary,
|
|
scale,
|
|
size,
|
|
isHovered,
|
|
isClicked,
|
|
isDisabled,
|
|
disableHover,
|
|
isLoading,
|
|
label,
|
|
innerRef,
|
|
minWidth,
|
|
...props
|
|
}) => {
|
|
return <button ref={innerRef} type="button" {...props}></button>;
|
|
};
|
|
|
|
ButtonWrapper.propTypes = {
|
|
label: PropTypes.string,
|
|
primary: PropTypes.bool,
|
|
size: PropTypes.oneOf(["base", "medium", "big", "large"]),
|
|
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,
|
|
};
|
|
const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
|
disabled: props.isDisabled || props.isLoading ? "disabled" : "",
|
|
tabIndex: props.tabIndex,
|
|
}))`
|
|
height: ${(props) => heightStyle(props)};
|
|
line-height: ${(props) => lineHeightStyle(props)};
|
|
font-size: ${(props) => fontSizeStyle(props)};
|
|
|
|
color: ${(props) =>
|
|
(props.primary && props.theme.button.color.primary) ||
|
|
(!props.isDisabled
|
|
? props.theme.button.color.base
|
|
: props.theme.button.color.disabled)};
|
|
|
|
background-color: ${(props) =>
|
|
!props.isDisabled || props.isLoading
|
|
? props.primary
|
|
? props.theme.button.backgroundColor.primary
|
|
: props.theme.button.backgroundColor.base
|
|
: props.primary
|
|
? props.theme.button.backgroundColor.primaryDisabled
|
|
: props.theme.button.backgroundColor.base};
|
|
|
|
${(props) => props.scale && `width: 100%;`}
|
|
|
|
padding: ${(props) =>
|
|
(props.size === "large" &&
|
|
(props.primary
|
|
? props.icon
|
|
? props.label
|
|
? "11px 24px 13px 24px"
|
|
: "11px 11px 13px 11px"
|
|
: props.label
|
|
? "12px 20px 12px 20px"
|
|
: "0px"
|
|
: props.icon
|
|
? props.label
|
|
? "10px 24px 13px 24px"
|
|
: "10px 11px 13px 11px"
|
|
: props.label
|
|
? "11px 20px 12px 20px"
|
|
: "0px")) ||
|
|
(props.size === "big" &&
|
|
(props.primary
|
|
? props.icon
|
|
? props.label
|
|
? "8px 24px 9px 24px"
|
|
: "8px 10px 9px 10px"
|
|
: props.label
|
|
? "8px 16px 8px 16px"
|
|
: "0px"
|
|
: props.icon
|
|
? props.label
|
|
? "7px 24px 9px 24px"
|
|
: "7px 10px 9px 10px"
|
|
: props.label
|
|
? "7px 16px 8px 16px"
|
|
: "0px")) ||
|
|
(props.size === "medium" &&
|
|
(props.primary
|
|
? props.icon
|
|
? props.label
|
|
? "6px 24px 7px 24px"
|
|
: "6px 10px 7px 10px"
|
|
: props.label
|
|
? "7px 16px 7px 16px"
|
|
: "0px"
|
|
: props.icon
|
|
? props.label
|
|
? "5px 24px 7px 24px"
|
|
: "5px 10px 7px 10px"
|
|
: props.label
|
|
? "6px 16px 7px 16px"
|
|
: "0px")) ||
|
|
(props.size === "base" &&
|
|
(props.primary
|
|
? props.icon
|
|
? props.label
|
|
? "3px 20px 5px 20px"
|
|
: "3px 5px 5px 5px"
|
|
: props.label
|
|
? "4px 12px 5px 12px"
|
|
: "0px"
|
|
: props.icon
|
|
? props.label
|
|
? "2px 20px 5px 20px"
|
|
: "2px 5px 5px 5px"
|
|
: props.label
|
|
? "3px 12px 5px 12px"
|
|
: "0px"))};
|
|
|
|
${(props) => (props.minwidth ? `min-width: ${props.minwidth};` : null)}
|
|
|
|
cursor: ${(props) =>
|
|
props.isDisabled || props.isLoading ? "default !important" : "pointer"};
|
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
|
border: none;
|
|
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.primary &&
|
|
css`
|
|
box-sizing: ${(props) => props.theme.button.boxSizing};
|
|
border: ${(props) =>
|
|
!props.isDisabled && !props.isLoading
|
|
? props.theme.button.border.base
|
|
: props.theme.button.border.baseDisabled};
|
|
`}
|
|
|
|
${(props) =>
|
|
!props.isDisabled &&
|
|
!props.isLoading &&
|
|
(props.isHovered
|
|
? hoverCss
|
|
: !props.disableHover &&
|
|
css`
|
|
&:hover {
|
|
${hoverCss}
|
|
}
|
|
`)}
|
|
|
|
${(props) =>
|
|
!props.isDisabled &&
|
|
!props.isLoading &&
|
|
(props.isClicked
|
|
? activeCss
|
|
: css`
|
|
&:active {
|
|
${activeCss}
|
|
}
|
|
`)}
|
|
|
|
&:focus {
|
|
outline: ${(props) => props.theme.button.outline};
|
|
}
|
|
|
|
.btnIcon,
|
|
.loader {
|
|
display: ${(props) => props.theme.button.display};
|
|
vertical-align: ${(props) => props.theme.button.topVerticalAlign};
|
|
}
|
|
|
|
.loader {
|
|
vertical-align: ${(props) =>
|
|
props.size === "large" || props.size === "base"
|
|
? props.theme.button.middleVerticalAlign
|
|
: props.size === "medium"
|
|
? props.theme.button.bottomVerticalAlign
|
|
: props.theme.button.topVerticalAlign};
|
|
}
|
|
|
|
${(props) =>
|
|
props.label &&
|
|
css`
|
|
.btnIcon,
|
|
.loader {
|
|
padding-right: ${(props) => props.theme.button.paddingRight};
|
|
}
|
|
`}
|
|
`;
|
|
|
|
StyledButton.defaultProps = { theme: Base };
|
|
|
|
export default StyledButton;
|