[ptmt#18] ScrollView: add inverted behavior, update examples

Author: ptmt

Examples/UIExplorer/ScrollViewExample.js

@@ -20,7 +20,8 @@ var {
   ScrollView,
   StyleSheet,
   View,
-  Image
+  Image,
+  Text
 } = React;
 
 exports.displayName = (undefined: ?string);
@@ -54,6 +55,21 @@ exports.examples = [
       </ScrollView>
     );
   }
+},
+, {
+  title: 'Inverted <ScrollView>',
+  description: 'Auto scroll content to bottom',
+  render: function() {
+    const texts = TEXTS.map((t, i)=> <Text key={i}>{i} - {t}</Text>);
+    return (
+      <ScrollView
+        automaticallyAdjustContentInsets={false}
+        style={styles.scrollView}
+        autoScrollToBottom={true}>
+        {texts}
+      </ScrollView>
+    );
+  }
 }];
 
 var Thumb = React.createClass({
@@ -69,13 +85,21 @@ var Thumb = React.createClass({
   }
 });
 
-var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
-THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
+var THUMBS = new Array(20)
+  .join()
+  .split(',')
+  .map(x => 'http://facebook.github.io/react/img/logo_og.png');
+
+var TEXTS = new Array(100)
+  .join()
+  .split(',')
+  .map(x => Math.random().toString(36).replace(/[^a-z]+/g, ''));
+
 var createThumbRow = (uri, i) => <Thumb key={i} uri={uri} />;
 
 var styles = StyleSheet.create({
   scrollView: {
-    backgroundColor: '#6A85B1',
+    //backgroundColor: '#6A85B1',
     height: 300,
   },
   horizontalScrollView: {
@@ -87,6 +111,9 @@ var styles = StyleSheet.create({
     backgroundColor: '#527FE4',
     padding: 5,
   },
+  inverted: {
+    transform: [{scaleY: -1}]
+  },
   text: {
     fontSize: 20,
     color: '#888888',

Examples/UIExplorer/TransformExample.js

@@ -30,13 +30,7 @@ var Flip = React.createClass({
   },
 
   componentDidMount() {
-    // setTimeout(() => {
-    //   this.refs.view1.setNativeProps({style: {transform: [{scaleX: 0.5}]}})
-    // }, 400)
-    // setTimeout(() => {
-    //   this.refs.view1.setNativeProps({style: {transform: [{scaleX: 1.5}]}})
-    // }, 600)
-    //this._animate();
+    this._animate();
   },
 
   _animate() {
@@ -50,11 +44,10 @@ var Flip = React.createClass({
   render() {
     return (
       <View style={styles.flipCardContainer}>
-        <Animated.View ref={'view1'} style={[
+        <Animated.View style={[
           styles.flipCard,
           {transform: [
             {perspective: 850},
-            {scaleX: this.state.scale},
             {rotateX: this.state.theta.interpolate({
               inputRange: [0, 180],
               outputRange: ['0deg', '180deg']
@@ -100,7 +93,7 @@ var styles = StyleSheet.create({
       {translateY: 50},
       {rotate: '30deg'},
       {scaleX: 2},
-      {scaleY: 2},
+      {scaleY: -2},
     ],
     width: 50,
   },
@@ -219,7 +212,7 @@ exports.examples = [
   },
   {
     title: 'Translate, Rotate, Scale',
-    description: "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
+    description: "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: -2",
     render() {
       return (
         <View style={styles.container}>

Examples/UIExplorer/UIExplorerListBase.js

@@ -38,7 +38,7 @@ class ListView extends React.Component {
       var componentRows = this.props.dataSource.components.map((c, i) => this.props.renderRow(c, i));
       var apiRows = this.props.dataSource.apis.map((c, i) => this.props.renderRow(c, i));
       return (
-        <ScrollView>
+        <ScrollView showsVerticalScrollIndicator={true}>
           {this.props.renderSectionHeader(null, 'Components:')}
           {componentRows}
           {this.props.renderSectionHeader(null, 'APIs:')}
@@ -119,7 +119,6 @@ class UIExplorerListBase extends React.Component {
     return (
       <TouchableHighlight onPress={() => this.onPressRow(example)}
       onMouseEnter={() => this.setState({hovered: example.title})}
-    //  onMouseLeave={() => this.setState({hovered: -1})}
       key={i} style={[styles.row, hovered, selected]}>
         <View>
           <Text style={styles.rowTitleText}>

Libraries/Components/ScrollView/ScrollView.js

@@ -223,6 +223,10 @@ var ScrollView = React.createClass({
      * When true, shows a vertical scroll indicator.
      */
     showsVerticalScrollIndicator: PropTypes.bool,
+    /**
+     * When true, scrolls to bottom.
+     */
+    autoScrollToBottom: PropTypes.bool,
     /**
      * An array of child indices determining which children get docked to the
      * top of the screen when scrolling. For example, passing

Libraries/Text/RCTSecureTextField.m

@@ -70,15 +70,6 @@ - (void)setPlaceholder:(NSString *)placeholder
   }
 }
 
-//- (void)drawRect:(NSRect)rect
-//{
-//  [super drawRect:rect];
-//  if ([[self stringValue] isEqualToString:@""] && self != [[self window] firstResponder] && _placeholderTextColor != nil) {
-//    NSDictionary *txtDict = [NSDictionary dictionaryWithObjectsAndKeys:_placeholderTextColor, NSForegroundColorAttributeName, nil];
-//    [[[NSAttributedString alloc] initWithString:_placeholderString attributes:txtDict] drawAtPoint:NSMakePoint(0,0)];
-//  }
-//}
-
 - (NSArray *)reactSubviews
 {
   // TODO: do we support subviews of textfield in React?

React/Base/RCTRootView.m

@@ -211,7 +211,6 @@ - (void)bundleFinishedLoading:(RCTBridge *)bridge
 
 - (void)layout
 {
-  NSLog(@"RCTRootView: layout");
   [super layout];
   _contentView.frame = self.bounds;
   // TODO: set center coordinates

React/Views/RCTScrollView.m

@@ -521,7 +521,6 @@ - (void)updateClippedSubviews
     (scrollsHorizontally && (bounds.size.width < leeway || fabs(_lastClippedToRect.origin.x - bounds.origin.x) >= leeway)) ||
     (scrollsVertically && (bounds.size.height < leeway || fabs(_lastClippedToRect.origin.y - bounds.origin.y) >= leeway));
 
-  NSLog(@"countentSize.height %hhd %hhd", shouldClipAgain, scrollsVertically);
   if (shouldClipAgain) {
     const CGRect clipRect = CGRectInset(clipView.bounds, -leeway, -leeway);
     [self react_updateClippedSubviewsWithClipRect:clipRect relativeToView:clipView];
@@ -913,7 +912,10 @@ - (void)sendScrollEventWithType:(RCTScrollEventType)type
 @implementation RCTNativeScrollView
 {
   NSColor * _backgroundColor;
+  BOOL _autoScrollToBottom;
+  BOOL _inAutoScrollToBottom;
   RCTEventDispatcher *_eventDispatcher;
+  NSRect _oldDocumentFrame;
 }
 
 RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
@@ -933,6 +935,68 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
 - (void)insertReactSubview:(NSView *)view atIndex:(__unused NSInteger)atIndex
 {
   [self setDocumentView:view];
+  if (_autoScrollToBottom) {
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(documentFrameDidChange:)
+                                                 name:NSViewFrameDidChangeNotification
+                                               object:view];
+    
+    [self scrollToBottom];
+  }
+}
+
+- (void)setAutoScrollToBottom:(BOOL)autoScrollToBottom
+{
+  _autoScrollToBottom = autoScrollToBottom;
+  [self setDocumentView:[self documentView]];
+  [self setFrame:[self frame]];
+}
+
+
+- (void)setFrame:(NSRect)frameRect
+{
+  BOOL autoScroll = NO;
+
+  if (_autoScrollToBottom) {
+    NSRect	documentVisibleRect = [self documentVisibleRect];
+    NSRect	documentFrame = [[self documentView] frame];
+
+    //Autoscroll if we're scrolled close to the bottom
+    autoScroll = ((documentVisibleRect.origin.y + documentVisibleRect.size.height) > (documentFrame.size.height - 20));
+  }
+
+  [super setFrame:frameRect];
+
+  if (autoScroll) {
+    [self scrollToBottom];
+  }
+}
+
+//When our document resizes
+- (void)documentFrameDidChange:(__unused NSNotification *)notification
+{
+  //We guard against a recursive call to this method, which may occur if the user is resizing the view at the same time
+  //content is being modified
+  if (_autoScrollToBottom && !_inAutoScrollToBottom) {
+    NSRect	documentVisibleRect =  [self documentVisibleRect];
+    NSRect	   newDocumentFrame = [[self documentView] frame];
+
+    //We autoscroll if the height of the document frame changed AND (Using the old frame to calculate) we're scrolled close to the bottom.
+    if ((newDocumentFrame.size.height != _oldDocumentFrame.size.height) &&
+        ((documentVisibleRect.origin.y + documentVisibleRect.size.height) > (_oldDocumentFrame.size.height - 20))) {
+      _inAutoScrollToBottom = YES;
+      [self scrollToBottom];
+      _inAutoScrollToBottom = NO;
+    }
+
+    //Remember the new frame
+    _oldDocumentFrame = newDocumentFrame;
+  }
+}
+
+- (void)scrollToBottom
+{
+  [[self documentView] scrollPoint:NSMakePoint(0, 100000)]; // TODO: avoid this hack
 }
 
 - (BOOL)opaque
@@ -963,7 +1027,7 @@ - (BOOL)isFlipped
 
 - (void)setBackgroundColor:(NSColor *)backgroundColor
 {
-  if ([_backgroundColor isEqual:backgroundColor]) {
+  if ([_backgroundColor isEqual:backgroundColor] || backgroundColor == NULL) {
     return;
   }
   _backgroundColor = backgroundColor;

React/Views/RCTScrollViewManager.m

@@ -129,5 +129,6 @@ - (NSView *)view
 
 RCT_EXPORT_VIEW_PROPERTY(showsHorizontalScrollIndicator, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(showsVerticalScrollIndicator, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(autoScrollToBottom, BOOL)
 
 @end

React/Views/RCTViewManager.m

@@ -144,7 +144,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused RCTSpars
 RCT_CUSTOM_VIEW_PROPERTY(transformMatrix, CATransform3D, RCTView)
 {
   CATransform3D transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
-  if (!view.superview) {
+  if ([view respondsToSelector:@selector(shouldBeTransformed)] && !view.superview) {
     view.shouldBeTransformed = YES;
     view.transform = transform;
   } else {