search

ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

Remove zustand from color picker #226

Closed sarayourfriend closed 3 years ago

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/itsjonq/g2/r0ugppk66
✅ Preview: https://g2-git-refactor-color-zustand-removal.itsjonq.vercel.app

ItsJonQ commented 3 years ago

@saramarcondes Ahh!! I think I cracked it! Ultimately, I think it came down to how the color was being passed down into the ColorPicker library.

There was something about the tinycolor2 transformed rgba string that was (sometimes) 1 value off from the one outputted from the RgbaStringColorPicker from react-color.

Because of that inconsistency, they keep trying to update each other, therefore, causing the loop.

Still don't know why there would be an inconsistency? Maybe something to do with color algorithms... I don't know https://github.com/omgovich/react-colorful/blob/master/src/utils/convert.ts

To fix this, I opted to use the RgbaColorPicker, which takes in {r, g, b, a}. This alternative format seemed to make it happy.

Check out my working branch:

https://github.com/ItsJonQ/g2/blob/refactor/color-zustand-removal-2/packages/components/src/ColorPicker/useColorPicker.js#L141

(Note: I also merged in https://github.com/ItsJonQ/g2/pull/232 into color-zustand-removal-2)

ItsJonQ commented 3 years ago

@saramarcondes Haiii! I created a PR for my attempts at a 2nd pass:

https://github.com/ItsJonQ/g2/pull/235