@wordpress/components/build/color-picker/index.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 _reactNativeHsvColorPicker = _interopRequireDefault(require("react-native-hsv-color-picker"));

var _tinycolor = _interopRequireDefault(require("tinycolor2"));

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

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

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

var _icons = require("@wordpress/icons");

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ColorPicker({
  shouldEnableBottomSheetScroll,
  shouldEnableBottomSheetMaxHeight,
  isBottomSheetContentScrolling,
  setColor,
  activeColor,
  isGradientColor,
  onNavigationBack,
  onHandleClosingBottomSheet,
  onBottomSheetClosed,
  onHandleHardwareButtonPress,
  bottomLabelText
}) {
  const didMount = (0, _element.useRef)(false);
  const isIOS = _reactNative.Platform.OS === 'ios';
  const hitSlop = {
    top: 22,
    bottom: 22,
    left: 22,
    right: 22
  };
  const {
    h: initH,
    s: initS,
    v: initV
  } = !isGradientColor && activeColor ? (0, _tinycolor.default)(activeColor).toHsv() : {
    h: 0,
    s: 0.5,
    v: 0.5
  };
  const [hue, setHue] = (0, _element.useState)(initH);
  const [sat, setSaturation] = (0, _element.useState)(initS);
  const [val, setValue] = (0, _element.useState)(initV);
  const [savedColor] = (0, _element.useState)(activeColor);
  const {
    paddingLeft: spacing,
    height: pickerHeight,
    borderRadius
  } = _style.default.picker;
  const {
    height: pickerPointerSize
  } = _style.default.pickerPointer;
  const pickerWidth = _components.BottomSheet.getWidth() - 2 * spacing;
  const applyButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.applyButton, _style.default.applyButtonDark);
  const cancelButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.cancelButton, _style.default.cancelButtonDark);
  const colorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.colorText, _style.default.colorTextDark);
  const selectColorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.selectColorText, _style.default.selectColorTextDark);
  const footerStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.footer, _style.default.footerDark);
  const currentColor = (0, _tinycolor.default)(`hsv ${hue} ${sat} ${val}`).toHexString();
  (0, _element.useEffect)(() => {
    if (!didMount.current) {
      didMount.current = true;
      return;
    }

    setColor(currentColor);
  }, [currentColor]);
  (0, _element.useEffect)(() => {
    shouldEnableBottomSheetMaxHeight(false);
    onHandleClosingBottomSheet(() => {
      if (savedColor) {
        setColor(savedColor);
      }

      if (onBottomSheetClosed) {
        onBottomSheetClosed();
      }
    });

    if (onHandleHardwareButtonPress) {
      onHandleHardwareButtonPress(onButtonPress);
    }
  }, []);

  function onHuePickerChange({
    hue: h
  }) {
    setHue(h);
  }

  function onSatValPickerChange({
    saturation: s,
    value: v
  }) {
    setSaturation(s);
    setValue(v);
  }

  function onButtonPress(action) {
    onNavigationBack();
    onHandleClosingBottomSheet(null);
    shouldEnableBottomSheetMaxHeight(true);
    setColor(action === 'apply' ? currentColor : savedColor);

    if (onBottomSheetClosed) {
      onBottomSheetClosed();
    }
  }

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNativeHsvColorPicker.default, {
    huePickerHue: hue,
    onHuePickerDragMove: onHuePickerChange,
    onHuePickerPress: !isBottomSheetContentScrolling && onHuePickerChange,
    satValPickerHue: hue,
    satValPickerSaturation: sat,
    satValPickerValue: val,
    onSatValPickerDragMove: onSatValPickerChange,
    onSatValPickerPress: !isBottomSheetContentScrolling && onSatValPickerChange,
    onSatValPickerDragStart: () => {
      shouldEnableBottomSheetScroll(false);
    },
    onSatValPickerDragEnd: () => shouldEnableBottomSheetScroll(true),
    onHuePickerDragStart: () => shouldEnableBottomSheetScroll(false),
    onHuePickerDragEnd: () => shouldEnableBottomSheetScroll(true),
    huePickerBarWidth: pickerWidth,
    huePickerBarHeight: pickerPointerSize / 2,
    satValPickerSize: {
      width: pickerWidth,
      height: pickerHeight
    },
    satValPickerSliderSize: pickerPointerSize * 2,
    satValPickerBorderRadius: borderRadius,
    huePickerBorderRadius: borderRadius
  }), (0, _element.createElement)(_reactNative.View, {
    style: footerStyle
  }, (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
    onPress: () => onButtonPress('cancel'),
    hitSlop: hitSlop
  }, (0, _element.createElement)(_reactNative.View, null, isIOS ? (0, _element.createElement)(_reactNative.Text, {
    style: cancelButtonStyle
  }, (0, _i18n.__)('Cancel')) : (0, _element.createElement)(_icons.Icon, {
    icon: _icons.close,
    size: 24,
    style: cancelButtonStyle
  }))), bottomLabelText ? (0, _element.createElement)(_reactNative.Text, {
    style: selectColorTextStyle
  }, bottomLabelText) : (0, _element.createElement)(_reactNative.Text, {
    style: colorTextStyle,
    selectable: true
  }, currentColor.toUpperCase()), (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
    onPress: () => onButtonPress('apply'),
    hitSlop: hitSlop
  }, (0, _element.createElement)(_reactNative.View, null, isIOS ? (0, _element.createElement)(_reactNative.Text, {
    style: applyButtonStyle
  }, (0, _i18n.__)('Apply')) : (0, _element.createElement)(_icons.Icon, {
    icon: _icons.check,
    size: 24,
    style: applyButtonStyle
  })))));
}

var _default = ColorPicker;
exports.default = _default;
//# sourceMappingURL=index.native.js.map