@wordpress/components/build-module/mobile/color-settings/index.native.js

UI components for WordPress.

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

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

import { memo, useEffect, useContext } from '@wordpress/element';
import { BottomSheetContext, BottomSheet } from '@wordpress/components';
/**
 * Internal dependencies
 */

import PickerScreen from './picker-screen';
import GradientPickerScreen from './gradient-picker-screen';
import PaletteScreen from './palette.screen';
import { colorsUtils } from './utils';
const ColorSettingsMemo = memo(_ref => {
  let {
    defaultSettings,
    onHandleClosingBottomSheet,
    shouldEnableBottomSheetMaxHeight,
    onColorChange,
    colorValue,
    gradientValue,
    onGradientChange,
    onColorCleared,
    label,
    hideNavigation
  } = _ref;
  useEffect(() => {
    shouldEnableBottomSheetMaxHeight(true);
    onHandleClosingBottomSheet(null); // Disable reason: deferring this refactor to the native team.
    // see https://github.com/WordPress/gutenberg/pull/41166
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return createElement(BottomSheet.NavigationContainer, null, createElement(BottomSheet.NavigationScreen, {
    name: colorsUtils.screens.palette,
    initialParams: {
      defaultSettings,
      onColorChange,
      colorValue,
      gradientValue,
      onGradientChange,
      onColorCleared,
      label,
      hideNavigation
    }
  }, createElement(PaletteScreen, null)), createElement(BottomSheet.NavigationScreen, {
    name: colorsUtils.screens.picker
  }, createElement(PickerScreen, null)), createElement(BottomSheet.NavigationScreen, {
    name: colorsUtils.screens.gradientPicker
  }, createElement(GradientPickerScreen, null)));
});

function ColorSettings(props) {
  const route = useRoute();
  const {
    onHandleClosingBottomSheet,
    shouldEnableBottomSheetMaxHeight
  } = useContext(BottomSheetContext);
  return createElement(ColorSettingsMemo, _extends({
    onHandleClosingBottomSheet: onHandleClosingBottomSheet,
    shouldEnableBottomSheetMaxHeight: shouldEnableBottomSheetMaxHeight
  }, props, route.params));
}

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