230 lines
5.5 KiB
JavaScript
230 lines
5.5 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import isEmpty from "lodash/isEmpty";
|
|
import StyledOuter from "./styled-icon-button";
|
|
import { ReactSVG } from "react-svg";
|
|
|
|
class IconButton extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
currentIconName: this.props.iconName,
|
|
currentIconColor: this.props.color,
|
|
};
|
|
this.onMouseEnter = this.onMouseEnter.bind(this);
|
|
this.onMouseLeave = this.onMouseLeave.bind(this);
|
|
this.onMouseDown = this.onMouseDown.bind(this);
|
|
this.onMouseUp = this.onMouseUp.bind(this);
|
|
|
|
this.isNeedUpdate = false;
|
|
}
|
|
|
|
onMouseEnter(e) {
|
|
const {
|
|
isDisabled,
|
|
iconHoverName,
|
|
iconName,
|
|
hoverColor,
|
|
color,
|
|
onMouseEnter,
|
|
} = this.props;
|
|
|
|
if (isDisabled) return;
|
|
|
|
this.setState({
|
|
currentIconName: !("ontouchstart" in document.documentElement)
|
|
? iconHoverName || iconName
|
|
: iconName,
|
|
currentIconColor: hoverColor || color,
|
|
});
|
|
|
|
onMouseEnter && onMouseEnter(e);
|
|
}
|
|
onMouseLeave(e) {
|
|
const { isDisabled, iconName, color, onMouseLeave } = this.props;
|
|
|
|
if (isDisabled) return;
|
|
|
|
this.setState({
|
|
currentIconName: iconName,
|
|
currentIconColor: color,
|
|
});
|
|
|
|
onMouseLeave && onMouseLeave(e);
|
|
}
|
|
onMouseDown(e) {
|
|
const {
|
|
isDisabled,
|
|
iconClickName,
|
|
iconName,
|
|
clickColor,
|
|
color,
|
|
onMouseDown,
|
|
} = this.props;
|
|
|
|
if (isDisabled) return;
|
|
|
|
this.setState({
|
|
currentIconName: !("ontouchstart" in document.documentElement)
|
|
? iconClickName || iconName
|
|
: iconName,
|
|
currentIconColor: clickColor || color,
|
|
});
|
|
|
|
onMouseDown && onMouseDown(e);
|
|
}
|
|
onMouseUp(e) {
|
|
const {
|
|
isDisabled,
|
|
iconHoverName,
|
|
iconName,
|
|
color,
|
|
onMouseUp,
|
|
} = this.props;
|
|
|
|
if (isDisabled) return;
|
|
|
|
switch (e.nativeEvent.which) {
|
|
case 1: //Left click
|
|
this.setState({
|
|
currentIconName: !("ontouchstart" in document.documentElement)
|
|
? iconHoverName || iconName
|
|
: iconName,
|
|
currentIconColor: iconHoverName || color,
|
|
});
|
|
|
|
onMouseUp && onMouseUp(e);
|
|
break;
|
|
case 3: //Right click
|
|
onMouseUp && onMouseUp(e);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
onClick = (e) => {
|
|
const { onClick } = this.props;
|
|
onClick && onClick(e);
|
|
};
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const { iconName, color } = this.props;
|
|
|
|
let newState = {};
|
|
|
|
if (iconName !== prevProps.iconName) {
|
|
newState.currentIconName = iconName;
|
|
}
|
|
if (color !== prevProps.color) {
|
|
newState.currentIconColor = color;
|
|
}
|
|
|
|
if (!isEmpty(newState)) this.setState(newState);
|
|
}
|
|
render() {
|
|
//console.log("IconButton render", this.state.currentIconColor);
|
|
const {
|
|
className,
|
|
size,
|
|
isDisabled,
|
|
isFill,
|
|
isClickable,
|
|
onClick,
|
|
id,
|
|
style,
|
|
dataTip,
|
|
title,
|
|
theme,
|
|
color,
|
|
hoverColor,
|
|
...rest
|
|
} = this.props;
|
|
|
|
return (
|
|
<StyledOuter
|
|
className={className}
|
|
size={size}
|
|
title={title}
|
|
isDisabled={isDisabled}
|
|
onMouseEnter={this.onMouseEnter}
|
|
onMouseLeave={this.onMouseLeave}
|
|
onMouseDown={this.onMouseDown}
|
|
onMouseUp={this.onMouseUp}
|
|
onClick={this.onClick}
|
|
isClickable={typeof onClick === "function" || isClickable}
|
|
data-tip={dataTip}
|
|
data-event="click focus"
|
|
data-for={id}
|
|
style={style}
|
|
color={this.state.currentIconColor}
|
|
{...rest}
|
|
>
|
|
{/* {React.createElement(Icons["CalendarIcon"], {
|
|
size: "scale",
|
|
color: this.state.currentIconColor,
|
|
isfill: isFill,
|
|
})} */}
|
|
|
|
<ReactSVG
|
|
className="icon-button_svg not-selectable"
|
|
src={this.state.currentIconName}
|
|
/>
|
|
</StyledOuter>
|
|
);
|
|
}
|
|
}
|
|
|
|
IconButton.propTypes = {
|
|
/** Set component class */
|
|
className: PropTypes.string,
|
|
/** Icon color */
|
|
color: PropTypes.string,
|
|
/** Icon color on hover action */
|
|
hoverColor: PropTypes.string,
|
|
/** Icon color on click action */
|
|
clickColor: PropTypes.string,
|
|
/** Button height and width value */
|
|
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
/** Determines if icon fill is needed */
|
|
isFill: PropTypes.bool,
|
|
/** Tells when the button should present a disabled state */
|
|
isDisabled: PropTypes.bool,
|
|
/** Set cursor value */
|
|
isClickable: PropTypes.bool,
|
|
/** Icon name */
|
|
iconName: PropTypes.string.isRequired,
|
|
/** Icon name on hover action */
|
|
iconHoverName: PropTypes.string,
|
|
/** Icon name on click action */
|
|
iconClickName: PropTypes.string,
|
|
/** What the button will trigger when clicked */
|
|
onClick: PropTypes.func,
|
|
/** What the button will trigger when cursor enter */
|
|
onMouseEnter: PropTypes.func,
|
|
/** What the button will trigger when cursor down */
|
|
onMouseDown: PropTypes.func,
|
|
/** What the button will trigger when cursor up */
|
|
onMouseUp: PropTypes.func,
|
|
/** What the button will trigger when cursor leave icon */
|
|
onMouseLeave: PropTypes.func,
|
|
/** Set component id */
|
|
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
/** Accepts css style */
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
dataTip: PropTypes.string,
|
|
};
|
|
|
|
IconButton.defaultProps = {
|
|
size: 25,
|
|
isFill: true,
|
|
iconName: "/static/images/a-z.sorting.react.svg",
|
|
isDisabled: false,
|
|
isClickable: false,
|
|
dataTip: "",
|
|
};
|
|
|
|
export default IconButton;
|