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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _reactNative = require("react-native");

var _i18n = require("@wordpress/i18n");

var _compose = require("@wordpress/compose");

var _components = require("@wordpress/components");

var _native = require("@react-navigation/native");

var _colorPalette = _interopRequireDefault(require("../../color-palette"));

var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));

var _navigationHeader = _interopRequireDefault(require("../bottom-sheet/navigation-header"));

var _segmentedControl = _interopRequireDefault(require("../segmented-control"));

var _utils = require("./utils");

var _style = _interopRequireDefault(require("./style.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const PaletteScreen = () => {
  const route = (0, _native.useRoute)();
  const navigation = (0, _native.useNavigation)();
  const {
    shouldEnableBottomSheetScroll
  } = (0, _element.useContext)(_components.BottomSheetContext);
  const {
    label,
    onColorChange,
    onGradientChange,
    colorValue,
    defaultSettings
  } = route.params || {};
  const {
    segments,
    isGradient
  } = _utils.colorsUtils;
  const [currentValue, setCurrentValue] = (0, _element.useState)(colorValue);
  const isGradientColor = isGradient(currentValue);
  const selectedSegmentIndex = isGradientColor ? 1 : 0;
  const [currentSegment, setCurrentSegment] = (0, _element.useState)(segments[selectedSegmentIndex]);
  const horizontalSeparatorStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.horizontalSeparator, _style.default.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(_utils.colorsUtils.screens.picker, {
        currentValue,
        setColor
      });
    } else {
      navigation.navigate(_utils.colorsUtils.screens.gradientPicker, {
        setColor,
        isGradientColor,
        currentValue
      });
    }
  }

  function getFooter() {
    if (onGradientChange) {
      return (0, _element.createElement)(_segmentedControl.default, {
        segments: segments,
        segmentHandler: setCurrentSegment,
        selectedIndex: segments.indexOf(currentSegment),
        addonLeft: currentValue && (0, _element.createElement)(_colorIndicator.default, {
          color: currentValue,
          style: _style.default.colorIndicator
        })
      });
    }

    return (0, _element.createElement)(_reactNative.View, {
      style: _style.default.footer
    }, (0, _element.createElement)(_reactNative.View, {
      style: _style.default.flex
    }, currentValue && (0, _element.createElement)(_colorIndicator.default, {
      color: currentValue,
      style: _style.default.colorIndicator
    })), (0, _element.createElement)(_reactNative.Text, {
      style: _style.default.selectColorText,
      maxFontSizeMultiplier: 2
    }, (0, _i18n.__)('Select a color')), (0, _element.createElement)(_reactNative.View, {
      style: _style.default.flex
    }));
  }

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

var _default = PaletteScreen;
exports.default = _default;
//# sourceMappingURL=palette.screen.native.js.map