Can the list be generated?

[danielmahal]

I would like to pick a color from the color palette of an image asset.

So, I was thinking, could the color list be generated?

For example by passing a function instead of an array to the list option? I guess it should be an async function so that you could look up the asset reference and generate a color list.

Does it make sense?

Nice plugin @KimPaow !

[KimPaow]

Sorry I totally thought I had replied to this. I've just released v2.0.0 and this feature is included (somewhat). As of 2.0.0 you can pass a synchronous function instead of a static array of colors. I'm still working on 2.0.1 which will support async, will release it as soon as I work out some kinks.

Thanks for the great idea!

[devinhalladay]

@KimPaow any update on adding async support to this? I'm hoping to pull the list of colors from an array in a Settings document, where editors can choose their own pre-defined colors with color-input :)

here's what i'm trying to do in my schema:

{
      title: 'Color List',
      description: 'Pick a color',
      name: 'colors',
      type: 'colorlist', // required
      options: {
        list: async () => {
          const response = await client.fetch(`*[_type == 'settings' && _id == '_settings'][0].colors`);

          const colors = response.reduce(
            (acc: any, color: any) => {
              acc.push({
                value: color.hex,
                title: color.hex,
              });
              return acc;
            }, []);

          console.log(colors);

          return colors
        }
      },
    },

[KimPaow]

I just hacked together a quick fix for this. @devinhalladay could you try and install 2.0.3-beta.0 and let me know how it works for you?

[devinhalladay]

Wow, awesome @KimPaow — thanks for the quick work! Sadly I'm getting an uncaught error:

Uncaught ReferenceError: regeneratorRuntime is not defined
    <anonymous> index.js:62

[devinhalladay]

I was able to get my schema and groq query (as shown in my previous comment) working via a couple simple changes I've pushed as a branch here. I simply made createColors an async function, then added a new async getColors() function within ColorList. Then I load the colors into component state within an effect. Gets the job done, but definitely not production ready for others.

---

EDIT: I downloaded the repo as of your last commit and pasted the files into my plugins/color-list and everything works fine after installing the npm dependencies. Not sure why it would work locally but not with the published package.

Aside from the error I'm getting from the hosted package, 2.0.3-beta.0 is working great when added locally in my plugins directory!! Awesome work, I love this package :)

[KimPaow]

Ah okay got it, seems like I need to set up some polyfills for babel (which is why the source files are fine and the build breaks). Nice that you got a temp fix though!

[devinhalladay]

@KimPaow any idea when you may be able to action on this? If you're short on time, and could let me know what polyfills need to be added, I'd be down to try to put up a PR! Really appreciate your work, this project is awesome.

[KimPaow]

@devinhalladay sorry for the delay. I would like to fix this asap but have too much on my plate right now. I could probably fix it in another two weeks or so.

If you would like to put together a PR that would be very much appreciated! :)

[devinhalladay]

@KimPaow I put up a PR #26. I'm not 100% sure I added the polyfills you are referring to, but this change seems to have fixed the issue for me.