react-native-color-picker-palette 1.0.0

package/src/full/components/Alpha.tsx

@@ -0,0 +1,221 @@
+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 { IAlphaProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Alpha (transparency) slider bar component
+ *
+ * Features:
+ * - Uses react-native-svg for gradient
+ * - Caches measurements for better performance
+ * - Static checkerboard pattern (not generated on each render)
+ * - Horizontal bar with gradient from transparent to solid
+ *
+ * @example
+ * ```tsx
+ * <Alpha
+ *   color={color}
+ *   onChange={handleChange}
+ *   barHeight={10}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const Alpha = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    barHeight,
+    thumbSize,
+    disabled = false,
+  }: IAlphaProps) => {
+    const containerRef = useRef<View>(null);
+    const [width, setWidth] = useState(1);
+    const measurementCache = useRef<number | null>(null);
+
+    // Calculate thumb position from alpha value (a=1 should be at right)
+    const thumbPosition = useMemo(() => {
+      return color.hsv.a * width;
+    }, [color.hsv.a, 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 alpha
+    const updateColorFromPosition = useCallback(
+      async (pageX: number, isFinal: boolean) => {
+        const wx = await updateMeasurement();
+        const x = clamp(pageX - wx, 0, width);
+        const alpha = x / width;
+
+        const nextColor = ColorService.convert('hsv', {
+          ...color.hsv,
+          a: clamp(alpha, 0, 1),
+        });
+
+        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;
+    }, []);
+
+    // Solid color for gradient end
+    const solidColor = `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
+
+    return (
+      <View
+        ref={containerRef}
+        style={[
+          styles.container,
+          {
+            height: barHeight + thumbSize,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        onLayout={handleLayout}
+        {...panResponder.panHandlers}
+      >
+        {/* Bar with checkerboard and gradient */}
+        <View style={[styles.barContainer, { height: barHeight, top: thumbSize / 2 }]}>
+          {/* Checkerboard background - dynamic size based on barHeight */}
+          <View style={[styles.checkerboard, { borderRadius: barHeight / 2 }]}>
+            {Array.from({ length: 2 }).map((_, rowIndex) => {
+              const checkerSize = barHeight / 2;
+              const cellCount = Math.ceil(width / checkerSize) + 1;
+              return (
+                <View key={rowIndex} style={[styles.checkerRow, { height: checkerSize }]}>
+                  {Array.from({ length: cellCount }).map((_, i) => (
+                    <View
+                      key={i}
+                      style={{
+                        width: checkerSize,
+                        height: checkerSize,
+                        backgroundColor: (i + rowIndex) % 2 === 0 ? '#FFFFFF' : '#CCCCCC',
+                      }}
+                    />
+                  ))}
+                </View>
+              );
+            })}
+          </View>
+
+          {/* Color gradient overlay using SVG */}
+          <View style={[styles.gradient, { borderRadius: barHeight / 2 }]}>
+            <Svg width="100%" height={barHeight}>
+              <Defs>
+                <LinearGradient id="alphaGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                  <Stop offset="0%" stopColor={solidColor} stopOpacity="0" />
+                  <Stop offset="100%" stopColor={solidColor} stopOpacity="1" />
+                </LinearGradient>
+              </Defs>
+              <Rect
+                x="0"
+                y="0"
+                width="100%"
+                height={barHeight}
+                rx={barHeight / 2}
+                ry={barHeight / 2}
+                fill="url(#alphaGradient)"
+              />
+            </Svg>
+          </View>
+        </View>
+
+        {/* Thumb indicator - centered vertically with bar */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition - thumbSize / 2,
+              top: barHeight / 2,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} color={`rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.hsv.a})`} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+  },
+  barContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  checkerboard: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  checkerRow: {
+    flexDirection: 'row',
+  },
+  gradient: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+Alpha.displayName = 'Alpha';

package/src/full/components/ColorPicker.tsx

@@ -0,0 +1,206 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { IColorPickerProps } from '../../core/types';
+import { Saturation } from './Saturation';
+import { RectangleSaturation } from './RectangleSaturation';
+import { Hue } from './Hue';
+import { Alpha } from './Alpha';
+import { Value } from './Value';
+import { Fields } from './Fields';
+
+/**
+ * Main ColorPicker component (Full version with react-native-svg)
+ *
+ * Features:
+ * - Circular color wheel or rectangle for saturation/value selection
+ * - Horizontal hue bar
+ * - Horizontal alpha bar with checkerboard background
+ * - HEX and RGB input fields
+ * - Circle thumbs with white 2px border showing selected color
+ *
+ * @example
+ * ```tsx
+ * import { ColorPicker, useColor } from 'react-native-color-palette';
+ *
+ * function MyComponent() {
+ *   const [color, setColor] = useColor('#FF0000');
+ *
+ *   return (
+ *     <ColorPicker
+ *       color={color}
+ *       onChange={setColor}
+ *       variant="rectangle"
+ *       onChangeComplete={(c) => console.log('Final color:', c.hex)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const ColorPicker = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    variant = 'rectangle',
+    width = 250,
+    barHeight = 10,
+    thumbSize = 24,
+    hideHue = false,
+    hideAlpha = false,
+    hidePreview = false,
+    hideInput = false,
+    disabled = false,
+  }: IColorPickerProps) => {
+    // Rectangle height is 60% of width for better proportions
+    const rectangleHeight = width * 0.6;
+
+    return (
+      <View style={[styles.container, disabled && styles.disabled]}>
+        {/* Color picker (circle or rectangle) */}
+        <View style={styles.pickerContainer}>
+          {variant === 'circle' ? (
+            <Saturation
+              color={color}
+              onChange={onChange}
+              onChangeComplete={onChangeComplete}
+              size={width}
+              thumbSize={thumbSize}
+              disabled={disabled}
+            />
+          ) : (
+            <RectangleSaturation
+              color={color}
+              onChange={onChange}
+              onChangeComplete={onChangeComplete}
+              width={width}
+              height={rectangleHeight}
+              thumbSize={thumbSize}
+              disabled={disabled}
+            />
+          )}
+        </View>
+
+        {/* Color preview */}
+        {!hidePreview && (
+          <View style={styles.previewContainer}>
+            <View
+              style={[
+                styles.preview,
+                {
+                  backgroundColor: color.hex,
+                },
+              ]}
+            />
+            <View
+              style={[
+                styles.previewAlpha,
+                {
+                  backgroundColor: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
+                },
+              ]}
+            />
+          </View>
+        )}
+
+        {/* Sliders section */}
+        <View style={styles.slidersContainer}>
+          {/* Hue slider - always shown for rectangle variant */}
+          {(!hideHue || variant === 'rectangle') && (
+            <View style={styles.sliderRow}>
+              <Hue
+                color={color}
+                onChange={onChange}
+                onChangeComplete={onChangeComplete}
+                barHeight={barHeight}
+                thumbSize={thumbSize}
+                disabled={disabled}
+              />
+            </View>
+          )}
+
+          {/* Value/Brightness slider - only for circle variant */}
+          {variant === 'circle' && (
+            <View style={styles.sliderRow}>
+              <Value
+                color={color}
+                onChange={onChange}
+                onChangeComplete={onChangeComplete}
+                barHeight={barHeight}
+                thumbSize={thumbSize}
+                disabled={disabled}
+              />
+            </View>
+          )}
+
+          {/* Alpha slider */}
+          {!hideAlpha && (
+            <View style={styles.sliderRow}>
+              <Alpha
+                color={color}
+                onChange={onChange}
+                onChangeComplete={onChangeComplete}
+                barHeight={barHeight}
+                thumbSize={thumbSize}
+                disabled={disabled}
+              />
+            </View>
+          )}
+        </View>
+
+        {/* Input fields */}
+        {!hideInput && (
+          <View style={styles.fieldsContainer}>
+            <Fields
+              color={color}
+              onChange={onChange}
+              onChangeComplete={onChangeComplete}
+              disabled={disabled}
+            />
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    padding: 16,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  pickerContainer: {
+    marginBottom: 20,
+  },
+  previewContainer: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+  },
+  preview: {
+    width: 40,
+    height: 40,
+  },
+  previewAlpha: {
+    width: 40,
+    height: 40,
+  },
+  slidersContainer: {
+    width: '100%',
+    gap: 16,
+    marginBottom: 20,
+  },
+  sliderRow: {
+    width: '100%',
+  },
+  fieldsContainer: {
+    width: '100%',
+  },
+});
+
+ColorPicker.displayName = 'ColorPicker';

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

@@ -0,0 +1,125 @@
+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';
+
+/**
+ * Hex color input field
+ *
+ * Features:
+ * - Shows and edits hex value (e.g., #FF5500)
+ * - Validates input on blur
+ * - Auto-capitalizes and adds # prefix
+ *
+ * @example
+ * ```tsx
+ * <HexField
+ *   color={color}
+ *   onChange={handleChange}
+ *   onChangeComplete={handleChangeComplete}
+ * />
+ * ```
+ */
+export const HexField = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    disabled = false,
+  }: IFieldsProps) => {
+    const [inputValue, setInputValue] = useState(color.hex);
+    const [isFocused, setIsFocused] = useState(false);
+
+    // Update input when color changes externally
+    useEffect(() => {
+      if (!isFocused) {
+        setInputValue(color.hex);
+      }
+    }, [color.hex, isFocused]);
+
+    // Handle text change
+    const handleChangeText = useCallback((text: string) => {
+      // Add # if not present
+      let value = text.toUpperCase();
+      if (!value.startsWith('#')) {
+        value = '#' + value;
+      }
+      // Limit to valid hex length
+      value = value.slice(0, 9); // #RRGGBBAA max
+      setInputValue(value);
+    }, []);
+
+    // Validate and apply color on blur
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+
+      // Validate hex format
+      const hexRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+
+      if (hexRegex.test(inputValue)) {
+        const nextColor = ColorService.convert('hex', inputValue);
+        onChange(nextColor);
+        onChangeComplete?.(nextColor);
+      } else {
+        // Reset to current color if invalid
+        setInputValue(color.hex);
+      }
+    }, [inputValue, color.hex, onChange, onChangeComplete]);
+
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+    }, []);
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.label}>HEX</Text>
+        <TextInput
+          style={[
+            styles.input,
+            disabled && styles.inputDisabled,
+          ]}
+          value={inputValue}
+          onChangeText={handleChangeText}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          editable={!disabled}
+          autoCapitalize="characters"
+          autoCorrect={false}
+          maxLength={9}
+          placeholder="#000000"
+          placeholderTextColor="#999999"
+          numberOfLines={1}
+        />
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#666666',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  input: {
+    height: 36,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 6,
+    fontSize: 14,
+    color: '#333333',
+    backgroundColor: '#FFFFFF',
+    textAlign: 'center',
+  },
+  inputDisabled: {
+    backgroundColor: '#F5F5F5',
+    color: '#999999',
+  },
+});
+
+HexField.displayName = 'HexField';