From 4cb775286cfc40219bb0b3666b663213f8cd140c Mon Sep 17 00:00:00 2001 From: Christopher Dro Date: Mon, 21 Dec 2015 10:29:21 -0800 Subject: [PATCH] Add option for both min/max track image. Summary: This is a followup to PR #3850 but now separates min/max track images into different properties. Closes #4476 Add examples for `minimumTrackTintColor`, `maximumTrackTintColor`, `minimumTrackImage`, `maximumTrackImage` to UIExplorer. Closes https://github.com/facebook/react-native/pull/4586 Reviewed By: svcscm Differential Revision: D2779193 Pulled By: nicklockwood fb-gh-sync-id: 0510a0f496816baacdd0d4be0f3cd3a63a5a9865 --- Examples/UIExplorer/SliderIOSExample.js | 32 +++++++++++- .../UIExplorer/Images.xcassets/Contents.json | 6 +++ Examples/UIExplorer/slider-left.png | Bin 0 -> 1395 bytes Examples/UIExplorer/slider-left@2x.png | Bin 0 -> 1684 bytes Examples/UIExplorer/slider-right.png | Bin 0 -> 1398 bytes Examples/UIExplorer/slider-right@2x.png | Bin 0 -> 1671 bytes Examples/UIExplorer/slider.png | Bin 0 -> 1562 bytes Examples/UIExplorer/slider@2x.png | Bin 0 -> 1988 bytes .../Components/SliderIOS/SliderIOS.ios.js | 41 ++++++++------- React/Views/RCTSlider.h | 3 ++ React/Views/RCTSlider.m | 47 +++++++++++++++--- React/Views/RCTSliderManager.m | 2 + 12 files changed, 102 insertions(+), 29 deletions(-) create mode 100644 Examples/UIExplorer/UIExplorer/Images.xcassets/Contents.json create mode 100644 Examples/UIExplorer/slider-left.png create mode 100644 Examples/UIExplorer/slider-left@2x.png create mode 100644 Examples/UIExplorer/slider-right.png create mode 100644 Examples/UIExplorer/slider-right@2x.png create mode 100644 Examples/UIExplorer/slider.png create mode 100644 Examples/UIExplorer/slider@2x.png diff --git a/Examples/UIExplorer/SliderIOSExample.js b/Examples/UIExplorer/SliderIOSExample.js index 9b3c584db..baee69ae8 100644 --- a/Examples/UIExplorer/SliderIOSExample.js +++ b/Examples/UIExplorer/SliderIOSExample.js @@ -84,10 +84,38 @@ exports.examples = [ return ; } }, + { + title: 'Custom min/max track tint color', + render(): ReactElement { + return ( + + ); + } + }, { title: 'Custom thumb image', render(): ReactElement { - return ; + return ; } - } + }, + { + title: 'Custom track image', + render(): ReactElement { + return ; + } + }, + { + title: 'Custom min/max track image', + render(): ReactElement { + return ( + + ); + } + }, ]; diff --git a/Examples/UIExplorer/UIExplorer/Images.xcassets/Contents.json b/Examples/UIExplorer/UIExplorer/Images.xcassets/Contents.json new file mode 100644 index 000000000..da4a164c9 --- /dev/null +++ b/Examples/UIExplorer/UIExplorer/Images.xcassets/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/Examples/UIExplorer/slider-left.png b/Examples/UIExplorer/slider-left.png new file mode 100644 index 0000000000000000000000000000000000000000..dff4e11e19d642707f7f6c93024972100d669b4c GIT binary patch literal 1395 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 Ef}yXlKL7v# literal 0 HcmV?d00001 diff --git a/Examples/UIExplorer/slider-right@2x.png b/Examples/UIExplorer/slider-right@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..8546ba8c9446c180fe06e4ac3f62f62745dc015e GIT binary patch literal 1671 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 M07*qoM6N<$f?mS>^8f$< literal 0 HcmV?d00001 diff --git a/Examples/UIExplorer/slider@2x.png b/Examples/UIExplorer/slider@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..396614fa9b9bd202635f83c57147e86520af1e49 GIT binary patch literal 1988 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 WFjTUTng%HV0000 { - this.props.onValueChange && - this.props.onValueChange(event.nativeEvent.value); + props.onValueChange = onValueChange && ((event: Event) => { + onValueChange && onValueChange(event.nativeEvent.value); }); - let onSlidingComplete = this.props.onSlidingComplete && ((event: Event) => { - this.props.onSlidingComplete && - this.props.onSlidingComplete(event.nativeEvent.value); + props.onSlidingComplete = onSlidingComplete && ((event: Event) => { + onSlidingComplete && onSlidingComplete(event.nativeEvent.value); }); - let {style, ...props} = this.props; - style = [styles.slider, style]; - - return ( - - ); + return ; } }); diff --git a/React/Views/RCTSlider.h b/React/Views/RCTSlider.h index 83e3d7ead..c84593c50 100644 --- a/React/Views/RCTSlider.h +++ b/React/Views/RCTSlider.h @@ -20,6 +20,9 @@ @property (nonatomic, assign) float lastValue; @property (nonatomic, strong) UIImage *trackImage; +@property (nonatomic, strong) UIImage *minimumTrackImage; +@property (nonatomic, strong) UIImage *maximumTrackImage; + @property (nonatomic, strong) UIImage *thumbImage; diff --git a/React/Views/RCTSlider.m b/React/Views/RCTSlider.m index d95f4d687..4032794eb 100644 --- a/React/Views/RCTSlider.m +++ b/React/Views/RCTSlider.m @@ -9,6 +9,8 @@ #import "RCTSlider.h" +#import + @implementation RCTSlider { float _unclippedValue; @@ -36,17 +38,46 @@ { if (trackImage != _trackImage) { _trackImage = trackImage; - - CGFloat width = trackImage.size.width; - - UIImage *minimumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){0, width, 0, 0}]; - UIImage *maximumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){0, 0, 0, width}]; - - [super setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal]; - [super setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal]; + CGFloat width = trackImage.size.width / 2; + UIImage *minimumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){ + 0, width, 0, width + } resizingMode:UIImageResizingModeStretch]; + UIImage *maximumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){ + 0, width, 0, width + } resizingMode:UIImageResizingModeStretch]; + [self setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal]; + [self setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal]; } } +- (void)setMinimumTrackImage:(UIImage *)minimumTrackImage +{ + _trackImage = nil; + minimumTrackImage = [minimumTrackImage resizableImageWithCapInsets:(UIEdgeInsets){ + 0, minimumTrackImage.size.width, 0, 0 + } resizingMode:UIImageResizingModeStretch]; + [self setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal]; +} + +- (UIImage *)minimumTrackImage +{ + return [self thumbImageForState:UIControlStateNormal]; +} + +- (void)setMaximumTrackImage:(UIImage *)maximumTrackImage +{ + _trackImage = nil; + maximumTrackImage = [maximumTrackImage resizableImageWithCapInsets:(UIEdgeInsets){ + 0, 0, 0, maximumTrackImage.size.width + } resizingMode:UIImageResizingModeStretch]; + [self setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal]; +} + +- (UIImage *)maximumTrackImage +{ + return [self thumbImageForState:UIControlStateNormal]; +} + - (void)setThumbImage:(UIImage *)thumbImage { [self setThumbImage:thumbImage forState:UIControlStateNormal]; diff --git a/React/Views/RCTSliderManager.m b/React/Views/RCTSliderManager.m index bdb89ab06..50638f2cb 100644 --- a/React/Views/RCTSliderManager.m +++ b/React/Views/RCTSliderManager.m @@ -77,6 +77,8 @@ static void RCTSendSliderEvent(RCTSlider *sender, BOOL continuous) RCT_EXPORT_VIEW_PROPERTY(value, float); RCT_EXPORT_VIEW_PROPERTY(step, float); RCT_EXPORT_VIEW_PROPERTY(trackImage, UIImage); +RCT_EXPORT_VIEW_PROPERTY(minimumTrackImage, UIImage); +RCT_EXPORT_VIEW_PROPERTY(maximumTrackImage, UIImage); RCT_EXPORT_VIEW_PROPERTY(minimumValue, float); RCT_EXPORT_VIEW_PROPERTY(maximumValue, float); RCT_EXPORT_VIEW_PROPERTY(minimumTrackTintColor, UIColor);