@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 = ({
  initialValue,
  onChange,
  placeholder,
  label,
  icon,
  footerNote
}) => {
  const [showSubSheet, setShowSubSheet] = useState(false);
  const navigation = useNavigation();

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

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

  const [value, onChangeText] = useState(initialValue);
  const horizontalBorderStyle = usePreferredColorSchemeStyle(styles.horizontalBorder, styles.horizontalBorderDark);
  const textEditorStyle = usePreferredColorSchemeStyle(styles.textEditor, styles.textEditorDark);
  return createElement(BottomSheet.SubSheet, {
    navigationButton: createElement(BottomSheet.Cell, {
      icon: icon,
      placeholder: placeholder,
      label: label,
      onPress: openSubSheet,
      value: initialValue || ''
    }, createElement(Icon, {
      icon: chevronRight
    })),
    showSheet: showSubSheet
  }, createElement(Fragment, null, createElement(BottomSheet.NavigationHeader, {
    screen: label,
    leftButtonOnPress: goBack
  }), createElement(PanelBody, {
    style: horizontalBorderStyle
  }, createElement(TextInput, {
    label: label,
    onChangeText: text => onChangeText(text),
    onChange: onChange(value),
    value: value,
    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