<commit_before>// @flow

import type { AppState } from '../redux/redux-setup';
import type { ViewStyle } from '../types/styles';
import type { RootNavigationProp } from '../navigation/root-navigator.react';

import * as React from 'react';
import {
  View,
  TouchableWithoutFeedback,
  ViewPropTypes,
  StyleSheet,
} from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'lib/utils/redux-utils';

import { styleSelector } from '../themes/colors';
import KeyboardAvoidingView from './keyboard-avoiding-view.react';

type Props = $ReadOnly<{|
  navigation: RootNavigationProp<>,
  children: React.Node,
  containerStyle?: ViewStyle,
  modalStyle?: ViewStyle,
  // Redux state
  styles: typeof styles,
|}>;
class Modal extends React.PureComponent<Props> {
  static propTypes = {
    children: PropTypes.node,
    navigation: PropTypes.shape({
      isFocused: PropTypes.func.isRequired,
      goBackOnce: PropTypes.func.isRequired,
    }).isRequired,
    styles: PropTypes.objectOf(PropTypes.object).isRequired,
    containerStyle: ViewPropTypes.style,
    modalStyle: ViewPropTypes.style,
  };

  close = () => {
    if (this.props.navigation.isFocused()) {
      this.props.navigation.goBackOnce();
    }
  };

  render() {
    const { containerStyle, modalStyle, children } = this.props;
    return (
      <KeyboardAvoidingView
        behavior="padding"
        style={[this.props.styles.container, containerStyle]}
      >
        <TouchableWithoutFeedback onPress={this.close}>
          <View style={StyleSheet.absoluteFill} />
        </TouchableWithoutFeedback>
        <View style={[this.props.styles.modal, modalStyle]}>{children}</View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    overflow: 'visible',
  },
  modal: {
    backgroundColor: 'modalBackground',
    borderRadius: 5,
    flex: 1,
    justifyContent: 'center',
    marginBottom: 30,
    marginHorizontal: 15,
    marginTop: 100,
    padding: 12,
  },
};
const stylesSelector = styleSelector(styles);

export default connect((state: AppState) => ({
  styles: stylesSelector(state),
}))(Modal);<commit_msg>[native] Wrap Modal in SafeAreaView<commit_after>// @flow

import type { AppState } from '../redux/redux-setup';
import type { ViewStyle } from '../types/styles';
import type { RootNavigationProp } from '../navigation/root-navigator.react';

import * as React from 'react';
import {
  View,
  TouchableWithoutFeedback,
  ViewPropTypes,
  StyleSheet,
} from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'lib/utils/redux-utils';
import { SafeAreaView } from 'react-native-safe-area-context';

import { styleSelector } from '../themes/colors';
import KeyboardAvoidingView from './keyboard-avoiding-view.react';

type Props = $ReadOnly<{|
  navigation: RootNavigationProp<>,
  children: React.Node,
  containerStyle?: ViewStyle,
  modalStyle?: ViewStyle,
  // Redux state
  styles: typeof styles,
|}>;
class Modal extends React.PureComponent<Props> {
  static propTypes = {
    children: PropTypes.node,
    navigation: PropTypes.shape({
      isFocused: PropTypes.func.isRequired,
      goBackOnce: PropTypes.func.isRequired,
    }).isRequired,
    styles: PropTypes.objectOf(PropTypes.object).isRequired,
    containerStyle: ViewPropTypes.style,
    modalStyle: ViewPropTypes.style,
  };

  close = () => {
    if (this.props.navigation.isFocused()) {
      this.props.navigation.goBackOnce();
    }
  };

  render() {
    const { containerStyle, modalStyle, children } = this.props;
    return (
      <SafeAreaView style={this.props.styles.container}>
        <KeyboardAvoidingView
          behavior="padding"
          style={[this.props.styles.container, containerStyle]}
        >
          <TouchableWithoutFeedback onPress={this.close}>
            <View style={StyleSheet.absoluteFill} />
          </TouchableWithoutFeedback>
          <View style={[this.props.styles.modal, modalStyle]}>{children}</View>
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    overflow: 'visible',
  },
  modal: {
    backgroundColor: 'modalBackground',
    borderRadius: 5,
    flex: 1,
    justifyContent: 'center',
    marginBottom: 30,
    marginHorizontal: 15,
    marginTop: 100,
    padding: 12,
  },
};
const stylesSelector = styleSelector(styles);

export default connect((state: AppState) => ({
  styles: stylesSelector(state),
}))(Modal);
{'fraction_non_alphanumeric': 0.1350637923449186, 'fraction_numerical': 0.005279366476022877, 'mean_word_length': 3.5109126984126986, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2992554', 'n_tokens_mistral': 1387, 'n_tokens_neox': 1371, 'n_words': 294}