refactor: Update class names

davidchin · Jan 30, 2017 · 92277fe · 92277fe
1 parent 517e0ac
commit 92277fe
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 36 deletions.
diff --git a/src/js/input-range/default-class-names.js b/src/js/input-range/default-class-names.js
@@ -2,28 +2,28 @@
 * An object containing class names
 * @ignore
 * @type {Object}
-* @property {string} component
-* @property {string} componentDisabled
+* @property {string} activeTrack
+* @property {string} disabledInputRange
+* @property {string} inputRange
 * @property {string} labelContainer
-* @property {string} labelMax
-* @property {string} labelMin
-* @property {string} labelValue
+* @property {string} maxLabel
+* @property {string} minLabel
 * @property {string} slider
 * @property {string} sliderContainer
-* @property {string} trackActive
-* @property {string} trackContainer
+* @property {string} track
+* @property {string} valueLabel
 */
 const DEFAULT_CLASS_NAMES = {
-  component: 'input-range',
-  componentDisabled: 'input-range input-range--disabled',
+  activeTrack: 'input-range__track input-range__track--active',
+  disabledInputRange: 'input-range input-range--disabled',
+  inputRange: 'input-range',
   labelContainer: 'input-range__label-container',
-  labelMax: 'input-range__label input-range__label--max',
-  labelMin: 'input-range__label input-range__label--min',
-  labelValue: 'input-range__label input-range__label--value',
+  maxLabel: 'input-range__label input-range__label--max',
+  minLabel: 'input-range__label input-range__label--min',
   slider: 'input-range__slider',
   sliderContainer: 'input-range__slider-container',
-  trackActive: 'input-range__track input-range__track--active',
-  trackContainer: 'input-range__track input-range__track--container',
+  track: 'input-range__track input-range__track--background',
+  valueLabel: 'input-range__label input-range__label--value',
 };
 
 export default DEFAULT_CLASS_NAMES;
diff --git a/src/js/input-range/input-range.jsx b/src/js/input-range/input-range.jsx
@@ -133,10 +133,10 @@ export default class InputRange extends React.Component {
    */
   getComponentClassName() {
     if (!this.props.disabled) {
-      return this.props.classNames.component;
+      return this.props.classNames.inputRange;
     }
 
-    return this.props.classNames.componentDisabled;
+    return this.props.classNames.disabledInputRange;
   }
 
   /**
@@ -601,9 +601,9 @@ export default class InputRange extends React.Component {
         onMouseDown={this.handleMouseDown}
         onTouchStart={this.handleTouchStart}>
         <Label
-          className={this.props.classNames.labelMin}
-          containerClassName={this.props.classNames.labelContainer}
-          formatLabel={this.formatLabel}>
+          classNames={this.props.classNames}
+          formatLabel={this.formatLabel}
+          type="min">
           {this.props.minValue}
         </Label>
 
@@ -617,9 +617,9 @@ export default class InputRange extends React.Component {
         </Track>
 
         <Label
-          className={this.props.classNames.labelMax}
-          containerClassName={this.props.classNames.labelContainer}
-          formatLabel={this.formatLabel}>
+          classNames={this.props.classNames}
+          formatLabel={this.formatLabel}
+          type="max">
           {this.props.maxValue}
         </Label>
 

diff --git a/src/js/input-range/label.jsx b/src/js/input-range/label.jsx
@@ -5,12 +5,11 @@ import React from 'react';
  * Label React component
  */
 export default function Label(props) {
-  const { children, className, containerClassName, formatLabel } = props;
-  const labelValue = formatLabel ? formatLabel(children) : children;
+  const labelValue = props.formatLabel ? props.formatLabel(props.children) : props.children;
 
   return (
-    <span className={className}>
-      <span className={containerClassName}>
+    <span className={props.classNames[`${props.type}Label`]}>
+      <span className={props.classNames.labelContainer}>
         {labelValue}
       </span>
     </span>
@@ -21,13 +20,13 @@ export default function Label(props) {
  * Accepted propTypes of Label
  * @type {Object}
  * @property {Function} children
- * @property {Function} className
- * @property {Function} containerClassName
+ * @property {Function} classNames
  * @property {Function} formatLabel
+ * @property {Function} type
  */
 Label.propTypes = {
   children: React.PropTypes.node.isRequired,
-  className: React.PropTypes.string.isRequired,
-  containerClassName: React.PropTypes.string.isRequired,
+  classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,
   formatLabel: React.PropTypes.func,
+  type: React.PropTypes.string.isRequired,
 };
diff --git a/src/js/input-range/slider.jsx b/src/js/input-range/slider.jsx
@@ -182,9 +182,9 @@ export default class Slider extends React.Component {
         ref={(node) => { this.node = node; }}
         style={style}>
         <Label
-          className={this.props.classNames.labelValue}
-          containerClassName={this.props.classNames.labelContainer}
-          formatLabel={this.props.formatLabel}>
+          classNames={this.props.classNames}
+          formatLabel={this.props.formatLabel}
+          type="value">
           {this.props.value}
         </Label>
 

diff --git a/src/js/input-range/track.jsx b/src/js/input-range/track.jsx
@@ -101,13 +101,13 @@ export default class Track extends React.Component {
 
     return (
       <div
-        className={this.props.classNames.trackContainer}
+        className={this.props.classNames.track}
         onMouseDown={this.handleMouseDown}
         onTouchStart={this.handleTouchStart}
         ref={(node) => { this.node = node; }}>
         <div
           style={activeTrackStyle}
-          className={this.props.classNames.trackActive} />
+          className={this.props.classNames.activeTrack} />
         {this.props.children}
       </div>
     );

diff --git a/src/scss/input-range/_input-range-track.scss b/src/scss/input-range/_input-range-track.scss
@@ -12,7 +12,7 @@
   }
 }
 
-.input-range__track--container {
+.input-range__track--background {
   left: 0;
   margin-top: -0.5 * $input-range-track-height;
   position: absolute;