Skip to content

Commit

Permalink
Added dotStyle and activeDotStyle
Browse files Browse the repository at this point in the history
  • Loading branch information
tberry1 committed Jul 1, 2017
1 parent 89353ad commit 665708a
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 2 deletions.
4 changes: 4 additions & 0 deletions examples/slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,10 @@ ReactDOM.render(
<p>Basic Slider,`step=20, dots`</p>
<Slider dots step={20} defaultValue={100} onAfterChange={log} />
</div>
<div style={style}>
<p>Basic Slider,`step=20, dots, dotStyle={"{borderColor: 'orange'}"}, activeDotStyle={"{borderColor: 'yellow'}"}`</p>
<Slider dots step={20} defaultValue={100} onAfterChange={log} dotStyle={{ borderColor: 'orange' }} activeDotStyle={{ borderColor: 'yellow' }} />
</div>
<div style={style}>
<p>Slider with tooltip, with custom `tipFormatter`</p>
<SliderWithTooltip
Expand Down
8 changes: 6 additions & 2 deletions src/common/Steps.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,18 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
};

const Steps = ({ prefixCls, vertical, marks, dots, step, included,
lowerBound, upperBound, max, min }) => {
lowerBound, upperBound, max, min, dotStyle, activeDotStyle }) => {
const range = max - min;
const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
const offset = `${Math.abs(point - min) / range * 100}%`;
const style = vertical ? { bottom: offset } : { left: offset };

const isActived = (!included && point === upperBound) ||
(included && point <= upperBound && point >= lowerBound);
let style = dotStyle || {};
if (isActived && activeDotStyle) {
style = { ...style, ...activeDotStyle };
}
style = vertical ? { bottom: offset, ...style } : { left: offset, ...style };
const pointClassName = classNames({
[`${prefixCls}-dot`]: true,
[`${prefixCls}-dot-active`]: isActived,
Expand Down
6 changes: 6 additions & 0 deletions src/common/createSlider.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ export default function createSlider(Component) {
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
railStyle: PropTypes.object,
dotStyle: PropTypes.object,
activeDotStyle: PropTypes.object,
};

static defaultProps = {
Expand Down Expand Up @@ -216,6 +218,8 @@ export default function createSlider(Component) {
maximumTrackStyle,
style,
railStyle,
dotStyle,
activeDotStyle,
} = this.props;
const { tracks, handles } = super.render();

Expand Down Expand Up @@ -252,6 +256,8 @@ export default function createSlider(Component) {
upperBound={this.getUpperBound()}
max={max}
min={min}
dotStyle={dotStyle}
activeDotStyle={activeDotStyle}
/>
{handles}
<Marks
Expand Down

0 comments on commit 665708a

Please sign in to comment.