Compare commits

..
2 Commits
Author SHA1 Message Date
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
3 changed files with 82 additions and 33 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "rc-slider", "name": "rc-slider",
"version": "3.8.0", "version": "3.8.1",
"description": "slider ui component for react", "description": "slider ui component for react",
"keywords": [ "keywords": [
"react", "react",
+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>
); );