<commit_before>/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 * @format
 */
'use strict';

const React = require('react');
const createReactClass = require('create-react-class');
const ReactNative = require('react-native');
const {
  Image,
  SwipeableFlatList,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
  Alert,
} = ReactNative;

const RNTesterPage = require('./RNTesterPage');

const data = [
  {
    key: 'like',
    icon: require('./Thumbnails/like.png'),
    data: 'Like!',
  },
  {
    key: 'heart',
    icon: require('./Thumbnails/heart.png'),
    data: 'Heart!',
  },
  {
    key: 'party',
    icon: require('./Thumbnails/party.png'),
    data: 'Party!',
  },
];

const SwipeableFlatListExample = createReactClass({
  displayName: 'SwipeableFlatListExample',
  statics: {
    title: '<SwipeableFlatList>',
    description: 'Performant, scrollable, swipeable list of data.',
  },

  render: function() {
    return (
      <RNTesterPage
        title={this.props.navigator ? null : '<SwipeableListView>'}
        noSpacer={true}
        noScroll={true}>
        <SwipeableFlatList
          data={data}
          bounceFirstRowOnMount={true}
          maxSwipeDistance={160}
          renderItem={this._renderItem.bind(this)}
          renderQuickActions={this._renderQuickActions.bind(this)}
        />
      </RNTesterPage>
    );
  },

  _renderItem: function({item}): ?React.Element<any> {
    return (
      <View style={styles.row}>
        <Image style={styles.rowIcon} source={item.icon} />
        <View style={styles.rowData}>
          <Text style={styles.rowDataText}>{item.data}</Text>
        </View>
      </View>
    );
  },

  _renderQuickActions: function({item}: Object): ?React.Element<any> {
    return (
      <View style={styles.actionsContainer}>
        <TouchableHighlight
          style={styles.actionButton}
          onPress={() => {
            Alert.alert(
              'Tips',
              'You could do something with this edit action!',
            );
          }}>
          <Text style={styles.actionButtonText}>Edit</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={[styles.actionButton, styles.actionButtonDestructive]}
          onPress={() => {
            Alert.alert(
              'Tips',
              'You could do something with this remove action!',
            );
          }}>
          <Text style={styles.actionButtonText}>Remove</Text>
        </TouchableHighlight>
      </View>
    );
  },
});<commit_msg>remove createReactClass from RNTester/js/SwipeableFlatListExample.js (#21613)<commit_after>/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 * @format
 */
'use strict';

const React = require('react');
const ReactNative = require('react-native');
const {
  Image,
  SwipeableFlatList,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
  Alert,
} = ReactNative;

const RNTesterPage = require('./RNTesterPage');

import type {RNTesterProps} from 'RNTesterTypes';

const data = [
  {
    key: 'like',
    icon: require('./Thumbnails/like.png'),
    data: 'Like!',
  },
  {
    key: 'heart',
    icon: require('./Thumbnails/heart.png'),
    data: 'Heart!',
  },
  {
    key: 'party',
    icon: require('./Thumbnails/party.png'),
    data: 'Party!',
  },
];

class SwipeableFlatListExample extends React.Component<RNTesterProps> {
  static title = '<SwipeableFlatList>';
  static description = 'Performant, scrollable, swipeable list of data.';

  render() {
    return (
      <RNTesterPage
        title={this.props.navigator ? null : '<SwipeableListView>'}
        noSpacer={true}
        noScroll={true}>
        <SwipeableFlatList
          data={data}
          bounceFirstRowOnMount={true}
          maxSwipeDistance={160}
          renderItem={this._renderItem.bind(this)}
          renderQuickActions={this._renderQuickActions.bind(this)}
        />
      </RNTesterPage>
    );
  }

  _renderItem({item}): ?React.Element<any> {
    return (
      <View style={styles.row}>
        <Image style={styles.rowIcon} source={item.icon} />
        <View style={styles.rowData}>
          <Text style={styles.rowDataText}>{item.data}</Text>
        </View>
      </View>
    );
  }

  _renderQuickActions({item}: Object): ?React.Element<any> {
    return (
      <View style={styles.actionsContainer}>
        <TouchableHighlight
          style={styles.actionButton}
          onPress={() => {
            Alert.alert(
              'Tips',
              'You could do something with this edit action!',
            );
          }}>
          <Text style={styles.actionButtonText}>Edit</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={[styles.actionButton, styles.actionButtonDestructive]}
          onPress={() => {
            Alert.alert(
              'Tips',
              'You could do something with this remove action!',
            );
          }}>
          <Text style={styles.actionButtonText}>Remove</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
{'fraction_non_alphanumeric': 0.14175596916713668, 'fraction_numerical': 0.0020680579056213573, 'mean_word_length': 2.4545454545454546, 'pattern_counts': {'":': 0, '<': 52, '<?xml version=': 0, '>': 56, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7305927', 'n_tokens_mistral': 1627, 'n_tokens_neox': 1601, 'n_words': 327}