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

UI components for GeChiUI.

import { createElement, Fragment } from "@gechiui/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';
/**
 * GeChiUI dependencies
 */

import { useState, useEffect, useRef } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
import { BottomSheet } from '@gechiui/components';
import { usePreferredColorSchemeStyle } from '@gechiui/compose';
import { Icon, check, close } from '@gechiui/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 didMount = useRef(false);
  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 currentColor = colord({
    h: hue,
    s: sat * 100,
    v: val * 100
  }).toHex();
  useEffect(() => {
    if (!didMount.current) {
      didMount.current = true;
      return;
    }

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

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

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

  function onHuePickerChange(_ref2) {
    let {
      hue: h
    } = _ref2;
    setHue(h);
  }

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

  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: 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
  }), createElement(View, {
    style: footerStyle
  }, createElement(TouchableWithoutFeedback, {
    onPress: () => onButtonPress('cancel'),
    hitSlop: hitSlop
  }, createElement(View, null, isIOS ? createElement(Text, {
    style: cancelButtonStyle
  }, __('取消')) : 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
  }, __('应用')) : createElement(Icon, {
    icon: check,
    size: 24,
    style: applyButtonStyle
  })))));
}

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