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
|
2020-02-02 11:01:43 +00:00
|
|
|
const Button = React.forwardRef((props, ref) => {
|
2022-03-14 15:26:13 +00:00
|
|
|
const { primary, size, isLoading, icon, label } = props;
|
2020-02-02 11:01:43 +00:00
|
|
|
return (
|
2021-02-24 17:11:23 +00:00
|
|
|
<StyledButton innerRef={ref} {...props}>
|
2022-03-11 14:21:52 +00:00
|
|
|
<div className="button-content">
|
2022-03-14 15:26:13 +00:00
|
|
|
{(isLoading || icon) &&
|
|
|
|
(isLoading ? (
|
2022-03-11 14:21:52 +00:00
|
|
|
<Loader
|
|
|
|
type="oval"
|
|
|
|
size={
|
|
|
|
size === "medium" ? "20px" : size === "normal" ? "16px" : "12px"
|
|
|
|
}
|
|
|
|
color={primary ? "#FFFFFF" : "#333333"}
|
|
|
|
className="loader"
|
|
|
|
/>
|
|
|
|
) : (
|
2022-03-14 15:26:13 +00:00
|
|
|
<div className="icon">{icon}</div>
|
|
|
|
))}
|
2022-03-11 14:21:52 +00:00
|
|
|
{label}
|
|
|
|
</div>
|
2020-02-02 11:01:43 +00:00
|
|
|
</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,
|
2022-03-11 11:16:17 +00:00
|
|
|
/** Size of button.
|
|
|
|
|
|
|
|
The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices. */
|
2022-04-13 15:05:41 +00:00
|
|
|
size: PropTypes.oneOf([
|
|
|
|
"extraSmall",
|
|
|
|
"small",
|
|
|
|
"normal",
|
|
|
|
"medium",
|
|
|
|
"normalDesktop",
|
|
|
|
"normalTouchscreen",
|
|
|
|
]),
|
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,
|
2022-03-11 10:46:32 +00:00
|
|
|
size: "extraSmall",
|
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-06-06 09:16:14 +00:00
|
|
|
tabIndex: -1,
|
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;
|