react-native-color-picker-palette 1.0.0

package/src/full/components/Fields/RgbFields.tsx

@@ -0,0 +1,192 @@
+import React, { memo, useState, useCallback, useEffect } from 'react';
+import { View, TextInput, Text, StyleSheet } from 'react-native';
+import type { IFieldsProps } from '../../../core/types';
+import { ColorService } from '../../../core/services';
+import { clamp, safeParseInt } from '../../../core/utils';
+
+interface RgbInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  onComplete: () => void;
+  disabled?: boolean;
+}
+
+/**
+ * Single RGB value input
+ */
+const RgbInput = memo(
+  ({ label, value, onChange, onComplete, disabled }: RgbInputProps) => {
+    const [inputValue, setInputValue] = useState(String(value));
+    const [isFocused, setIsFocused] = useState(false);
+
+    // Update input when value changes externally
+    useEffect(() => {
+      if (!isFocused) {
+        setInputValue(String(value));
+      }
+    }, [value, isFocused]);
+
+    const handleChangeText = useCallback((text: string) => {
+      // Only allow numbers
+      const numericValue = text.replace(/[^0-9]/g, '');
+      setInputValue(numericValue);
+    }, []);
+
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+      const numValue = clamp(safeParseInt(inputValue), 0, 255);
+      setInputValue(String(numValue));
+      onChange(numValue);
+      onComplete();
+    }, [inputValue, onChange, onComplete]);
+
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+    }, []);
+
+    return (
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>{label}</Text>
+        <TextInput
+          style={[
+            styles.input,
+            disabled && styles.inputDisabled,
+          ]}
+          value={inputValue}
+          onChangeText={handleChangeText}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          editable={!disabled}
+          keyboardType="number-pad"
+          maxLength={3}
+          placeholder="0"
+          placeholderTextColor="#999999"
+        />
+      </View>
+    );
+  }
+);
+
+/**
+ * RGB color input fields
+ *
+ * Features:
+ * - Three inputs for R, G, B values (0-255)
+ * - Validates input on blur
+ * - Only allows numeric input
+ *
+ * @example
+ * ```tsx
+ * <RgbFields
+ *   color={color}
+ *   onChange={handleChange}
+ *   onChangeComplete={handleChangeComplete}
+ * />
+ * ```
+ */
+export const RgbFields = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    disabled = false,
+  }: IFieldsProps) => {
+    const handleRChange = useCallback(
+      (r: number) => {
+        const nextColor = ColorService.convert('rgb', {
+          ...color.rgb,
+          r,
+        });
+        onChange(nextColor);
+      },
+      [color.rgb, onChange]
+    );
+
+    const handleGChange = useCallback(
+      (g: number) => {
+        const nextColor = ColorService.convert('rgb', {
+          ...color.rgb,
+          g,
+        });
+        onChange(nextColor);
+      },
+      [color.rgb, onChange]
+    );
+
+    const handleBChange = useCallback(
+      (b: number) => {
+        const nextColor = ColorService.convert('rgb', {
+          ...color.rgb,
+          b,
+        });
+        onChange(nextColor);
+      },
+      [color.rgb, onChange]
+    );
+
+    const handleComplete = useCallback(() => {
+      onChangeComplete?.(color);
+    }, [color, onChangeComplete]);
+
+    return (
+      <View style={styles.container}>
+        <RgbInput
+          label="R"
+          value={color.rgb.r}
+          onChange={handleRChange}
+          onComplete={handleComplete}
+          disabled={disabled}
+        />
+        <RgbInput
+          label="G"
+          value={color.rgb.g}
+          onChange={handleGChange}
+          onComplete={handleComplete}
+          disabled={disabled}
+        />
+        <RgbInput
+          label="B"
+          value={color.rgb.b}
+          onChange={handleBChange}
+          onComplete={handleComplete}
+          disabled={disabled}
+        />
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  inputContainer: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#666666',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  input: {
+    height: 36,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    fontSize: 14,
+    color: '#333333',
+    backgroundColor: '#FFFFFF',
+    textAlign: 'center',
+  },
+  inputDisabled: {
+    backgroundColor: '#F5F5F5',
+    color: '#999999',
+  },
+});
+
+RgbFields.displayName = 'RgbFields';

package/src/full/components/Fields/index.tsx

@@ -0,0 +1,70 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { IFieldsProps } from '../../../core/types';
+import { HexField } from './HexField';
+import { RgbFields } from './RgbFields';
+
+/**
+ * Color input fields container
+ *
+ * Includes:
+ * - HEX field for hex color input
+ * - RGB fields for R, G, B value inputs
+ *
+ * @example
+ * ```tsx
+ * <Fields
+ *   color={color}
+ *   onChange={handleChange}
+ *   onChangeComplete={handleChangeComplete}
+ * />
+ * ```
+ */
+export const Fields = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    disabled = false,
+  }: IFieldsProps) => {
+    return (
+      <View style={styles.container}>
+        <View style={styles.hexContainer}>
+          <HexField
+            color={color}
+            onChange={onChange}
+            onChangeComplete={onChangeComplete}
+            disabled={disabled}
+          />
+        </View>
+        <View style={styles.rgbContainer}>
+          <RgbFields
+            color={color}
+            onChange={onChange}
+            onChangeComplete={onChangeComplete}
+            disabled={disabled}
+          />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'flex-end',
+  },
+  hexContainer: {
+    flex: 1,
+  },
+  rgbContainer: {
+    flex: 2,
+  },
+});
+
+Fields.displayName = 'Fields';
+
+export { HexField } from './HexField';
+export { RgbFields } from './RgbFields';

package/src/full/components/Hue.tsx

@@ -0,0 +1,188 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import type { IHueProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Hue slider bar component
+ *
+ * Features:
+ * - Uses react-native-svg for smooth rainbow gradient
+ * - Caches measurements for better performance
+ * - Horizontal rainbow gradient bar
+ *
+ * @example
+ * ```tsx
+ * <Hue
+ *   color={color}
+ *   onChange={handleChange}
+ *   barHeight={10}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const Hue = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    barHeight,
+    thumbSize,
+    disabled = false,
+  }: IHueProps) => {
+    const containerRef = useRef<View>(null);
+    const [width, setWidth] = useState(1);
+    const measurementCache = useRef<number | null>(null);
+
+    // Calculate thumb position from hue value
+    const thumbPosition = useMemo(() => {
+      return (color.hsv.h / 360) * width;
+    }, [color.hsv.h, width]);
+
+    // Update measurement cache
+    const updateMeasurement = useCallback(() => {
+      return new Promise<number>((resolve) => {
+        if (measurementCache.current !== null) {
+          resolve(measurementCache.current);
+          return;
+        }
+        containerRef.current?.measureInWindow((x) => {
+          measurementCache.current = x;
+          resolve(x);
+        });
+      });
+    }, []);
+
+    // Convert touch position to hue
+    // Also sets saturation to 100% since the bar represents the edge of the wheel
+    const updateColorFromPosition = useCallback(
+      async (pageX: number, isFinal: boolean) => {
+        const wx = await updateMeasurement();
+        const x = clamp(pageX - wx, 0, width);
+        const hue = (x / width) * 360;
+
+        const nextColor = ColorService.convert('hsv', {
+          ...color.hsv,
+          h: clamp(hue, 0, 360),
+          s: 100, // Move to edge of wheel (full saturation)
+        });
+
+        onChange(nextColor);
+
+        if (isFinal) {
+          onChangeComplete?.(nextColor);
+        }
+      },
+      [color.hsv, width, onChange, onChangeComplete, updateMeasurement]
+    );
+
+    // PanResponder for touch handling
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !disabled,
+          onMoveShouldSetPanResponder: () => !disabled,
+          onPanResponderGrant: (evt: GestureResponderEvent) => {
+            measurementCache.current = null;
+            updateColorFromPosition(evt.nativeEvent.pageX, false);
+          },
+          onPanResponderMove: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(evt.nativeEvent.pageX, false);
+          },
+          onPanResponderRelease: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(evt.nativeEvent.pageX, true);
+          },
+        }),
+      [disabled, updateColorFromPosition]
+    );
+
+    // Handle layout to get width and clear cache
+    const handleLayout = useCallback((event: LayoutChangeEvent) => {
+      setWidth(event.nativeEvent.layout.width);
+      measurementCache.current = null;
+    }, []);
+
+    return (
+      <View
+        ref={containerRef}
+        style={[
+          styles.container,
+          {
+            height: barHeight + thumbSize,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        onLayout={handleLayout}
+        {...panResponder.panHandlers}
+      >
+        {/* Gradient bar using SVG */}
+        <View style={[styles.barContainer, { height: barHeight, top: thumbSize / 2 }]}>
+          <Svg width="100%" height={barHeight}>
+            <Defs>
+              <LinearGradient id="hueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                <Stop offset="0%" stopColor="#FF0000" />
+                <Stop offset="16.67%" stopColor="#FFFF00" />
+                <Stop offset="33.33%" stopColor="#00FF00" />
+                <Stop offset="50%" stopColor="#00FFFF" />
+                <Stop offset="66.67%" stopColor="#0000FF" />
+                <Stop offset="83.33%" stopColor="#FF00FF" />
+                <Stop offset="100%" stopColor="#FF0000" />
+              </LinearGradient>
+            </Defs>
+            <Rect
+              x="0"
+              y="0"
+              width="100%"
+              height={barHeight}
+              rx={barHeight / 2}
+              ry={barHeight / 2}
+              fill="url(#hueGradient)"
+            />
+          </Svg>
+        </View>
+
+        {/* Thumb indicator - centered vertically with bar */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition - thumbSize / 2,
+              top: barHeight / 2,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} color={`hsl(${color.hsv.h}, 100%, 50%)`} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+  },
+  barContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+Hue.displayName = 'Hue';

package/src/full/components/RectangleSaturation.tsx

@@ -0,0 +1,203 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import type { IRectangleSaturationProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Rectangle Saturation/Value Picker - SVG Version
+ *
+ * Uses react-native-svg for smooth gradients.
+ *
+ * Layout:
+ * - Top-right: Current hue at full saturation (100% S, 100% V)
+ * - Top-left: White (0% S, 100% V)
+ * - Bottom-left: Black (0% S, 0% V)
+ * - Bottom-right: Black (100% S, 0% V)
+ *
+ * X-axis: Saturation (0% to 100%)
+ * Y-axis: Value/Brightness (100% to 0%)
+ *
+ * @example
+ * ```tsx
+ * <RectangleSaturation
+ *   color={color}
+ *   onChange={handleChange}
+ *   width={250}
+ *   height={150}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const RectangleSaturation = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    width,
+    height,
+    thumbSize,
+    disabled = false,
+  }: IRectangleSaturationProps) => {
+    const containerRef = useRef<View>(null);
+    const measurementCache = useRef<{ x: number; y: number } | null>(null);
+    const [isLayoutReady, setIsLayoutReady] = useState(false);
+
+    // Calculate thumb position from HSV values
+    const thumbPosition = useMemo(() => {
+      const x = (color.hsv.s / 100) * width - thumbSize / 2;
+      const y = ((100 - color.hsv.v) / 100) * height - thumbSize / 2;
+      return {
+        x: clamp(x, -thumbSize / 2, width - thumbSize / 2),
+        y: clamp(y, -thumbSize / 2, height - thumbSize / 2),
+      };
+    }, [color.hsv.s, color.hsv.v, width, height, thumbSize]);
+
+    // Update measurement cache
+    const updateMeasurement = useCallback(() => {
+      return new Promise<{ x: number; y: number }>((resolve) => {
+        if (measurementCache.current) {
+          resolve(measurementCache.current);
+          return;
+        }
+        containerRef.current?.measureInWindow((x, y) => {
+          measurementCache.current = { x, y };
+          resolve({ x, y });
+        });
+      });
+    }, []);
+
+    // Convert touch coordinates to HSV
+    const updateColorFromPosition = useCallback(
+      async (pageX: number, pageY: number, isFinal: boolean) => {
+        const measurement = await updateMeasurement();
+
+        const x = clamp(pageX - measurement.x, 0, width);
+        const y = clamp(pageY - measurement.y, 0, height);
+
+        const saturation = (x / width) * 100;
+        const value = 100 - (y / height) * 100;
+
+        const nextColor = ColorService.convert('hsv', {
+          h: color.hsv.h,
+          s: clamp(saturation, 0, 100),
+          v: clamp(value, 0, 100),
+          a: color.hsv.a,
+        });
+
+        onChange(nextColor);
+
+        if (isFinal) {
+          onChangeComplete?.(nextColor);
+        }
+      },
+      [color.hsv.h, color.hsv.a, width, height, onChange, onChangeComplete, updateMeasurement]
+    );
+
+    // Handle layout
+    const handleLayout = useCallback((event: LayoutChangeEvent) => {
+      measurementCache.current = null;
+      setIsLayoutReady(true);
+    }, []);
+
+    // PanResponder
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !disabled,
+          onMoveShouldSetPanResponder: () => !disabled,
+          onPanResponderGrant: (evt: GestureResponderEvent) => {
+            measurementCache.current = null;
+            updateColorFromPosition(evt.nativeEvent.pageX, evt.nativeEvent.pageY, false);
+          },
+          onPanResponderMove: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(evt.nativeEvent.pageX, evt.nativeEvent.pageY, false);
+          },
+          onPanResponderRelease: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(evt.nativeEvent.pageX, evt.nativeEvent.pageY, true);
+          },
+        }),
+      [disabled, updateColorFromPosition]
+    );
+
+    // Current hue color at full saturation
+    const hueColor = `hsl(${color.hsv.h}, 100%, 50%)`;
+
+    return (
+      <View
+        ref={containerRef}
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            width,
+            height,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        <Svg width={width} height={height}>
+          <Defs>
+            {/* White gradient: left (white) to right (transparent) */}
+            <LinearGradient id="whiteGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+              <Stop offset="0%" stopColor="#FFFFFF" stopOpacity="1" />
+              <Stop offset="100%" stopColor="#FFFFFF" stopOpacity="0" />
+            </LinearGradient>
+
+            {/* Black gradient: top (transparent) to bottom (black) */}
+            <LinearGradient id="blackGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <Stop offset="0%" stopColor="#000000" stopOpacity="0" />
+              <Stop offset="100%" stopColor="#000000" stopOpacity="1" />
+            </LinearGradient>
+          </Defs>
+
+          {/* Base hue color */}
+          <Rect x="0" y="0" width={width} height={height} fill={hueColor} rx={8} ry={8} />
+
+          {/* White gradient overlay */}
+          <Rect x="0" y="0" width={width} height={height} fill="url(#whiteGradient)" rx={8} ry={8} />
+
+          {/* Black gradient overlay */}
+          <Rect x="0" y="0" width={width} height={height} fill="url(#blackGradient)" rx={8} ry={8} />
+        </Svg>
+
+        {/* Thumb */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition.x,
+              top: thumbPosition.y,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} color={color.hex} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+RectangleSaturation.displayName = 'RectangleSaturation';