From db4a0f1d57150354bb174adaceeee3bf5e6cb2d9 Mon Sep 17 00:00:00 2001 From: silentcloud Date: Thu, 6 Apr 2017 17:50:50 +0800 Subject: [PATCH] support custom track & handle style, for react-tiny --- README.md | 5 +++-- assets/index.less | 3 ++- examples/slider.js | 16 ++++++++++++++++ package.json | 7 +++++-- src/Handle.jsx | 11 ++++------- src/Slider.jsx | 8 ++++---- src/common/Track.jsx | 9 ++++----- src/common/createSlider.jsx | 15 ++++++++------- 8 files changed, 46 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index fbd82e6b9..b7354c261 100644 --- a/README.md +++ b/README.md @@ -105,8 +105,9 @@ 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. | +| 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. | ### Slider diff --git a/assets/index.less b/assets/index.less index b413dcfca..b11a9ad84 100644 --- a/assets/index.less +++ b/assets/index.less @@ -34,6 +34,7 @@ width: 100%; background-color: #e9e9e9; height: 4px; + border-radius: @border-radius-base; } &-track { @@ -286,4 +287,4 @@ border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } -} \ No newline at end of file +} diff --git a/examples/slider.js b/examples/slider.js index 00e59073c..df51aa362 100644 --- a/examples/slider.js +++ b/examples/slider.js @@ -101,6 +101,22 @@ ReactDOM.render(

Basic Slider without tooltip

+
+

Slider with custom handle and track style

+ +

Basic Slider, disabled

diff --git a/package.json b/package.json index e34345cab..deefd8054 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "name": "rc-slider", - "version": "6.3.1", "description": "Slider UI component for React", "keywords": [ @@ -26,7 +25,10 @@ "license": "MIT", "main": "./lib/index.js", "entry": { - "rc-slider": ["./assets/index.less", "./src/index.js"] + "rc-slider": [ + "./assets/index.less", + "./src/index.js" + ] }, "style": "./assets/index.css", "config": { @@ -66,6 +68,7 @@ "dependencies": { "babel-runtime": "6.x", "classnames": "^2.2.5", + "object-assign": "^4.1.1", "rc-tooltip": "^3.4.2", "rc-util": "^4.0.0", "warning": "^3.0.0" diff --git a/src/Handle.jsx b/src/Handle.jsx index 4f2f16a98..986db32b4 100644 --- a/src/Handle.jsx +++ b/src/Handle.jsx @@ -1,15 +1,13 @@ import React, { PropTypes } from 'react'; +import assign from 'object-assign'; export default class Handle extends React.Component { render() { const { - className, vertical, offset, minimumTrackTintColor, disabled, ...restProps, + className, vertical, offset, handleStyle, ...restProps, } = this.props; const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` }; - if (minimumTrackTintColor && !disabled) { - style.borderColor = minimumTrackTintColor; - } - return
; + return
; } } @@ -17,6 +15,5 @@ Handle.propTypes = { className: PropTypes.string, vertical: PropTypes.bool, offset: PropTypes.number, - minimumTrackTintColor: PropTypes.string, - disabled: PropTypes.bool, + handleStyle: PropTypes.object, }; diff --git a/src/Slider.jsx b/src/Slider.jsx index 0b33fe15f..2e7ff84c4 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -109,7 +109,8 @@ class Slider extends React.Component { vertical, included, disabled, - minimumTrackTintColor, + minimumTrackStyle, + handleStyle, handle: handleGenerator, } = this.props; const { value, dragging } = this.state; @@ -121,7 +122,7 @@ class Slider extends React.Component { value, dragging, disabled, - minimumTrackTintColor, + handleStyle, ref: h => this.saveHandle(0, h), }); const track = ( @@ -130,9 +131,8 @@ class Slider extends React.Component { vertical={vertical} included={included} offset={0} - disabled={disabled} length={offset} - minimumTrackTintColor={minimumTrackTintColor} + minimumTrackStyle={minimumTrackStyle} /> ); diff --git a/src/common/Track.jsx b/src/common/Track.jsx index 6e36bff6e..52f3d7b5d 100644 --- a/src/common/Track.jsx +++ b/src/common/Track.jsx @@ -1,7 +1,8 @@ import React from 'react'; +import assign from 'object-assign'; const Track = ({ - className, included, vertical, offset, length, minimumTrackTintColor, disabled, + className, included, vertical, offset, length, minimumTrackStyle, }) => { const style = { visibility: included ? 'visible' : 'hidden', @@ -13,10 +14,8 @@ const Track = ({ style.left = `${offset}%`; style.width = `${length}%`; } - if (minimumTrackTintColor && !disabled) { - style.backgroundColor = minimumTrackTintColor; - } - return
; + + return
; }; export default Track; diff --git a/src/common/createSlider.jsx b/src/common/createSlider.jsx index 8a44593ba..1d910738d 100644 --- a/src/common/createSlider.jsx +++ b/src/common/createSlider.jsx @@ -30,7 +30,9 @@ export default function createSlider(Component) { dots: PropTypes.bool, vertical: PropTypes.bool, style: PropTypes.object, - maximumTrackTintColor: PropTypes.string, + minimumTrackStyle: PropTypes.object, + maximumTrackStyle: PropTypes.object, + handleStyle: PropTypes.object, }; static defaultProps = { @@ -53,6 +55,9 @@ export default function createSlider(Component) { disabled: false, dots: false, vertical: false, + minimumTrackStyle: {}, + maximumTrackStyle: {}, + handleStyle: {}, }; constructor(props) { @@ -207,7 +212,7 @@ export default function createSlider(Component) { min, max, children, - maximumTrackTintColor, + maximumTrackStyle, style, } = this.props; const { tracks, handles } = super.render(); @@ -220,10 +225,6 @@ export default function createSlider(Component) { [className]: className, }); - const trackStyle = maximumTrackTintColor && !disabled ? { - backgroundColor: maximumTrackTintColor, - } : {}; - return (
-
+
{tracks}