Add PanResponder examples to docs

Author: necolas

packages/docs/src/apis/PanResponder/PanResponder.stories.mdx

@@ -0,0 +1,20 @@
+import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
+
+<Meta title="APIs|PanResponder" />
+
+# PanResponder
+
+## Examples
+
+<Preview withSource='none'>
+  <Story name="draggableCircle">
+    <Stories.draggableCircle />
+  </Story>
+</Preview>
+
+<Preview withSource='none'>
+  <Story name="locationXY">
+    <Stories.locationXY />
+  </Story>
+</Preview>

packages/docs/src/apis/PanResponder/examples/DraggableCircle.js

@@ -0,0 +1,110 @@
+/**
+ * @flow
+ */
+
+import React, { PureComponent } from 'react';
+import { PanResponder, StyleSheet, View } from 'react-native';
+
+const CIRCLE_SIZE = 80;
+
+export default class DraggableCircle extends PureComponent {
+  _panResponder = {};
+  _previousLeft = 0;
+  _previousTop = 0;
+  _circleStyles = {};
+  circle = (null: ?{ setNativeProps(props: Object): void });
+
+  constructor() {
+    super();
+    this._panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
+      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
+      onPanResponderGrant: this._handlePanResponderGrant,
+      onPanResponderMove: this._handlePanResponderMove,
+      onPanResponderRelease: this._handlePanResponderEnd,
+      onPanResponderTerminate: this._handlePanResponderEnd
+    });
+    this._previousLeft = 20;
+    this._previousTop = 84;
+    this._circleStyles = {
+      style: {
+        left: this._previousLeft,
+        top: this._previousTop,
+        backgroundColor: 'green'
+      }
+    };
+  }
+
+  componentDidMount() {
+    this._updateNativeStyles();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View ref={this._setCircleRef} style={styles.circle} {...this._panResponder.panHandlers} />
+      </View>
+    );
+  }
+
+  _setCircleRef = circle => {
+    this.circle = circle;
+  };
+
+  _highlight() {
+    this._circleStyles.style.backgroundColor = 'blue';
+    this._updateNativeStyles();
+  }
+
+  _unHighlight() {
+    this._circleStyles.style.backgroundColor = 'green';
+    this._updateNativeStyles();
+  }
+
+  _updateNativeStyles() {
+    this.circle && this.circle.setNativeProps(this._circleStyles);
+  }
+
+  _handleStartShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
+    // Should we become active when the user presses down on the circle?
+    return true;
+  };
+
+  _handleMoveShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
+    // Should we become active when the user moves a touch over the circle?
+    return true;
+  };
+
+  _handlePanResponderGrant = (e: Object, gestureState: Object) => {
+    this._highlight();
+  };
+
+  _handlePanResponderMove = (e: Object, gestureState: Object) => {
+    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
+    this._circleStyles.style.top = this._previousTop + gestureState.dy;
+    this._updateNativeStyles();
+  };
+
+  _handlePanResponderEnd = (e: Object, gestureState: Object) => {
+    this._unHighlight();
+    this._previousLeft += gestureState.dx;
+    this._previousTop += gestureState.dy;
+  };
+}
+
+const styles = StyleSheet.create({
+  circle: {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    borderRadius: CIRCLE_SIZE / 2,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    touchAction: 'none'
+  },
+  container: {
+    flex: 1,
+    minHeight: 400,
+    paddingTop: 64
+  }
+});

packages/docs/src/apis/PanResponder/examples/LocationXY.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, PanResponder } from 'react-native';
+
+export default class LocationXY extends Component {
+  constructor() {
+    super();
+    this.state = { translateX: 0 };
+    this.panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onPanResponderMove: this._handlePanResponderMove,
+      onPanResponderTerminationRequest: () => true
+    });
+  }
+
+  _handlePanResponderMove = (e, gestureState) => {
+    console.log(e.nativeEvent.locationX, e.nativeEvent.locationY);
+    this.setState(state => ({
+      ...state,
+      translateX: gestureState.dx
+    }));
+  };
+
+  render() {
+    const transform = { transform: [{ translateX: this.state.translateX }] };
+    return (
+      <View style={styles.app}>
+        <View style={styles.outer} {...this.panResponder.panHandlers}>
+          <View style={[styles.inner, transform]} />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  app: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  outer: {
+    width: 250,
+    height: 50,
+    backgroundColor: 'skyblue'
+  },
+  inner: {
+    width: 30,
+    height: 30,
+    backgroundColor: 'lightblue'
+  }
+});

packages/docs/src/apis/PanResponder/examples/index.js

@@ -0,0 +1,2 @@
+export { default as draggableCircle } from './DraggableCircle';
+export { default as locationXY } from './LocationXY';