refactor: trackStyle & handleStyle & railStyle (#281)

ref #255 (comment)

README.md

@@ -105,9 +105,12 @@ 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. |
-| minimumTrackStyle | Object |`{}` | The style used for the track to the left of the button. |
-| maximumTrackStyle | Object | `{}` | The style used for the track to the right of the button. |
-| handleStyle | Object | `{}` | The style used for handle. |
+| minimumTrackStyle | Object |  | please use  `trackStyle[0]` instead. (`only used for slider, just for compatibility , will be deprecate at rc-slider@9.x `) |
+| maximumTrackStyle | Object |  | please use  `railStyle` instead (`only used for slider, just for compatibility , will be deprecate at rc-slider@9.x`) |
+| handleStyle | Array[Object] \| Object | `[{}]` | The style used for handle. (`both for slider and range, the array will be used for mutli handle follow element order`) |
+| trackStyle | Array[Object] | `[{}]` | The style used for track. (`both for slider and range, the array will be used for mutli track follow element order`)|
+| railStyle | Object | `{}` | The style used for the track base color.  |
+
 
 ### Slider
 

examples/range.js

@@ -137,6 +137,14 @@ ReactDOM.render(
       <p>Multi Range</p>
       <Range count={3} defaultValue={[20, 40, 60, 80]} pushable />
     </div>
+    <div style={style}>
+      <p>Multi Range with custom track and handle style</p>
+      <Range count={3} defaultValue={[20, 40, 60, 80]} pushable
+        trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
+        handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
+        railStyle={{ backgroundColor: 'black' }}
+      />
+    </div>
     <div style={style}>
       <p>Customized Range</p>
       <CustomizedRange />

examples/slider.js

@@ -1,11 +1,11 @@
-/* eslint react/no-multi-comp: 0 */
+/* eslint react/no-multi-comp: 0, max-len: 0 */
 import 'rc-slider/assets/index.less';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Slider from 'rc-slider';
 
-const style = { width: 400, margin: 50 };
+const style = { width: 600, margin: 50 };
 
 function log(value) {
   console.log(value); //eslint-disable-line
@@ -104,7 +104,7 @@ ReactDOM.render(
       <Slider tipFormatter={null} onChange={log} />
     </div>
     <div style={style}>
-      <p>Slider with custom handle and track style</p>
+      <p>Slider with custom handle and track style.<strong>(old api, will be deperacete)</strong></p>
       <Slider
         defaultValue={30}
         maximumTrackStyle={{ backgroundColor: 'red', height: 10 }}
@@ -115,10 +115,26 @@ ReactDOM.render(
           width: 28,
           marginLeft: -14,
           marginTop: -9,
-          backgroundColor: 'blue',
+          backgroundColor: 'black',
         }}
       />
     </div>
+    <div style={style}>
+      <p>Slider with custom handle and track style.<strong>(The recommended new api)</strong></p>
+      <Slider
+        defaultValue={30}
+        trackStyle={[{ backgroundColor: 'blue', height: 10 }]}
+        handleStyle={[{
+          borderColor: 'blue',
+          height: 28,
+          width: 28,
+          marginLeft: -14,
+          marginTop: -9,
+          backgroundColor: 'black',
+        }]}
+        railStyle={{ backgroundColor: 'red', height: 10 }}
+      />
+    </div>
     <div style={style}>
       <p>Basic Slider, disabled</p>
       <Slider tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} disabled />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "8.0.2",
+  "version": "8.1.0",
   "description": "Slider UI component for React",
   "keywords": [
     "react",

src/Handle.jsx

@@ -4,11 +4,14 @@ import PropTypes from 'prop-types';
 export default class Handle extends React.Component {
   render() {
     const {
-      className, vertical, offset, handleStyle, disabled, min, max, value, ...restProps,
+      className, vertical, offset, style, disabled, min, max, value, ...restProps,
     } = this.props;
 
-    const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
-    const elStyle = { ...style, ...handleStyle };
+    const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
+    const elStyle = {
+      ...style,
+      ...postionStyle,
+    };
     let ariaProps = {};
     if (value !== undefined) {
       ariaProps = {
@@ -35,7 +38,7 @@ Handle.propTypes = {
   className: PropTypes.string,
   vertical: PropTypes.bool,
   offset: PropTypes.number,
-  handleStyle: PropTypes.object,
+  style: PropTypes.object,
   disabled: PropTypes.bool,
   min: PropTypes.number,
   max: PropTypes.number,

src/Range.jsx

@@ -285,6 +285,8 @@ class Range extends React.Component {
       min,
       max,
       handle: handleGenerator,
+      trackStyle,
+      handleStyle,
     } = this.props;
 
     const offsets = bounds.map(v => this.calcOffset(v));
@@ -303,6 +305,7 @@ class Range extends React.Component {
       min,
       max,
       disabled,
+      style: handleStyle[i],
       ref: h => this.saveHandle(i, h),
     }));
 
@@ -319,6 +322,7 @@ class Range extends React.Component {
           included={included}
           offset={offsets[i - 1]}
           length={offsets[i] - offsets[i - 1]}
+          style={trackStyle[index]}
           key={i}
         />
       );

src/Slider.jsx

@@ -6,15 +6,12 @@ import createSlider from './common/createSlider';
 import * as utils from './utils';
 
 class Slider extends React.Component {
-  static displayName = 'Slider';
   static propTypes = {
     defaultValue: PropTypes.number,
     value: PropTypes.number,
     disabled: PropTypes.bool,
   };
 
-  static defaultProps = {};
-
   constructor(props) {
     super(props);
 
@@ -111,6 +108,7 @@ class Slider extends React.Component {
       included,
       disabled,
       minimumTrackStyle,
+      trackStyle,
       handleStyle,
       min,
       max,
@@ -127,17 +125,21 @@ class Slider extends React.Component {
       disabled,
       min,
       max,
-      handleStyle,
+      style: handleStyle[0] || handleStyle,
       ref: h => this.saveHandle(0, h),
     });
+
     const track = (
       <Track
         className={`${prefixCls}-track`}
         vertical={vertical}
         included={included}
         offset={0}
         length={offset}
-        minimumTrackStyle={minimumTrackStyle}
+        style={{
+          ...minimumTrackStyle,
+          ...trackStyle[0],
+        }}
       />
     );
 

src/common/Track.jsx

@@ -1,21 +1,21 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
-const Track = ({
-  className, included, vertical, offset, length, minimumTrackStyle,
-}) => {
-  const style = {
-    visibility: included ? 'visible' : 'hidden',
+const Track = (props) => {
+  const { className, included, vertical, offset, length, style } = props;
+
+  const positonStyle = vertical ? {
+    bottom: `${offset}%`,
+    height: `${length}%`,
+  } : {
+    left: `${offset}%`,
+    width: `${length}%`,
   };
-  if (vertical) {
-    style.bottom = `${offset}%`;
-    style.height = `${length}%`;
-  } else {
-    style.left = `${offset}%`;
-    style.width = `${length}%`;
-  }
+
   const elStyle = {
+    visibility: included ? 'visible' : 'hidden',
     ...style,
-    ...minimumTrackStyle,
+    ...positonStyle,
   };
   return <div className={className} style={elStyle} />;
 };

src/common/createSlider.jsx

@@ -31,9 +31,11 @@ export default function createSlider(Component) {
       dots: PropTypes.bool,
       vertical: PropTypes.bool,
       style: PropTypes.object,
-      minimumTrackStyle: PropTypes.object,
-      maximumTrackStyle: PropTypes.object,
-      handleStyle: PropTypes.object,
+      minimumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
+      maximumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
+      handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
+      trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
+      railStyle: PropTypes.object,
     };
 
     static defaultProps = {
@@ -55,9 +57,9 @@ export default function createSlider(Component) {
       disabled: false,
       dots: false,
       vertical: false,
-      minimumTrackStyle: {},
-      maximumTrackStyle: {},
-      handleStyle: {},
+      trackStyle: [{}],
+      handleStyle: [{}],
+      railStyle: {},
     };
 
     constructor(props) {
@@ -71,8 +73,15 @@ export default function createSlider(Component) {
           max - min,
           step
         );
+        warning(
+          !('minimumTrackStyle' in props),
+          'minimumTrackStyle will be deprecate, please use trackStyle[0] instead.'
+        );
+        warning(
+          !('maximumTrackStyle' in props),
+          'maximumTrackStyle will be deprecate, please use railStyle instead.'
+        );
       }
-
       this.handlesRefs = {};
     }
 
@@ -214,17 +223,16 @@ export default function createSlider(Component) {
         children,
         maximumTrackStyle,
         style,
+        railStyle,
       } = this.props;
       const { tracks, handles } = super.render();
 
-      const sliderClassName = classNames({
-        [prefixCls]: true,
+      const sliderClassName = classNames(prefixCls, {
         [`${prefixCls}-with-marks`]: Object.keys(marks).length,
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-vertical`]: vertical,
         [className]: className,
       });
-
       return (
         <div
           ref={this.saveSlider}
@@ -233,7 +241,13 @@ export default function createSlider(Component) {
           onMouseDown={disabled ? noop : this.onMouseDown}
           style={style}
         >
-          <div className={`${prefixCls}-rail`} style={maximumTrackStyle} />
+          <div
+            className={`${prefixCls}-rail`}
+            style={{
+              ...maximumTrackStyle,
+              ...railStyle,
+            }}
+          />
           {tracks}
           <Steps
             prefixCls={prefixCls}

src/createSliderWithTooltip.jsx

@@ -7,9 +7,11 @@ export default function createSliderWithTooltip(Component) {
   return class ComponentWrapper extends React.Component {
     static propTypes = {
       tipFormatter: PropTypes.func,
+      handleStyle: PropTypes.arrayOf(PropTypes.object),
     };
     static defaultProps = {
       tipFormatter(value) { return value; },
+      handleStyle: [{}],
     };
     constructor(props) {
       super(props);
@@ -26,7 +28,7 @@ export default function createSliderWithTooltip(Component) {
       });
     }
     handleWithTooltip = ({ value, dragging, index, disabled, ...restProps }) => {
-      const { tipFormatter } = this.props;
+      const { tipFormatter, handleStyle } = this.props;
       return (
         <Tooltip
           prefixCls="rc-slider-tooltip"
@@ -37,6 +39,9 @@ export default function createSliderWithTooltip(Component) {
         >
           <Handle
             {...restProps}
+            style={{
+              ...handleStyle[0],
+            }}
             value={value}
             onMouseEnter={() => this.handleTooltipVisibleChange(index, true)}
             onMouseLeave={() => this.handleTooltipVisibleChange(index, false)}