<commit_before>// @flow strict

import * as React from 'react';
import { View, ScrollView } from 'react-native';
import { defaultTokens } from '@kiwicom/mobile-orbit';

import AdaptableLayout from '../view/AdaptableLayout';
import Modal from '../Modal';
import StyleSheet from '../PlatformStyleSheet';
import Device from '../Device';

type Props = {|
  +children: React.Node,
  +isVisible: boolean,
  +onClose: () => void,
  +bottomContent?: React.Node | React.Node[],
|};

export default class Popup extends React.Component<Props> {
  onClose = () => this.props.onClose();

  render = () => {
    const modalChild = (
      <React.Fragment>
        <ScrollView alwaysBounceVertical={false}>
          {this.props.children}
        </ScrollView>
        <View style={Device.isIPhoneX && styles.safeArea}>
          {this.props.bottomContent}
        </View>
      </React.Fragment>
    );

    return (
      <AdaptableLayout
        renderOnWide={
          <Modal
            isVisible={this.props.isVisible}
            style={[styles.modal, styles.modalWide]}
            backdropOpacity={0.5}
            onBackdropPress={this.onClose}
            onRequestClose={this.onClose}
          >
            <View style={[styles.content, styles.wideContentContainer]}>
              {modalChild}
            </View>
          </Modal>
        }
        renderOnNarrow={
          <Modal
            isVisible={this.props.isVisible}
            style={styles.modal}
            backdropOpacity={0.5}
            onBackdropPress={this.onClose}
            onRequestClose={this.onClose}
          >
            <View style={styles.content}>{modalChild}</View>
          </Modal>
        }
      />
    );
  };
}

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  modalWide: {
    justifyContent: 'center',
  },<commit_msg>Fix: backdrop color for popup according to design<commit_after>// @flow strict

import * as React from 'react';
import { View, ScrollView } from 'react-native';
import { defaultTokens } from '@kiwicom/mobile-orbit';

import AdaptableLayout from '../view/AdaptableLayout';
import Modal from '../Modal';
import StyleSheet from '../PlatformStyleSheet';
import Device from '../Device';

type Props = {|
  +children: React.Node,
  +isVisible: boolean,
  +onClose: () => void,
  +bottomContent?: React.Node | React.Node[],
|};

export default class Popup extends React.Component<Props> {
  onClose = () => this.props.onClose();

  render = () => {
    const modalChild = (
      <React.Fragment>
        <ScrollView alwaysBounceVertical={false}>
          {this.props.children}
        </ScrollView>
        <View style={Device.isIPhoneX && styles.safeArea}>
          {this.props.bottomContent}
        </View>
      </React.Fragment>
    );

    return (
      <AdaptableLayout
        renderOnWide={
          <Modal
            isVisible={this.props.isVisible}
            style={[styles.modal, styles.modalWide]}
            backdropOpacity={0.2}
            backdropColor={defaultTokens.paletteInkDark}
            onBackdropPress={this.onClose}
            onRequestClose={this.onClose}
          >
            <View style={[styles.content, styles.wideContentContainer]}>
              {modalChild}
            </View>
          </Modal>
        }
        renderOnNarrow={
          <Modal
            isVisible={this.props.isVisible}
            style={styles.modal}
            backdropOpacity={0.2}
            backdropColor={defaultTokens.paletteInkDark}
            onBackdropPress={this.onClose}
            onRequestClose={this.onClose}
          >
            <View style={styles.content}>{modalChild}</View>
          </Modal>
        }
      />
    );
  };
}

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  modalWide: {
    justifyContent: 'center',
  },
{'fraction_non_alphanumeric': 0.13510036026762737, 'fraction_numerical': 0.0025733401955738548, 'mean_word_length': 2.1860655737704917, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 41, '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': '5880828', 'n_tokens_mistral': 1141, 'n_tokens_neox': 1136, 'n_words': 215}