Add touch ripple for buttons
parent
bd236e172b
commit
63a0c489c8
|
@ -43,6 +43,12 @@ class Button extends React.Component {
|
||||||
if (this.props.onMouseDown) this.props.onMouseDown(event);
|
if (this.props.onMouseDown) this.props.onMouseDown(event);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleTouchStart = (event) => {
|
||||||
|
events.pauseEvent(event);
|
||||||
|
if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true);
|
||||||
|
if (this.props.onTouchStart) this.props.onTouchStart(event);
|
||||||
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {accent, flat, floating, href, icon, label, loading, mini,
|
const {accent, flat, floating, href, icon, label, loading, mini,
|
||||||
primary, raised, ripple, toggle, tooltip, ...others} = this.props;
|
primary, raised, ripple, toggle, tooltip, ...others} = this.props;
|
||||||
|
@ -59,7 +65,8 @@ class Button extends React.Component {
|
||||||
href,
|
href,
|
||||||
className,
|
className,
|
||||||
disabled: this.props.disabled || this.props.loading,
|
disabled: this.props.disabled || this.props.loading,
|
||||||
onMouseDown: this.handleMouseDown
|
onMouseDown: this.handleMouseDown,
|
||||||
|
onTouchStart: this.handleTouchStart
|
||||||
};
|
};
|
||||||
|
|
||||||
return React.createElement(element, props,
|
return React.createElement(element, props,
|
||||||
|
|
Loading…
Reference in New Issue