@darthrapid/react-native-color-picker 0.1.0 → 1.1.0

package/src/components/palettes-tab.tsx

@@ -0,0 +1,358 @@
+import { memo, useCallback, useMemo, useState } from "react";
+import { FlatList, Pressable, ScrollView, Text, View } from "react-native";
+import Svg, { Defs, Pattern, Rect } from "react-native-svg";
+import type { ColorPickerLabels, Theme } from "../types/misc";
+import { getContrastColor, hexToRgba, parseAlphaFromHex } from "../utils/colors";
+
+// Color can be a simple hex string or an object with shades
+export type ColorValue = string | Record<string, string>;
+
+export type ColorPalette = {
+  name: string;
+  colors: Record<string, ColorValue>;
+};
+
+type PalettesTabProps = {
+  palettes?: ColorPalette[];
+  savedColors?: string[];
+  showAlpha?: boolean;
+  disabled: boolean;
+  t: Theme;
+  labels: Required<ColorPickerLabels>;
+  onSelect: (hex: string) => void;
+  onClearSaved?: () => void;
+};
+
+const SWATCH_SIZE = 56;
+const GAP = 6;
+
+// Check if a color value has shades
+function hasShades(value: ColorValue): value is Record<string, string> {
+  return typeof value === "object" && value !== null;
+}
+
+// Memoized swatch component
+const ColorSwatch = memo(function ColorSwatch({
+  name,
+  hex,
+  showAlpha,
+  disabled,
+  borderColor,
+  onSelect,
+}: {
+  name?: string;
+  hex: string;
+  showAlpha?: boolean;
+  disabled: boolean;
+  borderColor: string;
+  onSelect: (hex: string) => void;
+}) {
+  const colorAlpha = showAlpha ? parseAlphaFromHex(hex) : 100;
+  const displayColor = showAlpha ? hexToRgba(hex, colorAlpha) : hex;
+  const contrast = getContrastColor(hex, colorAlpha);
+
+  return (
+    <Pressable
+      onPress={() => onSelect(hex)}
+      disabled={disabled}
+      style={({ pressed }) => ({
+        width: SWATCH_SIZE,
+        height: SWATCH_SIZE,
+        borderRadius: 8,
+        overflow: "hidden",
+        borderWidth: 1,
+        borderColor,
+        opacity: pressed ? 0.7 : 1,
+        justifyContent: "center",
+        alignItems: "center",
+      })}
+    >
+      {showAlpha && (
+        <Svg width={SWATCH_SIZE} height={SWATCH_SIZE} style={{ position: "absolute" }}>
+          <Defs>
+            <Pattern
+              id={`checker-${hex.replace("#", "")}`}
+              x="0"
+              y="0"
+              width={10}
+              height={10}
+              patternUnits="userSpaceOnUse"
+            >
+              <Rect x="0" y="0" width={5} height={5} fill="#CCCCCC" />
+              <Rect x={5} y="0" width={5} height={5} fill="#FFFFFF" />
+              <Rect x="0" y={5} width={5} height={5} fill="#FFFFFF" />
+              <Rect x={5} y={5} width={5} height={5} fill="#CCCCCC" />
+            </Pattern>
+          </Defs>
+          <Rect x="0" y="0" width={SWATCH_SIZE} height={SWATCH_SIZE} fill={`url(#checker-${hex.replace("#", "")})`} />
+        </Svg>
+      )}
+      <View
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          backgroundColor: displayColor,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {name && (
+          <Text
+            style={{
+              color: contrast,
+              fontSize: 9,
+              fontWeight: "600",
+              textAlign: "center",
+            }}
+            numberOfLines={1}
+          >
+            {name}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+});
+
+// Row item type for FlatList
+type RowItem =
+  | { type: "saved-header" }
+  | { type: "saved-colors"; colors: string[] }
+  | { type: "saved-empty" }
+  | { type: "simple"; colors: [string, string][] }
+  | { type: "group"; name: string; shades: [string, string][] };
+
+export function PalettesTab({
+  palettes = [],
+  savedColors = [],
+  showAlpha,
+  disabled,
+  t,
+  labels,
+  onSelect,
+  onClearSaved,
+}: PalettesTabProps) {
+  const [activePaletteIndex, setActivePaletteIndex] = useState(0);
+
+  // User palettes first, then "Saved" at the end
+  const allPalettes = useMemo(() => {
+    return [...palettes.map((p) => ({ ...p, isSaved: false })), { name: labels.saved, isSaved: true }];
+  }, [palettes, labels.saved]);
+
+  const activePalette = allPalettes[activePaletteIndex];
+
+  // Memoize row data
+  const rowData = useMemo(() => {
+    if (!activePalette) return [];
+
+    // Saved colors tab
+    if (activePalette.isSaved) {
+      if (savedColors.length === 0) {
+        return [{ type: "saved-empty" as const }];
+      }
+      return [{ type: "saved-colors" as const, colors: savedColors }];
+    }
+
+    // Regular palette
+    const palette = activePalette as ColorPalette & { isSaved: false };
+    const simpleColors: [string, string][] = [];
+    const colorGroups: [string, Record<string, string>][] = [];
+
+    for (const [name, value] of Object.entries(palette.colors)) {
+      if (hasShades(value)) {
+        colorGroups.push([name, value]);
+      } else {
+        simpleColors.push([name, value]);
+      }
+    }
+
+    const rows: RowItem[] = [];
+
+    if (simpleColors.length > 0) {
+      rows.push({ type: "simple", colors: simpleColors });
+    }
+
+    for (const [name, shades] of colorGroups) {
+      rows.push({
+        type: "group",
+        name,
+        shades: Object.entries(shades),
+      });
+    }
+
+    return rows;
+  }, [activePalette, savedColors]);
+
+  const handleSelect = useCallback(
+    (hex: string) => {
+      onSelect(hex);
+    },
+    [onSelect]
+  );
+
+  const renderRow = useCallback(
+    ({ item }: { item: RowItem }) => {
+      if (item.type === "saved-empty") {
+        return (
+          <View style={{ padding: 20, alignItems: "center", justifyContent: "center" }}>
+            <Text style={{ color: t.textDim, fontSize: 14 }}>{labels.noSavedColors}</Text>
+          </View>
+        );
+      }
+
+      if (item.type === "saved-colors") {
+        return (
+          <View style={{ gap: 12 }}>
+            <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+              <Text style={{ color: t.textMuted, fontSize: 11, fontWeight: "600", textTransform: "uppercase" }}>
+                {labels.saved}
+              </Text>
+              {onClearSaved && item.colors.length > 0 && (
+                <Pressable onPress={onClearSaved}>
+                  <Text style={{ color: t.textDim, fontSize: 12, fontWeight: "600" }}>
+                    {labels.clearSaved}
+                  </Text>
+                </Pressable>
+              )}
+            </View>
+            <View style={{ flexDirection: "row", flexWrap: "wrap", gap: GAP }}>
+              {item.colors.map((hex, i) => (
+                <ColorSwatch
+                  key={`${hex}-${i}`}
+                  name={showAlpha && hex.length === 9 ? hex.slice(1).toUpperCase() : hex.slice(1, 7).toUpperCase()}
+                  hex={hex}
+                  showAlpha={showAlpha}
+                  disabled={disabled}
+                  borderColor={t.border}
+                  onSelect={handleSelect}
+                />
+              ))}
+            </View>
+          </View>
+        );
+      }
+
+      if (item.type === "simple") {
+        return (
+          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: GAP }}>
+            {item.colors.map(([name, hex]) => (
+              <ColorSwatch
+                key={name}
+                name={name}
+                hex={hex}
+                disabled={disabled}
+                borderColor={t.border}
+                onSelect={handleSelect}
+              />
+            ))}
+          </View>
+        );
+      }
+
+      if (item.type === "group") {
+        return (
+          <View style={{ gap: 6 }}>
+            <Text
+              style={{
+                color: t.textMuted,
+                fontSize: 11,
+                fontWeight: "600",
+                textTransform: "capitalize",
+              }}
+            >
+              {item.name}
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{ gap: GAP }}
+            >
+              {item.shades.map(([shade, hex]) => (
+                <ColorSwatch
+                  key={shade}
+                  name={shade}
+                  hex={hex}
+                  disabled={disabled}
+                  borderColor={t.border}
+                  onSelect={handleSelect}
+                />
+              ))}
+            </ScrollView>
+          </View>
+        );
+      }
+
+      return null;
+    },
+    [disabled, showAlpha, t, labels, handleSelect, onClearSaved]
+  );
+
+  const keyExtractor = useCallback(
+    (item: RowItem, index: number) => {
+      if (item.type === "saved-header") return "saved-header";
+      if (item.type === "saved-colors") return "saved-colors";
+      if (item.type === "saved-empty") return "saved-empty";
+      if (item.type === "simple") return "simple";
+      if (item.type === "group") return `group-${item.name}-${index}`;
+      return `row-${index}`;
+    },
+    []
+  );
+
+  return (
+    <View>
+      {/* Palette selector */}
+      {allPalettes.length > 1 && (
+        <View style={{ borderBottomWidth: 1, borderBottomColor: t.border }}>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{ paddingHorizontal: 12, paddingVertical: 8, gap: 8 }}
+          >
+            {allPalettes.map((palette, index) => {
+              const isActive = index === activePaletteIndex;
+              return (
+                <Pressable
+                  key={palette.name}
+                  onPress={() => setActivePaletteIndex(index)}
+                  style={{
+                    paddingHorizontal: 12,
+                    paddingVertical: 6,
+                    borderRadius: 6,
+                    backgroundColor: isActive ? t.tabIndicator : t.surface,
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 12,
+                      fontWeight: "600",
+                      color: isActive ? (t.tabIndicator === "#FFFFFF" ? "#000000" : "#FFFFFF") : t.textMuted,
+                    }}
+                  >
+                    {palette.name}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+        </View>
+      )}
+
+      {/* Colors grid - virtualized */}
+      <View style={{ height: 280 }}>
+        <FlatList
+          data={rowData}
+          renderItem={renderRow}
+          keyExtractor={keyExtractor}
+          contentContainerStyle={{ padding: 12, gap: 12 }}
+          showsVerticalScrollIndicator={false}
+          initialNumToRender={5}
+          maxToRenderPerBatch={5}
+          windowSize={5}
+          removeClippedSubviews
+        />
+      </View>
+    </View>
+  );
+}

package/src/components/picker-panel.tsx

@@ -6,9 +6,11 @@ import {
   type StyleProp,
   type ViewStyle
 } from "react-native";
+import Svg, { Defs, Pattern, Rect } from "react-native-svg";
 import type { ColorPickerLabels, TabId, Theme } from "../types/misc";
+import { appendAlphaToHex, hexToRgba } from "../utils/colors";
+import { type ColorPalette, PalettesTab } from "./palettes-tab";
 import { PickerTab } from "./picker-tab";
-import { RecentTab } from "./recent-tab";
 import { TabBar } from "./tab-bar";
 import { ValuesTab } from "./values-tab";
 
@@ -16,10 +18,11 @@ type PickerPanelProps = {
   hue: number;
   sat: number;
   bright: number;
+  alpha?: number;
   currentHex: string;
   contrastColor: string;
   hexInput: string;
-  recentColors: string[];
+  savedColors: string[];
   tabs: TabId[];
   hueStripHeight: number;
   disabled: boolean;
@@ -27,13 +30,15 @@ type PickerPanelProps = {
   labels: Required<ColorPickerLabels>;
   onHueChange: (h: number) => void;
   onSatBrightChange: (vals: { s: number; b: number }) => void;
+  onAlphaChange?: (a: number) => void;
   onHexInputChange: (text: string) => void;
   onHexSubmit: () => void;
   onHexInputFocus: () => void;
   onHexInputBlur: () => void;
-  onSaveRecent: () => void;
-  onRecentSelect: (hex: string) => void;
-  onClearRecent: () => void;
+  onSaveColor: () => void;
+  onSelectColor: (hex: string) => void;
+  onClearSaved?: () => void;
+  palettes?: ColorPalette[];
   style?: StyleProp<ViewStyle>;
 }
 
@@ -41,27 +46,34 @@ export function PickerPanel({
   hue,
   sat,
   bright,
+  alpha,
   currentHex,
   contrastColor,
   hexInput,
-  recentColors,
+  savedColors,
   tabs,
   hueStripHeight,
   disabled,
   t,
   onHueChange,
   onSatBrightChange,
+  onAlphaChange,
   onHexInputChange,
   onHexSubmit,
   onHexInputFocus,
   onHexInputBlur,
-  onSaveRecent,
-  onRecentSelect,
-  onClearRecent,
+  onSaveColor,
+  onSelectColor,
+  onClearSaved,
+  palettes,
   labels,
   style,
 }: PickerPanelProps) {
   const [activeTab, setActiveTab] = useState<TabId>(tabs[0]!);
+  const showAlpha = alpha != null;
+  const displayHex = showAlpha ? appendAlphaToHex(currentHex, alpha) : currentHex;
+  const headerBgColor = showAlpha ? hexToRgba(currentHex, alpha) : currentHex;
+  const checkerSize = 8;
 
   return (
     <View
@@ -74,51 +86,90 @@ export function PickerPanel({
       <View
         style={{
           height: 64,
-          backgroundColor: currentHex,
-          justifyContent: "flex-end",
-          paddingHorizontal: 16,
-          paddingBottom: 12,
+          overflow: "hidden",
         }}
       >
+        {/* Checkerboard background for alpha */}
+        {showAlpha && (
+          <Svg
+            width="100%"
+            height={64}
+            style={{ position: "absolute" }}
+          >
+            <Defs>
+              <Pattern
+                id="headerChecker"
+                x="0"
+                y="0"
+                width={checkerSize * 2}
+                height={checkerSize * 2}
+                patternUnits="userSpaceOnUse"
+              >
+                <Rect x="0" y="0" width={checkerSize} height={checkerSize} fill="#CCCCCC" />
+                <Rect x={checkerSize} y="0" width={checkerSize} height={checkerSize} fill="#FFFFFF" />
+                <Rect x="0" y={checkerSize} width={checkerSize} height={checkerSize} fill="#FFFFFF" />
+                <Rect x={checkerSize} y={checkerSize} width={checkerSize} height={checkerSize} fill="#CCCCCC" />
+              </Pattern>
+            </Defs>
+            <Rect x="0" y="0" width="100%" height={64} fill="url(#headerChecker)" />
+          </Svg>
+        )}
+        {/* Color overlay */}
         <View
           style={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            backgroundColor: headerBgColor,
+            justifyContent: "flex-end",
+            paddingHorizontal: 16,
+            paddingBottom: 12,
           }}
         >
-          <Text
+          <View
             style={{
-              fontSize: 18,
-              fontWeight: "700",
-              color: contrastColor,
-              fontVariant: ["tabular-nums"],
-              letterSpacing: 0.5,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
             }}
-          >
-            {currentHex.toUpperCase()}
-          </Text>
-          <Pressable
-            onPress={onSaveRecent}
-            style={({ pressed }) => ({
-              backgroundColor: pressed
-                ? contrastColor === "#FFFFFF"
-                  ? "rgba(255,255,255,0.5)"
-                  : "rgba(0,0,0,0.3)"
-                : contrastColor === "#FFFFFF"
-                  ? "rgba(255,255,255,0.2)"
-                  : "rgba(0,0,0,0.1)",
-              paddingHorizontal: 12,
-              paddingVertical: 5,
-              borderRadius: 8,
-            })}
           >
             <Text
-              style={{ color: contrastColor, fontSize: 12, fontWeight: "600" }}
+              style={{
+                fontSize: 18,
+                fontWeight: "700",
+                color: contrastColor,
+                fontVariant: ["tabular-nums"],
+                letterSpacing: 0.5,
+              }}
             >
-              {labels.save}
+              {displayHex.toUpperCase()}
             </Text>
-          </Pressable>
+            {tabs.includes("palettes") && (
+              <Pressable
+                onPress={onSaveColor}
+                style={({ pressed }) => ({
+                  backgroundColor: pressed
+                    ? contrastColor === "#FFFFFF"
+                      ? "rgba(255,255,255,0.6)"
+                      : "rgba(0,0,0,0.5)"
+                    : contrastColor === "#FFFFFF"
+                      ? "rgba(255,255,255,0.35)"
+                      : "rgba(0,0,0,0.35)",
+                  paddingHorizontal: 12,
+                  paddingVertical: 5,
+                  borderRadius: 8,
+                  borderColor: contrastColor,
+                  borderWidth: 1,
+                })}
+              >
+                <Text
+                  style={{ color: contrastColor, fontSize: 12, fontWeight: "600" }}
+                >
+                  {labels.save}
+                </Text>
+              </Pressable>
+            )}
+          </View>
         </View>
       </View>
 
@@ -139,11 +190,14 @@ export function PickerPanel({
           hue={hue}
           sat={sat}
           bright={bright}
+          alpha={alpha}
+          currentHex={currentHex}
           hueStripHeight={hueStripHeight}
           disabled={disabled}
           t={t}
           onHueChange={onHueChange}
           onSatBrightChange={onSatBrightChange}
+          onAlphaChange={onAlphaChange}
         />
       )}
       {activeTab === "values" && (
@@ -151,6 +205,7 @@ export function PickerPanel({
           hue={hue}
           sat={sat}
           bright={bright}
+          alpha={alpha}
           currentHex={currentHex}
           hexInput={hexInput}
           disabled={disabled}
@@ -161,14 +216,16 @@ export function PickerPanel({
           onHexInputBlur={onHexInputBlur}
         />
       )}
-      {activeTab === "recent" && (
-        <RecentTab
-          recentColors={recentColors}
+      {activeTab === "palettes" && (
+        <PalettesTab
+          palettes={palettes}
+          savedColors={savedColors}
+          showAlpha={showAlpha}
           disabled={disabled}
           t={t}
           labels={labels}
-          onSelect={onRecentSelect}
-          onClear={onClearRecent}
+          onSelect={onSelectColor}
+          onClearSaved={onClearSaved}
         />
       )}
     </View>

package/src/components/picker-tab.tsx

@@ -2,6 +2,7 @@ import {
   View
 } from "react-native";
 import type { Theme } from "../types/misc";
+import { AlphaStrip } from "./alpha-strip";
 import { HueStrip } from "./hue-strip";
 import { SatBrightPad } from "./sat-bright-pad";
 
@@ -9,22 +10,28 @@ type PickerTabProps = {
   hue: number;
   sat: number;
   bright: number;
+  alpha?: number;
+  currentHex: string;
   hueStripHeight: number;
   disabled: boolean;
   t: Theme;
   onHueChange: (h: number) => void;
   onSatBrightChange: (vals: { s: number; b: number }) => void;
+  onAlphaChange?: (a: number) => void;
 }
 
 export function PickerTab({
   hue,
   sat,
   bright,
+  alpha,
+  currentHex,
   hueStripHeight,
   disabled,
   t,
   onHueChange,
   onSatBrightChange,
+  onAlphaChange,
 }: PickerTabProps) {
   return (
     <View style={{ gap: 16, padding: 20 }}>
@@ -43,6 +50,16 @@ export function PickerTab({
         thumbBorder={t.thumbBorder}
         onChange={onHueChange}
       />
+      {alpha != null && onAlphaChange && (
+        <AlphaStrip
+          alpha={alpha}
+          color={currentHex}
+          height={hueStripHeight}
+          disabled={disabled}
+          thumbBorder={t.thumbBorder}
+          onChange={onAlphaChange}
+        />
+      )}
     </View>
   );
 }