Compare commits

..
5 Commits
Author SHA1 Message Date
Benjy Cui 36210b3634 bump 3.8.2 2016-07-27 10:17:57 +08:00
Helder Santana 9219927f8a chore: add 'style' node to package.json (#127) 2016-07-27 10:15:55 +08:00
Benjy Cui 826fd73c93 docs: update usage 2016-07-25 14:18:50 +08:00
Benjy Cui a4cf02cf75 bump 3.8.1 2016-07-25 14:09:49 +08:00
Benjy Cui d05761f396 fix: should pass prefixCls to Tooltip correctly, close: #123 2016-07-25 14:09:05 +08:00
4 changed files with 85 additions and 33 deletions
+2
View File
@@ -50,6 +50,8 @@ slider ui component for react
## Usage ## Usage
```js ```js
require('rc-slider/assets/index.css');
var React = require('react'); var React = require('react');
var ReactDOM = require('react-dom'); var ReactDOM = require('react-dom');
var Rcslider = require('rc-slider'); var Rcslider = require('rc-slider');
+2 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "rc-slider", "name": "rc-slider",
"version": "3.8.0", "version": "3.8.2",
"description": "slider ui component for react", "description": "slider ui component for react",
"keywords": [ "keywords": [
"react", "react",
@@ -23,6 +23,7 @@
], ],
"licenses": "MIT", "licenses": "MIT",
"main": "./lib/index.js", "main": "./lib/index.js",
"style": "./assets/index.css",
"config": { "config": {
"port": 8005 "port": 8005
}, },
+31 -16
View File
@@ -23,34 +23,49 @@ export default class Handle extends React.Component {
} }
render() { render() {
const props = this.props; const {
const {className, tipTransitionName, tipFormatter, vertical, offset, value} = props; prefixCls,
const {dragging, noTip} = props; className,
tipTransitionName,
tipFormatter,
vertical,
offset,
value,
dragging,
noTip,
} = this.props;
const style = vertical ? { bottom: offset + '%' } : { left: offset + '%' }; const style = vertical ? { bottom: offset + '%' } : { left: offset + '%' };
const handle = (<div className={className} style={style} const handle = (
onMouseUp={this.showTooltip.bind(this)} <div className={className} style={style}
onMouseEnter={this.showTooltip.bind(this)} onMouseUp={this.showTooltip.bind(this)}
onMouseLeave={this.hideTooltip.bind(this)}/>); onMouseEnter={this.showTooltip.bind(this)}
onMouseLeave={this.hideTooltip.bind(this)}
/>
);
if (noTip) { if (noTip) {
return handle; return handle;
} }
const isTooltipVisible = dragging || this.state.isTooltipVisible; const isTooltipVisible = dragging || this.state.isTooltipVisible;
return (<Tooltip return (
prefixCls={className.replace('slider-handle', 'tooltip')} <Tooltip
placement="top" prefixCls={prefixCls.replace('slider', 'tooltip')}
visible={isTooltipVisible} placement="top"
overlay={<span>{tipFormatter(value)}</span>} visible={isTooltipVisible}
delay={0} overlay={<span>{tipFormatter(value)}</span>}
transitionName={tipTransitionName}> delay={0}
{handle} transitionName={tipTransitionName}
</Tooltip>); >
{handle}
</Tooltip>
);
} }
} }
Handle.propTypes = { Handle.propTypes = {
prefixCls: React.PropTypes.string,
className: React.PropTypes.string, className: React.PropTypes.string,
vertical: React.PropTypes.bool, vertical: React.PropTypes.bool,
offset: React.PropTypes.number, offset: React.PropTypes.number,
+50 -16
View File
@@ -327,9 +327,26 @@ class Slider extends React.Component {
} }
render() { render() {
const {handle, upperBound, lowerBound} = this.state; const {
const {className, prefixCls, disabled, vertical, dots, included, range, step, handle,
marks, max, min, tipTransitionName, tipFormatter, children} = this.props; upperBound,
lowerBound,
} = this.state;
const {
className,
prefixCls,
disabled,
vertical,
dots,
included,
range,
step,
marks,
max, min,
tipTransitionName,
tipFormatter,
children,
} = this.props;
const customHandle = this.props.handle; const customHandle = this.props.handle;
@@ -350,15 +367,31 @@ class Slider extends React.Component {
const isNoTip = (step === null) || (tipFormatter === null); const isNoTip = (step === null) || (tipFormatter === null);
const upper = cloneElement(customHandle, { className: upperClassName, const commonHandleProps = {
noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter, prefixCls,
vertical: vertical, offset: upperOffset, value: upperBound, dragging: handle === 'upperBound' }); noTip: isNoTip,
tipTransitionName,
tipFormatter,
vertical,
};
const upper = cloneElement(customHandle, {
...commonHandleProps,
className: upperClassName,
value: upperBound,
offset: upperOffset,
dragging: handle === 'upperBound',
});
let lower = null; let lower = null;
if (range) { if (range) {
lower = cloneElement(customHandle, { className: lowerClassName, lower = cloneElement(customHandle, {
noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter, ...commonHandleProps,
vertical: vertical, offset: lowerOffset, value: lowerBound, dragging: handle === 'lowerBound' }); className: lowerClassName,
value: lowerBound,
offset: lowerOffset,
dragging: handle === 'lowerBound',
});
} }
const sliderClassName = classNames({ const sliderClassName = classNames({
@@ -370,18 +403,19 @@ class Slider extends React.Component {
const isIncluded = included || range; const isIncluded = included || range;
return ( return (
<div ref="slider" className={sliderClassName} <div ref="slider" className={sliderClassName}
onTouchStart={disabled ? noop : this.onTouchStart.bind(this)} onTouchStart={disabled ? noop : this.onTouchStart.bind(this)}
onMouseDown={disabled ? noop : this.onMouseDown.bind(this)}> onMouseDown={disabled ? noop : this.onMouseDown.bind(this)}
>
{upper} {upper}
{lower} {lower}
<Track className={prefixCls + '-track'} vertical = {vertical} included={isIncluded} <Track className={prefixCls + '-track'} vertical = {vertical} included={isIncluded}
offset={lowerOffset} length={upperOffset - lowerOffset}/> offset={lowerOffset} length={upperOffset - lowerOffset} />
<Steps prefixCls={prefixCls} vertical = {vertical} marks={marks} dots={dots} step={step} <Steps prefixCls={prefixCls} vertical = {vertical} marks={marks} dots={dots} step={step}
included={isIncluded} lowerBound={lowerBound} included={isIncluded} lowerBound={lowerBound}
upperBound={upperBound} max={max} min={min}/> upperBound={upperBound} max={max} min={min} />
<Marks className={prefixCls + '-mark'} vertical = {vertical} marks={marks} <Marks className={prefixCls + '-mark'} vertical = {vertical} marks={marks}
included={isIncluded} lowerBound={lowerBound} included={isIncluded} lowerBound={lowerBound}
upperBound={upperBound} max={max} min={min}/> upperBound={upperBound} max={max} min={min} />
{children} {children}
</div> </div>
); );