[claudiobosticco]

Hi, as mentioned in post #8, I want to hide the FormItemIcon when the formItem is disabled.
For now, I’ve only done some tests in the showcase.

At first, I thought about using a custom style.
Then, while reviewing the docs, I remembered that there’s also the option to use an SCStatefulImgConfig object, so I thought I’d give it a try.

But I’ve never used it before. Now that I’m reviewing the documentation, it turns out to be even more flexible than I remembered.
For example, I see there are prefixes like #state: and #modifier, which are really powerful and flexible.

However, it seems that I must explicitly declare the Over state. I just don’t understand how: I’d simply like the Over to behave normally, i.e., using iconOver.
But if I use Over:"Edit:cssClass:icon;", then it applies class="iconOver" when I hover, but it doesn’t switch back to class="icon" on mouseOut.

[Isomorphic]

Ah, great, thanks for the detail.

You're quite right - SCStatefulImgConfig was not working in FormItemIcons, and that was for two reasons - 1) FormItem wasn't extracting the proper state from the object, prior to considering its StockIcon mapping. And 2), an internal process, Canvas._updateIcon(), updates elements in-place, and it was replacing the StockIcon but not the other config in the string (that is, the bit after the first colon in "Edit:color:red;").

Yes, those prefix states in the config object are indeed useful - they were intended for file-URLs, but they ought to work here as well. We'll make sure that's true for tomorrow's builds.

In the meantime, if you want to hide icons in a disabled item, you can do that - we don't recommend it, because disappearing icons removes context for users, but if you really want to do that, this will do it:

// On the icon itself - it might seem like this should work, but we don't provide arbitrary settings like
// "disabled" on targets in the ruleScope - we will be adding a ruleContext accessor, something like
// isDisabled.<i>componentId</i>, but that won't be in the next day or two. So this will not work:
//visibleWhen: { fieldName: "form.disabled", value: false },

// however, this will work, on the icon
showIf : function (form, item) {
    if (item.disabled || (item.disabled == null && form.disabled)) return false;
    return true;
},

// but, right now, it requires the item to be refreshed on state-change
updateState : function () {
    this.Super("updateState", arguments);
    this.redraw();
},

[Isomorphic]

Out of interest, on this: "if I use Over:"Edit:cssClass:icon;", then it applies class="iconOver" when I hover, but it doesn’t switch back to class="icon" on mouseOut."...

Just set cssClass:icon on the _base image as well, and it will change back

Note that you can also set a specific state class, like iconOver, and also set statefulClass:false, and it'll just use the class you mentioned.

[claudiobosticco]

Hi, thanks for the further clarifications. Now, with cssClass also specified on _base, I see that it works.

About visibleWhen: I noticed that there was nothing related to the disabled state in the ruleContext, but if you’re going to add it, I think it will be useful in general, and it will turn out to be the simplest solution for my case.

Thanks also for the tip about using showIf with updateState. I just didn’t understand whether the comment "right now, it requires the item to be refreshed on state-change" implies that you intend to make changes so that it won’t be required to implement updateState anymore, or not.

[Isomorphic]

In reverse order, we likely won't add a builtin means of blanket-redrawing on state-change because it's not very efficient; a simple flag like redrawOnStateChange is going to redraw on mouseOver, for example.

On visibleWhen - the suggestion of an isDisabled type accessor for the ruleContext came up in response to your comments in this thread. This is the kind of approach we'll likely take, but we don't have it in the roadmap as yet. We could do it as a small Feature Sponsorship, if you need it on a schedule.

Finally, on the issues with the src-strings - as noted in your other thread about icon.showOver, a change has been made which addresses cssClass handling for StockIcon-based src-strings in all cases in FormItemIcons. If you're using the default "icon" class, you should no longer need to set it anywhere - but it will work in any of srcString.cssClass, icon.baseStyle or item.iconBaseStyle, and be stateful everywhere it should be (including from an SCStatefulImgConfig).

Note that in your most recent test-case, you no longer need to specify the Over state - if showOver is effectively true, you'll get the Over state anyway; if there's no Over entry, you'll get the Over state of the _base entry.

    // - no cssClass in _base means it's using FormItem.iconBaseStyle, which is "icon"
    // - with showOver: true, no Over entry below means you get the _base image, Edit, with iconOver
    src: {
        _base: "Edit",
        Disabled: "Edit:color:transparent;"
    },

[claudiobosticco]

Now it’s even nicer and more convenient - I can simply write:

               src: {
                    _base: "Edit",
                    Disabled: "Blank"
                }

which, for my use case, is even simpler than using visibleWhen or showIf. Thank you very much!