diff --git a/components/_mixins.scss b/components/_mixins.scss
index f67f01ac..96f9af12 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -251,24 +251,3 @@
transition-timing-function: $animation-curve-default;
transition-duration: $duration;
}
-
-// The frames are this way to prevent a flicker in Safari
-// See https://goo.gl/5luFDk
-@mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
- @keyframes #{$name} {
- 0% {
- opacity: $opacity;
- transform: translate3d(-50%, -50%, 0) scale(0);
- }
-
- 95% {
- opacity: 0;
- transform: translate3d(-50%, -50%, 0) scale(1);
- }
-
- 100% {
- opacity: 0;
- transform: translate3d(-50%, -50%, 0) scale(0);
- }
- }
-}
diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 69329292..9ab117a5 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -19,7 +19,6 @@ class Button extends React.Component {
mini: React.PropTypes.bool,
primary: React.PropTypes.bool,
raised: React.PropTypes.bool,
- ripple: React.PropTypes.bool,
type: React.PropTypes.string
};
@@ -30,13 +29,7 @@ class Button extends React.Component {
floating: false,
mini: false,
primary: false,
- raised: false,
- ripple: true
- };
-
- handleMouseDown = (event) => {
- if (this.refs.ripple) this.refs.ripple.start(event);
- if (this.props.onMouseDown) this.props.onMouseDown(event);
+ raised: false
};
handleMouseUp = () => {
@@ -45,7 +38,7 @@ class Button extends React.Component {
render () {
const { accent, children, className, flat, floating, href, icon,
- inverse, label, mini, primary, raised, ripple, ...others} = this.props;
+ inverse, label, mini, primary, raised, ...others} = this.props;
const element = href ? 'a' : 'button';
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
@@ -61,13 +54,11 @@ class Button extends React.Component {
ref: 'button',
className: classes,
disabled: this.props.disabled,
- onMouseDown: this.handleMouseDown,
onMouseUp: this.handleMouseUp,
'data-react-toolbox': 'button'
};
return React.createElement(element, props,
- ripple ? : null,
icon ? : null,
label,
children
@@ -75,4 +66,4 @@ class Button extends React.Component {
}
}
-export default Button;
+export default Ripple({centered: false})(Button);
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index f642ae08..9c30ff93 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -4,7 +4,7 @@ import FontIcon from '../font_icon';
import Ripple from '../ripple';
import style from './style';
-class Button extends React.Component {
+class IconButton extends React.Component {
static propTypes = {
accent: React.PropTypes.bool,
children: React.PropTypes.node,
@@ -14,20 +14,13 @@ class Button extends React.Component {
icon: React.PropTypes.string,
inverse: React.PropTypes.bool,
primary: React.PropTypes.bool,
- ripple: React.PropTypes.bool,
type: React.PropTypes.string
};
static defaultProps = {
accent: false,
className: '',
- primary: false,
- ripple: true
- };
-
- handleMouseDown = (event) => {
- if (this.refs.ripple) this.refs.ripple.start(event);
- if (this.props.onMouseDown) this.props.onMouseDown(event);
+ primary: false
};
handleMouseUp = () => {
@@ -35,7 +28,7 @@ class Button extends React.Component {
};
render () {
- const {accent, children, className, href, icon, inverse, primary, ripple, ...others} = this.props;
+ const {accent, children, className, href, icon, inverse, primary, ...others} = this.props;
const element = href ? 'a' : 'button';
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
const classes = ClassNames([style.toggle, style[level]], {[style.inverse]: inverse}, className);
@@ -46,16 +39,15 @@ class Button extends React.Component {
ref: 'button',
className: classes,
disabled: this.props.disabled,
- onMouseDown: this.handleMouseDown,
onMouseUp: this.handleMouseUp,
'data-react-toolbox': 'button'
};
return React.createElement(element, props,
- ripple ? : null,
- icon ? : children
+ icon ? : null,
+ children
);
}
}
-export default Button;
+export default Ripple({centered: true})(IconButton);
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.jsx
new file mode 100644
index 00000000..37b631c3
--- /dev/null
+++ b/components/checkbox/Check.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import Ripple from '../ripple';
+import style from './style';
+
+const Check = ({checked, children, onMouseDown}) => {
+ const className = ClassNames(style.check, {
+ [style.checked]: checked
+ });
+
+ return {children}
;
+};
+
+export default Ripple({
+ className: style.ripple,
+ spread: 2.6,
+ centered: true
+})(Check);
diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 9379e6ba..8d5b7b35 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -1,7 +1,6 @@
import React from 'react';
import ClassNames from 'classnames';
-import Ripple from '../ripple';
-import events from '../utils/events';
+import Check from './Check';
import style from './style';
class Checkbox extends React.Component {
@@ -22,21 +21,10 @@ class Checkbox extends React.Component {
disabled: false
};
- handleClick = (event) => {
- events.pauseEvent(event);
+ handleToggle = (event) => {
+ if (event.pageX !== 0 && event.pageY !== 0) this.blur();
if (!this.props.disabled && this.props.onChange) {
- const value = !this.refs.input.checked;
- this.props.onChange(value, event);
- }
- };
-
- handleInputClick = (event) => {
- events.pauseEvent(event);
- };
-
- handleMouseDown = (event) => {
- if (!this.props.disabled) {
- this.refs.ripple.start(event);
+ this.props.onChange(!this.props.checked, event);
}
};
@@ -49,30 +37,22 @@ class Checkbox extends React.Component {
}
render () {
- const fieldClassName = ClassNames(style.field, {
+ const { onChange, ...others } = this.props;
+ const className = ClassNames(style.field, {
[style.disabled]: this.props.disabled
}, this.props.className);
- const checkboxClassName = ClassNames(style.check, {
- [style.checked]: this.props.checked
- });
-
return (
-