mirror of
https://github.com/wassname/slider.git
synced 2026-09-10 12:38:09 +08:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6347b6d0c6 | ||
|
|
6a5573b6ca | ||
|
|
e030ba9f9d |
+2
-2
@@ -7,7 +7,7 @@ const Slider = require('rc-slider');
|
||||
const style = {width: 400, margin: 50};
|
||||
const marks = {
|
||||
'-10': '-10°C',
|
||||
0: '0°C',
|
||||
0: <strong>0°C</strong>,
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
@@ -15,7 +15,7 @@ const marks = {
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
label: '100°C',
|
||||
label: <strong>100°C</strong>,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rc-slider",
|
||||
"version": "3.4.0",
|
||||
"version": "3.5.0",
|
||||
"description": "slider ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
+2
-1
@@ -20,7 +20,8 @@ const Marks = ({className, marks, included, upperBound, lowerBound, max, min}) =
|
||||
style.left = (point - min) / range * 100 - markWidth / 2 + '%';
|
||||
|
||||
const markPoint = marks[point];
|
||||
const markPointIsObject = typeof markPoint === 'object';
|
||||
const markPointIsObject = typeof markPoint === 'object' &&
|
||||
!React.isValidElement(markPoint);
|
||||
const markLabel = markPointIsObject ? markPoint.label : markPoint;
|
||||
const markStyle = markPointIsObject ?
|
||||
{ ...style, ...markPoint.style } : style;
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@ import classNames from 'classnames';
|
||||
import objectAssign from 'object-assign';
|
||||
import Track from './Track';
|
||||
import Handle from './Handle';
|
||||
import Dots from './Dots';
|
||||
import Steps from './Steps';
|
||||
import Marks from './Marks';
|
||||
|
||||
function noop() {
|
||||
@@ -366,7 +366,7 @@ class Slider extends React.Component {
|
||||
{lower}
|
||||
<Track className={prefixCls + '-track'} included={isIncluded}
|
||||
offset={lowerOffset} length={upperOffset - lowerOffset}/>
|
||||
<Dots prefixCls={prefixCls} marks={marks} dots={dots} step={step}
|
||||
<Steps prefixCls={prefixCls} marks={marks} dots={dots} step={step}
|
||||
included={isIncluded} lowerBound={lowerBound}
|
||||
upperBound={upperBound} max={max} min={min}/>
|
||||
<Marks className={prefixCls + '-mark'} marks={marks}
|
||||
|
||||
@@ -12,7 +12,8 @@ function calcPoints(marks, dots, step, min, max) {
|
||||
return points;
|
||||
}
|
||||
|
||||
const Dots = ({prefixCls, marks, dots, step, included, lowerBound, upperBound, max, min}) => {
|
||||
const Steps = ({prefixCls, marks, dots, step, included,
|
||||
lowerBound, upperBound, max, min}) => {
|
||||
const range = max - min;
|
||||
const elements = calcPoints(marks, dots, step, min, max).map((point) => {
|
||||
const offset = (point - min) / range * 100 + '%';
|
||||
@@ -31,4 +32,4 @@ const Dots = ({prefixCls, marks, dots, step, included, lowerBound, upperBound, m
|
||||
return <div className={prefixCls + '-step'}>{elements}</div>;
|
||||
};
|
||||
|
||||
export default Dots;
|
||||
export default Steps;
|
||||
Reference in New Issue
Block a user