Sp-action-button conditional disabled

Photoshop UXP Plugin API
,
1

Hi!

Having some trouble to set a conditional attribute disabled to sp-action-button.

Given boolean const allowed I wanted that component puts or remove the disabled attribute:

Is there any other property that can make some behaviour?

image
image2060Ă—460 25.5 KB

Some failed tries already:
<sp-action-button disabled={allowed}>
<sp-action-button ${if(allowed){({ disabled })}}>
<sp-action-button ${(if(allowed){ disabled })}>

Thanks in advance!

2

Could you try the following:
<sp-action-button disabled={allowed ? undefined : "disabled"}>

3

I tried and its always disabled like this.

4

<sp-action-button disabled={allowed ? null : true}> should work.

5

Also tested and it didn’t work.

6

Found a nice solution:
I created a custom component:

export function DisabledSpActionButton({ action, text, className, isDisabled }) {
  return (
    <>
      {isDisabled ? (
        <sp-action-button class={className} onClick={action} disabled>
          {text}
        </sp-action-button>
      ) : (
        <sp-action-button class={className} onClick={action}>
          {text}
        </sp-action-button>
      )}
    </>
  );
}
7

Hm, usually it should work with undefined or null, weird.
You could also conditionally add the attribute:

<sp-action-button {...(isDisabled ? {disabled: true} : {})}>

If you name your variable disabled it could also be written as

<sp-action-button {...(disabled ? {disabled} : {})}>

Not sure if that looks better though :grin: at least it’s less code and you don’t have to repeat other properties.

2 Likes
8

Tks a lot! :slight_smile: