Skip to content

Commit ea39abd

Browse files
davidchindavidchin
committed
Add disabled prop
1 parent 0df907a commit ea39abd

File tree

7 files changed

+104
-21
lines changed

7 files changed

+104
-21
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ ariaLabelledby |string |`aria-labelledby` attribute
7373
classNames |Object.<string> |CSS class names
7474
defaultValue |number |Default value
7575
defaultValues |Object |Default values
76+
disabled |boolean |Disabled or not
7677
maxValue |number |Maximum value it can accept
7778
minValue |number |Minimum value it can accept
7879
name |string |Name of `form` input

‎example/js/App.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@ class App extends React.Component {
6464
minValue={0}
6565
defaultValue={defaultValue}
6666
/>
67+
68+
<InputRange
69+
maxValue={20}
70+
minValue={0}
71+
disabled={true}
72+
defaultValue={defaultValue}
73+
/>
6774
</form>
6875
);
6976
}

‎scss/_InputRangeSlider.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,18 @@
1515
width: $InputRange-slider-width;
1616

1717
&:active {
18-
transform: $InputRange-slider-transform--active;
18+
transform: $InputRange-slider--active-transform;
1919
}
2020

2121
&:focus {
22-
box-shadow: 0 0 0 5px transparentize($InputRange-primaryColor, 0.8);
22+
box-shadow: 0 0 0 5px transparentize($InputRange-slider-background, 0.8);
23+
}
24+
25+
.InputRange.is-disabled & {
26+
background: $InputRange-slider--is-disabled-background;
27+
border: $InputRange-slider--is-disabled-border;
28+
box-shadow: none;
29+
transform: none;
2330
}
2431
}
2532

‎scss/_InputRangeTrack.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
height: $InputRange-track-height;
66
position: relative;
77
transition: $inputRange-track-transition;
8+
9+
.InputRange.is-disabled & {
10+
background: $InputRange-track--is-disabled-background;
11+
}
812
}
913

1014
.InputRange-track--container {

‎scss/_InputRangeVariables.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,25 @@ $InputRange-fontFamily: 'Helvetica Neue', san-serif;
22
$InputRange-primaryColor: #3f51b5;
33
$InputRange-neutralColor: #aaaaaa;
44
$InputRange-neutralLightColor: #eeeeee;
5+
$InputRange-disabledColor: #cccccc;
56

67
// InputRange-slider
78
$InputRange-slider-background: $InputRange-primaryColor !default;
89
$InputRange-slider-border: 1px solid $InputRange-primaryColor !default;
910
$InputRange-slider-height: 1rem !default;
1011
$InputRange-slider-width: 1rem !default;
1112
$InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
12-
$InputRange-slider-transform--active: scale(1.3) !default;
1313
$InputRange-sliderContainer-transition: left 0.3s ease-out;
14+
$InputRange-slider--active-transform: scale(1.3) !default;
15+
$InputRange-slider--is-disabled-background: $InputRange-disabledColor !default;
16+
$InputRange-slider--is-disabled-border: 1px solid $InputRange-disabledColor !default;
1417

1518
// InputRange-label
1619
$InputRange-label-color: $InputRange-neutralColor !default;
1720

1821
// InputRange-track
19-
$InputRange-track--active-background: $InputRange-primaryColor !default;
2022
$InputRange-track-background: $InputRange-neutralLightColor !default;
2123
$InputRange-track-height: 0.3rem !default;
2224
$inputRange-track-transition: left 0.3s ease-out, width 0.3s ease-out;
25+
$InputRange-track--active-background: $InputRange-primaryColor !default;
26+
$InputRange-track--is-disabled-background: $InputRange-neutralLightColor !default;

‎src/InputRange/InputRange.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,12 +233,20 @@ class InputRange extends React.Component {
233233

234234
// Handlers
235235
handleSliderMouseMove(slider, event) {
236+
if (this.props.disabled) {
237+
return;
238+
}
239+
236240
const position = this.valueTransformer.positionFromEvent(event);
237241

238242
this.setPosition(slider, position);
239243
}
240244

241245
handleSliderKeyDown(slider, event) {
246+
if (this.props.disabled) {
247+
return;
248+
}
249+
242250
switch (event.keyCode) {
243251
case KeyCode.LEFT_ARROW:
244252
this.decrementValue(slider);
@@ -254,6 +262,10 @@ class InputRange extends React.Component {
254262
}
255263

256264
handleTrackMouseDown(track, position) {
265+
if (this.props.disabled) {
266+
return;
267+
}
268+
257269
this.setPosition(null, position);
258270
}
259271

@@ -313,9 +325,17 @@ class InputRange extends React.Component {
313325

314326
render() {
315327
const classNames = this.props.classNames;
328+
let componentClassName = classNames.component;
329+
330+
if (this.props.disabled) {
331+
componentClassName = `${componentClassName} is-disabled`;
332+
}
316333

317334
return (
318-
<div ref="inputRange" className={ classNames.component }>
335+
<div
336+
aria-disabled={ this.props.disabled }
337+
ref="inputRange"
338+
className={ componentClassName }>
319339
<span className={ classNames.labelMin }>
320340
<span className={ classNames.labelContainer }>
321341
{ this.props.minValue }
@@ -348,6 +368,7 @@ InputRange.propTypes = {
348368
classNames: React.PropTypes.objectOf(React.PropTypes.string),
349369
defaultValue: maxMinValuePropType,
350370
defaultValues: maxMinValuePropType,
371+
disabled: React.PropTypes.bool,
351372
maxValue: maxMinValuePropType,
352373
minValue: maxMinValuePropType,
353374
name: React.PropTypes.string,
@@ -359,6 +380,7 @@ InputRange.propTypes = {
359380

360381
InputRange.defaultProps = {
361382
classNames: defaultClassNames,
383+
disabled: false,
362384
minValue: 0,
363385
maxValue: 10,
364386
step: 1,

‎test/InputRange.spec.js‎

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ describe('InputRange', () => {
4545
it('should set the initial position for slider', () => {
4646
const props = {
4747
classNames: jasmine.any(Object),
48+
disabled: false,
4849
maxValue: 20,
4950
minValue: 0,
5051
values: {
@@ -551,74 +552,111 @@ describe('InputRange', () => {
551552
});
552553

553554
describe('handleSliderMouseMove', () => {
555+
let slider;
556+
let event;
557+
554558
beforeEach(() => {
555559
spyOn(inputRange, 'setPosition');
556-
});
557560

558-
it('should set the position of a slider according to mouse event', () => {
559-
const slider = inputRange.refs.sliderMax;
560-
const event = {
561+
slider = inputRange.refs.sliderMax;
562+
event = {
561563
clientX: 100,
562564
clientY: 200,
563565
};
566+
});
564567

568+
it('should set the position of a slider according to mouse event', () => {
565569
inputRange.handleSliderMouseMove(slider, event);
566570

567571
expect(inputRange.setPosition).toHaveBeenCalledWith(slider, { x: 92, y: 0 });
568572
});
573+
574+
it('should not set the position of a slider if disabled', () => {
575+
inputRange.props.disabled = true;
576+
inputRange.handleSliderMouseMove(slider, event);
577+
578+
expect(inputRange.setPosition).not.toHaveBeenCalled();
579+
});
569580
});
570581

571582
describe('handleSliderKeyDown', () => {
583+
let slider;
584+
let event;
585+
572586
describe('when pressing left arrow key', () => {
573587
beforeEach(() => {
574588
spyOn(inputRange, 'decrementValue');
575-
});
576589

577-
it('should decrement value', () => {
578-
const slider = inputRange.refs.sliderMax;
579-
const event = {
590+
slider = inputRange.refs.sliderMax;
591+
event = {
580592
keyCode: 37,
581593
};
594+
});
582595

596+
it('should decrement value', () => {
583597
inputRange.handleSliderKeyDown(slider, event);
584598

585599
expect(inputRange.decrementValue).toHaveBeenCalledWith(slider);
586600
});
601+
602+
it('should not decrement value if disabled', () => {
603+
inputRange.props.disabled = true;
604+
inputRange.handleSliderKeyDown(slider, event);
605+
606+
expect(inputRange.decrementValue).not.toHaveBeenCalled();
607+
});
587608
});
588609

589610
describe('when pressing right arrow key', () => {
590611
beforeEach(() => {
591612
spyOn(inputRange, 'incrementValue');
592-
});
593613

594-
it('should increment value', () => {
595-
const slider = inputRange.refs.sliderMax;
596-
const event = {
614+
slider = inputRange.refs.sliderMax;
615+
event = {
597616
keyCode: 39,
598617
};
618+
});
599619

620+
it('should increment value', () => {
600621
inputRange.handleSliderKeyDown(slider, event);
601622

602623
expect(inputRange.incrementValue).toHaveBeenCalledWith(slider);
603624
});
625+
626+
it('should not increment value if disabled', () => {
627+
inputRange.props.disabled = true;
628+
inputRange.handleSliderKeyDown(slider, event);
629+
630+
expect(inputRange.incrementValue).not.toHaveBeenCalled();
631+
});
604632
});
605633
});
606634

607635
describe('handleTrackMouseDown', () => {
636+
let track;
637+
let position;
638+
608639
beforeEach(() => {
609640
spyOn(inputRange, 'setPosition');
610-
});
611641

612-
it('should set a new position based on the position of mouse click', () => {
613-
const track = {};
614-
const position = {
642+
track = {};
643+
position = {
615644
x: 100,
616645
y: 0,
617646
};
647+
});
618648

649+
it('should set a new position based on the position of mouse click', () => {
619650
inputRange.handleTrackMouseDown(track, position);
620651

621652
expect(inputRange.setPosition).toHaveBeenCalledWith(null, position);
622653
});
654+
655+
it('should not set a new position if disabled', () => {
656+
inputRange.props.disabled = true;
657+
inputRange.handleTrackMouseDown(track, position);
658+
659+
expect(inputRange.setPosition).not.toHaveBeenCalled();
660+
});
623661
});
624662
});

0 commit comments

Comments
 (0)