From 784e9c93cd0764e62200d60e818d0585a176cca0 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Thu, 25 Feb 2021 20:03:49 -0800 Subject: [PATCH] chore: cleanup --- .../core/__tests__/ui/styling/css-shadow.ts | 256 +++++++++--------- packages/core/ui/styling/background.ios.ts | 7 +- packages/core/ui/styling/style-properties.ts | 60 ++-- packages/core/ui/text-base/index.ios.ts | 38 +-- packages/core/utils/native-helper.d.ts | 6 + packages/core/utils/native-helper.ios.ts | 40 +++ 6 files changed, 198 insertions(+), 209 deletions(-) diff --git a/packages/core/__tests__/ui/styling/css-shadow.ts b/packages/core/__tests__/ui/styling/css-shadow.ts index 67633387e..66ce74d7f 100644 --- a/packages/core/__tests__/ui/styling/css-shadow.ts +++ b/packages/core/__tests__/ui/styling/css-shadow.ts @@ -2,144 +2,144 @@ // the imports don't work. We need to fully switch to jest & set up ts support // todo: fix tests. -import { parseCSSShadow } from '@nativescript/core/ui/styling/css-shadow'; -import { zeroLength } from '@nativescript/core'; -import { assert } from 'chai'; +// import { parseCSSShadow } from '@nativescript/core/ui/styling/css-shadow'; +// import { zeroLength } from '@nativescript/core'; +// import { assert } from 'chai'; -describe('ui', () => { - describe('styling', () => { - describe('css-shadow', () => { - it('empty', () => { - const shadow = parseCSSShadow(''); - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(zeroLength) - // expect(shadow.offsetY).toBe(zeroLength) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('black') - assert.equal(shadow.inset, false); - }); +// describe('ui', () => { +// describe('styling', () => { +// describe('css-shadow', () => { +// it('empty', () => { +// const shadow = parseCSSShadow(''); +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(zeroLength) +// // expect(shadow.offsetY).toBe(zeroLength) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('black') +// assert.equal(shadow.inset, false); +// }); - // it("1px 1px 2px black", () => { - // const shadow = parseCSSShadow("1px 1px 2px black") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(1) - // expect(shadow.offsetY).toBe(1) - // expect(shadow.blurRadius).toBe(2) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('black') - // }); +// // it("1px 1px 2px black", () => { +// // const shadow = parseCSSShadow("1px 1px 2px black") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(1) +// // expect(shadow.offsetY).toBe(1) +// // expect(shadow.blurRadius).toBe(2) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('black') +// // }); - // it("#fc0 1px 0 10px", () => { - // const shadow = parseCSSShadow("#fc0 1px 0 10px") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(1) - // expect(shadow.offsetY).toBe(zeroLength) - // expect(shadow.blurRadius).toBe(10) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('#fc0') - // }); +// // it("#fc0 1px 0 10px", () => { +// // const shadow = parseCSSShadow("#fc0 1px 0 10px") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(1) +// // expect(shadow.offsetY).toBe(zeroLength) +// // expect(shadow.blurRadius).toBe(10) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('#fc0') +// // }); - // it("5px 5px #558abb", () => { - // const shadow = parseCSSShadow("5px 5px #558abb") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(5) - // expect(shadow.offsetY).toBe(5) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('#558abb') - // }); +// // it("5px 5px #558abb", () => { +// // const shadow = parseCSSShadow("5px 5px #558abb") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(5) +// // expect(shadow.offsetY).toBe(5) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('#558abb') +// // }); - // it("white 2px 5px", () => { - // const shadow = parseCSSShadow("white 2px 5px") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(2) - // expect(shadow.offsetY).toBe(5) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('white') - // }); +// // it("white 2px 5px", () => { +// // const shadow = parseCSSShadow("white 2px 5px") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(2) +// // expect(shadow.offsetY).toBe(5) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('white') +// // }); - // it("5px 10px", () => { - // const shadow = parseCSSShadow("5px 10px") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(5) - // expect(shadow.offsetY).toBe(10) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('black') - // }); +// // it("5px 10px", () => { +// // const shadow = parseCSSShadow("5px 10px") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(5) +// // expect(shadow.offsetY).toBe(10) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('black') +// // }); - // // box - // it("60px -16px teal", () => { - // const shadow = parseCSSShadow("60px -16px teal") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(60) - // expect(shadow.offsetY).toBe(-16) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('teal') - // }); +// // // box +// // it("60px -16px teal", () => { +// // const shadow = parseCSSShadow("60px -16px teal") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(60) +// // expect(shadow.offsetY).toBe(-16) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('teal') +// // }); - // it("10px 5px 5px black", () => { - // const shadow = parseCSSShadow("10px 5px 5px black") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(10) - // expect(shadow.offsetY).toBe(5) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('black') - // }); +// // it("10px 5px 5px black", () => { +// // const shadow = parseCSSShadow("10px 5px 5px black") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(10) +// // expect(shadow.offsetY).toBe(5) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('black') +// // }); - // it("2px 2px 2px 1px rgba(0, 0, 0, 0.2)", () => { - // const shadow = parseCSSShadow("2px 2px 2px 1px rgba(0, 0, 0, 0.2)") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(2) - // expect(shadow.offsetY).toBe(2) - // expect(shadow.blurRadius).toBe(2) - // expect(shadow.spreadRadius).toBe(1) - // expect(shadow.color).toBe('rgba(0, 0, 0, 0.2)') - // }); +// // it("2px 2px 2px 1px rgba(0, 0, 0, 0.2)", () => { +// // const shadow = parseCSSShadow("2px 2px 2px 1px rgba(0, 0, 0, 0.2)") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(2) +// // expect(shadow.offsetY).toBe(2) +// // expect(shadow.blurRadius).toBe(2) +// // expect(shadow.spreadRadius).toBe(1) +// // expect(shadow.color).toBe('rgba(0, 0, 0, 0.2)') +// // }); - // it("inset 5em 1em gold", () => { - // const shadow = parseCSSShadow("inset 5em 1em gold") - // expect(shadow.inset).toBe(true) - // expect(shadow.offsetX).toBe(5) - // expect(shadow.offsetY).toBe(1) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('gold') - // }); +// // it("inset 5em 1em gold", () => { +// // const shadow = parseCSSShadow("inset 5em 1em gold") +// // expect(shadow.inset).toBe(true) +// // expect(shadow.offsetX).toBe(5) +// // expect(shadow.offsetY).toBe(1) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('gold') +// // }); - // it("5 10", () => { - // const shadow = parseCSSShadow("5 10") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(5) - // expect(shadow.offsetY).toBe(10) - // expect(shadow.blurRadius).toBe(zeroLength) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('black') - // }); +// // it("5 10", () => { +// // const shadow = parseCSSShadow("5 10") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(5) +// // expect(shadow.offsetY).toBe(10) +// // expect(shadow.blurRadius).toBe(zeroLength) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('black') +// // }); - // it("2 2 2 #333", () => { - // const shadow = parseCSSShadow("2 2 2 #333") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(2) - // expect(shadow.offsetY).toBe(2) - // expect(shadow.blurRadius).toBe(2) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('#333') - // }); +// // it("2 2 2 #333", () => { +// // const shadow = parseCSSShadow("2 2 2 #333") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(2) +// // expect(shadow.offsetY).toBe(2) +// // expect(shadow.blurRadius).toBe(2) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('#333') +// // }); - // it("-1 -1 1 #333", () => { - // const shadow = parseCSSShadow("-1 -1 1 #333") - // expect(shadow.inset).toBe(false) - // expect(shadow.offsetX).toBe(-1) - // expect(shadow.offsetY).toBe(-1) - // expect(shadow.blurRadius).toBe(1) - // expect(shadow.spreadRadius).toBe(zeroLength) - // expect(shadow.color).toBe('#333') - // }); - }); - }); -}); +// // it("-1 -1 1 #333", () => { +// // const shadow = parseCSSShadow("-1 -1 1 #333") +// // expect(shadow.inset).toBe(false) +// // expect(shadow.offsetX).toBe(-1) +// // expect(shadow.offsetY).toBe(-1) +// // expect(shadow.blurRadius).toBe(1) +// // expect(shadow.spreadRadius).toBe(zeroLength) +// // expect(shadow.color).toBe('#333') +// // }); +// }); +// }); +// }); diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts index 5096a8aeb..c87c089aa 100644 --- a/packages/core/ui/styling/background.ios.ts +++ b/packages/core/ui/styling/background.ios.ts @@ -4,7 +4,7 @@ import { Background as BackgroundDefinition } from './background'; import { View, Point } from '../core/view'; import { LinearGradient } from './linear-gradient'; import { Color } from '../../color'; -import { isDataURI, isFileOrResourcePath, layout } from '../../utils'; +import { iOSNativeHelper, isDataURI, isFileOrResourcePath, layout } from '../../utils'; import { ImageSource } from '../../image-source'; import { CSSValue, parse as cssParse } from '../../css-value'; import { CSSShadow } from './css-shadow'; @@ -718,8 +718,7 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeView, background: Backg // TODO: use sublayer if its applied to a layout function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: CSSShadow, background: BackgroundDefinition, useSubLayer: boolean = false) { - // TODO: fine named 'shadow-layer' first and otherwise need to search through sublayers (need logic used in text-shadow for layer - see getShadowLayer) - const layer: CALayer = nativeView.layer; + const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow'); layer.masksToBounds = false; nativeView.clipsToBounds = false; @@ -752,7 +751,7 @@ function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: CSSShadow, function clearBoxShadow(nativeView: NativeView) { nativeView.clipsToBounds = true; - const layer: CALayer = nativeView.layer; + const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow'); layer.masksToBounds = true; layer.shadowOffset = CGSizeMake(0, 0); layer.shadowColor = UIColor.clearColor.CGColor; diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts index e314f8b57..be22924f7 100644 --- a/packages/core/ui/styling/style-properties.ts +++ b/packages/core/ui/styling/style-properties.ts @@ -802,8 +802,7 @@ export const backgroundImageProperty = new CssProperty { - const background = target.backgroundInternal.withImage(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withImage(newValue); }, equalityComparer: (value1, value2) => { if (value1 instanceof LinearGradient && value2 instanceof LinearGradient) { @@ -816,8 +815,7 @@ export const backgroundImageProperty = new CssProperty({ name: 'backgroundColor', cssName: 'background-color', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withColor(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withColor(newValue); }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value), @@ -853,8 +850,7 @@ export const backgroundRepeatProperty = new CssProperty cssName: 'background-repeat', valueConverter: BackgroundRepeat.parse, valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withRepeat(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withRepeat(newValue); }, }); backgroundRepeatProperty.register(Style); @@ -863,8 +859,7 @@ export const backgroundSizeProperty = new CssProperty({ name: 'backgroundSize', cssName: 'background-size', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withSize(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withSize(newValue); }, }); backgroundSizeProperty.register(Style); @@ -873,8 +868,7 @@ export const backgroundPositionProperty = new CssProperty({ name: 'backgroundPosition', cssName: 'background-position', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withPosition(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withPosition(newValue); }, }); backgroundPositionProperty.register(Style); @@ -998,8 +992,7 @@ export const borderTopColorProperty = new CssProperty({ name: 'borderTopColor', cssName: 'border-top-color', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withBorderTopColor(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderTopColor(newValue); }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value), @@ -1010,8 +1003,7 @@ export const borderRightColorProperty = new CssProperty({ name: 'borderRightColor', cssName: 'border-right-color', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withBorderRightColor(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderRightColor(newValue); }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value), @@ -1022,8 +1014,7 @@ export const borderBottomColorProperty = new CssProperty({ name: 'borderBottomColor', cssName: 'border-bottom-color', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withBorderBottomColor(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderBottomColor(newValue); }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value), @@ -1034,8 +1025,7 @@ export const borderLeftColorProperty = new CssProperty({ name: 'borderLeftColor', cssName: 'border-left-color', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withBorderLeftColor(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderLeftColor(newValue); }, equalityComparer: Color.equals, valueConverter: (value) => new Color(value), @@ -1093,8 +1083,7 @@ export const borderTopWidthProperty = new CssProperty({ } else { Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn); } - const background = target.backgroundInternal.withBorderTopWidth(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderTopWidth(value); }, valueConverter: Length.parse, }); @@ -1118,8 +1107,7 @@ export const borderRightWidthProperty = new CssProperty({ } else { Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn); } - const background = target.backgroundInternal.withBorderRightWidth(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderRightWidth(value); }, valueConverter: Length.parse, }); @@ -1143,8 +1131,7 @@ export const borderBottomWidthProperty = new CssProperty({ } else { Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn); } - const background = target.backgroundInternal.withBorderBottomWidth(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderBottomWidth(value); }, valueConverter: Length.parse, }); @@ -1168,8 +1155,7 @@ export const borderLeftWidthProperty = new CssProperty({ } else { Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn); } - const background = target.backgroundInternal.withBorderLeftWidth(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderLeftWidth(value); }, valueConverter: Length.parse, }); @@ -1218,8 +1204,7 @@ export const borderTopLeftRadiusProperty = new CssProperty({ if (!isNonNegativeFiniteNumber(value)) { throw new Error(`border-top-left-radius should be Non-Negative Finite number. Value: ${value}`); } - const background = target.backgroundInternal.withBorderTopLeftRadius(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderTopLeftRadius(value); }, valueConverter: Length.parse, }); @@ -1235,8 +1220,7 @@ export const borderTopRightRadiusProperty = new CssProperty({ if (!isNonNegativeFiniteNumber(value)) { throw new Error(`border-top-right-radius should be Non-Negative Finite number. Value: ${value}`); } - const background = target.backgroundInternal.withBorderTopRightRadius(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderTopRightRadius(value); }, valueConverter: Length.parse, }); @@ -1252,8 +1236,7 @@ export const borderBottomRightRadiusProperty = new CssProperty({ if (!isNonNegativeFiniteNumber(value)) { throw new Error(`border-bottom-right-radius should be Non-Negative Finite number. Value: ${value}`); } - const background = target.backgroundInternal.withBorderBottomRightRadius(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderBottomRightRadius(value); }, valueConverter: Length.parse, }); @@ -1269,8 +1252,7 @@ export const borderBottomLeftRadiusProperty = new CssProperty({ if (!isNonNegativeFiniteNumber(value)) { throw new Error(`border-bottom-left-radius should be Non-Negative Finite number. Value: ${value}`); } - const background = target.backgroundInternal.withBorderBottomLeftRadius(value); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBorderBottomLeftRadius(value); }, valueConverter: Length.parse, }); @@ -1280,8 +1262,7 @@ const boxShadowProperty = new CssProperty({ name: 'boxShadow', cssName: 'box-shadow', valueChanged: (target, oldValue, newValue) => { - const background = target.backgroundInternal.withBoxShadow(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withBoxShadow(newValue); }, valueConverter: (value) => { return parseCSSShadow(value); @@ -1311,8 +1292,7 @@ export const clipPathProperty = new CssProperty({ throw new Error('clip-path is not valid.'); } - const background = target.backgroundInternal.withClipPath(newValue); - target.backgroundInternal = background; + target.backgroundInternal = target.backgroundInternal.withClipPath(newValue); }, }); clipPathProperty.register(Style); diff --git a/packages/core/ui/text-base/index.ios.ts b/packages/core/ui/text-base/index.ios.ts index 7fcf4e961..7b1c2488f 100644 --- a/packages/core/ui/text-base/index.ios.ts +++ b/packages/core/ui/text-base/index.ios.ts @@ -349,7 +349,7 @@ export class TextBase extends TextBaseCommon { } _setShadow(value: CSSShadow): void { - const layer = getShadowLayer(this); + const layer = iOSNativeHelper.getShadowLayer(this.nativeTextViewProtected, 'ns-text-shadow'); if (!layer) { Trace.write('text-shadow not applied, no layer.', Trace.categories.Style, Trace.messageType.info); return; @@ -504,42 +504,6 @@ export function getTransformedText(text: string, textTransform: TextTransform): } } -// todo: clean up nesting & logs -export function getShadowLayer(view: TextBase): CALayer { - let layer: CALayer; - const name = 'shadow-layer'; - const nativeView = view && view.nativeTextViewProtected; - if (nativeView) { - if (nativeView.layer) { - if (nativeView.layer.name === name) { - return nativeView.layer; - } else { - if (nativeView.layer.sublayers && nativeView.layer.sublayers.count) { - console.log('this.nativeTextViewProtected.layer.sublayers.count:', nativeView.layer.sublayers.count); - for (let i = 0; i < nativeView.layer.sublayers.count; i++) { - console.log(`layer ${i}:`, nativeView.layer.sublayers.objectAtIndex(i)); - if (nativeView.layer.sublayers.objectAtIndex(i).name === name) { - return nativeView.layer.sublayers.objectAtIndex(i); - } - } - if (nativeView instanceof UITextView) { - layer = nativeView.layer.sublayers.objectAtIndex(1); - } else { - layer = nativeView.layer.sublayers.objectAtIndex(nativeView.layer.sublayers.count - 1); - } - } else { - layer = nativeView.layer; - } - } - } else { - // could this occur? - console.log('no layer!'); - } - } - layer.name = name; - return layer; -} - function NSStringFromNSAttributedString(source: NSAttributedString | string): NSString { return NSString.stringWithString((source instanceof NSAttributedString && source.string) || source); } diff --git a/packages/core/utils/native-helper.d.ts b/packages/core/utils/native-helper.d.ts index 69212d6ce..074d40a7f 100644 --- a/packages/core/utils/native-helper.d.ts +++ b/packages/core/utils/native-helper.d.ts @@ -168,6 +168,12 @@ export namespace iOSNativeHelper { */ export function applyRotateTransform(transform: any /* CATransform3D*/, x: number, y: number, z: number): any; /* CATransform3D*/ + /** + * @param nativeView UIView to find shadow layer with + * @param name Name of the shadow layer if looking for specifically named layer + */ + export function getShadowLayer(nativeView: any /* UIView */, name?: string): any; /* CALayer */ + /** * Create a UIDocumentInteractionControllerDelegate implementation for use with UIDocumentInteractionController */ diff --git a/packages/core/utils/native-helper.ios.ts b/packages/core/utils/native-helper.ios.ts index a9db0611a..e13850d6d 100644 --- a/packages/core/utils/native-helper.ios.ts +++ b/packages/core/utils/native-helper.ios.ts @@ -120,6 +120,46 @@ export namespace iOSNativeHelper { return transform; } + export function getShadowLayer(nativeView: UIView, name?: string): CALayer { + let layer: CALayer; + name = name || 'ns-shadow-layer'; + if (nativeView) { + if (nativeView.layer) { + if (nativeView.layer.name === name) { + console.log('- found shadow layer - reusing.'); + return nativeView.layer; + } else { + if (nativeView.layer.sublayers && nativeView.layer.sublayers.count) { + console.log('nativeView.layer.sublayers.count:', nativeView.layer.sublayers.count); + for (let i = 0; i < nativeView.layer.sublayers.count; i++) { + console.log(`layer ${i}:`, nativeView.layer.sublayers.objectAtIndex(i)); + console.log(`layer ${i} name:`, nativeView.layer.sublayers.objectAtIndex(i).name); + if (nativeView.layer.sublayers.objectAtIndex(i).name === name) { + return nativeView.layer.sublayers.objectAtIndex(i); + } + } + if (nativeView instanceof UITextView) { + layer = nativeView.layer.sublayers.objectAtIndex(1); + } else { + layer = nativeView.layer.sublayers.objectAtIndex(nativeView.layer.sublayers.count - 1); + } + } else { + layer = nativeView.layer; + } + } + } else { + // could this occur? + console.log('no layer!'); + } + } + console.log('layer.name:', layer.name); + if (!layer.name) { + // only explicitly name if the developer had not named it themselves and/or some other integration + layer.name = name; + } + return layer; + } + export function createUIDocumentInteractionControllerDelegate(): NSObject { @NativeClass class UIDocumentInteractionControllerDelegateImpl extends NSObject implements UIDocumentInteractionControllerDelegate {