@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.ColorPicker = ColorPicker;

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

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

var _reactNativeHsvColorPicker = _interopRequireDefault(require("react-native-hsv-color-picker"));

var _colord = require("colord");

var _names = _interopRequireDefault(require("colord/plugins/names"));

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
 */
(0, _colord.extend)([_names.default]);

function ColorPicker(_ref) {
  let {
    shouldEnableBottomSheetScroll,
    shouldEnableBottomSheetMaxHeight,
    isBottomSheetContentScrolling,
    setColor,
    activeColor,
    isGradientColor,
    onNavigationBack,
    onHandleClosingBottomSheet,
    onBottomSheetClosed,
    onHandleHardwareButtonPress,
    bottomLabelText
  } = _ref;
  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, _colord.colord)(activeColor).toHsv() : {
    h: 0,
    s: 50,
    v: 50
  };
  const [hue, setHue] = (0, _element.useState)(initH);
  const [sat, setSaturation] = (0, _element.useState)(initS / 100);
  const [val, setValue] = (0, _element.useState)(initV / 100);
  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 combineToHex = function () {
    let h = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : hue;
    let s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : sat;
    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : val;
    return (0, _colord.colord)({
      h,
      s: s * 100,
      v: v * 100
    }).toHex();
  };

  const currentColor = combineToHex();

  const updateColor = _ref2 => {
    let {
      hue: h,
      saturation: s,
      value: v
    } = _ref2;
    if (h !== undefined) setHue(h);
    if (s !== undefined) setSaturation(s);
    if (v !== undefined) setValue(v);
    setColor(combineToHex(h, s, v));
  };

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

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

    if (onHandleHardwareButtonPress) {
      onHandleHardwareButtonPress(onButtonPress);
    } // TODO: Revisit this to discover if there's a good reason for omitting
    // the hook’s dependencies and running it a single time. Ideally there
    // may be a way to refactor and obviate the disabled lint rule. If not,
    // this comment should be replaced by one that explains the reasoning.
    // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);

  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: updateColor,
    onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
    satValPickerHue: hue,
    satValPickerSaturation: sat,
    satValPickerValue: val,
    onSatValPickerDragMove: updateColor,
    onSatValPickerPress: !isBottomSheetContentScrolling && updateColor,
    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
  })))));
}
//# sourceMappingURL=index.native.js.map