Autoinject theme to Slider

components/identifiers.js

@@ -16,3 +16,4 @@ export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RADIO = 'RTRadio';
 export const RIPPLE = 'RTRipple';
+export const SLIDER = 'RTSlider';

components/slider/Slider.js

@@ -1,40 +1,41 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import events from '../utils/events';
-import prefixer from '../utils/prefixer';
-import utils from '../utils/utils';
+import { SLIDER } from '../identifiers.js';
+import events from '../utils/events.js';
+import prefixer from '../utils/prefixer.js';
+import utils from '../utils/utils.js';
 import InjectProgressBar from '../progress_bar/ProgressBar.js';
 import InjectInput from '../input/Input.js';
 
 const factory = (ProgressBar, Input) => {
-  class Slider extends React.Component {
+  class Slider extends Component {
     static propTypes = {
-      className: React.PropTypes.string,
-      editable: React.PropTypes.bool,
-      max: React.PropTypes.number,
-      min: React.PropTypes.number,
-      onChange: React.PropTypes.func,
-      pinned: React.PropTypes.bool,
-      snaps: React.PropTypes.bool,
-      step: React.PropTypes.number,
-      theme: React.PropTypes.shape({
-        container: React.PropTypes.string,
-        editable: React.PropTypes.string,
-        innerknob: React.PropTypes.string,
-        innerprogress: React.PropTypes.string,
-        input: React.PropTypes.string,
-        knob: React.PropTypes.string,
-        pinned: React.PropTypes.string,
-        pressed: React.PropTypes.string,
-        progress: React.PropTypes.string,
-        ring: React.PropTypes.string,
-        slider: React.PropTypes.string,
-        snap: React.PropTypes.string,
-        snaps: React.PropTypes.string
+      className: PropTypes.string,
+      editable: PropTypes.bool,
+      max: PropTypes.number,
+      min: PropTypes.number,
+      onChange: PropTypes.func,
+      pinned: PropTypes.bool,
+      snaps: PropTypes.bool,
+      step: PropTypes.number,
+      theme: PropTypes.shape({
+        container: PropTypes.string,
+        editable: PropTypes.string,
+        innerknob: PropTypes.string,
+        innerprogress: PropTypes.string,
+        input: PropTypes.string,
+        knob: PropTypes.string,
+        pinned: PropTypes.string,
+        pressed: PropTypes.string,
+        progress: PropTypes.string,
+        ring: PropTypes.string,
+        slider: PropTypes.string,
+        snap: PropTypes.string,
+        snaps: PropTypes.string
       }),
-      value: React.PropTypes.number
+      value: PropTypes.number
     };
 
     static defaultProps = {
@@ -302,5 +303,6 @@ const factory = (ProgressBar, Input) => {
 };
 
 const Slider = factory(InjectProgressBar, InjectInput);
-export default themr('ToolboxSlider')(Slider);
+export default themr(SLIDER)(Slider);
+export { factory as sliderFactory };
 export { Slider };

components/slider/index.js

@@ -1 +1,10 @@
-export default from './Slider';
+import { themr } from 'react-css-themr';
+import { SLIDER } from '../identifiers.js';
+import { ProgressBar } from '../progress_bar';
+import { Input} from '../input';
+import { sliderFactory } from './Slider.js';
+import theme from './theme.scss';
+
+const ThemedSlider = themr(SLIDER, theme)(sliderFactory(ProgressBar, Input));
+export default ThemedSlider;
+export { ThemedSlider as Slider };

components/slider/readme.md

@@ -2,12 +2,9 @@
 
 [Sliders](https://www.google.com/design/spec/components/sliders.html#) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
 
-This component can be styled providing a theme with the key `ToolboxSlider` through the theme provider.
-
 <!-- example -->
 ```jsx
 import Slider from 'react-toolbox/lib/slider';
-// Remember to add styles using the key ToolboxSlider
 
 class SliderTest extends React.Component {
   state = {
@@ -36,6 +33,8 @@ class SliderTest extends React.Component {
 }
 ```
 
+This component can be styled by context providing a theme with the key `RTSlider` through the theme provider.
+
 ## Properties
 
 | Name          | Type          | Default   | Description|
@@ -50,7 +49,7 @@ class SliderTest extends React.Component {
 | `step`        | `Number`      | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
 | `value`       | `Number`      | `0`       | Current value of the slider.|
 
-## Theming
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|

spec/theme.js

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