@wordpress/components/build-module/mobile/bottom-sheet/navigation-header.native.js

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { check, Icon, arrowLeft, close } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import styles from './styles.scss';
import chevronBack from './chevron-back';

function BottomSheetNavigationHeader({
  leftButtonOnPress,
  screen,
  applyButtonOnPress,
  isFullscreen
}) {
  const isIOS = Platform.OS === 'ios';
  const bottomSheetHeaderTitleStyle = usePreferredColorSchemeStyle(styles.bottomSheetHeaderTitle, styles.bottomSheetHeaderTitleDark);
  const bottomSheetButtonTextStyle = usePreferredColorSchemeStyle(styles.bottomSheetButtonText, styles.bottomSheetButtonTextDark);
  const chevronLeftStyle = usePreferredColorSchemeStyle(styles.chevronLeftIcon, styles.chevronLeftIconDark);
  const arrowLeftStyle = usePreferredColorSchemeStyle(styles.arrowLeftIcon, styles.arrowLeftIconDark);
  const applyButtonStyle = usePreferredColorSchemeStyle(styles.applyButton, styles.applyButtonDark);

  const renderBackButton = () => {
    let backIcon;
    let backText;

    if (isIOS) {
      backIcon = isFullscreen ? undefined : createElement(Icon, {
        icon: chevronBack,
        size: 21,
        style: chevronLeftStyle
      });
      backText = isFullscreen ? __('Cancel') : __('Back');
    } else {
      backIcon = createElement(Icon, {
        icon: isFullscreen ? close : arrowLeft,
        size: 24,
        style: arrowLeftStyle
      });
    }

    return createElement(TouchableWithoutFeedback, {
      onPress: leftButtonOnPress,
      accessibilityRole: 'button',
      accessibilityLabel: __('Go back'),
      accessibilityHint: __('Navigates to the previous content sheet')
    }, createElement(View, {
      style: styles.bottomSheetBackButton
    }, createElement(Fragment, null, backIcon, backText && createElement(Text, {
      style: bottomSheetButtonTextStyle,
      maxFontSizeMultiplier: 2
    }, backText))));
  };

  return createElement(View, {
    style: styles.bottomSheetHeader
  }, renderBackButton(), createElement(Text, {
    style: bottomSheetHeaderTitleStyle,
    maxFontSizeMultiplier: 3
  }, screen), !!applyButtonOnPress ? createElement(TouchableWithoutFeedback, {
    onPress: applyButtonOnPress,
    accessibilityRole: 'button',
    accessibilityLabel: __('Apply'),
    accessibilityHint: __('Applies the setting')
  }, createElement(View, {
    style: styles.bottomSheetApplyButton
  }, isIOS ? createElement(Text, {
    style: bottomSheetButtonTextStyle,
    maxFontSizeMultiplier: 2
  }, __('Apply')) : createElement(Icon, {
    icon: check,
    size: 24,
    style: applyButtonStyle
  }))) : createElement(View, {
    style: styles.bottomSheetRightSpace
  }));
}

export default BottomSheetNavigationHeader;
//# sourceMappingURL=navigation-header.native.js.map