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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _reactNative = require("react-native");

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _compose = require("@wordpress/compose");

var _styles = _interopRequireDefault(require("./styles.scss"));

var _chevronBack = _interopRequireDefault(require("./chevron-back"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BottomSheetNavigationHeader({
  leftButtonOnPress,
  screen,
  applyButtonOnPress,
  isFullscreen
}) {
  const isIOS = _reactNative.Platform.OS === 'ios';
  const bottomSheetHeaderTitleStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.bottomSheetHeaderTitle, _styles.default.bottomSheetHeaderTitleDark);
  const bottomSheetButtonTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.bottomSheetButtonText, _styles.default.bottomSheetButtonTextDark);
  const chevronLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.chevronLeftIcon, _styles.default.chevronLeftIconDark);
  const arrowLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.arrowLeftIcon, _styles.default.arrowLeftIconDark);
  const applyButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.applyButton, _styles.default.applyButtonDark);

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

    if (isIOS) {
      backIcon = isFullscreen ? undefined : (0, _element.createElement)(_icons.Icon, {
        icon: _chevronBack.default,
        size: 21,
        style: chevronLeftStyle
      });
      backText = isFullscreen ? (0, _i18n.__)('Cancel') : (0, _i18n.__)('Back');
    } else {
      backIcon = (0, _element.createElement)(_icons.Icon, {
        icon: isFullscreen ? _icons.close : _icons.arrowLeft,
        size: 24,
        style: arrowLeftStyle
      });
    }

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

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

var _default = BottomSheetNavigationHeader;
exports.default = _default;
//# sourceMappingURL=navigation-header.native.js.map