2020-09-24 11:11:34 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import Loader from "../loader";
|
2021-02-03 13:47:01 +00:00
|
|
|
import StyledButton from "./styled-button";
|
2021-02-25 21:19:45 +00:00
|
|
|
import Base from "../themes/base";
|
2019-05-28 07:20:49 +00:00
|
|
|
|
2020-09-01 13:55:28 +00:00
|
|
|
// eslint-disable-next-line no-unused-vars, react/prop-types
|
2019-06-06 09:16:14 +00:00
|
|
|
|
2020-10-22 10:21:37 +00:00
|
|
|
const Icon = ({ size, primary, icon, isHovered }) => (
|
2019-07-02 08:04:54 +00:00
|
|
|
<div className="btnIcon">
|
2020-09-24 11:11:34 +00:00
|
|
|
{icon &&
|
|
|
|
React.cloneElement(icon, {
|
2021-03-05 08:46:16 +00:00
|
|
|
//isfill: true,
|
2020-09-24 11:11:34 +00:00
|
|
|
size: size === "large" ? "large" : size === "big" ? "medium" : "small",
|
2020-10-28 09:52:18 +00:00
|
|
|
color: icon.props.color
|
|
|
|
? isHovered
|
2020-11-09 09:11:08 +00:00
|
|
|
? icon.props.hoveredcolor
|
2020-10-28 09:52:18 +00:00
|
|
|
: icon.props.color
|
|
|
|
: primary
|
|
|
|
? "#FFFFFF"
|
|
|
|
: "#333333",
|
2020-09-24 11:11:34 +00:00
|
|
|
})}
|
2019-07-02 08:04:54 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
Icon.propTypes = {
|
2019-09-09 12:26:40 +00:00
|
|
|
icon: PropTypes.node,
|
|
|
|
size: PropTypes.string,
|
2020-10-16 13:16:01 +00:00
|
|
|
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 = {
|
2020-10-16 13:16:01 +00:00
|
|
|
icon: null,
|
2019-07-02 08:04:54 +00:00
|
|
|
};
|
2019-06-06 09:16:14 +00:00
|
|
|
|
2020-02-02 11:01:43 +00:00
|
|
|
const Button = React.forwardRef((props, ref) => {
|
2020-10-22 10:21:37 +00:00
|
|
|
const { primary, size, isLoading, icon, label, isHovered } = props;
|
|
|
|
const iconProps = { primary, size, icon, isHovered };
|
2021-02-03 13:47:01 +00:00
|
|
|
|
2020-02-02 11:01:43 +00:00
|
|
|
return (
|
2021-02-24 17:11:23 +00:00
|
|
|
<StyledButton innerRef={ref} {...props}>
|
2020-09-24 11:11:34 +00:00
|
|
|
{isLoading || icon ? (
|
|
|
|
isLoading ? (
|
|
|
|
<Loader
|
|
|
|
type="oval"
|
|
|
|
size={size === "large" ? "18px" : size === "big" ? "16px" : "14px"}
|
|
|
|
color={primary ? "#FFFFFF" : "#333333"}
|
|
|
|
className="loader"
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<Icon {...iconProps} />
|
|
|
|
)
|
|
|
|
) : (
|
|
|
|
""
|
|
|
|
)}
|
2020-02-02 11:01:43 +00:00
|
|
|
{label}
|
|
|
|
</StyledButton>
|
|
|
|
);
|
|
|
|
});
|
2019-05-28 07:20:49 +00:00
|
|
|
|
|
|
|
Button.propTypes = {
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Button text */
|
2019-06-06 09:16:14 +00:00
|
|
|
label: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the button should be primary */
|
2019-07-01 07:01:57 +00:00
|
|
|
primary: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Size of button */
|
2020-09-24 11:11:34 +00:00
|
|
|
size: PropTypes.oneOf(["base", "medium", "big", "large"]),
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Scale width of button to 100% */
|
2019-07-31 18:16:29 +00:00
|
|
|
scale: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Icon node element */
|
2019-07-02 08:04:54 +00:00
|
|
|
icon: PropTypes.node,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Button tab index */
|
2019-05-28 07:20:49 +00:00
|
|
|
tabIndex: PropTypes.number,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts class */
|
2019-11-26 11:01:00 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts id */
|
2019-11-26 11:01:00 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts CSS style */
|
2019-11-26 11:01:00 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the button should present a hovered state */
|
2019-05-28 07:20:49 +00:00
|
|
|
isHovered: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Disable hover effect */
|
2020-12-21 14:54:34 +00:00
|
|
|
disableHover: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the button should present a clicked state */
|
2019-07-01 07:01:57 +00:00
|
|
|
isClicked: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the button should present a disabled state */
|
2019-05-28 07:20:49 +00:00
|
|
|
isDisabled: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tells when the button should show loader icon */
|
2019-06-06 09:16:14 +00:00
|
|
|
isLoading: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Sets the nim width of the button */
|
2020-08-06 11:47:16 +00:00
|
|
|
minwidth: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** What the button will trigger when clicked */
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: PropTypes.func,
|
2019-05-28 07:20:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Button.defaultProps = {
|
2020-09-24 11:11:34 +00:00
|
|
|
label: "",
|
2019-05-28 07:20:49 +00:00
|
|
|
primary: false,
|
2020-09-24 11:11:34 +00:00
|
|
|
size: "base",
|
2021-02-03 13:47:01 +00:00
|
|
|
theme: 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,
|
2020-09-24 11:11:34 +00:00
|
|
|
|
2020-08-06 11:47:16 +00:00
|
|
|
minwidth: null,
|
2019-07-01 07:01:57 +00:00
|
|
|
|
|
|
|
isHovered: false,
|
2020-12-21 14:54:34 +00:00
|
|
|
disableHover: false,
|
2019-07-01 07:01:57 +00:00
|
|
|
isClicked: false,
|
|
|
|
isDisabled: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
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;
|