<commit_before>//@flow
import * as React from 'react'
import Popover from 'react-native-popover-view'
import {FilterSection} from './section'
import type {FilterType} from './types'
import {type TouchableUnion} from '../touchable'
import * as c from '../colors'

type Props = {
	anchor: ?React.Ref<TouchableUnion>,
	filter: FilterType,
	onClosePopover: (filter: FilterType) => any,
	visible: boolean,
}

type State = {
	filter: FilterType,
}

export class FilterPopover extends React.PureComponent<Props, State> {
	state = {
		filter: this.props.filter,
	}

	static getDerivedStateFromProps(props: Props) {
		return {
			filter: props.filter,
		}
	}

	onFilterChanged = (filter: FilterType) => {
		this.setState(() => ({filter: filter}))
	}

	render() {
		const {filter} = this.state
		const {anchor, onClosePopover, visible} = this.props

		return (
			<Popover
				arrowStyle={arrowStyle}
				fromView={anchor}
				isVisible={visible}
				onClose={() => onClosePopover(filter)}
				placement="bottom"
				popoverStyle={popoverContainer}
			>
				<FilterSection filter={filter} onChange={this.onFilterChanged} />
			</Popover>
		)
	}
}

const popoverContainer = {
	minWidth: 200,
	maxWidth: 300,
}

const arrowStyle = {backgroundColor: c.iosLightBackground}<commit_msg>wrap filter popover component in viewport<commit_after>//@flow
import * as React from 'react'
import Popover from 'react-native-popover-view'
import {FilterSection} from './section'
import type {FilterType} from './types'
import {type TouchableUnion} from '../touchable'
import {Viewport} from '../viewport'
import * as c from '../colors'

type Props = {
	anchor: ?React.Ref<TouchableUnion>,
	filter: FilterType,
	onClosePopover: (filter: FilterType) => any,
	visible: boolean,
}

type State = {
	filter: FilterType,
}

export class FilterPopover extends React.PureComponent<Props, State> {
	state = {
		filter: this.props.filter,
	}

	static getDerivedStateFromProps(props: Props) {
		return {
			filter: props.filter,
		}
	}

	onFilterChanged = (filter: FilterType) => {
		this.setState(() => ({filter: filter}))
	}

	render() {
		const {filter} = this.state
		const {anchor, onClosePopover, visible} = this.props

		return (
			<Viewport
				render={viewport => (
					<Popover
						arrowStyle={arrowStyle}
						fromView={anchor}
						isVisible={visible}
						onClose={() => onClosePopover(filter)}
						placement="bottom"
						popoverStyle={popoverContainer}
					>
						<FilterSection filter={filter} onChange={this.onFilterChanged} />
					</Popover>
				)}
			/>
		)
	}
}

const popoverContainer = {
	minWidth: 200,
	maxWidth: 300,
}

const arrowStyle = {backgroundColor: c.iosLightBackground}
{'fraction_non_alphanumeric': 0.13634665670526708, 'fraction_numerical': 0.0044826298094882335, 'mean_word_length': 4.01498127340824, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 23, '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': '1782991', 'n_tokens_mistral': 984, 'n_tokens_neox': 864, 'n_words': 206}