2019-08-01 12:04:59 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-23 19:14:42 +00:00
|
|
|
import { ReactSVG } from "react-svg";
|
2021-02-25 12:16:52 +00:00
|
|
|
import { handleAnyClick } from "../utils/event";
|
2019-12-05 12:16:25 +00:00
|
|
|
import Text from "../text";
|
2021-02-09 08:13:52 +00:00
|
|
|
import {
|
|
|
|
StyledSecondaryButton,
|
|
|
|
StyledMainButton,
|
|
|
|
StyledDropDown,
|
|
|
|
GroupMainButton,
|
|
|
|
} from "./styled-main-button";
|
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();
|
2019-07-24 17:43:18 +00:00
|
|
|
|
2019-08-01 12:04:59 +00:00
|
|
|
this.state = {
|
2020-10-16 13:16:01 +00:00
|
|
|
isOpen: props.opened,
|
2019-08-01 12:04:59 +00:00
|
|
|
};
|
2019-08-02 07:35:54 +00:00
|
|
|
|
2020-10-16 13:16:01 +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
|
|
|
|
2020-12-03 21:21:48 +00:00
|
|
|
handleClick = (e) => {
|
2021-03-12 09:33:48 +00:00
|
|
|
if (this.state.isOpen && this.ref.current.contains(e.target)) return;
|
2020-10-16 13:16:01 +00:00
|
|
|
this.toggle(false);
|
2020-12-03 21:21:48 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
stopAction = (e) => e.preventDefault();
|
2020-12-03 21:21:48 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
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
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
if (this.state.isOpen !== prevState.isOpen) {
|
2019-08-02 07:35:54 +00:00
|
|
|
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}>
|
2020-10-16 13:16:01 +00:00
|
|
|
<Text fontSize="16px" fontWeight="bold" 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}
|
|
|
|
clickOutsideAction={this.handleClick}
|
2019-08-01 12:04:59 +00:00
|
|
|
{...this.props}
|
|
|
|
onClick={this.onDropDownClick}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<StyledSecondaryButton
|
|
|
|
{...this.props}
|
|
|
|
onClick={this.onSecondaryButtonClick}
|
|
|
|
>
|
2021-03-12 10:52:14 +00:00
|
|
|
{this.props.iconName && <ReactSVG src={this.props.iconName} />}
|
2019-08-01 12:04:59 +00:00
|
|
|
</StyledSecondaryButton>
|
|
|
|
)}
|
|
|
|
</GroupMainButton>
|
|
|
|
);
|
|
|
|
}
|
2019-06-19 14:28:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
MainButton.propTypes = {
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Button text */
|
2019-08-01 12:04:59 +00:00
|
|
|
text: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Tells when the button should present a disabled state */
|
2019-08-01 12:04:59 +00:00
|
|
|
isDisabled: PropTypes.bool,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Select a state between two separate buttons or one with a drop-down list */
|
2019-08-01 12:04:59 +00:00
|
|
|
isDropdown: PropTypes.bool,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** What the main button will trigger when clicked */
|
2019-08-01 12:04:59 +00:00
|
|
|
clickAction: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** What the secondary button will trigger when clicked */
|
2019-08-01 12:04:59 +00:00
|
|
|
clickActionSecondary: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Icon inside button */
|
2019-12-03 11:47:48 +00:00
|
|
|
iconName: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Open DropDown */
|
2020-10-16 13:16:01 +00:00
|
|
|
opened: PropTypes.bool, //TODO: Make us whole
|
2021-03-08 20:18:45 +00:00
|
|
|
/** DropDown component click action */
|
2019-12-03 11:47:48 +00:00
|
|
|
onClick: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 11:47:48 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Accepts id */
|
2019-12-03 11:47:48 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
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,
|
2021-03-01 09:29:59 +00:00
|
|
|
iconName: "/static/images/people.react.svg",
|
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;
|