feat: android shape suport

farfromrefug · farfromrefug · commit 065eadbba047 · 2020-12-03T21:15:24.000+01:00
diff --git a/src/button/button-common.ts b/src/button/button-common.ts
@@ -9,6 +9,7 @@ export abstract class ButtonBase extends Button {
     @cssProperty dynamicElevationOffset: number;
     @cssProperty rippleColor: Color;
     @cssProperty verticalTextAlignment: VerticalTextAlignment;
+    @cssProperty shape: string;
 
     public imageSource: ImageSource;
     public src: string | ImageSource;
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 } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import { createStateListAnimator, getColorStateList, getLayout, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
 import {
     Background,
@@ -90,6 +90,10 @@ export class Button extends ButtonBase {
     [rippleColorProperty.setNative](color: Color) {
         this.nativeViewProtected.setRippleColor(getColorStateList(color.android));
     }
+    [shapeProperty.setNative](shape: string) {
+        const appearanceModel = themer.getShape(shape);
+        this.nativeViewProtected.setShapeAppearanceModel(appearanceModel);
+    }
 
     getDefaultElevation(): number {
         return 2; // 2dp @dimen/mtrl_btn_elevation
@@ -152,8 +156,12 @@ export class Button extends ButtonBase {
                 if (value.color) {
                     view.setBackgroundColor(value.color.android);
                 }
-                this.setCornerRadius(value.borderTopLeftRadius);
-                view.setStrokeWidth(value.borderTopWidth);
+                if (value.borderTopLeftRadius !== 0) {
+                    this.setCornerRadius(value.borderTopLeftRadius);
+                }
+                if (value.borderTopWidth !== 0) {
+                    view.setStrokeWidth(value.borderTopWidth);
+                }
                 if (value.borderTopColor) {
                     view.setStrokeColor(getColorStateList(value.borderTopColor.android));
                 }
diff --git a/src/cardview/cardview-common.ts b/src/cardview/cardview-common.ts
@@ -6,4 +6,5 @@ export abstract class CardViewBase extends ContentView {
     @cssProperty elevation: number;
     @cssProperty dynamicElevationOffset: number;
     @cssProperty rippleColor: Color;
+    @cssProperty shape: string;
 }
diff --git a/src/cardview/cardview.android.ts b/src/cardview/cardview.android.ts
@@ -1,4 +1,4 @@
-import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
+import { dynamicElevationOffsetProperty, elevationProperty, getRippleColor, rippleColorProperty, shapeProperty, themer } from '@nativescript-community/ui-material-core';
 import { createStateListAnimator, getAttrColor, isPostLollipop } from '@nativescript-community/ui-material-core/android/utils';
 import { Color, Length, backgroundInternalProperty } from '@nativescript/core';
 import { CardViewBase } from './cardview-common';
@@ -253,7 +253,7 @@ export class CardView extends CardViewBase {
         view.setClickable(this.isUserInteractionEnabled);
         // view.setUseCompatPadding(true)
         // store the default radius
-        this._borderRadius = view.getRadius();
+        // this._borderRadius = view.getRadius();
 
         // set the view outline
         // view.setClipToOutline(false);
@@ -303,7 +303,10 @@ export class CardView extends CardViewBase {
             if (value instanceof android.graphics.drawable.Drawable) {
                 this.nativeViewProtected.setBackgroundDrawable(value);
             } else {
-                this._strokeWidth = value.borderTopWidth;
+                if (this._strokeWidth !== value.borderTopWidth) {
+                    this._strokeWidth = value.borderTopWidth;
+                    this._strokeWidth = value.borderTopWidth;
+                }
                 this.nativeViewProtected.setStrokeWidth(this._strokeWidth);
                 if (value.color) {
                     this.nativeViewProtected.setCardBackgroundColor(value.color.android);
@@ -312,7 +315,6 @@ export class CardView extends CardViewBase {
                     this.nativeViewProtected.setStrokeColor(value.borderTopColor.android);
                     // this.fgDrawable.setStroke(this._strokeWidth, value.borderTopColor.android);
                 }
-
                 if (this._borderRadius !== value.borderTopLeftRadius) {
                     this._borderRadius = value.borderTopLeftRadius;
                     this.nativeViewProtected.setRadius(this._borderRadius);
@@ -322,6 +324,11 @@ export class CardView extends CardViewBase {
         }
     }
 
+    [shapeProperty.setNative](shape: string) {
+        const appearanceModel = themer.getShape(shape);
+        this.nativeViewProtected.setShapeAppearanceModel(appearanceModel);
+    }
+
     [elevationProperty.setNative](value: number) {
         if (!this.nativeViewProtected) {
             return;
diff --git a/src/core/cssproperties.ts b/src/core/cssproperties.ts
@@ -1,12 +1,12 @@
 import { Color, CssProperty, InheritedCssProperty, Length, Style, makeParser, makeValidator } from '@nativescript/core';
 
 function createGetter(key) {
-    return function() {
+    return function () {
         return this.style[key];
     };
 }
 function createSetter(key) {
-    return function(newVal) {
+    return function (newVal) {
         this.style[key] = newVal;
     };
 }
@@ -24,7 +24,7 @@ export const rippleColorProperty = new CssProperty<Style, Color>({
     name: 'rippleColor',
     cssName: 'ripple-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 rippleColorProperty.register(Style);
 export const elevationProperty = new CssProperty<Style, Length>({
@@ -47,3 +47,9 @@ export const variantProperty = new CssProperty<Style, string>({
     cssName: 'variant'
 });
 variantProperty.register(Style);
+
+export const shapeProperty = new CssProperty<Style, string>({
+    name: 'shape',
+    cssName: 'shape'
+});
+shapeProperty.register(Style);
diff --git a/src/core/index.android.ts b/src/core/index.android.ts
@@ -1,11 +1,22 @@
 import { Application, Background, Button, Color, Length, View, androidDynamicElevationOffsetProperty, androidElevationProperty, backgroundInternalProperty, profile } from '@nativescript/core';
 import { createRippleDrawable, createStateListAnimator, getAttrColor, getColorStateList, handleClearFocus, isPostLollipop, isPostLollipopMR1, isPostMarshmallow } from './android/utils';
-import { applyMixins } from './index.common';
+import { CornerFamily, applyMixins } from './index.common';
 import { cssProperty, dynamicElevationOffsetProperty, elevationProperty, rippleColorProperty } from './cssproperties';
 import { ad } from '@nativescript/core/utils';
+import { ShapeProperties } from '.';
 export * from './cssproperties';
 export { applyMixins };
 
+function createCornerTreatment(cornerFamily: CornerFamily): com.google.android.material.shape.CornerTreatment {
+    switch (cornerFamily) {
+        case CornerFamily.CUT:
+            return new com.google.android.material.shape.CutCornerTreatment();
+        default:
+        case CornerFamily.ROUNDED:
+            return new com.google.android.material.shape.RoundedCornerTreatment();
+    }
+}
+
 // stub class as we don't use this on android
 export class Themer {
     primaryColor: string | Color;
@@ -79,6 +90,67 @@ export class Themer {
         }
         return this.controlHighlightColor;
     }
+
+    _shapes: {
+        [k: string]: com.google.android.material.shape.ShapeAppearanceModel;
+    } = {};
+    getShape(key: string) {
+        return this._shapes[key] || null;
+    }
+    createShape(key: string, options: ShapeProperties) {
+        const builder = com.google.android.material.shape.ShapeAppearanceModel.builder();
+        if (options.cornerFamily) {
+            builder.setAllCorners(createCornerTreatment(options.cornerFamily));
+        }
+        if (options.cornerFamilyBottomRight) {
+            builder.setBottomRightCorner(createCornerTreatment(options.cornerFamilyBottomRight));
+        }
+        if (options.cornerFamilyBottomLeft) {
+            builder.setBottomLeftCorner(createCornerTreatment(options.cornerFamilyBottomLeft));
+        }
+        if (options.cornerFamilyTopLeft) {
+            builder.setTopLeftCorner(createCornerTreatment(options.cornerFamilyTopLeft));
+        }
+        if (options.cornerFamilyTopRight) {
+            builder.setTopRightCorner(createCornerTreatment(options.cornerFamilyTopRight));
+        }
+        if (options.cornerSize !== undefined) {
+            if (typeof options.cornerSize === 'object') {
+                builder.setAllCornerSizes(new com.google.android.material.shape.RelativeCornerSize(options.cornerSize.value));
+            } else {
+                builder.setAllCornerSizes(options.cornerSize);
+            }
+        }
+        if (options.cornerSizeBottomLeft !== undefined) {
+            if (typeof options.cornerSizeBottomLeft === 'object') {
+                builder.setBottomLeftCornerSize(new com.google.android.material.shape.RelativeCornerSize(options.cornerSizeBottomLeft.value));
+            } else {
+                builder.setBottomLeftCornerSize(options.cornerSizeBottomLeft);
+            }
+        }
+        if (options.cornerSizeBottomRight !== undefined) {
+            if (typeof options.cornerSizeBottomRight === 'object') {
+                builder.setBottomRightCornerSize(new com.google.android.material.shape.RelativeCornerSize(options.cornerSizeBottomRight.value));
+            } else {
+                builder.setBottomRightCornerSize(options.cornerSizeBottomRight);
+            }
+        }
+        if (options.cornerSizeTopRight !== undefined) {
+            if (typeof options.cornerSizeTopRight === 'object') {
+                builder.setTopRightCornerSize(new com.google.android.material.shape.RelativeCornerSize(options.cornerSizeTopRight.value));
+            } else {
+                builder.setTopRightCornerSize(options.cornerSizeTopRight);
+            }
+        }
+        if (options.cornerSizeTopLeft !== undefined) {
+            if (typeof options.cornerSizeTopLeft === 'object') {
+                builder.setTopLeftCornerSize(new com.google.android.material.shape.RelativeCornerSize(options.cornerSizeTopLeft.value));
+            } else {
+                builder.setTopLeftCornerSize(options.cornerSizeTopLeft);
+            }
+        }
+        this._shapes[key] = builder.build();
+    }
 }
 
 export const themer = new Themer();
diff --git a/src/core/index.common.ts b/src/core/index.common.ts
@@ -1,3 +1,8 @@
+export enum CornerFamily {
+    CUT = 'cut',
+    ROUNDED = 'rounded'
+}
+
 export function applyMixins(
     derivedCtor: any,
     baseCtors: any[],
@@ -8,8 +13,8 @@ export function applyMixins(
     }
 ) {
     const omits = options && options.omit ? options.omit : [];
-    baseCtors.forEach(baseCtor => {
-        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+    baseCtors.forEach((baseCtor) => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
             if (omits.indexOf(name) !== -1) {
                 return;
             }
@@ -23,7 +28,7 @@ export function applyMixins(
                 if (!oldImpl) {
                     derivedCtor.prototype[name] = baseCtor.prototype[name];
                 } else {
-                    derivedCtor.prototype[name] = function(...args) {
+                    derivedCtor.prototype[name] = function (...args) {
                         if (options) {
                             if (!!options.override) {
                                 return baseCtor.prototype[name].apply(this, args);
@@ -42,15 +47,15 @@ export function applyMixins(
                 }
             }
         });
-        Object.getOwnPropertySymbols(baseCtor.prototype).forEach(symbol => {
+        Object.getOwnPropertySymbols(baseCtor.prototype).forEach((symbol) => {
             if (omits.indexOf(symbol) !== -1) {
                 return;
             }
             const oldImpl: Function = derivedCtor.prototype[symbol];
             if (!oldImpl) {
                 derivedCtor.prototype[symbol] = baseCtor.prototype[symbol];
             } else {
-                derivedCtor.prototype[symbol] = function(...args) {
+                derivedCtor.prototype[symbol] = function (...args) {
                     if (options) {
                         if (!!options.override) {
                             return baseCtor.prototype[symbol].apply(this, args);
diff --git a/src/core/index.d.ts b/src/core/index.d.ts
@@ -1,4 +1,4 @@
-import { Color } from '@nativescript/core';
+import { Color, LengthPercentUnit, PercentLength } from '@nativescript/core';
 
 declare module '@nativescript/core/ui/core/view' {
     interface View {
@@ -12,8 +12,22 @@ export interface TypographyOptions {
     fontSize?: number;
 }
 
+import { CornerFamily } from './index.common';
+export { CornerFamily };
+export interface ShapeProperties {
+    cornerSize?: number | LengthPercentUnit;
+    cornerSizeTopRight?: number | LengthPercentUnit;
+    cornerSizeBottomLeft?: number | LengthPercentUnit;
+    cornerSizeTopLeft?: number | LengthPercentUnit;
+    cornerSizeBottomRight?: number | LengthPercentUnit;
+    cornerFamily?: CornerFamily;
+    cornerFamilyTopLeft?: CornerFamily;
+    cornerFamilyTopRight?: CornerFamily;
+    cornerFamilyBottomRight?: CornerFamily;
+    cornerFamilyBottomLeft?: CornerFamily;
+}
+
 export class Themer {
-    // appColorScheme: MDCSemanticColorScheme;
     getOrcreateAppColorScheme();
     getAppColorScheme();
     setPrimaryColor(value: string | Color);
@@ -28,6 +42,8 @@ export class Themer {
     getSurfaceColor(): string | Color;
     setOnSurfaceColor(value: string | Color);
     getOnSurfaceColor(): string | Color;
+    createShape(key: string, options: ShapeProperties);
+    getShape(key: string): any;
 }
 
 export let themer: Themer;
@@ -39,6 +55,5 @@ export function install();
 export function installMixins();
 export function getRippleColor(color: string | Color): 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;

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,5 @@ export abstract class CardViewBase extends ContentView {`
`6`	`6`	`@cssProperty elevation: number;`
`7`	`7`	`@cssProperty dynamicElevationOffset: number;`
`8`	`8`	`@cssProperty rippleColor: Color;`
	`9`	`+ @cssProperty shape: string;`
`9`	`10`	`}`