IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: modified the IconButton component. added icons for hover and click

Browse Source
This commit is contained in:
NikolayRechkin 2019-07-18 16:21:22 +03:00
parent e08efa3d4b
commit ea70f66d24
1 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/ASC.Web.Components/src/components/icon-button/index.js
View File

@ -8,23 +8,52 @@ const StyledOuter = styled.div`
cursor: ${props => props.isDisabled ? 'default' : 'pointer'}; cursor: ${props => props.isDisabled ? 'default' : 'pointer'};
line-height: 0; line-height: 0;
`; `;
class IconButton extends React.Component{
constructor(props) {
super(props);
this.state = {
currentIconName: this.props.iconName
};
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.onMouseDown = this.onMouseDown.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
}
const IconButton = (props) => {
const { color, isFill, iconName, size, isDisabled } = props; onMouseEnter(e){
return ( this.setState({currentIconName: this.props.iconHoverName ? this.props.iconHoverName : this.props.iconName});
<StyledOuter this.props.onMouseEnter && this.props.onMouseEnter(e);
size={size} }
isDisabled={isDisabled} onMouseLeave(e){
onClick={!props.isDisabled ? props.onClick : undefined} this.setState({currentIconName: this.props.iconName});
onMouseEnter={!props.isDisabled ? props.onMouseEnter : undefined} this.props.onMouseDown && this.props.onMouseDown(e);
onMouseLeave={!props.isDisabled ? props.onMouseLeave : undefined} }
onMouseOver={!props.isDisabled ? props.onMouseOver : undefined} onMouseDown(e){
onMouseOut={!props.isDisabled ? props.onMouseOut : undefined} this.setState({currentIconName: this.props.iconClickName ? this.props.iconClickName : this.props.iconName});
this.props.onMouseDown && this.props.onMouseDown(e);
> }
{React.createElement(Icons[iconName], {size: "scale", color: color, isfill: isFill})} onMouseUp(e){
</StyledOuter> this.setState({currentIconName: this.props.iconHoverName ? this.props.iconHoverName : this.props.iconName});
); this.props.onClick && this.props.onClick(e);
this.props.onMouseUp && this.props.onMouseUp(e);
}
render(){
return (
<StyledOuter
size={this.props.size}
isDisabled={this.props.isDisabled}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
>
{React.createElement(Icons[this.state.currentIconName], {size: "scale", color: this.props.color, isfill: this.props.isFill})}
</StyledOuter>
);
};
}; };
IconButton.propTypes = { IconButton.propTypes = {
@ -33,6 +62,8 @@ IconButton.propTypes = {
isFill: PropTypes.bool, isFill: PropTypes.bool,
isDisabled: PropTypes.bool, isDisabled: PropTypes.bool,
iconName: PropTypes.string.isRequired, iconName: PropTypes.string.isRequired,
iconHoverName: PropTypes.string,
iconClickName: PropTypes.string,
onClick:PropTypes.func onClick:PropTypes.func
}; };