Skip to content

Commit f409fce

Browse files
committed
[SliderIOS] Apply value after minimum/maximumValue in order to ensure it is properly set
Summary: `value` is clamped between min/max and so order of prop application matters - `value` always ended up being set first in my tests, and consequently a value outside of the default range 0-1 would not work. So this applies the value when the min/max are set. [Gist of broken example](https://gist.github.com/brentvatne/fc637b3e21d012966f3a) ![screenshot](http://url.brentvatne.ca/SQPC.png) ^ the second slider here should have it's cursor in the middle /cc @tadeuzagallo Closes facebook/react-native#835 Github Author: Brent Vatne <[email protected]> Test Plan: Imported from GitHub, without a `Test Plan:` line.
1 parent 4884f58 commit f409fce

File tree

3 files changed

+59
-10
lines changed

3 files changed

+59
-10
lines changed

RCTSlider.h

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
#import <UIKit/UIKit.h>
11+
12+
@interface RCTSlider : UISlider
13+
14+
@end

RCTSlider.m

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
#import "RCTSlider.h"
11+
12+
@implementation RCTSlider
13+
{
14+
float _unclippedValue;
15+
}
16+
17+
- (void)setValue:(float)value
18+
{
19+
_unclippedValue = value;
20+
super.value = value;
21+
}
22+
23+
- (void)setMinimumValue:(float)minimumValue
24+
{
25+
super.minimumValue = minimumValue;
26+
super.value = _unclippedValue;
27+
}
28+
29+
- (void)setMaximumValue:(float)maximumValue
30+
{
31+
super.maximumValue = maximumValue;
32+
super.value = _unclippedValue;
33+
}
34+
35+
@end

RCTSliderManager.m

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
#import "RCTBridge.h"
1313
#import "RCTEventDispatcher.h"
14+
#import "RCTSlider.h"
1415
#import "UIView+React.h"
1516

1617
@implementation RCTSliderManager
@@ -19,32 +20,31 @@ @implementation RCTSliderManager
1920

2021
- (UIView *)view
2122
{
22-
UISlider *slider = [[UISlider alloc] init];
23+
RCTSlider *slider = [[RCTSlider alloc] init];
2324
[slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
2425
[slider addTarget:self action:@selector(sliderTouchEnd:) forControlEvents:UIControlEventTouchUpInside];
2526
return slider;
2627
}
2728

28-
- (void)sliderValueChanged:(UISlider *)sender
29+
static void RCTSendSliderEvent(RCTSliderManager *self, UISlider *sender, BOOL continuous)
2930
{
3031
NSDictionary *event = @{
3132
@"target": sender.reactTag,
3233
@"value": @(sender.value),
33-
@"continuous": @YES,
34+
@"continuous": @(continuous),
3435
};
3536

3637
[self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event];
3738
}
3839

39-
- (void)sliderTouchEnd:(UISlider *)sender
40+
- (void)sliderValueChanged:(UISlider *)sender
4041
{
41-
NSDictionary *event = @{
42-
@"target": sender.reactTag,
43-
@"value": @(sender.value),
44-
@"continuous": @NO,
45-
};
42+
RCTSendSliderEvent(self, sender, YES);
43+
}
4644

47-
[self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event];
45+
- (void)sliderTouchEnd:(UISlider *)sender
46+
{
47+
RCTSendSliderEvent(self, sender, NO);
4848
}
4949

5050
RCT_EXPORT_VIEW_PROPERTY(value, float);

0 commit comments

Comments
 (0)