Read-only field

[luizhop]

Hello 👋

First of all, thanks for this great plugin!

I am trying to disable the iconPicker field for certain user roles, but not being able to do that.

Tried to use readOnly property on iconPicker field schema, like on other primitive fields, but apparently is not working. Just to be sure I've tested adding it to other primitive fields like string and it worked.

{
   name: 'icon',
   title: 'Icon',
   type: 'iconPicker',
   readOnly: ({currentUser}) => {
      return !(currentUser.roles.find(({name}) => name === 'administrator'))
   }
}

The HTML output I was expecting is something like this:

<button data-ui="MenuButton" id="menu-button-example" aria-haspopup="true" aria-expanded="false" disabled aria-disabled="true" data-disabled="true" type="button" class="sc-brSaZW gFytae">...</button>

And the expected behaviour is the button to select the icon to be grey out and not clickable:

Is there another way to achieve that, or this is something not supported currently?

Thank you!

[christopherafbjur]

Hi @luizhop I'm glad you like it. This is currently not supported but is something we should definitely add support for. Will implement this feature within the upcoming 2 weeks. Feel free to contribute with this feature :)

[luizhop]

That's great @christopherafbjur. Sure I would be happy to work on this, let me try find some time over the next weeks. Thanks!

[luizhop]

Hi @christopherafbjur finally I found some time to work on this.

I am just starting with Sanity, React, Typescript and all this stuff, also this is my first contribution to a repository, so apologies for any bad or misplaced changes, specially the ones below I could notice.

Skipped verification for committing and pushing to repo

I was having issues on SearchResults (type check on the component and props import on the tests) and couldn't figure what was the best way to sort them. As I didn't do any changes on these files, I thought it could be something with my node version (20.9.0) and probably won't give you any issues when reviewing and building.

Formatting changes on src/components/IconPicker.tsx

When trying to sort those issues, I thought running yarn format would help with that, in the end it didn't help and I missed reverting it before committing.

Please feel free to make or suggest any changes, I would happy to work on them or to take any advice.

Thanks again!

[christopherafbjur]

Thank you for your contribution @luizhop and the well described challenges you faced. I will have a look at this and come back with an answer in the upcoming days. Merry X-Mas 🎅🏻

[luizhop]

@christopherafbjur merry Xmas (a bit delayed 🐢) and happy new year 🌟 That's perfect, will be great to have your feedback, whenever suits you best. Thank you!

[christopherafbjur]

Merged this https://github.com/christopherafbjur/sanity-plugin-icon-picker/pull/63 just now. Thank you for your contribution @luizhop very nice feature 👍

Will create a patch update and publish to npm so it should be available when you read this :)

[luizhop]

Many thanks for that @christopherafbjur, my pleasure being able to help 🙂