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

UI components for WordPress.

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

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

import { __ } from '@wordpress/i18n';
import { useState, useContext } from '@wordpress/element';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { ColorControl, PanelBody, BottomSheetContext } from '@wordpress/components';
import { useRoute, useNavigation } from '@react-navigation/native';
/**
 * Internal dependencies
 */

import ColorPalette from '../../color-palette';
import ColorIndicator from '../../color-indicator';
import NavigationHeader from '../bottom-sheet/navigation-header';
import SegmentedControls from '../segmented-control';
import { colorsUtils } from './utils';
import styles from './style.scss';

const PaletteScreen = () => {
  const route = useRoute();
  const navigation = useNavigation();
  const {
    shouldEnableBottomSheetScroll
  } = useContext(BottomSheetContext);
  const {
    label,
    onColorChange,
    onGradientChange,
    colorValue,
    defaultSettings
  } = route.params || {};
  const {
    segments,
    isGradient
  } = colorsUtils;
  const [currentValue, setCurrentValue] = useState(colorValue);
  const isGradientColor = isGradient(currentValue);
  const selectedSegmentIndex = isGradientColor ? 1 : 0;
  const [currentSegment, setCurrentSegment] = useState(segments[selectedSegmentIndex]);
  const horizontalSeparatorStyle = usePreferredColorSchemeStyle(styles.horizontalSeparator, styles.horizontalSeparatorDark);
  const isSolidSegment = currentSegment === segments[0];
  const isCustomGadientShown = !isSolidSegment && isGradientColor;

  const setColor = color => {
    setCurrentValue(color);

    if (isSolidSegment && onColorChange && onGradientChange) {
      onColorChange(color);
      onGradientChange('');
    } else if (isSolidSegment && onColorChange) {
      onColorChange(color);
    } else if (!isSolidSegment && onGradientChange) {
      onGradientChange(color);
      onColorChange('');
    }
  };

  function onCustomPress() {
    if (isSolidSegment) {
      navigation.navigate(colorsUtils.screens.picker, {
        currentValue,
        setColor
      });
    } else {
      navigation.navigate(colorsUtils.screens.gradientPicker, {
        setColor,
        isGradientColor,
        currentValue
      });
    }
  }

  function getFooter() {
    if (onGradientChange) {
      return createElement(SegmentedControls, {
        segments: segments,
        segmentHandler: setCurrentSegment,
        selectedIndex: segments.indexOf(currentSegment),
        addonLeft: currentValue && createElement(ColorIndicator, {
          color: currentValue,
          style: styles.colorIndicator
        })
      });
    }

    return createElement(View, {
      style: styles.footer
    }, createElement(View, {
      style: styles.flex
    }, currentValue && createElement(ColorIndicator, {
      color: currentValue,
      style: styles.colorIndicator
    })), createElement(Text, {
      style: styles.selectColorText,
      maxFontSizeMultiplier: 2
    }, __('Select a color')), createElement(View, {
      style: styles.flex
    }));
  }

  return createElement(View, null, createElement(NavigationHeader, {
    screen: label,
    leftButtonOnPress: navigation.goBack
  }), createElement(ColorPalette, {
    setColor: setColor,
    activeColor: currentValue,
    isGradientColor: isGradientColor,
    currentSegment: currentSegment,
    onCustomPress: onCustomPress,
    shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
    defaultSettings: defaultSettings
  }), isCustomGadientShown && createElement(Fragment, null, createElement(View, {
    style: horizontalSeparatorStyle
  }), createElement(PanelBody, null, createElement(ColorControl, {
    label: __('Customize Gradient'),
    onPress: onCustomPress,
    withColorIndicator: false
  }))), createElement(View, {
    style: horizontalSeparatorStyle
  }), getFooter());
};

export default PaletteScreen;
//# sourceMappingURL=palette.screen.native.js.map