Merge pull request #243 from react-component/support-color

feature: support minimumTrackTintColor & maximumTrackTintColor

Author: paranoidjk

README.md

@@ -105,6 +105,8 @@ The following APIs are shared by Slider and Range.
 | onBeforeChange | Function | NOOP | `onBeforeChange` will be triggered when `ontouchstart` or `onmousedown` is triggered. |
 | onChange | Function | NOOP | `onChange` will be triggered while the value of Slider changing. |
 | onAfterChange | Function | NOOP | `onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered. |
+| minimumTrackTintColor | String |  | The color used for the track to the left of the button. |
+| maximumTrackTintColor | String |  | The color used for the track to the right of the button. |
 
 ### Slider
 

examples/handle.html

@@ -1 +1 @@
-placeholder
+placeholder

src/Handle.jsx

@@ -2,9 +2,13 @@ import React, { PropTypes } from 'react';
 
 export default class Handle extends React.Component {
   render() {
-    const { className, vertical, offset, ...restProps } = this.props;
-
+    const {
+      className, vertical, offset, maximumTrackTintColor, disabled, ...restProps,
+    } = this.props;
     const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
+    if (maximumTrackTintColor && !disabled) {
+      style.borderColor = maximumTrackTintColor;
+    }
     return <div {...restProps} className={className} style={style} />;
   }
 }
@@ -13,4 +17,6 @@ Handle.propTypes = {
   className: PropTypes.string,
   vertical: PropTypes.bool,
   offset: PropTypes.number,
+  maximumTrackTintColor: PropTypes.string,
+  disabled: PropTypes.bool,
 };

src/Slider.jsx

@@ -109,6 +109,7 @@ class Slider extends React.Component {
       vertical,
       included,
       disabled,
+      maximumTrackTintColor,
       handle: handleGenerator,
     } = this.props;
     const { value, dragging } = this.state;
@@ -120,6 +121,7 @@ class Slider extends React.Component {
       value,
       dragging,
       disabled,
+      maximumTrackTintColor,
       ref: h => this.saveHandle(0, h),
     });
     const track = (
@@ -128,7 +130,9 @@ class Slider extends React.Component {
         vertical={vertical}
         included={included}
         offset={0}
+        disabled={disabled}
         length={offset}
+        maximumTrackTintColor={maximumTrackTintColor}
       />
     );
 

src/common/Track.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-const Track = ({ className, included, vertical, offset, length }) => {
+const Track = ({
+  className, included, vertical, offset, length, maximumTrackTintColor, disabled,
+}) => {
   const style = {
     visibility: included ? 'visible' : 'hidden',
   };
@@ -11,6 +13,9 @@ const Track = ({ className, included, vertical, offset, length }) => {
     style.left = `${offset}%`;
     style.width = `${length}%`;
   }
+  if (maximumTrackTintColor && !disabled) {
+    style.backgroundColor = maximumTrackTintColor;
+  }
   return <div className={className} style={style} />;
 };
 

src/common/createSlider.jsx

@@ -30,6 +30,7 @@ export default function createSlider(Component) {
       dots: PropTypes.bool,
       vertical: PropTypes.bool,
       style: PropTypes.object,
+      minimumTrackTintColor: PropTypes.string,
     };
 
     static defaultProps = {
@@ -206,6 +207,7 @@ export default function createSlider(Component) {
         min,
         max,
         children,
+        minimumTrackTintColor,
         style,
       } = this.props;
       const { tracks, handles } = super.render();
@@ -217,6 +219,11 @@ export default function createSlider(Component) {
         [`${prefixCls}-vertical`]: vertical,
         [className]: className,
       });
+
+      const trackStyle = minimumTrackTintColor && !disabled ? {
+        backgroundColor: minimumTrackTintColor,
+      } : {};
+
       return (
         <div
           ref={this.saveSlider}
@@ -225,7 +232,7 @@ export default function createSlider(Component) {
           onMouseDown={disabled ? noop : this.onMouseDown}
           style={style}
         >
-          <div className={`${prefixCls}-rail`} />
+          <div className={`${prefixCls}-rail`} style={trackStyle} />
           {tracks}
           <Steps
             prefixCls={prefixCls}