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

UI components for WordPress.

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

/**
 * External dependencies
 */
import { TextInput } from 'react-native';
import { useNavigation } from '@react-navigation/native';
/**
 * WordPress dependencies
 */

import { useState } from '@wordpress/element';
import { Icon, chevronRight } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { BottomSheet, PanelBody, FooterMessageControl } from '@wordpress/components';
/**
 * Internal dependencies
 */

import styles from './styles.scss';

const BottomSheetTextControl = _ref => {
  let {
    initialValue,
    onChange,
    placeholder,
    label,
    icon,
    footerNote,
    cellPlaceholder,
    disabled
  } = _ref;
  const [showSubSheet, setShowSubSheet] = useState(false);
  const navigation = useNavigation();

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

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

  const horizontalBorderStyle = usePreferredColorSchemeStyle(styles.horizontalBorder, styles.horizontalBorderDark);
  const textEditorStyle = usePreferredColorSchemeStyle(styles.textEditor, styles.textEditorDark);
  return createElement(BottomSheet.SubSheet, {
    navigationButton: createElement(BottomSheet.Cell, {
      icon: icon,
      label: label,
      onPress: openSubSheet,
      value: initialValue || '',
      placeholder: cellPlaceholder || placeholder || '',
      disabled: disabled
    }, createElement(Icon, {
      icon: chevronRight
    })),
    showSheet: showSubSheet
  }, createElement(Fragment, null, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.BackButton, {
    onPress: goBack
  }), createElement(BottomSheet.NavBar.Heading, null, label)), createElement(PanelBody, {
    style: horizontalBorderStyle
  }, createElement(TextInput, {
    label: label,
    onChangeText: text => onChange(text),
    defaultValue: initialValue,
    multiline: true,
    placeholder: placeholder,
    placeholderTextColor: '#87a6bc',
    style: textEditorStyle,
    textAlignVertical: 'top'
  }))), footerNote && createElement(PanelBody, {
    style: styles.textFooternote
  }, createElement(FooterMessageControl, {
    label: footerNote,
    textAlign: "left"
  })));
};

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