@wordpress/components/build/color-picker/hsv-color-picker.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 _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _huePicker = _interopRequireDefault(require("./hue-picker"));
var _saturationPicker = _interopRequireDefault(require("./saturation-picker"));
var _styleNative = _interopRequireDefault(require("./style.native.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const HsvColorPicker = props => {
  const maxWidth = _reactNative.Dimensions.get('window').width - 32;
  const satValPickerRef = (0, _element.useRef)(null);
  const {
    containerStyle = {},
    currentColor,
    huePickerContainerStyle = {},
    huePickerBorderRadius = 0,
    huePickerHue = 0,
    huePickerBarWidth = maxWidth,
    huePickerBarHeight = 12,
    huePickerSliderSize = 24,
    onHuePickerDragStart,
    onHuePickerDragMove,
    onHuePickerDragEnd,
    onHuePickerDragTerminate,
    onHuePickerPress,
    satValPickerContainerStyle = {},
    satValPickerBorderRadius = 0,
    satValPickerSize = {
      width: maxWidth,
      height: 200
    },
    satValPickerSliderSize = 24,
    satValPickerHue = 0,
    satValPickerSaturation = 1,
    satValPickerValue = 1,
    onSatValPickerDragStart,
    onSatValPickerDragMove,
    onSatValPickerDragEnd,
    onSatValPickerDragTerminate,
    onSatValPickerPress
  } = props;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [_styleNative.default['hsv-container'], containerStyle],
    testID: "hsv-color-picker",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_saturationPicker.default, {
      containerStyle: satValPickerContainerStyle,
      currentColor: currentColor,
      borderRadius: satValPickerBorderRadius,
      size: satValPickerSize,
      sliderSize: satValPickerSliderSize,
      hue: satValPickerHue,
      saturation: satValPickerSaturation,
      value: satValPickerValue,
      onDragStart: onSatValPickerDragStart,
      onDragMove: onSatValPickerDragMove,
      onDragEnd: onSatValPickerDragEnd,
      onDragTerminate: onSatValPickerDragTerminate,
      onPress: onSatValPickerPress,
      ref: satValPickerRef
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_huePicker.default, {
      containerStyle: huePickerContainerStyle,
      borderRadius: huePickerBorderRadius,
      hue: huePickerHue,
      barWidth: huePickerBarWidth,
      barHeight: huePickerBarHeight,
      sliderSize: huePickerSliderSize,
      onDragStart: onHuePickerDragStart,
      onDragMove: onHuePickerDragMove,
      onDragEnd: onHuePickerDragEnd,
      onDragTerminate: onHuePickerDragTerminate,
      onPress: onHuePickerPress
    })]
  });
};
var _default = exports.default = HsvColorPicker;
//# sourceMappingURL=hsv-color-picker.native.js.map