adds a span wrapper to the component button in case of its disabled and have mouse enter and mouse leave events
parent
b381db4054
commit
028663062f
|
@ -101,6 +101,10 @@ const factory = (ripple, FontIcon) => {
|
|||
const element = href ? 'a' : 'button';
|
||||
const level = this.getLevel();
|
||||
const shape = this.getShape();
|
||||
const mouseEvents = {
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
};
|
||||
|
||||
const classes = classnames(theme.button, [theme[shape]], {
|
||||
[theme[level]]: neutral,
|
||||
|
@ -110,21 +114,24 @@ const factory = (ripple, FontIcon) => {
|
|||
|
||||
const props = {
|
||||
...others,
|
||||
...mouseEvents,
|
||||
href,
|
||||
ref: (node) => { this.buttonNode = node; },
|
||||
className: classes,
|
||||
disabled: this.props.disabled,
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
type: !href ? type : null,
|
||||
'data-react-toolbox': 'button',
|
||||
};
|
||||
|
||||
return React.createElement(element, props,
|
||||
const buttonElement = React.createElement(element, props,
|
||||
icon ? <FontIcon className={theme.icon} value={icon} /> : null,
|
||||
label,
|
||||
children,
|
||||
);
|
||||
|
||||
return others.onMouseEnter && this.props.disabled
|
||||
? <span {...mouseEvents}>{buttonElement}</span>
|
||||
: buttonElement;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -20,6 +20,7 @@ const TooltipTest = () => (
|
|||
<section>
|
||||
<h5>Tooltip</h5>
|
||||
<p>Give information on :hover</p>
|
||||
<TooltipButton label="Bookmark" icon="bookmark" raised primary disabled={true} tooltip="Bookmark Tooltip" tooltipDelay={1000} />
|
||||
<TooltipButton label="Bookmark" icon="bookmark" raised primary tooltip="Bookmark Tooltip" tooltipDelay={1000} />
|
||||
<TooltipButton icon="add" floating accent tooltip="Floating Tooltip" />
|
||||
<TooltipButton icon="add" floating disabled tooltip="Floating can not be shown" />
|
||||
|
|
Loading…
Reference in New Issue