feat(slider): stepSize property

Author: farfromrefug

src/slider/cssproperties.ts

@@ -4,22 +4,22 @@ export const trackBackgroundColorProperty = new CssProperty<Style, Color>({
     name: 'trackBackgroundColor',
     cssName: 'track-background-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 trackBackgroundColorProperty.register(Style);
 export const thumbColorProperty = new CssProperty<Style, Color>({
     cssName: 'thumb-color',
     name: 'thumbColor',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 thumbColorProperty.register(Style);
 
 export const trackFillColorProperty = new CssProperty<Style, Color>({
     cssName: 'track-fill-color',
     name: 'trackFillColor',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 trackFillColorProperty.register(Style);
 export const thumbHollowAtStartProperty = new CssProperty<Style, boolean>({
@@ -28,3 +28,11 @@ export const thumbHollowAtStartProperty = new CssProperty<Style, boolean>({
     valueConverter: booleanConverter
 });
 thumbHollowAtStartProperty.register(Style);
+
+export const stepSizeProperty = new CssProperty<Style, number>({
+    name: 'stepSize',
+    cssName: 'step-size',
+    defaultValue: 0,
+    valueConverter: (v) => parseFloat(v)
+});
+stepSizeProperty.register(Style);

src/slider/slider-common.ts

@@ -8,4 +8,5 @@ export abstract class SliderBase extends NSSlider {
     @cssProperty trackFillColor: Color;
     @cssProperty thumbColor: Color;
     @cssProperty elevation: number;
+    @cssProperty stepSize: number;
 }

src/slider/slider.android.ts

@@ -1,7 +1,7 @@
 import { cssProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
 import { getEnabledColorStateList, 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 { stepSizeProperty, thumbColorProperty, trackBackgroundColorProperty, trackFillColorProperty } from './cssproperties';
 
 let ASlider: typeof com.google.android.material.slider.Slider;
 export function sliderGetEnabledColorStateList(color: Color, alpha = 255) {
@@ -56,6 +56,7 @@ export class Slider extends View {
     @cssProperty trackBackgroundColor: Color;
     @cssProperty trackFillColor: Color;
     @cssProperty thumbColor: Color;
+    @cssProperty stepSize: number;
     @cssProperty elevation: number;
     _supressNativeValue: boolean;
     public value: number;
@@ -136,8 +137,17 @@ export class Slider extends View {
             this[thumbColorProperty.setNative](this.thumbColor);
         }
     }
+    [stepSizeProperty.getDefault]() {
+        return 0;
+    }
+    [stepSizeProperty.setNative](value) {
+        this.nativeViewProtected.setStepSize(value);
+    }
     [valueProperty.setNative](value) {
-        // this.nativeViewProtected.setValueTo(this.maxValue);
+        // ensure we set min/max to prevent errors in listviews while reusing cells
+        // will sliders with different min/max
+        this.nativeViewProtected.setValueFrom(this.minValue);
+        this.nativeViewProtected.setValueTo(this.maxValue);
         this.nativeViewProtected.setValue(value);
     }
     [minValueProperty.setNative](value) {

src/slider/slider.ios.ts

@@ -1,6 +1,8 @@
 import { elevationProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
 import { Color, backgroundColorProperty, colorProperty } from '@nativescript/core';
-import { thumbColorProperty, thumbHollowAtStartProperty, trackBackgroundColorProperty, trackFillColorProperty } from './cssproperties';
+import { maxValueProperty } from '@nativescript/core/ui/progress';
+import { minValueProperty } from '@nativescript/core/ui/slider/slider-common';
+import { stepSizeProperty, thumbColorProperty, thumbHollowAtStartProperty, trackBackgroundColorProperty, trackFillColorProperty } from './cssproperties';
 import { SliderBase } from './slider-common';
 
 export class Slider extends SliderBase {
@@ -60,4 +62,28 @@ export class Slider extends SliderBase {
     [elevationProperty.setNative](value: number) {
         this.nativeViewProtected.thumbElevation = value;
     }
+    [minValueProperty.setNative](value) {
+        this.nativeViewProtected.minimumValue = value;
+        if (this.stepSize !== 0) {
+            this.nativeViewProtected.numberOfDiscreteValues = (this.maxValue - this.minValue) / value;
+        }
+    }
+    [maxValueProperty.setNative](value) {
+        this.nativeViewProtected.maximumValue = value;
+        if (this.stepSize !== 0) {
+            this.nativeViewProtected.numberOfDiscreteValues = (this.maxValue - this.minValue) / value;
+        }
+    }
+    [stepSizeProperty.getDefault]() {
+        return 0;
+    }
+    [stepSizeProperty.setNative](value) {
+        if (value === 0) {
+            this.nativeViewProtected.discrete = false;
+        } else {
+            this.nativeViewProtected.discrete = true;
+            this.nativeViewProtected.numberOfDiscreteValues = (this.maxValue - this.minValue) / value;
+            this.nativeViewProtected.shouldDisplayDiscreteValueLabel = false;
+        }
+    }
 }