2019-08-01 12:04:59 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled, { css } from "styled-components";
|
|
|
|
import DropDown from "../drop-down";
|
|
|
|
import { Icons } from "../icons";
|
2019-08-02 07:35:54 +00:00
|
|
|
import { handleAnyClick } from "../../utils/event";
|
2019-12-05 12:16:25 +00:00
|
|
|
import Text from "../text";
|
2019-08-01 12:04:59 +00:00
|
|
|
|
|
|
|
const backgroundColor = "#ED7309",
|
|
|
|
disableBackgroundColor = "#FFCCA6",
|
|
|
|
hoverBackgroundColor = "#FF8932",
|
|
|
|
clickBackgroundColor = "#C96C27";
|
|
|
|
|
|
|
|
const hoveredCss = css`
|
|
|
|
background-color: ${hoverBackgroundColor};
|
|
|
|
cursor: pointer;
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
const clickCss = css`
|
2019-08-01 12:04:59 +00:00
|
|
|
background-color: ${clickBackgroundColor};
|
|
|
|
cursor: pointer;
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const arrowDropdown = css`
|
2019-08-01 12:04:59 +00:00
|
|
|
border-left: 4px solid transparent;
|
|
|
|
border-right: 4px solid transparent;
|
|
|
|
border-top: 4px solid white;
|
|
|
|
content: "";
|
|
|
|
height: 0;
|
|
|
|
margin-top: -1px;
|
|
|
|
position: absolute;
|
2019-12-16 14:15:42 +00:00
|
|
|
right: 10px;
|
2019-08-01 12:04:59 +00:00
|
|
|
top: 50%;
|
|
|
|
width: 0;
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const notDisableStyles = css`
|
2019-08-01 12:04:59 +00:00
|
|
|
&:hover {
|
|
|
|
${hoveredCss}
|
|
|
|
}
|
2019-06-19 14:28:00 +00:00
|
|
|
|
2019-08-01 12:04:59 +00:00
|
|
|
&:active {
|
|
|
|
${clickCss}
|
|
|
|
}
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const notDropdown = css`
|
2019-08-01 12:04:59 +00:00
|
|
|
&:after {
|
|
|
|
display: none;
|
|
|
|
}
|
2019-06-19 14:28:00 +00:00
|
|
|
|
2019-08-01 12:04:59 +00:00
|
|
|
border-top-right-radius: 0;
|
|
|
|
border-bottom-right-radius: 0;
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const GroupMainButton = styled.div`
|
2019-08-01 12:04:59 +00:00
|
|
|
position: relative;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: ${props => (props.isDropdown ? "1fr" : "1fr 32px")};
|
|
|
|
${props => !props.isDropdown && "grid-column-gap: 1px"};
|
2019-06-20 08:24:31 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledDropDown = styled(DropDown)`
|
2019-08-01 12:04:59 +00:00
|
|
|
width: 100%;
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledMainButton = styled.div`
|
2019-08-01 12:04:59 +00:00
|
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
vertical-align: middle;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background-color: ${props =>
|
|
|
|
props.isDisabled ? disableBackgroundColor : backgroundColor};
|
|
|
|
padding: 5px 11px;
|
|
|
|
border-radius: 3px;
|
|
|
|
-moz-border-radius: 3px;
|
|
|
|
-webkit-border-radius: 3px;
|
|
|
|
line-height: 22px;
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
${arrowDropdown}
|
|
|
|
}
|
|
|
|
|
|
|
|
${props => !props.isDisabled && notDisableStyles}
|
|
|
|
${props => !props.isDropdown && notDropdown}
|
2019-06-19 14:28:00 +00:00
|
|
|
|
|
|
|
& > svg {
|
2019-08-01 12:04:59 +00:00
|
|
|
display: block;
|
|
|
|
margin: auto;
|
|
|
|
height: 100%;
|
|
|
|
}
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledSecondaryButton = styled(StyledMainButton)`
|
2019-08-01 12:04:59 +00:00
|
|
|
display: inline-block;
|
|
|
|
height: 32px;
|
|
|
|
padding: 0;
|
|
|
|
border-radius: 3px;
|
|
|
|
-moz-border-radius: 3px;
|
|
|
|
-webkit-border-radius: 3px;
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
border-bottom-left-radius: 0;
|
2019-06-19 14:28:00 +00:00
|
|
|
`;
|
|
|
|
|
2019-07-24 17:43:18 +00:00
|
|
|
class MainButton extends React.PureComponent {
|
2019-08-01 12:04:59 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-06-20 12:35:37 +00:00
|
|
|
|
2019-08-01 12:04:59 +00:00
|
|
|
this.ref = React.createRef();
|
|
|
|
this.iconNames = Object.keys(Icons);
|
2019-07-24 17:43:18 +00:00
|
|
|
|
2019-08-01 12:04:59 +00:00
|
|
|
this.state = {
|
|
|
|
isOpen: props.opened
|
|
|
|
};
|
2019-08-02 07:35:54 +00:00
|
|
|
|
|
|
|
if(props.opened)
|
|
|
|
handleAnyClick(true, this.handleClick);
|
2019-08-01 12:04:59 +00:00
|
|
|
}
|
2019-07-14 11:13:32 +00:00
|
|
|
|
2019-08-02 07:35:54 +00:00
|
|
|
handleClick = e => this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
|
2019-08-01 12:04:59 +00:00
|
|
|
stopAction = e => e.preventDefault();
|
|
|
|
toggle = isOpen => this.setState({ isOpen: isOpen });
|
2019-06-20 12:35:37 +00:00
|
|
|
|
2019-08-01 12:04:59 +00:00
|
|
|
componentWillUnmount() {
|
2019-08-02 07:35:54 +00:00
|
|
|
handleAnyClick(false, this.handleClick);
|
2019-08-01 12:04:59 +00:00
|
|
|
}
|
2019-06-19 14:28:00 +00:00
|
|
|
|
2019-08-02 07:35:54 +00:00
|
|
|
componentDidUpdate(prevProps, prevState) {
|
2019-08-01 12:04:59 +00:00
|
|
|
// Store prevId in state so we can compare when props change.
|
|
|
|
// Clear out previously-loaded data (so we don't render stale stuff).
|
|
|
|
if (this.props.opened !== prevProps.opened) {
|
|
|
|
this.toggle(this.props.opened);
|
|
|
|
}
|
2019-08-02 07:35:54 +00:00
|
|
|
|
|
|
|
if(this.state.isOpen !== prevState.isOpen) {
|
|
|
|
handleAnyClick(this.state.isOpen, this.handleClick);
|
|
|
|
}
|
2019-08-01 12:04:59 +00:00
|
|
|
}
|
|
|
|
|
2019-08-07 14:37:18 +00:00
|
|
|
onMainButtonClick = (e) => {
|
2019-08-01 12:04:59 +00:00
|
|
|
if (!this.props.isDisabled) {
|
|
|
|
if (!this.props.isDropdown) {
|
|
|
|
this.props.clickAction && this.props.clickAction();
|
|
|
|
} else {
|
|
|
|
this.toggle(!this.state.isOpen);
|
2019-07-14 11:13:32 +00:00
|
|
|
}
|
2019-08-01 12:04:59 +00:00
|
|
|
} else {
|
2019-08-07 14:37:18 +00:00
|
|
|
this.stopAction(e);
|
2019-08-01 12:04:59 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
onDropDownClick = () => {
|
|
|
|
this.props.onClick && this.props.onClick();
|
|
|
|
this.toggle(!this.state.isOpen);
|
|
|
|
};
|
|
|
|
|
2019-08-07 14:37:18 +00:00
|
|
|
onSecondaryButtonClick = (e) => {
|
2019-08-01 12:04:59 +00:00
|
|
|
if (!this.props.isDisabled) {
|
|
|
|
this.props.clickActionSecondary && this.props.clickActionSecondary();
|
|
|
|
} else {
|
2019-08-07 14:37:18 +00:00
|
|
|
this.stopAction(e);
|
2019-08-01 12:04:59 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2019-08-13 11:21:28 +00:00
|
|
|
//console.log("MainButton render");
|
2019-08-01 12:04:59 +00:00
|
|
|
return (
|
|
|
|
<GroupMainButton {...this.props} ref={this.ref}>
|
|
|
|
<StyledMainButton {...this.props} onClick={this.onMainButtonClick}>
|
2019-12-17 14:27:06 +00:00
|
|
|
<Text fontSize='16px' fontWeight={600} color="#fff">
|
2019-12-05 12:16:25 +00:00
|
|
|
{this.props.text}
|
|
|
|
</Text>
|
2019-08-01 12:04:59 +00:00
|
|
|
</StyledMainButton>
|
|
|
|
{this.props.isDropdown ? (
|
|
|
|
<StyledDropDown
|
2019-12-17 14:27:06 +00:00
|
|
|
open={this.state.isOpen}
|
|
|
|
withBackdrop
|
|
|
|
clickOutsideAction={this.handleClick}
|
2019-08-01 12:04:59 +00:00
|
|
|
{...this.props}
|
|
|
|
onClick={this.onDropDownClick}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<StyledSecondaryButton
|
|
|
|
{...this.props}
|
|
|
|
onClick={this.onSecondaryButtonClick}
|
|
|
|
>
|
|
|
|
{this.iconNames.includes(this.props.iconName) &&
|
|
|
|
React.createElement(Icons[this.props.iconName], {
|
|
|
|
size: "medium",
|
|
|
|
color: "#ffffff"
|
|
|
|
})}
|
|
|
|
</StyledSecondaryButton>
|
|
|
|
)}
|
|
|
|
</GroupMainButton>
|
|
|
|
);
|
|
|
|
}
|
2019-06-19 14:28:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
MainButton.propTypes = {
|
2019-08-01 12:04:59 +00:00
|
|
|
text: PropTypes.string,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
isDropdown: PropTypes.bool,
|
|
|
|
clickAction: PropTypes.func,
|
|
|
|
clickActionSecondary: PropTypes.func,
|
2019-12-03 11:47:48 +00:00
|
|
|
iconName: PropTypes.string,
|
|
|
|
opened: PropTypes.bool, //TODO: Make us whole
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
className: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
2019-06-19 14:28:00 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
MainButton.defaultProps = {
|
2019-08-01 12:04:59 +00:00
|
|
|
text: "Button",
|
|
|
|
isDisabled: false,
|
|
|
|
isDropdown: true,
|
|
|
|
iconName: "PeopleIcon"
|
2019-06-20 08:24:31 +00:00
|
|
|
};
|
2019-06-19 14:28:00 +00:00
|
|
|
|
2019-08-01 12:04:59 +00:00
|
|
|
export default MainButton;
|