@wordpress/components/build-module/mobile/focal-point-settings-panel/index.native.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

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

import { __ } from '@wordpress/i18n';
import { memo, useContext, useState, useCallback } from '@wordpress/element';
import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
/**
 * Internal dependencies
 */

import NavBar from '../bottom-sheet/nav-bar';
import styles from './styles.scss';
const FocalPointSettingsPanelMemo = memo(_ref => {
  let {
    focalPoint,
    onFocalPointChange,
    shouldEnableBottomSheetScroll,
    url
  } = _ref;
  const navigation = useNavigation();

  function onButtonPress(action) {
    navigation.goBack();

    if (action === 'apply') {
      onFocalPointChange(draftFocalPoint);
    }
  }

  const [draftFocalPoint, setDraftFocalPoint] = useState(focalPoint);

  function setPosition(coordinates) {
    setDraftFocalPoint(prevState => ({ ...prevState,
      ...coordinates
    }));
  }

  return createElement(SafeAreaView, {
    style: styles.safearea
  }, createElement(NavBar, null, createElement(NavBar.DismissButton, {
    onPress: () => onButtonPress('cancel')
  }), createElement(NavBar.Heading, null, __('Edit focal point')), createElement(NavBar.ApplyButton, {
    onPress: () => onButtonPress('apply')
  })), createElement(FocalPointPicker, {
    focalPoint: draftFocalPoint,
    onChange: useCallback(setPosition, []),
    shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
    url: url
  }));
});

function FocalPointSettingsPanel(props) {
  const route = useRoute();
  const {
    shouldEnableBottomSheetScroll
  } = useContext(BottomSheetContext);
  return createElement(FocalPointSettingsPanelMemo, _extends({
    shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll
  }, props, route.params));
}

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