<commit_before>// @flow
import React from 'react'
import Text from './text'
import {StyleSheet} from 'react-native'
import BackButton from './back-button'
import Box from './box'
import {globalStyles, globalColors, globalMargins, statusBarHeight} from '../styles'

import type {Props} from './header-hoc'

function HeaderHoc<P> (WrappedComponent: ReactClass<P>) {
  return ({onBack, onCancel, headerStyle, title, ...restProps}: Props & P) => (
    <Box style={_containerStyle}>
      <Box style={{..._headerStyle, ...headerStyle}}>
        <Box style={_titleStyle}>
          <Text type='Header'>{title}</Text>
        </Box>
        {onCancel && <Text type='BodyBigLink' onClick={onCancel}>Cancel</Text>}
        {onBack && <BackButton iconStyle={_backButtonIconStyle} onClick={onBack} />}
      </Box>
      <WrappedComponent {...restProps} onBack={onBack} onCancel={onCancel} />
    </Box>
  )
}

const _backButtonIconStyle = {
  color: globalColors.blue,
}

const _containerStyle = {
  ...globalStyles.flexBoxColumn,
  flex: 1,
}

const _headerStyle = {
  ...globalStyles.flexBoxRow,
  alignItems: 'center',
  borderBottomColor: globalColors.black_05,
  borderBottomWidth: StyleSheet.hairlineWidth,
  justifyContent: 'flex-start',
  marginTop: statusBarHeight,
  minHeight: globalMargins.xlarge - statusBarHeight,
  paddingLeft: globalMargins.small,<commit_msg>Fix back button hit area for HeaderHOC (#6933)<commit_after>// @flow
import React from 'react'
import Text from './text'
import {StyleSheet} from 'react-native'
import BackButton from './back-button'
import Box from './box'
import {globalStyles, globalColors, globalMargins, statusBarHeight} from '../styles'

import type {Props} from './header-hoc'

function HeaderHoc<P> (WrappedComponent: ReactClass<P>) {
  return ({onBack, onCancel, headerStyle, title, ...restProps}: Props & P) => (
    <Box style={_containerStyle}>
      <Box style={{..._headerStyle, ...headerStyle}}>
        <Box style={_titleStyle}>
          <Text type='Header'>{title}</Text>
        </Box>
        {onCancel && <Text type='BodyBigLink' style={_buttonStyle} onClick={onCancel}>Cancel</Text>}
        {onBack && <BackButton iconStyle={_backButtonIconStyle} style={_buttonStyle} onClick={onBack} />}
      </Box>
      <WrappedComponent {...restProps} onBack={onBack} onCancel={onCancel} />
    </Box>
  )
}

const _backButtonIconStyle = {
  color: globalColors.blue,
}

const _containerStyle = {
  ...globalStyles.flexBoxColumn,
  flex: 1,
}

const _buttonStyle = {
  paddingBottom: 8,
  paddingLeft: globalMargins.small,
  paddingRight: globalMargins.small,
  paddingTop: 8,
}

const _headerStyle = {
  ...globalStyles.flexBoxRow,
  alignItems: 'center',
  borderBottomColor: globalColors.black_05,
  borderBottomWidth: StyleSheet.hairlineWidth,
  justifyContent: 'flex-start',
  marginTop: statusBarHeight,
  minHeight: globalMargins.xlarge - statusBarHeight,
{'fraction_non_alphanumeric': 0.14492254733218587, 'fraction_numerical': 0.004130808950086058, 'mean_word_length': 4.217235188509874, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 33, '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': '1778424', 'n_tokens_mistral': 922, 'n_tokens_neox': 916, 'n_words': 210}