@wordpress/components/build-module/color-picker/index.native.js

UI components for WordPress.

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

/**
 * External dependencies
 */
import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
import HsvColorPicker from 'react-native-hsv-color-picker';
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
/**
 * WordPress dependencies
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { BottomSheet } from '@wordpress/components';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { Icon, check, close } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import styles from './style.scss';
extend([namesPlugin]);

function ColorPicker(_ref) {
  let {
    shouldEnableBottomSheetScroll,
    shouldEnableBottomSheetMaxHeight,
    isBottomSheetContentScrolling,
    setColor,
    activeColor,
    isGradientColor,
    onNavigationBack,
    onHandleClosingBottomSheet,
    onBottomSheetClosed,
    onHandleHardwareButtonPress,
    bottomLabelText
  } = _ref;
  const isIOS = Platform.OS === 'ios';
  const hitSlop = {
    top: 22,
    bottom: 22,
    left: 22,
    right: 22
  };
  const {
    h: initH,
    s: initS,
    v: initV
  } = !isGradientColor && activeColor ? colord(activeColor).toHsv() : {
    h: 0,
    s: 50,
    v: 50
  };
  const [hue, setHue] = useState(initH);
  const [sat, setSaturation] = useState(initS / 100);
  const [val, setValue] = useState(initV / 100);
  const [savedColor] = useState(activeColor);
  const {
    paddingLeft: spacing,
    height: pickerHeight,
    borderRadius
  } = styles.picker;
  const {
    height: pickerPointerSize
  } = styles.pickerPointer;
  const pickerWidth = BottomSheet.getWidth() - 2 * spacing;
  const applyButtonStyle = usePreferredColorSchemeStyle(styles.applyButton, styles.applyButtonDark);
  const cancelButtonStyle = usePreferredColorSchemeStyle(styles.cancelButton, styles.cancelButtonDark);
  const colorTextStyle = usePreferredColorSchemeStyle(styles.colorText, styles.colorTextDark);
  const selectColorTextStyle = usePreferredColorSchemeStyle(styles.selectColorText, styles.selectColorTextDark);
  const footerStyle = usePreferredColorSchemeStyle(styles.footer, styles.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 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));
  };

  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 createElement(Fragment, null, createElement(HsvColorPicker, {
    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
  }), createElement(View, {
    style: footerStyle
  }, createElement(TouchableWithoutFeedback, {
    onPress: () => onButtonPress('cancel'),
    hitSlop: hitSlop
  }, createElement(View, null, isIOS ? createElement(Text, {
    style: cancelButtonStyle
  }, __('Cancel')) : createElement(Icon, {
    icon: close,
    size: 24,
    style: cancelButtonStyle
  }))), bottomLabelText ? createElement(Text, {
    style: selectColorTextStyle
  }, bottomLabelText) : createElement(Text, {
    style: colorTextStyle,
    selectable: true
  }, currentColor.toUpperCase()), createElement(TouchableWithoutFeedback, {
    onPress: () => onButtonPress('apply'),
    hitSlop: hitSlop
  }, createElement(View, null, isIOS ? createElement(Text, {
    style: applyButtonStyle
  }, __('Apply')) : createElement(Icon, {
    icon: check,
    size: 24,
    style: applyButtonStyle
  })))));
}

export { ColorPicker };
//# sourceMappingURL=index.native.js.map