SwipeableListView quick actions

Summary:
- Implemented a quick actions template to allow children buttons to be rendered in the slideout of `SwipeableListView`
- Implemented `QuickActionsButton` to allow buttons to be used in the slideout view

Reviewed By: fkgozali

Differential Revision: D3271946

fbshipit-source-id: b7c7412f44be64dea7084ca36c4b0f4f3842b008

Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.  *
+ *
+ * @providesModule SwipeableQuickActionButton
+ * @flow
+ */
+'use strict';
+
+const Image = require('Image');
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TouchableHighlight = require('TouchableHighlight');
+const View = require('View');
+
+const {PropTypes} = React;
+
+const SwipeableQuickActionButton = React.createClass({
+  propTypes: {
+    accessibilityLabel: PropTypes.string,
+    imageSource: Image.propTypes.source.isRequired,
+    imageStyle: Image.propTypes.style,
+    onPress: PropTypes.func,
+    style: View.propTypes.style,
+    testID: PropTypes.string,
+    text: PropTypes.string,
+    textStyle: Text.propTypes.style,
+  },
+
+  render(): ?ReactElement {
+    if (!this.props.imageSource && !this.props.text) {
+      return null;
+    }
+
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        testID={this.props.testID}
+        underlayColor="transparent">
+        <View style={[styles.button, this.props.style]}>
+          <Image
+            accessibilityLabel={this.props.accessibilityLabel}
+            source={this.props.imageSource}
+            style={[styles.image, this.props.imageStyle]}
+          />
+          <Text style={[styles.text, this.props.textStyle]}>
+            {this.props.text}
+          </Text>
+        </View>
+      </TouchableHighlight>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: 76,
+  },
+  image: {
+    height: 30,
+    width: 30,
+  },
+  text: {
+    color: '#ffffff',
+    fontSize: 12,
+  },
+});
+
+module.exports = SwipeableQuickActionButton;

Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.  *
+ *
+ * @providesModule SwipeableQuickActions
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
+
+const MAX_QUICK_ACTIONS = 2;
+
+const SwipeableQuickActions = React.createClass({
+  propTypes: {
+    style: View.propTypes.style,
+  },
+
+  render(): ReactElement {
+    const children = this.props.children;
+    let buttons = [];
+
+    // Multiple children
+    if (children instanceof Array) {
+      for (let i = 0; i < children.length && i < MAX_QUICK_ACTIONS; i++) {
+        buttons.push(children[i]);
+
+        if (i < this.props.children.length - 1) { // Not last button
+          buttons.push(<View key={i} style={styles.divider} />);
+        }
+      }
+    } else { // 1 child
+      buttons = children;
+    }
+
+    return (
+      <View style={[styles.background, this.props.style]}>
+        {buttons}
+      </View>
+    );
+  },
+});
+
+const styles = StyleSheet.create({
+  background: {
+    alignSelf: 'flex-end',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  divider: {
+    width: 4,
+  },
+});
+
+module.exports = SwipeableQuickActions;