Feature/multi styles

[zbarbuto]

This is sort of a request for feedback rather than a ready-to-merge since I'm pretty new to NativeScript plugins.

It's an attempt at implementing #142 to style the selected item and the list items separately:

If this does get released I'd suggest doing so as a breaking change release as anyone using this is probably expecting matching styles but now a <DropDownList> child of <DropDown> is required to style the actual list items.

[zbarbuto]

My concern with this is the need to add a dummy element just for the styling.

Yeah, I didn't really like this either - I'd thought about moving the items configuration onto the DropDownList so there was a clearer separation between the actual DropDown component (i.e. the Label that renders with hint and value etc) and the List component (i.e. what pops up when you tap the Label). So you'd end up with something like:

<DropDown hint="Select One">
  <DropDownList items="{{items}}"></DropDownList>
</DropDown>

But I think your solution of adding it in code is probably fine as well. I'll look at fixing this up.

[zbarbuto]

So I've updated to create the component from code but the styles don't seem to be applying from the css file (inline was fine). Again I'm pretty new to NS and plugins so any ideas what I might be missing? I thought @CSSType took care of this, unless it's to do with the way I'm creating it?

Have added styles to app.css

DropDownList {
    color: blue;
    text-align: right;
}

[PeterStaev]

That's probably because the CSS is applied at a later stage or the styles applied via CSS do not populate in the style property of the control. I suspect that if you change your original implementation (with the DropDownList added in XML) and you use CSS instead of inline style it will again not work as expected 😢

[zbarbuto]

If that’s the case how come the styles copied fine from the css from drop down to list in the original implementation (i.e before my changes)?

Hmm - I’ll have to have another dig around.

[PeterStaev]

Well actually there is special code that does it: https://github.com/PeterStaev/NativeScript-Drop-Down/blob/d345ab293a9fb24e3b62fd2f362d2c19addebcd4/drop-down.android.ts#L217-L234 There is similar one for iOS and it is called when a style property is changed.

[edusperoni]

I was wondering if we could take an approach like Nativescript's ActionItem https://docs.nativescript.org/ui/action-bar#using-custom-view-in-action-items

The user can specify a view to be used instead of the default inflation, and, as such, can define it's own css classes and styles based on the bindingContext (similar to what ListView and *ngFor do). If no view is defined, the default view is inflated and the css properties are applied.

Angular becomes a little challenge to support as we have to take template references and createEmbeddedView, but we already have an implementation of this for a Popup component we worked on.

[PeterStaev]

This is now implemented in the new version of the plugin available in the ProPlugins NPM registry.

All future work of this plugin will be available exclusively as part of ProPlugins initiative. So if you want to get the latest updates/fixes/features make sure you subscribe to the service. You get all my plugins plus many of the most used and high quality plugins for a small monthly subscription fee.