Use ripple decorator in Radio buttons

components/radio/Radio.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import RippleDecorator from '../ripple/RippleDecorator';
+import style from './style';
+
+const Radio = ({checked, children, onMouseDown}) => {
+  const className = style[checked ? 'radio-checked' : 'radio'];
+  return <div data-role='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
+};
+
+export default RippleDecorator({
+  className: style.ripple,
+  spread: 2.6,
+  centered: true
+})(Radio);

components/radio/RadioButton.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import ClassNames from 'classnames';
-import Ripple from '../ripple';
+import Radio from './Radio';
 import style from './style';
-import events from '../utils/events';
 
 class RadioButton extends React.Component {
   static propTypes = {
@@ -23,23 +22,10 @@ class RadioButton extends React.Component {
     disabled: false
   };
 
-  handleChange = (event) => {
-    if (!this.props.checked && this.props.onChange) {
-      this.props.onChange(event, this);
-    }
-  };
-
   handleClick = (event) => {
-    events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
-  };
-
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
+    const {checked, disabled, onChange} = this.props;
+    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+    if (!disabled && !checked && onChange) onChange(event, this);
   };
 
   blur () {
@@ -51,22 +37,19 @@ class RadioButton extends React.Component {
   }
 
   render () {
-    const labelClassName = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
-    const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
+    const className = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
+    const { onChange, ...others } = this.props;
 
     return (
-      <label className={labelClassName} onClick={this.handleClick}>
+      <label className={className}>
         <input
-          {...this.props}
-          ref='input'
+          {...others}
           className={style.input}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
+          onClick={this.handleClick}
+          ref='input'
           type='radio'
         />
-        <span role='radio' className={radioClassName} onMouseDown={this.handleMouseDown}>
-          <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
-        </span>
+        <Radio checked={this.props.checked} disabled={this.props.disabled}/>
         {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
       </label>
     );

components/radio/style.scss

@@ -28,15 +28,12 @@
   margin: 0;
   border: 0;
   opacity: 0;
-
   appearance: none;
-  &:focus:not(&:active) {
-    + .radio {
-      box-shadow: 0 0 0 $unit $radio-focus-color;
-    }
-    + .radio-checked {
-      box-shadow: 0 0 0 $unit $radio-checked-focus-color;
-    }
+  &:focus ~ .radio {
+    box-shadow: 0 0 0 $unit $radio-focus-color;
+  }
+  &:focus ~ .radio-checked {
+    box-shadow: 0 0 0 $unit $radio-checked-focus-color;
   }
 }