2019-05-28 07:20:49 +00:00
|
|
|
import React from 'react';
|
|
|
|
import styled, { css } from 'styled-components';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-06-06 09:16:14 +00:00
|
|
|
import Loader from '../loader';
|
2019-09-17 11:19:45 +00:00
|
|
|
import isEqual from "lodash/isEqual";
|
2019-05-28 07:20:49 +00:00
|
|
|
|
2019-07-01 07:01:57 +00:00
|
|
|
const activeCss = css`
|
|
|
|
background-color: ${props => (props.primary ? '#1F97CA' : '#ECEEF1')};
|
|
|
|
color: ${props => (props.primary ? '#ffffff' : '#333333')};
|
2019-05-28 07:20:49 +00:00
|
|
|
|
|
|
|
${props =>
|
|
|
|
!props.primary &&
|
|
|
|
css`
|
2019-07-01 07:01:57 +00:00
|
|
|
border: 1px solid #2DA7DB;
|
|
|
|
box-sizing: border-box;
|
2019-05-28 07:20:49 +00:00
|
|
|
`}
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
2019-07-01 07:01:57 +00:00
|
|
|
const hoverCss = css`
|
|
|
|
background-color: ${props => (props.primary ? '#3DB8EC' : '#FFFFFF')};
|
|
|
|
color: ${props => (props.primary ? '#ffffff' : '#333333')};
|
|
|
|
|
|
|
|
${props =>
|
|
|
|
!props.primary &&
|
|
|
|
css`
|
|
|
|
border: 1px solid #2DA7DB;
|
|
|
|
box-sizing: border-box;
|
|
|
|
`}
|
2019-05-28 07:20:49 +00:00
|
|
|
`;
|
|
|
|
|
2019-09-09 12:26:40 +00:00
|
|
|
// eslint-disable-next-line no-unused-vars
|
2020-02-02 11:01:43 +00:00
|
|
|
const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled, isLoading, label, innerRef, ...props}) => <button ref={innerRef} type="button" {...props}></button>;
|
2019-07-01 07:01:57 +00:00
|
|
|
|
2019-09-09 12:26:40 +00:00
|
|
|
ButtonWrapper.propTypes = {
|
|
|
|
label: PropTypes.string,
|
|
|
|
primary: PropTypes.bool,
|
|
|
|
size: PropTypes.oneOf(['base', 'medium', 'big']),
|
|
|
|
scale: PropTypes.bool,
|
|
|
|
icon: PropTypes.node,
|
|
|
|
|
|
|
|
tabIndex: PropTypes.number,
|
|
|
|
|
|
|
|
isHovered: PropTypes.bool,
|
|
|
|
isClicked: PropTypes.bool,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
isLoading: PropTypes.bool,
|
|
|
|
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
2019-07-01 07:01:57 +00:00
|
|
|
const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
2019-06-06 09:16:14 +00:00
|
|
|
disabled: props.isDisabled || props.isLoading ? 'disabled' : '',
|
2019-05-28 07:20:49 +00:00
|
|
|
tabIndex: props.tabIndex
|
|
|
|
}))`
|
2020-07-15 14:34:01 +00:00
|
|
|
min-width: ${props =>
|
|
|
|
props.size === 'base' ? '60px' : '100px'
|
|
|
|
};
|
|
|
|
|
2019-05-28 07:20:49 +00:00
|
|
|
height: ${props =>
|
2020-07-15 14:17:37 +00:00
|
|
|
(props.size === 'large' && '44px') ||
|
2019-07-01 07:01:57 +00:00
|
|
|
(props.size === 'big' && '36px') ||
|
2019-07-18 13:24:36 +00:00
|
|
|
(props.size === 'medium' && '32px') ||
|
2020-07-15 14:17:37 +00:00
|
|
|
(props.size === 'base' && '24px')
|
2019-05-28 07:20:49 +00:00
|
|
|
};
|
|
|
|
|
2019-07-01 07:01:57 +00:00
|
|
|
line-height: ${props =>
|
2020-07-15 14:58:33 +00:00
|
|
|
(props.size === 'large' && '20px') ||
|
|
|
|
(props.size === 'big' && '18px') ||
|
|
|
|
(props.size === 'medium' && '15px') ||
|
2019-07-01 07:01:57 +00:00
|
|
|
(props.size === 'base' && '16px')
|
|
|
|
};
|
2019-05-28 07:20:49 +00:00
|
|
|
|
|
|
|
font-size: ${props =>
|
2020-07-15 14:17:37 +00:00
|
|
|
(props.size === 'large' && '16px') ||
|
2019-07-01 07:01:57 +00:00
|
|
|
(props.size === 'big' && '14px') ||
|
2019-07-18 13:24:36 +00:00
|
|
|
(props.size === 'medium' && '13px') ||
|
2019-07-01 07:01:57 +00:00
|
|
|
(props.size === 'base' && '12px')
|
2019-05-28 07:20:49 +00:00
|
|
|
};
|
|
|
|
|
2019-07-01 07:01:57 +00:00
|
|
|
color: ${props => (props.primary && '#FFFFFF') || (!props.isDisabled ? '#333333' : '#ECEEF1')};
|
2019-05-28 07:20:49 +00:00
|
|
|
|
2019-07-01 07:01:57 +00:00
|
|
|
background-color: ${props =>
|
|
|
|
(!props.isDisabled || props.isLoading
|
|
|
|
? (props.primary ? '#2DA7DB' : '#FFFFFF')
|
|
|
|
: (props.primary ? '#A6DCF2' : '#FFFFFF'))
|
|
|
|
};
|
2019-05-28 07:20:49 +00:00
|
|
|
|
2019-07-31 18:16:29 +00:00
|
|
|
${props => props.scale && `width: 100%;`}
|
|
|
|
|
2019-05-28 07:20:49 +00:00
|
|
|
padding: ${props =>
|
2020-07-15 14:17:37 +00:00
|
|
|
(props.size === 'large' && (props.primary
|
|
|
|
? (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
|
|
|
|
: (props.label ? '12px 20px 12px 20px' : '12px 20px 12px 20px')
|
2020-07-15 14:17:37 +00:00
|
|
|
)
|
|
|
|
: (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
|
|
|
|
: (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
|
2020-07-15 14:17:37 +00:00
|
|
|
))
|
|
|
|
) ||
|
2019-07-02 08:04:54 +00:00
|
|
|
(props.size === 'big' && (props.primary
|
|
|
|
? (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
|
|
|
|
: (props.label ? '8px 16px 9px 16px' : '8px 10px 9px 16px')
|
2019-07-02 08:04:54 +00:00
|
|
|
)
|
|
|
|
: (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
|
|
|
|
: (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
|
2019-07-02 08:04:54 +00:00
|
|
|
))
|
|
|
|
) ||
|
2019-07-18 13:24:36 +00:00
|
|
|
(props.size === 'medium' && (props.primary
|
|
|
|
? (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '6px 16px 8px 16px' : '6px 16px 8px 16px')
|
|
|
|
: (props.label ? '6px 16px 8px 16px' : '6px 16px 8px 16px')
|
2019-07-18 13:24:36 +00:00
|
|
|
)
|
|
|
|
: (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '6px 16px 8px 16px' : '6px 16px 7px 16px')
|
|
|
|
: (props.label ? '6px 16px 8px 16px' : '6px 16px 8px 16px')
|
2019-07-18 13:24:36 +00:00
|
|
|
))
|
|
|
|
) ||
|
2019-07-02 08:04:54 +00:00
|
|
|
(props.size === 'base' && (props.primary
|
|
|
|
? (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
|
|
|
|
: (props.label ? '4px 12px 5px 12px' : '4px 12px 5px 12px')
|
2019-07-02 08:04:54 +00:00
|
|
|
)
|
|
|
|
: (props.icon
|
2020-07-15 14:58:33 +00:00
|
|
|
? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
|
|
|
|
: (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
|
2019-07-02 08:04:54 +00:00
|
|
|
))
|
|
|
|
)
|
2019-05-28 07:20:49 +00:00
|
|
|
};
|
|
|
|
|
2019-06-06 09:16:14 +00:00
|
|
|
cursor: ${props => props.isDisabled || props.isLoading ? 'default !important' : 'pointer'};
|
2019-05-28 07:20:49 +00:00
|
|
|
|
|
|
|
font-family: 'Open Sans', sans-serif;
|
|
|
|
border: none;
|
|
|
|
margin: 0;
|
|
|
|
display: inline-block;
|
2019-07-01 07:01:57 +00:00
|
|
|
font-weight: 600;
|
2019-05-28 07:20:49 +00:00
|
|
|
text-align: center;
|
|
|
|
text-decoration: none;
|
|
|
|
vertical-align: middle;
|
|
|
|
border-radius: 3px;
|
|
|
|
-moz-border-radius: 3px;
|
|
|
|
-webkit-border-radius: 3px;
|
|
|
|
touch-callout: none;
|
|
|
|
-o-touch-callout: none;
|
|
|
|
-moz-touch-callout: none;
|
|
|
|
-webkit-touch-callout: none;
|
|
|
|
user-select: none;
|
|
|
|
-o-user-select: none;
|
|
|
|
-moz-user-select: none;
|
|
|
|
-webkit-user-select: none;
|
|
|
|
stroke: none;
|
2019-06-06 09:16:14 +00:00
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
2020-01-31 14:29:54 +00:00
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
2019-05-28 07:20:49 +00:00
|
|
|
|
|
|
|
${props =>
|
|
|
|
!props.primary &&
|
|
|
|
css`
|
2019-07-01 07:01:57 +00:00
|
|
|
border: 1px solid;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-color: ${props => (!props.isDisabled && !props.isLoading) ? '#D0D5DA' : '#ECEEF1'};
|
2019-05-28 07:20:49 +00:00
|
|
|
`}
|
2019-07-01 07:01:57 +00:00
|
|
|
|
|
|
|
${props => (!props.isDisabled && !props.isLoading) && (props.isHovered ? hoverCss : css`
|
|
|
|
&:hover {
|
|
|
|
${hoverCss}
|
2019-05-28 07:20:49 +00:00
|
|
|
}`)
|
|
|
|
}
|
|
|
|
|
2019-07-01 07:01:57 +00:00
|
|
|
${props => (!props.isDisabled && !props.isLoading) && (props.isClicked ? activeCss : css`
|
|
|
|
&:active {
|
|
|
|
${activeCss}
|
2019-05-28 07:20:49 +00:00
|
|
|
}`)
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
outline: none
|
|
|
|
}
|
|
|
|
|
2019-07-02 08:04:54 +00:00
|
|
|
.btnIcon,
|
|
|
|
.loader {
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: text-top;
|
|
|
|
}
|
|
|
|
|
|
|
|
${props => props.label && css`
|
|
|
|
.btnIcon,
|
|
|
|
.loader {
|
|
|
|
padding-right: 4px;
|
|
|
|
}
|
|
|
|
`}
|
2019-06-06 09:16:14 +00:00
|
|
|
`;
|
|
|
|
|
2019-07-02 08:04:54 +00:00
|
|
|
const Icon = ({size, primary, icon}) => (
|
|
|
|
<div className="btnIcon">
|
|
|
|
{ icon && React.cloneElement(icon,
|
|
|
|
{
|
|
|
|
isfill: true,
|
2020-07-15 14:17:37 +00:00
|
|
|
size: (size === "big" || size === "large") ? "medium" : "small",
|
2019-07-02 08:04:54 +00:00
|
|
|
color: primary ? "#FFFFFF" : '#333333'
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
Icon.propTypes = {
|
2019-09-09 12:26:40 +00:00
|
|
|
icon: PropTypes.node,
|
|
|
|
size: PropTypes.string,
|
|
|
|
primary: PropTypes.bool
|
2019-07-02 08:04:54 +00:00
|
|
|
};
|
2019-06-06 09:16:14 +00:00
|
|
|
|
2019-07-02 08:04:54 +00:00
|
|
|
Icon.defaultProps = {
|
|
|
|
icon: null
|
|
|
|
};
|
2019-06-06 09:16:14 +00:00
|
|
|
|
2020-02-02 11:01:43 +00:00
|
|
|
const Button = React.forwardRef((props, ref) => {
|
|
|
|
const { primary, size, isLoading, icon, label} = props;
|
|
|
|
const iconProps = { primary, size, icon };
|
|
|
|
return (
|
|
|
|
<StyledButton innerRef={ref} {...props} >
|
|
|
|
{(isLoading || icon)
|
|
|
|
? (isLoading
|
2020-07-15 14:17:37 +00:00
|
|
|
? <Loader type="oval" size={( size === "big" || size === "large" ) ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
|
2020-02-02 11:01:43 +00:00
|
|
|
: <Icon {...iconProps} />)
|
|
|
|
: ""
|
|
|
|
}
|
|
|
|
{label}
|
|
|
|
</StyledButton>
|
|
|
|
);
|
|
|
|
});
|
2019-05-28 07:20:49 +00:00
|
|
|
|
|
|
|
Button.propTypes = {
|
2019-06-06 09:16:14 +00:00
|
|
|
label: PropTypes.string,
|
2019-07-01 07:01:57 +00:00
|
|
|
primary: PropTypes.bool,
|
2020-07-15 14:17:37 +00:00
|
|
|
size: PropTypes.oneOf(['base', 'medium', 'big', 'large']),
|
2019-07-31 18:16:29 +00:00
|
|
|
scale: PropTypes.bool,
|
2019-07-02 08:04:54 +00:00
|
|
|
icon: PropTypes.node,
|
2019-06-06 09:16:14 +00:00
|
|
|
|
2019-05-28 07:20:49 +00:00
|
|
|
tabIndex: PropTypes.number,
|
2019-11-26 11:01:00 +00:00
|
|
|
className: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2019-07-01 07:01:57 +00:00
|
|
|
|
2019-05-28 07:20:49 +00:00
|
|
|
isHovered: PropTypes.bool,
|
2019-07-01 07:01:57 +00:00
|
|
|
isClicked: PropTypes.bool,
|
2019-05-28 07:20:49 +00:00
|
|
|
isDisabled: PropTypes.bool,
|
2019-06-06 09:16:14 +00:00
|
|
|
isLoading: PropTypes.bool,
|
2019-07-01 07:01:57 +00:00
|
|
|
|
2020-02-02 11:01:43 +00:00
|
|
|
onClick: PropTypes.func
|
2019-05-28 07:20:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Button.defaultProps = {
|
2019-07-01 07:01:57 +00:00
|
|
|
label: '',
|
2019-05-28 07:20:49 +00:00
|
|
|
primary: false,
|
|
|
|
size: 'base',
|
2019-07-31 18:16:29 +00:00
|
|
|
scale: false,
|
2019-07-02 08:04:54 +00:00
|
|
|
icon: null,
|
2019-07-01 07:01:57 +00:00
|
|
|
|
2019-06-06 09:16:14 +00:00
|
|
|
tabIndex: -1,
|
2019-07-01 07:01:57 +00:00
|
|
|
|
|
|
|
isHovered: false,
|
|
|
|
isClicked: false,
|
|
|
|
isDisabled: false,
|
|
|
|
isLoading: false
|
2019-05-28 07:20:49 +00:00
|
|
|
};
|
|
|
|
|
2020-02-02 11:01:43 +00:00
|
|
|
Button.displayName = "Button";
|
|
|
|
|
2019-05-28 07:20:49 +00:00
|
|
|
export default Button;
|