feat: rippleColorAlpha property

farfromrefug · farfromrefug · commit 84d241bdfa52 · 2023-11-16T21:03:48.000+01:00
fix: default rippleColor alpha fix
diff --git a/src/button/button-common.ts b/src/button/button-common.ts
@@ -19,7 +19,12 @@ export abstract class ButtonBase extends Button {
     /**
      * Gets or sets the ripple-color of the button.
      */
-    @cssProperty rippleColor: Color | string;
+    @cssProperty rippleColor: Color;
+
+    /**
+     * Gets or sets the ripple-color alpha of the button.
+     */
+    @cssProperty rippleColorAlpha: number;
 
     /**
      * Gets or sets the {@link VerticalTextAlignment|vertical text alignment} of the button.
diff --git a/src/button/button.android.ts b/src/button/button.android.ts
@@ -1,5 +1,5 @@
 import { VerticalTextAlignment, verticalTextAlignmentProperty } from '@nativescript-community/text';
-import { dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import { createStateListAnimator, getColorStateList, getHorizontalGravity, getLayout, getVerticalGravity, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
 import {
     Background,
@@ -87,8 +87,13 @@ export class Button extends ButtonBase {
     //     (<any>nativeView).clickListener = clickListener;
     // }
     [rippleColorProperty.setNative](value: Color) {
-        const color = !value || value instanceof Color ? value : new Color(value);
-        this.nativeViewProtected.setRippleColor(color ? getColorStateList(color.android) : null);
+        this.nativeViewProtected.setRippleColor(value ? getColorStateList(getRippleColor(value, this.rippleColorAlpha)) : null);
+    }
+    [rippleColorAlphaProperty.setNative](value: number) {
+        const rippleColor = this.rippleColor;
+        if (rippleColor) {
+            this.nativeViewProtected.setRippleColor(getColorStateList(getRippleColor(rippleColor, value)));
+        }
     }
     defaultAppearanceModel;
     [shapeProperty.setNative](shape: string) {
diff --git a/src/button/button.ios.ts b/src/button/button.ios.ts
@@ -1,4 +1,4 @@
-import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import {
     Background,
     Color,
@@ -225,7 +225,14 @@ export class Button extends ButtonBase {
         this.nativeViewProtected.uppercaseTitle = value !== 'none';
     }
     [rippleColorProperty.setNative](color: Color) {
-        this.nativeViewProtected.inkColor = getRippleColor(color);
+        this.nativeViewProtected.inkColor = getRippleColor(color, this.rippleColorAlpha);
+    }
+
+    [rippleColorAlphaProperty.setNative](value: number) {
+        const rippleColor = this.rippleColor;
+        if (rippleColor) {
+            this.nativeViewProtected.inkColor = getRippleColor(rippleColor, value);
+        }
     }
 
     [elevationProperty.setNative](value: number) {
diff --git a/src/cardview/cardview-common.ts b/src/cardview/cardview-common.ts
@@ -7,4 +7,5 @@ export abstract class CardViewBase extends ContentView {
     @cssProperty dynamicElevationOffset: number;
     @cssProperty rippleColor: Color;
     @cssProperty shape: string;
+    @cssProperty rippleColorAlpha: number;
 }
diff --git a/src/cardview/cardview.android.ts b/src/cardview/cardview.android.ts
@@ -1,4 +1,4 @@
-import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import { createStateListAnimator, getAttrColor, getColorStateList, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
 import { Color, Length, backgroundInternalProperty } from '@nativescript/core';
 import { CardViewBase } from './cardview-common';
@@ -360,13 +360,13 @@ export class CardView extends CardViewBase {
             androidx.core.view.ViewCompat.setTranslationZ(this.nativeViewProtected, newValue);
         }
     }
-    [rippleColorProperty.setNative](color: Color) {
-        const rippleColor = color ? color.android : -1;
-        // if (isPostLollipopMR1) {
-        //     (this.rippleDrawable as android.graphics.drawable.RippleDrawable).setColor(getColorStateList(rippleColor));
-        // } else {
-        //     this.rippleShape.getPaint().setColor(rippleColor);
-        // }
-        (this.nativeViewProtected as any).setRippleColor(getColorStateList(rippleColor));
+    [rippleColorProperty.setNative](value: Color) {
+        this.nativeViewProtected.setRippleColor(value ? getColorStateList(getRippleColor(value, this.rippleColorAlpha)) : null);
+    }
+    [rippleColorAlphaProperty.setNative](value: number) {
+        const rippleColor = this.rippleColor;
+        if (rippleColor) {
+            this.nativeViewProtected.setRippleColor(getColorStateList(getRippleColor(rippleColor, value)));
+        }
     }
 }
diff --git a/src/cardview/cardview.ios.ts b/src/cardview/cardview.ios.ts
@@ -1,4 +1,4 @@
-import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import {
     Background,
     Color,
@@ -188,8 +188,16 @@ export class CardView extends CardViewBase {
             // this.nativeViewProtected.cornerRadius = value.borderTopLeftRadius / scale;
         }
     }
+
     [rippleColorProperty.setNative](color: Color) {
-        this.nativeViewProtected.inkView.inkColor = getRippleColor(color);
+        this.nativeViewProtected.inkView.inkColor = getRippleColor(color, this.rippleColorAlpha);
+    }
+
+    [rippleColorAlphaProperty.setNative](value: number) {
+        const rippleColor = this.rippleColor;
+        if (rippleColor) {
+            this.nativeViewProtected.inkView.inkColor = getRippleColor(rippleColor, value);
+        }
     }
 
     [shapeProperty.setNative](shape) {
diff --git a/src/core-tabs/tab-navigation-base/index.ts b/src/core-tabs/tab-navigation-base/index.ts
@@ -270,7 +270,7 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         // overridden by inheritors
     }
 
-    public setTabBarRippleColor(value: Color) {
+    public setTabBarRippleColor(value: Color, alpha?:number) {
         // overridden by inheritors
     }
 
diff --git a/src/core-tabs/tab-navigation/index.ios.ts b/src/core-tabs/tab-navigation/index.ios.ts
@@ -7,6 +7,7 @@ import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
 import { TabStrip } from '../tab-strip';
 import { TabStripItem } from '../tab-strip-item';
 import { TabNavigationBase, swipeEnabledProperty } from './index-common';
+import { getRippleColor } from '@nativescript-community/ui-material-core';
 
 export { TabContentItem, TabStrip, TabStripItem };
 
@@ -905,9 +906,9 @@ export abstract class TabNavigation<
         });
     }
 
-    public setTabBarRippleColor(value: Color) {
+    public setTabBarRippleColor(value: Color, alpha?:number) {
         this.mRippleColor = value;
-        this.viewController.tabBar.rippleColor = value.ios;
+        this.viewController.tabBar.rippleColor = getRippleColor(value, alpha);
     }
 
     public getTabBarRippleColor(): Color {
diff --git a/src/core-tabs/tab-strip/index.ts b/src/core-tabs/tab-strip/index.ts
@@ -1,13 +1,14 @@
 /**
  * @module @nativescript-community/ui-material-core-tabs/tab-strip
  */
-import { rippleColorProperty } from '@nativescript-community/ui-material-core/cssproperties';
+import { rippleColorAlphaProperty, rippleColorProperty } from '@nativescript-community/ui-material-core/cssproperties';
 import { AddArrayFromBuilder, AddChildFromBuilder, CSSType, Color, CssProperty, Property, Style, View, ViewBase, booleanConverter } from '@nativescript/core';
 import { backgroundColorProperty, backgroundInternalProperty, colorProperty, fontInternalProperty } from '@nativescript/core/ui/styling/style-properties';
 import { textTransformProperty } from '@nativescript/core/ui/text-base';
 import { TabNavigationBase } from '../tab-navigation-base';
 import { TabStripItem } from '../tab-strip-item';
 import { TabStrip as TabStripDefinition } from '.';
+import { getRippleColor } from '@nativescript-community/ui-material-core/index.ios';
 
 // Place this on top because the webpack ts-loader doesn't work when export
 // is after reference
@@ -180,8 +181,11 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
 
     [rippleColorProperty.setNative](value: Color) {
         const parent = this.parent as TabNavigationBase;
-
-        return parent && parent.setTabBarRippleColor(value);
+        return parent && parent.setTabBarRippleColor(value, this.rippleColorAlpha);
+    }
+    [rippleColorAlphaProperty.setNative](value: number) {
+        const parent = this.parent as TabNavigationBase;
+        return parent && parent.setTabBarRippleColor(this.rippleColor, value);
     }
 }
 
diff --git a/src/core/cssproperties.ts b/src/core/cssproperties.ts
@@ -19,6 +19,12 @@ export const rippleColorProperty = new CssProperty<Style, Color>({
     valueConverter: (v) => new Color(v)
 });
 rippleColorProperty.register(Style);
+export const rippleColorAlphaProperty = new CssProperty<Style, number>({
+    name: 'rippleColorAlpha',
+    cssName: 'ripple-color-alpha',
+    valueConverter: parseFloat
+});
+rippleColorAlphaProperty.register(Style);
 export const elevationProperty = new CssProperty<Style, CoreTypes.LengthType>({
     name: 'elevation',
     cssName: 'elevation',
diff --git a/src/core/index.android.ts b/src/core/index.android.ts
@@ -2,7 +2,7 @@ import { Background, Button, Color, Length, PercentLength, Utils, View, androidD
 import { ad } from '@nativescript/core/utils';
 import { ShapeProperties } from '.';
 import { createRippleDrawable, createStateListAnimator, getAttrColor, getColorStateList, handleClearFocus, isPostLollipop, isPostMarshmallow } from './android/utils';
-import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty } from './cssproperties';
+import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorAlphaProperty, rippleColorProperty } from './cssproperties';
 import { CornerFamily, applyMixins } from './index.common';
 export * from './cssproperties';
 export { applyMixins };
@@ -197,10 +197,13 @@ export const themer = new Themer();
 
 export function install() {}
 
-export function getRippleColor(color: string | Color) {
+export function getRippleColor(color: string | Color, alpha = 61.5) {
     if (color) {
         const temp = color instanceof Color ? color : new Color(color);
-        return new Color(temp.a !== 255 ? temp.a : 61.5, temp.r, temp.g, temp.b).android; // default alpha is 0.24
+        if (temp.a !== 255) {
+            return temp.android;
+        }
+        return temp.setAlpha(alpha).android;
     }
     return null;
 }
@@ -212,6 +215,7 @@ export function overrideViewBase() {
         @cssProperty elevation = 0;
         @cssProperty dynamicElevationOffset = 0;
         @cssProperty rippleColor: Color;
+        @cssProperty rippleColorAlpha: number;
         rippleDrawable: android.graphics.drawable.Drawable;
         getRippleColor() {
             if (this.rippleColor) {
@@ -229,7 +233,7 @@ export function overrideViewBase() {
             }
         }
         [rippleColorProperty.setNative](color: Color) {
-            const rippleColor = getRippleColor(color);
+            const rippleColor = getRippleColor(color, this.rippleColorAlpha);
             const nativeViewProtected = this.nativeViewProtected;
             const RippleDrawable = android.graphics.drawable.RippleDrawable;
             if (this instanceof Button && isPostMarshmallow) {
@@ -263,6 +267,13 @@ export function overrideViewBase() {
             }
         }
 
+    [rippleColorAlphaProperty.setNative](value: number) {
+        const rippleColor = this.rippleColor;
+        if (rippleColor) {
+            this[rippleColorProperty.setNative](rippleColor);
+        }
+    }
+
         [backgroundInternalProperty.setNative](value: android.graphics.drawable.Drawable | Background) {
             if (this.nativeViewProtected) {
                 if (value instanceof android.graphics.drawable.Drawable) {
diff --git a/src/core/index.d.ts b/src/core/index.d.ts
@@ -30,7 +30,14 @@ declare module '@nativescript/core/ui/core/view' {
          *
          * Gets or sets the ripple-color of the view.
          */
-        rippleColor: Color | string;
+        rippleColor: Color;
+
+        /**
+         * @nativescript-community/ui-material-core {@link installMixins}.
+         *
+         * Gets or sets the ripple-color alpha of the view.
+         */
+        rippleColorAlpha: number;
     }
 }
 
@@ -82,7 +89,7 @@ export * from './cssproperties';
 
 export function install();
 export function installMixins();
-export function getRippleColor(color: string | Color): any;
+export function getRippleColor(color: string | Color, alpha?: number): any;
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 export function mixin<T1 extends Constructor, T2 extends Constructor>(mix1: T1, mix2: T2): (new (...args: any[]) => InstanceType<T1> & InstanceType<T2>) & T1 & T2;
diff --git a/src/core/index.ios.ts b/src/core/index.ios.ts
@@ -14,7 +14,7 @@ import {
 } from '@nativescript/core';
 import { ShapeProperties, TypographyOptions } from '.';
 import { CornerFamily, applyMixins } from './index.common';
-import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty } from './cssproperties';
+import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorAlphaProperty, rippleColorProperty } from './cssproperties';
 export * from './cssproperties';
 export { applyMixins };
 
@@ -201,11 +201,13 @@ export const themer = new Themer();
 
 export function install() {}
 
-export function getRippleColor(color: string | Color): UIColor {
+export function getRippleColor(color: string | Color, alpha = 61.5): UIColor {
     if (color) {
         const temp = color instanceof Color ? color : new Color(color);
-        // return UIColor.colorWithRedGreenBlueAlpha(temp.r / 255, temp.g / 255, temp.b, temp.a !== 255 ? temp.a / 255 : 0.14);
-        return new Color(temp.a !== 255 ? temp.a : 61.5, temp.r, temp.g, temp.b).ios; // default alpha is 0.24
+        if (temp.a !== 255) {
+            return temp.ios;
+        }
+        return temp.setAlpha(alpha).ios;
     }
     return null;
 }
@@ -216,6 +218,7 @@ export function overrideViewBase() {
         @cssProperty elevation: number;
         @cssProperty dynamicElevationOffset: number;
         @cssProperty rippleColor: Color;
+        @cssProperty rippleColorAlpha: number;
         inkTouchController: MDCRippleTouchController;
         shadowLayer: MDCShadowLayer;
         // shadowView: UIView;
@@ -319,7 +322,13 @@ export function overrideViewBase() {
         }
         [rippleColorProperty.setNative](color: Color) {
             this.getOrCreateRippleController();
-            this.inkTouchController.rippleView.rippleColor = getRippleColor(color);
+            this.inkTouchController.rippleView.rippleColor = getRippleColor(color, this.rippleColorAlpha);
+        }
+        [rippleColorAlphaProperty.setNative](value: number) {
+            const rippleColor = this.rippleColor;
+            if (rippleColor) {
+                this[rippleColorProperty.setNative](rippleColor);
+            }
         }
 
         startElevationStateChangeHandler() {
diff --git a/src/floatingactionbutton/floatingactionbutton.android.ts b/src/floatingactionbutton/floatingactionbutton.android.ts
@@ -1,8 +1,9 @@
-import { dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import { createStateListAnimator, getColorStateList, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
 import { Background, Color, ImageSource, Length, backgroundInternalProperty, colorProperty } from '@nativescript/core';
 import { textProperty } from '@nativescript/core/ui/text-base';
 import { FloatingActionButtonBase, expandedProperty, imageSourceProperty, sizeProperty, srcProperty } from './floatingactionbutton-common';
+import { getRippleColor } from '@nativescript-community/ui-material-core/index.android';
 
 let MDCFabButton: typeof com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
 
@@ -98,12 +99,12 @@ export class FloatingActionButton extends FloatingActionButtonBase {
         this.nativeViewProtected.setIconTint(getColorStateList(color.android));
     }
     [rippleColorProperty.setNative](value: Color) {
-        const color = !value || value instanceof Color ? value : new Color(value);
-        this.nativeViewProtected.setRippleColor(getColorStateList(color.android));
+        this.nativeViewProtected.setRippleColor(value? getColorStateList(getRippleColor(value, this.rippleColorAlpha)): null);
     }
-    [rippleColorProperty.setNative](value: Color) {
-        const color = !value || value instanceof Color ? value : new Color(value);
-        this.nativeViewProtected.setRippleColor(getColorStateList(color.android));
+    [rippleColorAlphaProperty.setNative](value: number) {
+        if (this.rippleColor) {
+            this[rippleColorProperty.setNative](this.rippleColor);
+        }
     }
     [expandedProperty.setNative](value: boolean) {
         if (value) {
diff --git a/src/floatingactionbutton/floatingactionbutton.ios.ts b/src/floatingactionbutton/floatingactionbutton.ios.ts
@@ -1,4 +1,4 @@
-import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorAlphaProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import { Color, ImageSource, borderBottomLeftRadiusProperty, borderBottomRightRadiusProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, colorProperty } from '@nativescript/core';
 import { textProperty } from '@nativescript/core/ui/text-base';
 import { FloatingActionButtonBase, expandedProperty, imageSourceProperty, srcProperty } from './floatingactionbutton-common';
@@ -134,7 +134,12 @@ export class FloatingActionButton extends FloatingActionButtonBase {
         this.nativeViewProtected.tintColor = value.ios;
     }
     [rippleColorProperty.setNative](color: Color) {
-        this.nativeViewProtected.inkColor = getRippleColor(color);
+        this.nativeViewProtected.inkColor = getRippleColor(color, this.rippleColorAlpha);
+    }
+    [rippleColorAlphaProperty.setNative](value: number) {
+        if (this.rippleColor) {
+            this[rippleColorProperty.setNative](this.rippleColor);
+        }
     }
     [textProperty.setNative](value: string) {
         this.nativeViewProtected.setTitleForState(value, UIControlState.Normal);
diff --git a/src/ripple/ripple.android.ts b/src/ripple/ripple.android.ts
@@ -1,4 +1,4 @@
-import { getRippleColor, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
+import { getRippleColor, rippleColorAlphaProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
 import { createRippleDrawable, getColorStateList, isPostLollipopMR1, isPostMarshmallow } from '@nativescript-community/ui-material-core/android/utils';
 import { Background, Color, Length, backgroundInternalProperty } from '@nativescript/core';
 import { RippleBase } from './ripple-common';
@@ -231,13 +231,19 @@ export class Ripple extends RippleBase {
                 Length.toDevicePixels(this.style.borderBottomLeftRadius)
             );
         } else {
+            const nColor = getRippleColor(color, this.rippleColorAlpha)
             if (isPostLollipopMR1) {
-                (this.rippleDrawable as android.graphics.drawable.RippleDrawable).setColor(getColorStateList(color.android));
+                (this.rippleDrawable as android.graphics.drawable.RippleDrawable).setColor(color?getColorStateList(nColor):null);
             } else {
-                (this.rippleDrawable as any).rippleShape.getPaint().setColor(getRippleColor(color));
+                (this.rippleDrawable as any).rippleShape.getPaint().setColor(nColor);
             }
         }
     }
+    [rippleColorAlphaProperty.setNative](value: number) {
+        if (this.rippleColor) {
+            this[rippleColorProperty.setNative](this.rippleColor);
+        }
+    }
 
     [backgroundInternalProperty.setNative](value: android.graphics.drawable.Drawable | Background) {
         super[backgroundInternalProperty.setNative](value);
diff --git a/src/ripple/ripple.ios.ts b/src/ripple/ripple.ios.ts
diff --git a/src/slider/slider.android.ts b/src/slider/slider.android.ts
diff --git a/src/slider/slider.ios.ts b/src/slider/slider.ios.ts

Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,5 @@ export abstract class CardViewBase extends ContentView {`
`7`	`7`	`@cssProperty dynamicElevationOffset: number;`
`8`	`8`	`@cssProperty rippleColor: Color;`
`9`	`9`	`@cssProperty shape: string;`
	`10`	`+ @cssProperty rippleColorAlpha: number;`
`10`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -270,7 +270,7 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti`
`270`	`270`	`// overridden by inheritors`
`271`	`271`	`}`
`272`	`272`
`273`		`- public setTabBarRippleColor(value: Color) {`
	`273`	`+ public setTabBarRippleColor(value: Color, alpha?:number) {`
`274`	`274`	`// overridden by inheritors`
`275`	`275`	`}`
`276`	`276`