@wordpress/components/build-module/mobile/bottom-sheet-select-control/index.native.js

UI components for WordPress.

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

/**
 * External dependencies
 */
import { View } from 'react-native';
/**
 * WordPress dependencies
 */

import { useNavigation } from '@react-navigation/native';
import { useState } from '@wordpress/element';
import { Icon, chevronRight, check } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { BottomSheet } from '@wordpress/components';
/**
 * Internal dependencies
 */

import styles from './style.scss';

const BottomSheetSelectControl = ({
  label,
  options: items,
  onChange,
  value: selectedValue
}) => {
  const [showSubSheet, setShowSubSheet] = useState(false);
  const navigation = useNavigation();

  const onChangeValue = value => {
    return () => {
      goBack();
      onChange(value);
    };
  };

  const selectedOption = items.find(option => option.value === selectedValue);

  const goBack = () => {
    setShowSubSheet(false);
    navigation.goBack();
  };

  const openSubSheet = () => {
    navigation.navigate(BottomSheet.SubSheet.screenName);
    setShowSubSheet(true);
  };

  return createElement(BottomSheet.SubSheet, {
    navigationButton: createElement(BottomSheet.Cell, {
      label: label,
      separatorType: "none",
      value: selectedOption.label,
      onPress: openSubSheet,
      accessibilityRole: 'button',
      accessibilityLabel: selectedOption.label,
      accessibilityHint: sprintf( // translators: %s: Select control button label e.g. "Button width"
      __('Navigates to select %s'), selectedOption.label)
    }, createElement(Icon, {
      icon: chevronRight
    })),
    showSheet: showSubSheet
  }, createElement(Fragment, null, createElement(BottomSheet.NavigationHeader, {
    screen: label,
    leftButtonOnPress: goBack
  }), createElement(View, {
    style: styles.selectControl
  }, items.map((item, index) => createElement(BottomSheet.Cell, {
    customActionButton: true,
    separatorType: "none",
    label: item.label,
    onPress: onChangeValue(item.value),
    leftAlign: true,
    key: index,
    accessibilityRole: 'button',
    accessibilityLabel: item.value === selectedValue ? sprintf( // translators: %s: Select control option value e.g: "Auto, 25%".
    __('Selected: %s'), item.label) : item.label,
    accessibilityHint: __('Double tap to select')
  }, item.value === selectedValue && createElement(Icon, {
    icon: check
  }))))));
};

export default BottomSheetSelectControl;
//# sourceMappingURL=index.native.js.map