Compare commits

...
12 Commits
Author SHA1 Message Date
Benjy Cui c021cadcbb bump 5.3.5 2016-11-21 15:56:05 +08:00
Benjy Cui 4a59745a23 chore: expose className to identify Slider with marks 2016-11-21 15:55:24 +08:00
Benjy Cui 3e78e9ac4a docs: fix warning in example, close: #173 2016-11-21 15:46:06 +08:00
Benjy Cui 82179e613a bump 5.3.4 2016-11-16 10:14:58 +08:00
Benjy Cui 0a6fb5a570 bump 5.3.3 2016-11-15 14:29:53 +08:00
Benjy Cui 53aa61faf2 feat: provide dist files 2016-11-15 14:04:15 +08:00
Benjy Cui 9655483bf5 bump 5.2.1 2016-10-31 11:51:44 +08:00
Benjy Cui faa4f384a3 fix: handle could be 0, close: #163 2016-10-31 11:50:49 +08:00
Benjy Cui 18ddbb796c bump 5.2.0 2016-10-31 11:24:55 +08:00
Benjy Cui 051fef6603 feat: make clickable area larger, ref: #160 2016-10-31 11:23:41 +08:00
Benjy Cui b325daef48 bump 5.1.3 2016-10-21 16:44:58 +08:00
Benjy Cui db47c3d27d chore: improve UX, close: #160 2016-10-21 16:44:32 +08:00
5 changed files with 44 additions and 22 deletions
+20 -7
View File
@@ -23,13 +23,19 @@
.@{prefixClass} { .@{prefixClass} {
position: relative; position: relative;
height: 4px; height: 14px;
padding: 5px 0;
width: 100%; width: 100%;
border-radius: @border-radius-base; border-radius: @border-radius-base;
background-color: #e9e9e9;
.borderBox(); .borderBox();
&-rail {
position: absolute;
width: 100%;
background-color: #e9e9e9;
height: 4px;
}
&-track { &-track {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -62,7 +68,7 @@
&-mark { &-mark {
position: absolute; position: absolute;
top: 10px; top: 18px;
left: 0; left: 0;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
@@ -130,23 +136,30 @@
} }
.@{prefixClass}-vertical { .@{prefixClass}-vertical {
width: 4px; width: 14px;
height: 100%; height: 100%;
padding: 0 5px;
.@{prefixClass} { .@{prefixClass} {
&-rail {
height: 100%;
width: 4px;
}
&-track { &-track {
left: 5px;
bottom: 0; bottom: 0;
width: 4px; width: 4px;
} }
&-handle { &-handle {
position: absolute;
margin-left: -5px; margin-left: -5px;
margin-bottom: -7px; margin-bottom: -7px;
} }
&-mark { &-mark {
top: 0; top: 0;
left: 10px; left: 18px;
height: 100%; height: 100%;
} }
+13 -10
View File
@@ -18,16 +18,19 @@ const handleStyle = {
textAlign: 'center', textAlign: 'center',
}; };
const CustomHandle = props => { const CustomHandle = React.createClass({
const style = Object.assign({ left: `${props.offset}%` }, handleStyle); propTypes: {
return ( value: React.PropTypes.any,
<div style={style}>val: {props.value}</div> offset: React.PropTypes.number,
); },
}; render() {
CustomHandle.propTypes = { const props = this.props;
value: React.PropTypes.any, const style = Object.assign({ left: `${props.offset}%` }, handleStyle);
offset: React.PropTypes.number, return (
}; <div style={style}>val: {props.value}</div>
);
},
});
ReactDOM.render( ReactDOM.render(
<div> <div>
+6 -2
View File
@@ -1,6 +1,6 @@
{ {
"name": "rc-slider", "name": "rc-slider",
"version": "5.1.2", "version": "5.3.5",
"description": "slider ui component for react", "description": "slider ui component for react",
"keywords": [ "keywords": [
"react", "react",
@@ -19,10 +19,14 @@
}, },
"files": [ "files": [
"assets/*.css", "assets/*.css",
"lib" "lib",
"dist"
], ],
"licenses": "MIT", "licenses": "MIT",
"main": "./lib/index.js", "main": "./lib/index.js",
"entry": {
"rc-slider": ["./assets/index.less", "./src/index.js"]
},
"style": "./assets/index.css", "style": "./assets/index.css",
"config": { "config": {
"port": 8005 "port": 8005
+1 -1
View File
@@ -18,7 +18,7 @@ const Marks = ({ className, vertical, marks, included, upperBound, lowerBound, m
const bottomStyle = { const bottomStyle = {
// height: markWidth + '%', // height: markWidth + '%',
marginBottom: '-200%', marginBottom: '-50%',
bottom: `${(point - min) / range * 100}%`, bottom: `${(point - min) / range * 100}%`,
}; };
+4 -2
View File
@@ -101,7 +101,7 @@ class Slider extends React.Component {
const isNotControlled = !('value' in props); const isNotControlled = !('value' in props);
if (isNotControlled) { if (isNotControlled) {
this.setState(state); this.setState(state);
} else if (state.handle) { } else if (state.handle !== undefined) {
this.setState({ handle: state.handle }); this.setState({ handle: state.handle });
} }
@@ -508,9 +508,10 @@ class Slider extends React.Component {
const sliderClassName = classNames({ const sliderClassName = classNames({
[prefixCls]: true, [prefixCls]: true,
[`${prefixCls}-with-marks`]: Object.keys(marks).length,
[`${prefixCls}-disabled`]: disabled, [`${prefixCls}-disabled`]: disabled,
[className]: !!className,
[`${prefixCls}-vertical`]: this.props.vertical, [`${prefixCls}-vertical`]: this.props.vertical,
[className]: !!className,
}); });
return ( return (
@@ -518,6 +519,7 @@ class Slider extends React.Component {
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)}
> >
<div className={`${prefixCls}-rail`} />
{tracks} {tracks}
<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={bounds[0]} included={isIncluded} lowerBound={bounds[0]}