Autoinject theme to Radio component

components/identifiers.js

@@ -14,4 +14,5 @@ export const LIST = 'RTList';
 export const NAVIGATION = 'RTNavigation';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
+export const RADIO = 'RTRadio';
 export const RIPPLE = 'RTRipple';

components/radio/Radio.js

@@ -1,30 +1,27 @@
 import React, { PropTypes } from 'react';
-import { themr } from 'react-css-themr';
-import Ripple from '../ripple';
 
-const Radio = ({checked, onMouseDown, theme, ...other}) => (
-  <div
-    data-react-toolbox='radio'
-    className={theme[checked ? 'radioChecked' : 'radio']}
-    onMouseDown={onMouseDown}
-    {...other}
-  />
-);
+const factory = (ripple) => {
+  const Radio = ({checked, onMouseDown, theme, ...other}) => (
+    <div
+      data-react-toolbox='radio'
+      className={theme[checked ? 'radioChecked' : 'radio']}
+      onMouseDown={onMouseDown}
+      {...other}
+    />
+  );
 
-Radio.propTypes = {
-  checked: PropTypes.bool,
-  children: PropTypes.any,
-  onMouseDown: PropTypes.func,
-  theme: PropTypes.shape({
-    radio: PropTypes.string.isRequired,
-    radioChecked: PropTypes.string.isRequired,
-    ripple: PropTypes.string.isRequired
-  })
+  Radio.propTypes = {
+    checked: PropTypes.bool,
+    children: PropTypes.any,
+    onMouseDown: PropTypes.func,
+    theme: PropTypes.shape({
+      radio: PropTypes.string.isRequired,
+      radioChecked: PropTypes.string.isRequired,
+      ripple: PropTypes.string.isRequired
+    })
+  };
+
+  return ripple(Radio);
 };
 
-const RawRadio = themr('ToolboxRadio')(Radio);
-export default themr('ToolboxRadio')(Ripple({
-  spread: 2.6,
-  centered: true
-})(Radio));
-export {RawRadio as RawRadio};
+export default factory;

components/radio/RadioButton.js

@@ -1,65 +1,75 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Radio from './Radio';
+import { RADIO } from '../identifiers.js';
+import rippleFactory from '../ripple/Ripple.js';
+import radioFactory from './Radio.js';
 
-class RadioButton extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      disabled: React.PropTypes.string.isRequired,
-      field: React.PropTypes.string.isRequired,
-      input: React.PropTypes.string.isRequired,
-      text: React.PropTypes.string.isRequired
-    }),
-    value: React.PropTypes.any
-  };
+const factory = (Radio) => {
+  class RadioButton extends Component {
+    static propTypes = {
+      checked: PropTypes.bool,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      label: PropTypes.string,
+      name: PropTypes.string,
+      onBlur: PropTypes.func,
+      onChange: PropTypes.func,
+      onFocus: PropTypes.func,
+      theme: PropTypes.shape({
+        disabled: PropTypes.string.isRequired,
+        field: PropTypes.string.isRequired,
+        input: PropTypes.string.isRequired,
+        text: PropTypes.string.isRequired
+      }),
+      value: PropTypes.any
+    };
 
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
+    static defaultProps = {
+      checked: false,
+      className: '',
+      disabled: false
+    };
 
-  handleClick = (event) => {
-    const {checked, disabled, onChange} = this.props;
-    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
-    if (!disabled && !checked && onChange) onChange(event, this);
-  };
+    handleClick = (event) => {
+      const {checked, disabled, onChange} = this.props;
+      if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+      if (!disabled && !checked && onChange) onChange(event, this);
+    };
 
-  blur () {
-    this.refs.input.blur();
+    blur () {
+      this.refs.input.blur();
+    }
+
+    focus () {
+      this.refs.input.focus();
+    }
+
+    render () {
+      const { className, checked, disabled, label, theme, onChange, ...others } = this.props;  // eslint-disable-line
+      const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
+      return (
+        <label data-react-toolbox='radio-button' className={_className}>
+          <input
+            {...others}
+            className={theme.input}
+            onClick={this.handleClick}
+            readOnly
+            ref='input'
+            type='radio'
+          />
+        <Radio checked={checked} disabled={disabled} theme={theme} />
+          {label ? <span className={theme.text}>{label}</span> : null}
+        </label>
+      );
+    }
   }
 
-  focus () {
-    this.refs.input.focus();
-  }
+  return RadioButton;
+};
 
-  render () {
-    const { className, checked, disabled, label, theme, onChange, ...others } = this.props;  // eslint-disable-line
-    const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
-    return (
-      <label data-react-toolbox='radio-button' className={_className}>
-        <input
-          {...others}
-          className={theme.input}
-          onClick={this.handleClick}
-          readOnly
-          ref='input'
-          type='radio'
-        />
-        <Radio checked={checked} disabled={disabled}/>
-        {label ? <span className={theme.text}>{label}</span> : null}
-      </label>
-    );
-  }
-}
-
-export default themr('ToolboxRadio')(RadioButton);
+const Radio = radioFactory(rippleFactory({ centered: true, spread: 2.6 }));
+const RadioButton = factory(Radio);
+export default themr(RADIO)(RadioButton);
+export { factory as radioButtonFactory };
+export { RadioButton };

components/radio/RadioGroup.js

@@ -1,48 +1,57 @@
-import React from 'react';
-import RadioButton from './RadioButton';
+import React, { Component, PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { RADIO } from '../identifiers.js';
+import InjectRadioButton from './RadioButton.js';
 
-class RadioGroup extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    name: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    value: React.PropTypes.any
-  };
+const factory = (RadioButton) => {
+  class RadioGroup extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      name: PropTypes.string,
+      onChange: PropTypes.func,
+      value: PropTypes.any
+    };
 
-  static defaultProps = {
-    className: '',
-    disabled: false
-  };
+    static defaultProps = {
+      className: '',
+      disabled: false
+    };
 
-  handleChange = (value) => {
-    if (this.props.onChange) this.props.onChange(value);
-  };
+    handleChange = (value) => {
+      if (this.props.onChange) this.props.onChange(value);
+    };
 
-  renderRadioButtons () {
-    return React.Children.map(this.props.children, (radio, idx) => {
+    renderRadioButtons () {
+      return React.Children.map(this.props.children, (radio, idx) => {
+        return (
+          <RadioButton
+            {...radio.props}
+            checked={radio.props.value === this.props.value}
+            disabled={this.props.disabled || radio.props.disabled}
+            key={idx}
+            label={radio.props.label}
+            onChange={this.handleChange.bind(this, radio.props.value)}
+            value={radio.props.value}
+          />
+        );
+      });
+    }
+
+    render () {
       return (
-        <RadioButton
-          {...radio.props}
-          checked={radio.props.value === this.props.value}
-          disabled={this.props.disabled || radio.props.disabled}
-          key={idx}
-          label={radio.props.label}
-          onChange={this.handleChange.bind(this, radio.props.value)}
-          value={radio.props.value}
-        />
+        <div data-react-toolbox='radio-group' className={this.props.className}>
+          {this.renderRadioButtons()}
+        </div>
       );
-    });
+    }
   }
 
-  render () {
-    return (
-      <div data-react-toolbox='radio-group' className={this.props.className}>
-        {this.renderRadioButtons()}
-      </div>
-    );
-  }
-}
+  return RadioGroup;
+};
 
-export default RadioGroup;
+const RadioGroup = factory(InjectRadioButton);
+export default themr(RADIO)(RadioGroup);
+export { factory as radioGroupFactory };
+export { RadioGroup };

components/radio/index.js

@@ -1,2 +1,14 @@
-export RadioButton from './RadioButton';
-export RadioGroup from './RadioGroup';
+import { themr } from 'react-css-themr';
+import { RADIO } from '../identifiers.js';
+import themedRippleFactory from '../ripple';
+import radioFactory from './Radio.js';
+import { radioButtonFactory } from './RadioButton.js';
+import { radioGroupFactory } from './RadioGroup.js';
+import theme from './theme.scss';
+
+const ThemedRadio = radioFactory(themedRippleFactory({ centered: true, spread: 2.6}));
+const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio));
+const ThemedRadioGroup = themr(RADIO, theme)(radioGroupFactory(ThemedRadioButton));
+
+export { ThemedRadioButton as RadioButton };
+export { ThemedRadioGroup as RadioGroup };

spec/theme.js

@@ -1,7 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxProgress from '../components/progress_bar/theme.scss';
-import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxSnackbar from '../components/snackbar/theme.scss';
 import ToolboxSwitch from '../components/switch/theme.scss';
@@ -11,8 +9,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxProgress,
-  ToolboxRadio,
   ToolboxSlider,
   ToolboxSnackbar,
   ToolboxSwitch,