Nativescript: [3.0] Export getColor function in utils.ios

[PeterStaev]

Seems with the 3.0 release the helper function to get a Color from UIColor was removed and is now present in the tests here. I think this is a useful function that could be used by users (especially plugin authors) to easily create a Color from the native iOS object.

[vakrilov]

I think @hshristov moved it because of a circular reference issue (utils -> color -> utils).
@hshristov do you think it's a good idea to move this method in the color module and maybe rename it to getColorFromUIColor so that it can be still be used by plugin authors?

[vakrilov]

In either case we should remove the method form the utils.d.ts.

[PeterStaev]

I see. Yes a static function in Color sounds good. Or may be an iOS specific constructor that accepts UIColor as an argument.

[hshristov]

@PeterStaev why do need such function?

[PeterStaev]

@hshristov well I'm trying to update the DropDown widget to the new property system. And for example for the bckgroundColor property I have something like this:

    [backgroundColorProperty.setNative](value: Color | UIColor) {
        const color = value instanceof Color ? value : getColor(value);
        const pickerView: UIPickerView = this._listPicker.ios;

        this.style.backgroundColor = color;
        this._label.backgroundColor = color;
        this._listPicker.backgroundColor = color;
        pickerView.reloadAllComponents();
    }

[hshristov]

@PeterStaev setNative method should be used to transfer a value to the nativeView. It was not intended to update JavaScript objects.
In your case you have two options - either bind this._label.style backgroundColor to this.style.backgroundColor like this:

this._label.bind({ sourceProperty: backgroundColor, targetProperty: backgroundColor, source: this.style)

or you could manually attach handler to this.style and listen to backgroundColorChange event and then transfer the new value to this._label and this._listPicker.

this.style.on(`backgroundColorChange`, this.onBagroundColorChange, this);

In the second case the value from event arguments will always be JS color so you won't need to convert from UIColor to JS Color.

One additional note:
backgroundColor is implemented for in view.ios.ts so we will set it to the nativeView that you return from createNativeView. Most of the time you don't need to implement it manually for your control. But in case default implementation is no what you want - you can override it by defining you setNative function (like you did).
Default implementation use backgroundInternalProperty so you will need to define setter for backgroundInternalProperty to disable our setter.

[backgroundInternalProperty.setNative](value: Background) {
    /// skip default background setter
}

[PeterStaev]

@hshristov , so the new style property system should be used only to update native objects? And in case the plugin wraps other {N} ui widgets it should be using one of the methods you describe above?

And one additional question - about the createNativeView - is this used for iOS? From what I see none of the built in {N} widgets implements this method and it is used only for android?

[hshristov]

@PeterStaev Yep, setNative should be used to update the nativeView.
createNativeView is not implemented for iOS in modules but we will do it for the final release :)

The idea is that for the final release we will introduce option to reuse the nativeView.
In general if there is nativeView for of the same type - we won't call createNativeView but only initNativeView. If not both will be called.

[PeterStaev]

@hshristov , I've followed your sample above and now I am listening to the change event of various style properties (https://github.com/PeterStaev/NativeScript-Drop-Down/blob/core3/drop-down.ios.ts#L136). For most this works well, except for two:

1. Text Decoration - this does not work initially. So in the demo app I have a style with text-decoration: underline, This is not getting applied for some reason. When I apply the changed css class through the binding, the decoration is applied correctly.
2. Text Alignment - when I change css class through binding at some point this gets a value of undefined which then fails to be set to the label style as it complains it is an invalid value. I was expecting the event to be called only with valid values.

[hshristov]

@PeterStaev Thanks for reporting these. Due to the rewrite we may have introduced some bugs. We will address them for the final release or some of the next RCs.

[vakrilov]

The original issue is not resolved. @PeterStaev do you still need a getColorFromUIColor() method for you plugin.

[PeterStaev]

@vakrilov , for now I do not need that function. I've completely rewritten the code and I am not using the {N} widgets but instead I am creating native iOS ones.

[vakrilov]

OK. I will close this issue then.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.