From fab53e729c0e15f7e8536fbf2cb15717619cab9f Mon Sep 17 00:00:00 2001
From: Maytee Chinavanichkit <maytee90jp@gmail.com>
Date: Fri, 11 Mar 2022 17:00:59 +0900
Subject: [PATCH] Allow color swatch to render correct on duplicate colors

When a user-provided colors list with duplicated colors is passed in
and is updated, the react renderer gets confused because the hex value
keys collide. Switching to indices to avoid this problem.

From the code, the Twitter picker already has this patched.
---
 src/components/block/BlockSwatches.js | 4 ++--
 src/components/circle/Circle.js       | 4 ++--
 src/components/compact/Compact.js     | 4 ++--
 src/components/github/Github.js       | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/block/BlockSwatches.js b/src/components/block/BlockSwatches.js
index 2ed6ee12..f85388d1 100644
--- a/src/components/block/BlockSwatches.js
+++ b/src/components/block/BlockSwatches.js
@@ -26,9 +26,9 @@ export const BlockSwatches = ({ colors, onClick, onSwatchHover }) => {
 
   return (
     <div style={ styles.swatches }>
-      { map(colors, c => (
+      { map(colors, (c, i) => (
         <Swatch
-          key={ c }
+          key={ i }
           color={ c }
           style={ styles.swatch }
           onClick={ onClick }
diff --git a/src/components/circle/Circle.js b/src/components/circle/Circle.js
index 58e0b6ba..48f9d9f8 100644
--- a/src/components/circle/Circle.js
+++ b/src/components/circle/Circle.js
@@ -26,9 +26,9 @@ export const Circle = ({ width, onChange, onSwatchHover, colors, hex, circleSize
 
   return (
     <div style={ styles.card } className={ `circle-picker ${ className }` }>
-      { map(colors, c => (
+      { map(colors, (c, i) => (
         <CircleSwatch
-          key={ c }
+          key={ i }
           color={ c }
           onClick={ handleChange }
           onSwatchHover={ onSwatchHover }
diff --git a/src/components/compact/Compact.js b/src/components/compact/Compact.js
index bbdaceed..fbc68414 100644
--- a/src/components/compact/Compact.js
+++ b/src/components/compact/Compact.js
@@ -44,9 +44,9 @@ export const Compact = ({ onChange, onSwatchHover, colors, hex, rgb,
     <Raised style={ styles.Compact } styles={ passedStyles }>
       <div style={ styles.compact } className={ `compact-picker ${ className }` }>
         <div>
-          { map(colors, (c) => (
+          { map(colors, (c, i) => (
             <CompactColor
-              key={ c }
+              key={ i }
               color={ c }
               active={ c.toLowerCase() === hex }
               onClick={ handleChange }
diff --git a/src/components/github/Github.js b/src/components/github/Github.js
index 07ec0ce6..a137db28 100644
--- a/src/components/github/Github.js
+++ b/src/components/github/Github.js
@@ -99,10 +99,10 @@ export const Github = ({ width, colors, onChange, onSwatchHover, triangle,
     <div style={ styles.card } className={ `github-picker ${ className }` }>
       <div style={ styles.triangleShadow } />
       <div style={ styles.triangle } />
-      { map(colors, c => (
+      { map(colors, (c, i) => (
         <GithubSwatch
           color={ c }
-          key={ c }
+          key={ i }
           onClick={ handleChange }
           onSwatchHover={ onSwatchHover }
         />