2019-07-11 08:35:17 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-09 15:21:39 +00:00
|
|
|
|
2019-09-29 14:28:56 +00:00
|
|
|
import { Icons } from "../icons";
|
|
|
|
import isEmpty from "lodash/isEmpty";
|
2021-02-09 15:21:39 +00:00
|
|
|
import StyledOuter from "./styled-icon-button";
|
2021-02-20 08:46:32 +00:00
|
|
|
import { ReactSVG } from "react-svg";
|
2019-07-11 08:35:17 +00:00
|
|
|
|
2019-09-12 11:10:15 +00:00
|
|
|
class IconButton extends React.PureComponent {
|
2019-09-29 14:28:56 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-07-11 08:35:17 +00:00
|
|
|
|
2019-09-29 14:28:56 +00:00
|
|
|
this.state = {
|
|
|
|
currentIconName: this.props.iconName,
|
2020-10-16 13:16:01 +00:00
|
|
|
currentIconColor: this.props.color,
|
2019-09-29 14:28:56 +00:00
|
|
|
};
|
|
|
|
this.onMouseEnter = this.onMouseEnter.bind(this);
|
|
|
|
this.onMouseLeave = this.onMouseLeave.bind(this);
|
|
|
|
this.onMouseDown = this.onMouseDown.bind(this);
|
|
|
|
this.onMouseUp = this.onMouseUp.bind(this);
|
2019-09-12 06:51:15 +00:00
|
|
|
|
2019-09-29 14:28:56 +00:00
|
|
|
this.isNeedUpdate = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
onMouseEnter(e) {
|
|
|
|
const {
|
|
|
|
isDisabled,
|
|
|
|
iconHoverName,
|
|
|
|
iconName,
|
|
|
|
hoverColor,
|
|
|
|
color,
|
2020-10-16 13:16:01 +00:00
|
|
|
onMouseEnter,
|
2019-09-29 14:28:56 +00:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (isDisabled) return;
|
|
|
|
|
|
|
|
this.setState({
|
2020-10-16 13:16:01 +00:00
|
|
|
currentIconName: !("ontouchstart" in document.documentElement)
|
|
|
|
? iconHoverName || iconName
|
|
|
|
: iconName,
|
|
|
|
currentIconColor: hoverColor || color,
|
2019-09-29 14:28:56 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
onMouseEnter && onMouseEnter(e);
|
|
|
|
}
|
|
|
|
onMouseLeave(e) {
|
2020-01-10 11:34:41 +00:00
|
|
|
const { isDisabled, iconName, color, onMouseLeave } = this.props;
|
2019-09-29 14:28:56 +00:00
|
|
|
|
|
|
|
if (isDisabled) return;
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
currentIconName: iconName,
|
2020-10-16 13:16:01 +00:00
|
|
|
currentIconColor: color,
|
2019-09-29 14:28:56 +00:00
|
|
|
});
|
|
|
|
|
2020-01-10 11:34:41 +00:00
|
|
|
onMouseLeave && onMouseLeave(e);
|
2019-09-29 14:28:56 +00:00
|
|
|
}
|
|
|
|
onMouseDown(e) {
|
|
|
|
const {
|
|
|
|
isDisabled,
|
|
|
|
iconClickName,
|
|
|
|
iconName,
|
|
|
|
clickColor,
|
|
|
|
color,
|
2020-10-16 13:16:01 +00:00
|
|
|
onMouseDown,
|
2019-09-29 14:28:56 +00:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (isDisabled) return;
|
|
|
|
|
|
|
|
this.setState({
|
2020-10-16 13:16:01 +00:00
|
|
|
currentIconName: !("ontouchstart" in document.documentElement)
|
|
|
|
? iconClickName || iconName
|
|
|
|
: iconName,
|
|
|
|
currentIconColor: clickColor || color,
|
2019-09-29 14:28:56 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
onMouseDown && onMouseDown(e);
|
|
|
|
}
|
|
|
|
onMouseUp(e) {
|
|
|
|
const {
|
|
|
|
isDisabled,
|
|
|
|
iconHoverName,
|
|
|
|
iconName,
|
|
|
|
color,
|
2020-10-16 13:16:01 +00:00
|
|
|
onMouseUp,
|
2019-09-29 14:28:56 +00:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (isDisabled) return;
|
|
|
|
|
|
|
|
switch (e.nativeEvent.which) {
|
|
|
|
case 1: //Left click
|
|
|
|
this.setState({
|
2020-10-16 13:16:01 +00:00
|
|
|
currentIconName: !("ontouchstart" in document.documentElement)
|
|
|
|
? iconHoverName || iconName
|
|
|
|
: iconName,
|
|
|
|
currentIconColor: iconHoverName || color,
|
2019-09-29 14:28:56 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
onMouseUp && onMouseUp(e);
|
|
|
|
break;
|
|
|
|
case 3: //Right click
|
|
|
|
onMouseUp && onMouseUp(e);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
2019-07-18 13:21:22 +00:00
|
|
|
}
|
2019-09-29 14:28:56 +00:00
|
|
|
}
|
2020-11-18 07:10:48 +00:00
|
|
|
|
|
|
|
onClick = (e) => {
|
|
|
|
const { onClick } = this.props;
|
|
|
|
onClick && onClick(e);
|
|
|
|
};
|
|
|
|
|
2019-09-29 14:28:56 +00:00
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
const { iconName, color } = this.props;
|
|
|
|
|
|
|
|
let newState = {};
|
|
|
|
|
|
|
|
if (iconName !== prevProps.iconName) {
|
|
|
|
newState.currentIconName = iconName;
|
2019-08-09 08:24:52 +00:00
|
|
|
}
|
2019-09-29 14:28:56 +00:00
|
|
|
if (color !== prevProps.color) {
|
|
|
|
newState.currentIconColor = color;
|
2019-09-10 07:03:36 +00:00
|
|
|
}
|
2019-09-29 14:28:56 +00:00
|
|
|
|
|
|
|
if (!isEmpty(newState)) this.setState(newState);
|
|
|
|
}
|
|
|
|
render() {
|
2021-02-25 14:58:23 +00:00
|
|
|
//console.log("IconButton render", this.state.currentIconColor);
|
2019-09-29 14:28:56 +00:00
|
|
|
const {
|
|
|
|
className,
|
|
|
|
size,
|
|
|
|
isDisabled,
|
|
|
|
isFill,
|
|
|
|
isClickable,
|
2019-10-18 06:51:03 +00:00
|
|
|
onClick,
|
2019-11-06 14:41:35 +00:00
|
|
|
id,
|
2019-12-05 11:17:45 +00:00
|
|
|
style,
|
2020-10-16 13:16:01 +00:00
|
|
|
dataTip,
|
2019-09-29 14:28:56 +00:00
|
|
|
} = this.props;
|
2021-02-25 14:58:23 +00:00
|
|
|
|
2019-09-29 14:28:56 +00:00
|
|
|
return (
|
|
|
|
<StyledOuter
|
|
|
|
className={className}
|
|
|
|
size={size}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
onMouseEnter={this.onMouseEnter}
|
|
|
|
onMouseLeave={this.onMouseLeave}
|
|
|
|
onMouseDown={this.onMouseDown}
|
|
|
|
onMouseUp={this.onMouseUp}
|
2020-11-18 07:10:48 +00:00
|
|
|
onClick={this.onClick}
|
2019-09-29 14:28:56 +00:00
|
|
|
isClickable={typeof onClick === "function" || isClickable}
|
2019-11-06 14:41:35 +00:00
|
|
|
data-tip={dataTip}
|
2019-10-18 06:51:03 +00:00
|
|
|
data-event="click focus"
|
|
|
|
data-for={id}
|
2019-11-28 11:00:59 +00:00
|
|
|
style={style}
|
2021-02-20 15:37:32 +00:00
|
|
|
color={this.state.currentIconColor}
|
2019-10-17 13:15:43 +00:00
|
|
|
//{...this.props}
|
2019-09-29 14:28:56 +00:00
|
|
|
>
|
2021-02-20 08:46:32 +00:00
|
|
|
{/* {React.createElement(Icons["CalendarIcon"], {
|
2019-09-29 14:28:56 +00:00
|
|
|
size: "scale",
|
|
|
|
color: this.state.currentIconColor,
|
2020-10-16 13:16:01 +00:00
|
|
|
isfill: isFill,
|
2021-02-20 08:46:32 +00:00
|
|
|
})} */}
|
|
|
|
|
|
|
|
<ReactSVG
|
2021-05-13 13:57:10 +00:00
|
|
|
className="icon-button_svg not-selectable"
|
2021-02-20 08:46:32 +00:00
|
|
|
src={this.state.currentIconName}
|
|
|
|
/>
|
2019-09-29 14:28:56 +00:00
|
|
|
</StyledOuter>
|
|
|
|
);
|
|
|
|
}
|
2019-09-10 07:03:36 +00:00
|
|
|
}
|
2019-07-11 08:35:17 +00:00
|
|
|
|
|
|
|
IconButton.propTypes = {
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Set component class */
|
2019-09-29 14:28:56 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Icon color */
|
2019-09-29 14:28:56 +00:00
|
|
|
color: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Icon color on hover action */
|
2019-09-29 14:28:56 +00:00
|
|
|
hoverColor: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Icon color on click action */
|
2019-09-29 14:28:56 +00:00
|
|
|
clickColor: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Button height and width value */
|
2019-09-29 14:28:56 +00:00
|
|
|
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Determines if icon fill is needed */
|
2019-09-29 14:28:56 +00:00
|
|
|
isFill: PropTypes.bool,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Tells when the button should present a disabled state */
|
2019-09-29 14:28:56 +00:00
|
|
|
isDisabled: PropTypes.bool,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Set cursor value */
|
2019-09-29 14:28:56 +00:00
|
|
|
isClickable: PropTypes.bool,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Icon name */
|
2019-09-29 14:28:56 +00:00
|
|
|
iconName: PropTypes.string.isRequired,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Icon name on hover action */
|
2019-09-29 14:28:56 +00:00
|
|
|
iconHoverName: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Icon name on click action */
|
2019-09-29 14:28:56 +00:00
|
|
|
iconClickName: PropTypes.string,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** What the button will trigger when clicked */
|
2019-09-29 14:28:56 +00:00
|
|
|
onClick: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** What the button will trigger when cursor enter */
|
2019-09-29 14:28:56 +00:00
|
|
|
onMouseEnter: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** What the button will trigger when cursor down */
|
2019-09-29 14:28:56 +00:00
|
|
|
onMouseDown: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** What the button will trigger when cursor up */
|
2019-10-18 06:51:03 +00:00
|
|
|
onMouseUp: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** What the button will trigger when cursor leave icon */
|
2020-01-10 11:34:41 +00:00
|
|
|
onMouseLeave: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Set component id */
|
2019-11-06 14:41:35 +00:00
|
|
|
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Accepts css style */
|
2019-12-05 11:17:45 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2020-10-16 13:16:01 +00:00
|
|
|
dataTip: PropTypes.string,
|
2019-07-11 08:35:17 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
IconButton.defaultProps = {
|
2019-09-29 14:28:56 +00:00
|
|
|
size: 25,
|
|
|
|
isFill: true,
|
2021-03-01 09:29:59 +00:00
|
|
|
iconName: "/static/images/a-z.sorting.react.svg",
|
2019-09-29 14:28:56 +00:00
|
|
|
isDisabled: false,
|
2019-11-06 14:41:35 +00:00
|
|
|
isClickable: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
dataTip: "",
|
2019-07-11 08:35:17 +00:00
|
|
|
};
|
|
|
|
|
2019-09-29 14:28:56 +00:00
|
|
|
export default IconButton;
|