From bc3883304d47db8f362e5f5372df1b51e6138f09 Mon Sep 17 00:00:00 2001 From: Marco Botto Date: Mon, 16 May 2016 17:38:56 +0200 Subject: [PATCH 1/3] allow to pass custom handle components --- examples/custom-handles.html | 1 + examples/custom-handles.js | 44 ++++++++++++++++++++++++++++++++++++ src/Slider.jsx | 20 ++++++++-------- 3 files changed, 56 insertions(+), 9 deletions(-) create mode 100644 examples/custom-handles.html create mode 100644 examples/custom-handles.js diff --git a/examples/custom-handles.html b/examples/custom-handles.html new file mode 100644 index 0000000..b3a4252 --- /dev/null +++ b/examples/custom-handles.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/custom-handles.js b/examples/custom-handles.js new file mode 100644 index 0000000..5f856cd --- /dev/null +++ b/examples/custom-handles.js @@ -0,0 +1,44 @@ +require('rc-slider/assets/index.less'); + +const React = require('react'); +const ReactDOM = require('react-dom'); +const Slider = require('rc-slider'); + +const wrapperStyle = {width: 400, margin: 50}; + +const handleStyle = { + position: 'absolute', + transform: 'translate(-50%, -50%)', + cursor: 'pointer', + padding: '2px', + border: '2px solid #abe2fb', + borderRadius: '3px', + background: '#fff', + fontSize: '14px', + textAlign: 'center', + zIndex: 3, +}; + +const CustomHandle = props => { + const style = Object.assign({left: props.offset + '%'}, handleStyle); + return ( +
val: {props.value}
+ ); +}; +CustomHandle.propTypes = { + value: React.PropTypes.any, + offset: React.PropTypes.number, +}; + +ReactDOM.render( +
+
+

Default slider

+ +
+
+

Slider with custom handle

+ } /> +
+
+ , document.getElementById('__react-content')); diff --git a/src/Slider.jsx b/src/Slider.jsx index 22919bc..ce2e94f 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { cloneElement } from 'react'; import {Dom as DomUtils} from 'rc-util'; import classNames from 'classnames'; import Track from './Track'; -import Handle from './Handle'; +import DefaultHandle from './Handle'; import Steps from './Steps'; import Marks from './Marks'; @@ -328,7 +328,7 @@ class Slider extends React.Component { render() { const {handle, upperBound, lowerBound} = this.state; const {className, prefixCls, disabled, vertical, dots, included, range, step, - marks, max, min, tipTransitionName, tipFormatter, children} = this.props; + marks, max, min, Handle, tipTransitionName, tipFormatter, children} = this.props; const upperOffset = this.calcOffset(upperBound); const lowerOffset = this.calcOffset(lowerBound); @@ -336,15 +336,15 @@ class Slider extends React.Component { const handleClassName = prefixCls + '-handle'; const isNoTip = (step === null) || (tipFormatter === null); - const upper = (); + const upper = cloneElement(Handle, { className: handleClassName, + noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter, + vertical: vertical, offset: upperOffset, value: upperBound, dragging: handle === 'upperBound' }); let lower = null; if (range) { - lower = (); + lower = cloneElement(Handle, { className: handleClassName, + noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter, + vertical: vertical, offset: lowerOffset, value: lowerBound, dragging: handle === 'lowerBound' }); } const sliderClassName = classNames({ @@ -395,6 +395,7 @@ Slider.propTypes = { onBeforeChange: React.PropTypes.func, onChange: React.PropTypes.func, onAfterChange: React.PropTypes.func, + Handle: React.PropTypes.element, tipTransitionName: React.PropTypes.string, tipFormatter: React.PropTypes.func, dots: React.PropTypes.bool, @@ -411,6 +412,7 @@ Slider.defaultProps = { max: 100, step: 1, marks: {}, + Handle: , onBeforeChange: noop, onChange: noop, onAfterChange: noop, From 0b4b546e038e3c6ca8c512817bbb81a25e698d0e Mon Sep 17 00:00:00 2001 From: Marco Botto Date: Mon, 30 May 2016 12:08:52 +0200 Subject: [PATCH 2/3] changed API to from to --- examples/custom-handles.js | 2 +- src/Slider.jsx | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/examples/custom-handles.js b/examples/custom-handles.js index 5f856cd..136fefb 100644 --- a/examples/custom-handles.js +++ b/examples/custom-handles.js @@ -38,7 +38,7 @@ ReactDOM.render(

Slider with custom handle

- } /> + } />
, document.getElementById('__react-content')); diff --git a/src/Slider.jsx b/src/Slider.jsx index ce2e94f..d6a2c64 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -328,7 +328,9 @@ class Slider extends React.Component { render() { const {handle, upperBound, lowerBound} = this.state; const {className, prefixCls, disabled, vertical, dots, included, range, step, - marks, max, min, Handle, tipTransitionName, tipFormatter, children} = this.props; + marks, max, min, tipTransitionName, tipFormatter, children} = this.props; + + const customHandle = this.props.handle; const upperOffset = this.calcOffset(upperBound); const lowerOffset = this.calcOffset(lowerBound); @@ -336,13 +338,13 @@ class Slider extends React.Component { const handleClassName = prefixCls + '-handle'; const isNoTip = (step === null) || (tipFormatter === null); - const upper = cloneElement(Handle, { className: handleClassName, + const upper = cloneElement(customHandle, { className: handleClassName, noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter, vertical: vertical, offset: upperOffset, value: upperBound, dragging: handle === 'upperBound' }); let lower = null; if (range) { - lower = cloneElement(Handle, { className: handleClassName, + lower = cloneElement(customHandle, { className: handleClassName, noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter, vertical: vertical, offset: lowerOffset, value: lowerBound, dragging: handle === 'lowerBound' }); } @@ -395,7 +397,7 @@ Slider.propTypes = { onBeforeChange: React.PropTypes.func, onChange: React.PropTypes.func, onAfterChange: React.PropTypes.func, - Handle: React.PropTypes.element, + handle: React.PropTypes.element, tipTransitionName: React.PropTypes.string, tipFormatter: React.PropTypes.func, dots: React.PropTypes.bool, @@ -412,7 +414,7 @@ Slider.defaultProps = { max: 100, step: 1, marks: {}, - Handle: , + handle: , onBeforeChange: noop, onChange: noop, onAfterChange: noop, From 1ae39dd995f01487b9a6881fa961e3e41881a28c Mon Sep 17 00:00:00 2001 From: Marco Botto Date: Mon, 30 May 2016 12:16:53 +0200 Subject: [PATCH 3/3] added custom handle API to docs --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 0b7791c..a2bc5c3 100644 --- a/README.md +++ b/README.md @@ -130,6 +130,12 @@ ReactDOM.render(, container); Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` + + handle + Component + + Provide a custom Handle to use in the slider by passing a component. This component will have a `value` and `offset` props used to define custom styling/content. + included boolean