@nativescript-community/ui-material-slider - npm Package Compare versions

Comparing version 4.0.11 to 5.0.0

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# [5.0.0](https://github.com/nativescript-community/ui-material-components/compare/v4.0.12...v5.0.0) (2020-09-21)
+
+**Note:** Version bump only for package @nativescript-community/ui-material-slider
+
+
+
+
+
 ## [4.0.11](https://github.com/nativescript-community/ui-material-components/compare/v4.0.10...v4.0.11) (2020-09-10)
@@ -8,0 +16,0 @@

package.json

 {
     "name": "@nativescript-community/ui-material-slider",
-    "version": "4.0.11",
+    "version": "5.0.0",
     "description": "Material slider component",
@@ -39,5 +39,5 @@ "main": "./slider",
     "dependencies": {
-        "@nativescript-community/ui-material-core": "^4.0.11"
+        "@nativescript-community/ui-material-core": "^5.0.0"
     },
-    "gitHead": "92a98ce5428b581dfccb2255c468867796d66ced"
+    "gitHead": "3f9f3f48b9233c234f1f19b0cca852ad9ff784de"
 }

README.md

@@ -8,3 +8,9 @@ [![npm](https://img.shields.io/npm/v/nativescript-material-slider.svg)](https://www.npmjs.com/package/nativescript-material-slider)
 
-If using ```@nativescript``` :
+### Warning :warning: :warning: 
+From 5.x using material component will break N tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either [bottomnavigationbar](https://www.npmjs.com/package/nativescript-material-bottomnavigationbar) (this one is the best choice, closest to material design) or [tabs](https://www.npmjs.com/package/nativescript-material-tabs) (clone of N one, but with a little less features)
+
+For N 7.0
+* `tns plugin add @nativescript-community/ui-material-slider`
+
+For N 6.x
 * `tns plugin add nativescript-material-slider`
@@ -11,0 +17,0 @@

slider.android.d.ts

@@ -1,4 +0,22 @@
-import { SliderBase } from './slider-common';
-export declare class Slider extends SliderBase {
-    nativeViewProtected: android.widget.SeekBar;
+import { CoercibleProperty, Color, Property, View } from '@nativescript/core';
+export declare function getEnabledColorStateList(color: Color, alpha?: number): globalAndroid.content.res.ColorStateList;
+export declare const valueProperty: any;
+export declare const minValueProperty: Property<Slider, number>;
+export declare const maxValueProperty: CoercibleProperty<Slider, number>;
+export declare class Slider extends View {
+    nativeViewProtected: com.google.android.material.slider.Slider;
+    rippleColor: Color;
+    trackBackgroundColor: Color;
+    trackFillColor: Color;
+    thumbColor: Color;
+    elevation: number;
+    _supressNativeValue: boolean;
+    value: number;
+    minValue: number;
+    maxValue: number;
+    listener: com.google.android.material.slider.Slider.OnChangeListener;
+    constructor();
+    createNativeView(): com.google.android.material.slider.Slider;
+    initNativeView(): void;
+    disposeNativeView(): void;
 }

slider.android.js

@@ -1,13 +0,95 @@
-import { rippleColorProperty } from '@nativescript-community/ui-material-core';
-import { colorProperty } from '@nativescript/core';
+import { cssProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
+import { state } from '@nativescript-community/ui-material-core/android/utils';
+import { CoercibleProperty, Color, Property, View, backgroundColorProperty, backgroundInternalProperty, colorProperty } from '@nativescript/core';
 import { thumbColorProperty, trackBackgroundColorProperty, trackFillColorProperty } from './cssproperties';
-import { SliderBase } from './slider-common';
-export class Slider extends SliderBase {
+let ASlider;
+export function getEnabledColorStateList(color, alpha = 255) {
+    if (!color) {
+        return null;
+    }
+    const states = Array.create('[I', 2);
+    states[0] = Array.create('int', 1);
+    states[0][0] = -state.enabled;
+    states[1] = android.util.StateSet.NOTHING;
+    const colors = Array.create('int', 2);
+    colors[0] = new Color(alpha, 158, 158, 158).android;
+    colors[1] = color.android;
+    return new android.content.res.ColorStateList(states, colors);
+}
+export const valueProperty = new CoercibleProperty({
+    name: 'value',
+    defaultValue: 0,
+    coerceValue: (target, value) => {
+        value = Math.max(value, target.minValue);
+        value = Math.min(value, target.maxValue);
+        return value;
+    },
+    valueConverter: (v) => parseFloat(v),
+});
+export const minValueProperty = new Property({
+    name: 'minValue',
+    defaultValue: 0,
+    valueChanged: (target, oldValue, newValue) => {
+        maxValueProperty.coerce(target);
+        valueProperty.coerce(target);
+    },
+    valueConverter: (v) => parseFloat(v),
+});
+export const maxValueProperty = new CoercibleProperty({
+    name: 'maxValue',
+    defaultValue: 100,
+    coerceValue: (target, value) => {
+        const minValue = target.minValue;
+        if (value < minValue) {
+            value = minValue;
+        }
+        return value;
+    },
+    valueChanged: (target, oldValue, newValue) => valueProperty.coerce(target),
+    valueConverter: (v) => parseFloat(v),
+});
+export class Slider extends View {
+    constructor() {
+        super();
+        this.color = themer.getPrimaryColor();
+    }
+    createNativeView() {
+        if (!ASlider) {
+            ASlider = com.google.android.material.slider.Slider;
+        }
+        const result = new ASlider(this._context);
+        result.setLabelBehavior(com.google.android.material.slider.LabelFormatter.LABEL_GONE);
+        return result;
+    }
+    initNativeView() {
+        super.initNativeView();
+        const nativeView = this.nativeViewProtected;
+        this.listener = new com.google.android.material.slider.Slider.OnChangeListener({
+            onValueChange: (param0, value, fromUser) => {
+                if (fromUser) {
+                    valueProperty.nativeValueChange(this, value);
+                }
+            },
+        });
+        nativeView.addOnChangeListener(this.listener);
+    }
+    disposeNativeView() {
+        if (this.listener) {
+            this.nativeViewProtected.removeOnChangeListener(this.listener);
+            this.listener = null;
+        }
+        super.disposeNativeView();
+    }
     [colorProperty.setNative](color) {
-        super[colorProperty.setNative](color);
-        if (!this.trackBackgroundColor) {
-            this.trackBackgroundColor = color;
+        if (color) {
+            this.nativeViewProtected.setTrackTintList(getEnabledColorStateList(color));
+            if (!this.trackBackgroundColor) {
+                this.trackBackgroundColor = new Color(61.2, color.r, color.g, color.b);
+            }
         }
-        if (!this.trackFillColor) {
-            this.trackFillColor = color;
+        else {
+            this.nativeViewProtected.setTrackTintList(null);
+            if (!this.trackBackgroundColor) {
+                this.trackBackgroundColor = null;
+            }
         }
@@ -21,17 +103,62 @@ if (!this.thumbColor) {
     }
+    [valueProperty.setNative](value) {
+        this.nativeViewProtected.setValueTo(this.maxValue);
+        this.nativeViewProtected.setValue(value);
+    }
+    [minValueProperty.setNative](value) {
+        this.nativeViewProtected.setValueFrom(value);
+    }
+    [maxValueProperty.getDefault]() {
+        return 100;
+    }
+    [maxValueProperty.setNative](value) {
+        this.nativeViewProtected.setValueTo(value);
+    }
+    [backgroundColorProperty.setNative](value) {
+        this[trackBackgroundColorProperty.setNative](value);
+    }
+    [backgroundInternalProperty.setNative](value) {
+    }
     [rippleColorProperty.setNative](color) {
+        this.nativeViewProtected.setHaloTintList(color ? android.content.res.ColorStateList.valueOf(color.android) : null);
     }
     [thumbColorProperty.setNative](color) {
-        this.nativeViewProtected.setThumbTintList(color ? android.content.res.ColorStateList.valueOf(color.android) : null);
-        if (android.os.Build.VERSION.SDK_INT >= 24) {
-            this.nativeViewProtected.setTickMarkTintList(color ? android.content.res.ColorStateList.valueOf(color.android) : null);
+        this.nativeViewProtected.setThumbTintList(getEnabledColorStateList(color));
+        if (!this.rippleColor) {
+            this.rippleColor = color;
         }
+        else {
+            this[rippleColorProperty.setNative](this.rippleColor);
+        }
     }
     [trackBackgroundColorProperty.setNative](color) {
-        this.nativeViewProtected.setProgressBackgroundTintList(color ? android.content.res.ColorStateList.valueOf(color.android) : null);
+        this.nativeViewProtected.setTrackInactiveTintList(getEnabledColorStateList(color, 61.2));
     }
     [trackFillColorProperty.setNative](color) {
-        this.nativeViewProtected.setProgressTintList(color ? android.content.res.ColorStateList.valueOf(color.android) : null);
+        this.nativeViewProtected.setTrackActiveTintList(getEnabledColorStateList(color));
     }
 }
+__decorate([
+    cssProperty,
+    __metadata("design:type", Color)
+], Slider.prototype, "rippleColor", void 0);
+__decorate([
+    cssProperty,
+    __metadata("design:type", Color)
+], Slider.prototype, "trackBackgroundColor", void 0);
+__decorate([
+    cssProperty,
+    __metadata("design:type", Color)
+], Slider.prototype, "trackFillColor", void 0);
+__decorate([
+    cssProperty,
+    __metadata("design:type", Color)
+], Slider.prototype, "thumbColor", void 0);
+__decorate([
+    cssProperty,
+    __metadata("design:type", Number)
+], Slider.prototype, "elevation", void 0);
+valueProperty.register(Slider);
+minValueProperty.register(Slider);
+maxValueProperty.register(Slider);
 //# sourceMappingURL=slider.android.js.map

slider.ios.js

@@ -31,6 +31,9 @@ import { elevationProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
     [rippleColorProperty.setNative](color) {
-        this.nativeViewProtected.rippleColor = color ? color.ios : null;
+        this.nativeViewProtected.rippleColor = color ? color.ios.colorWithAlphaComponent(0.26) : null;
     }
     [thumbColorProperty.setNative](color) {
         this.nativeViewProtected.setThumbColorForState(color ? color.ios : null, 0);
+        if (!this.rippleColor) {
+            this.rippleColor = color;
+        }
     }
@@ -37,0 +40,0 @@ [trackBackgroundColorProperty.setNative](color) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70117

increased by16.2%

Lines of code

442

increased by50.34%

Number of lines in readme file

101

increased by6.32%

Dependency changes

• + Added@nativescript-community/ui-material-core@5.3.21(transitive)

• + Added@nativescript/hook@2.0.0(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedfs.realpath@1.0.0(transitive)

• + Addedglob@7.2.3(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedmkdirp@1.0.4(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedwrappy@1.0.2(transitive)

• - Removed@nativescript-community/ui-material-core@4.0.11(transitive)

• Updated@nativescript-community/ui-material-core@^5.0.0