Merge branch 'release/8.2.0' into fix/android-fragment-1.3.x

This commit is contained in:
Nathan Walker
2022-01-22 13:15:51 -08:00
committed by GitHub
99 changed files with 2162 additions and 3250 deletions

View File

@ -14,10 +14,10 @@
"nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
},
"devDependencies": {
"@nativescript/android": "8.1.1",
"@nativescript/ios": "8.1.0",
"@nativescript/android": "alpha",
"@nativescript/ios": "alpha",
"@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
"typescript": "4.3.5"
"typescript": "4.5.4"
},
"gitHead": "c06800e52ee1a184ea2dffd12a6702aaa43be4e3",
"readme": "NativeScript Application"

View File

@ -72,6 +72,24 @@ export var test_rgb_Color_CSS = function () {
TKUnit.assertEqual(color.argb, 0xffff6464, 'Color.argb not properly parsed');
};
export var test_rgb_Color_CSS_lvl4 = function () {
var alpha = 0.5;
var expected = 0x80;
// <snippet module="color" title="color">
// ### Creating a Color from four RGB values
// ``` JavaScript
// Creates the color with 255 red, 100 green, 100 blue
var color = new Color(`rgb(255 100 100 / ${alpha})`);
// ```
// </snippet>
TKUnit.assertEqual(color.a, expected, 'Color.a not properly parsed');
TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
TKUnit.assertEqual(color.g, 100, 'Color.g not properly parsed');
TKUnit.assertEqual(color.b, 100, 'Color.b not properly parsed');
TKUnit.assertEqual(color.hex, '#FF646480', 'Color.hex not properly parsed');
TKUnit.assertEqual(color.argb, 0x80ff6464, 'Color.argb not properly parsed');
};
export var test_rgba_Color_CSS = function () {
var alpha = 0.5;
var expected = 0x80;

View File

@ -1,13 +1,13 @@
// todo: figure out why this worker is including the whole core and not just the Http module
// ie. tree-shaking is not working as expected here. (same setup works in a separate app)
import { initGlobal } from '@nativescript/core/globals/index';
initGlobal();
// import { initGlobal } from '@nativescript/core/globals/index';
// initGlobal();
import { Http } from '@nativescript/core';
import { getString } from '@nativescript/core/http';
declare var postMessage: any;
Http.getString('https://httpbin.org/get').then(
getString('https://httpbin.org/get').then(
function (r) {
postMessage(r);
},

View File

@ -659,17 +659,19 @@ export function test_BindingConverterCalledEvenWithNullValue() {
const testPropertyValue = null;
const expectedValue = 'collapsed';
pageViewModel.set('testProperty', testPropertyValue);
appModule.getResources()['converter'] = function (value) {
if (value) {
return 'visible';
} else {
return 'collapsed';
}
appModule.getResources()['converter'] = {
toView: function (value) {
if (value) {
return 'visible';
} else {
return 'collapsed';
}
},
};
const testFunc = function (views: Array<View>) {
const testLabel = <Label>views[0];
testLabel.bind({ sourceProperty: 'testProperty', targetProperty: 'text', expression: 'testProperty | converter' });
testLabel.bind({ sourceProperty: 'testProperty', targetProperty: 'text', expression: 'testProperty | converter()' });
const page = <Page>views[1];
page.bindingContext = pageViewModel;

View File

@ -437,15 +437,17 @@ export class ListViewTest extends UITest<ListView> {
public test_usingAppLevelConvertersInListViewItems() {
var listView = this.testView;
var dateConverter = function (value, format) {
var result = format;
var day = value.getDate();
result = result.replace('DD', day < 10 ? '0' + day : day);
var month = value.getMonth() + 1;
result = result.replace('MM', month < 10 ? '0' + month : month);
result = result.replace('YYYY', value.getFullYear());
var dateConverter = {
toView: function (value, format) {
var result = format;
var day = value.getDate();
result = result.replace('DD', day < 10 ? '0' + day : day);
var month = value.getMonth() + 1;
result = result.replace('MM', month < 10 ? '0' + month : month);
result = result.replace('YYYY', value.getFullYear());
return result;
return result;
},
};
Application.getResources()['dateConverter'] = dateConverter;
@ -565,10 +567,12 @@ export class ListViewTest extends UITest<ListView> {
var listView = this.testView;
var converterCalledCounter = 0;
var testConverter = function (value) {
converterCalledCounter++;
var testConverter = {
toView: function (value) {
converterCalledCounter++;
return value;
return value;
},
};
Application.getResources()['testConverter'] = testConverter;
@ -578,7 +582,7 @@ export class ListViewTest extends UITest<ListView> {
listView.bindingContext = listViewModel;
listView.bind({ sourceProperty: 'items', targetProperty: 'items' });
listView.itemTemplate = '<Label id="testLabel" text="{{ $value, $value | testConverter }}" />';
listView.itemTemplate = '<Label id="testLabel" text="{{ $value, $value | testConverter() }}" />';
this.waitUntilListViewReady();
@ -589,10 +593,12 @@ export class ListViewTest extends UITest<ListView> {
var listView = this.testView;
var converterCalledCounter = 0;
var testConverter = function (value) {
converterCalledCounter++;
var testConverter = {
toView: function (value) {
converterCalledCounter++;
return value;
return value;
},
};
Application.getResources()['testConverter'] = testConverter;
@ -602,7 +608,7 @@ export class ListViewTest extends UITest<ListView> {
listView.bindingContext = listViewModel;
listView.bind({ sourceProperty: 'items', targetProperty: 'items' });
listView.itemTemplate = '<StackLayout><Label id="testLabel" text="{{ $value, $value | testConverter }}" /></StackLayout>';
listView.itemTemplate = '<StackLayout><Label id="testLabel" text="{{ $value, $value | testConverter() }}" /></StackLayout>';
this.waitUntilListViewReady();

View File

@ -252,15 +252,17 @@ export function test_splice_observable_array_refreshes_the_Repeater() {
export function test_usingAppLevelConvertersInRepeaterItems() {
var repeater = new Repeater();
var dateConverter = function (value, format) {
var result = format;
var day = value.getDate();
result = result.replace('DD', month < 10 ? '0' + day : day);
var month = value.getMonth() + 1;
result = result.replace('MM', month < 10 ? '0' + month : month);
result = result.replace('YYYY', value.getFullYear());
var dateConverter = {
toView: function (value, format) {
var result = format;
var day = value.getDate();
result = result.replace('DD', month < 10 ? '0' + day : day);
var month = value.getMonth() + 1;
result = result.replace('MM', month < 10 ? '0' + month : month);
result = result.replace('YYYY', value.getFullYear());
return result;
return result;
},
};
Application.getResources()['dateConverter'] = dateConverter;
@ -275,7 +277,7 @@ export function test_usingAppLevelConvertersInRepeaterItems() {
TKUnit.waitUntilReady(() => repeater.isLayoutValid);
TKUnit.assertEqual(getChildAtText(repeater, 0), dateConverter(new Date(), 'DD.MM.YYYY'), 'element');
TKUnit.assertEqual(getChildAtText(repeater, 0), dateConverter.toView(new Date(), 'DD.MM.YYYY'), 'element');
}
helper.buildUIAndRunTest(repeater, testAction);

View File

@ -59,6 +59,10 @@ export function test_setting_borderColorRGB_property_from_CSS_is_applied_to_Styl
test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255, 0, 0)');
}
export function test_setting_borderColorRGBLvl4_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255 0 0 / 1)');
}
export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgba(255,0,0,1)');
}

View File

@ -11,9 +11,9 @@
"nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
},
"devDependencies": {
"@nativescript/android": "8.1.1",
"@nativescript/ios": "8.1.0",
"@nativescript/android": "alpha",
"@nativescript/ios": "alpha",
"@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
"typescript": "4.3.5"
"typescript": "4.5.4"
}
}

View File

@ -5,6 +5,9 @@
The following CSS rule changes the font size of all UI
components that have the btn class name.
*/
Button {
text-transform: none;
}
.btn-view-demo {
background-color: #65ADF1;
border-radius: 5;

View File

@ -6,14 +6,15 @@
<StackLayout class="p-20">
<ScrollView class="h-full">
<StackLayout>
<Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
<Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
<Button text="touch-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
</StackLayout>
</ScrollView>
</StackLayout>

View File

@ -11,7 +11,7 @@ export class RootLayoutModel extends Observable {
view: this.getPopup('#EA5936', 110, -30),
options: {
shadeCover: {
color: '#FFF',
color: 'linear-gradient(to bottom, red, blue)',
opacity: 0.7,
tapToClose: true,
},

View File

@ -0,0 +1,314 @@
import { Observable, EventData, Page, CoreTypes, TouchManager, TouchAnimationOptions, Color, View } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {
page = <Page>args.object;
page.bindingContext = new TouchAnimationsModel(page);
}
export class TouchAnimationsModel extends Observable {
touchAnimation: TouchAnimationOptions = {
down: {
scale: { x: 0.95, y: 0.95 },
backgroundColor: new Color('purple'),
duration: 250,
curve: CoreTypes.AnimationCurve.easeInOut,
},
up: {
scale: { x: 1, y: 1 },
backgroundColor: new Color('#30bcff'),
duration: 250,
curve: CoreTypes.AnimationCurve.easeInOut,
},
};
touchAnimationLabel: TouchAnimationOptions = {
down: {
scale: { x: 0.85, y: 0.85 },
duration: 150,
curve: CoreTypes.AnimationCurve.easeInOut,
},
up: {
scale: { x: 1, y: 1 },
duration: 150,
curve: CoreTypes.AnimationCurve.easeInOut,
},
};
touchAnimationLayout: TouchAnimationOptions = {
down: {
scale: { x: 0.85, y: 0.85 },
opacity: 0.7,
duration: 250,
curve: CoreTypes.AnimationCurve.easeInOut,
},
up: {
scale: { x: 1, y: 1 },
opacity: 1,
duration: 250,
curve: CoreTypes.AnimationCurve.easeInOut,
},
};
touchAnimationNative: TouchAnimationOptions = {
down: (view: View) => {
const shakeIt = () => {
// shake when all the way down
view
.animate({ translate: { x: -20, y: 0 }, scale: { x: 0.95, y: 0.95 }, duration: 60, curve: CoreTypes.AnimationCurve.linear })
.then(function () {
return view.animate({ translate: { x: 20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {
return view.animate({ translate: { x: -20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {
return view.animate({ translate: { x: 20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {
return view.animate({ translate: { x: -10, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {
return view.animate({ translate: { x: 10, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {
return view.animate({ translate: { x: -5, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {
return view.animate({ translate: { x: 5, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {
return view.animate({ translate: { x: 0, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
})
.then(function () {});
};
if (global.isIOS) {
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
0.4,
0,
0.5,
3,
UIViewAnimationOptions.CurveEaseInOut,
() => {
view.ios.transform = CGAffineTransformMakeScale(0.95, 0.95);
view.opacity = 0.5;
view.ios.backgroundColor = new Color('red').ios;
view.color = new Color('white');
},
() => {
shakeIt();
}
);
} else {
view
.animate({
scale: { x: 0.95, y: 0.95 },
opacity: 0.5,
backgroundColor: new Color('red'),
duration: 400,
})
.then(() => {
view.color = new Color('white');
shakeIt();
})
.catch(() => {});
}
},
up: (view: View) => {
if (global.isIOS) {
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
0.4,
0,
0.5,
3,
UIViewAnimationOptions.CurveEaseInOut,
() => {
view.ios.transform = CGAffineTransformMakeScale(1.2, 1.2);
},
() => {
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
0.2,
0,
0.5,
3,
UIViewAnimationOptions.CurveEaseInOut,
() => {
view.ios.transform = CGAffineTransformIdentity;
view.opacity = 1;
view.ios.backgroundColor = new Color('#aee406').ios;
view.color = new Color('black');
},
() => {
// complete
}
);
}
);
} else {
view
.animate({
scale: { x: 1.2, y: 1.2 },
duration: 400,
})
.then(() => {
view.color = new Color('black');
view
.animate({
scale: { x: 1, y: 1 },
opacity: 1,
backgroundColor: new Color('#aee406'),
duration: 200,
})
.then(() => {})
.catch(() => {});
})
.catch(() => {});
}
},
};
touchAnimationRotate: TouchAnimationOptions = {
down: {
scale: { x: 0.85, y: 0.85 },
rotate: 6,
opacity: 0.7,
duration: 250,
curve: CoreTypes.AnimationCurve.easeInOut,
},
up: {
scale: { x: 1, y: 1 },
rotate: 0,
opacity: 1,
duration: 250,
curve: CoreTypes.AnimationCurve.easeInOut,
},
};
touchAnimationGrow: TouchAnimationOptions = {
down: {
scale: { x: 1.2, y: 1.2 },
backgroundColor: new Color('#325279'),
rotate: -4,
duration: 250,
curve: CoreTypes.AnimationCurve.easeInOut,
},
up: {
scale: { x: 1, y: 1 },
backgroundColor: new Color('#006968'),
rotate: 0,
duration: 900,
curve: CoreTypes.AnimationCurve.easeInOut,
},
};
touchAnimationBlowAway: TouchAnimationOptions = {
down: (view: View) => {
let rotate = 3;
const shiftAway = (viewInstance: View, delay = 0) => {
setTimeout(() => {
viewInstance.animate({ translate: { x: 0, y: -10 }, scale: { x: 1.1, y: 1.1 }, opacity: 0.8, rotate, duration: 200, curve: CoreTypes.AnimationCurve.easeInOut }).catch(function () {});
rotate = rotate * -1;
}, delay);
};
let cnt = 0;
for (const id of this.elementIds) {
shiftAway(this.page.getViewById(id), cnt);
cnt += 10;
}
if (global.isIOS) {
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
0.4,
0,
0.5,
3,
UIViewAnimationOptions.CurveEaseInOut,
() => {
view.ios.transform = CGAffineTransformMakeScale(0.95, 0.95);
view.opacity = 0.5;
},
() => {}
);
} else {
view
.animate({
scale: { x: 0.95, y: 0.95 },
opacity: 0.5,
duration: 400,
})
.catch(() => {});
}
},
up: (view: View) => {
const shiftBack = (viewInstance: View, delay = 0) => {
setTimeout(() => {
viewInstance.animate({ translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, rotate: 0, duration: 200, curve: CoreTypes.AnimationCurve.easeInOut }).catch(function () {});
}, delay);
};
let cnt = 0;
for (const id of this.elementIds) {
shiftBack(this.page.getViewById(id), cnt);
cnt += 10;
}
if (global.isIOS) {
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
0.3,
0,
0.5,
3,
UIViewAnimationOptions.CurveEaseInOut,
() => {
view.ios.transform = CGAffineTransformIdentity;
},
() => {}
);
} else {
view
.animate({
scale: { x: 1, y: 1 },
opacity: 1,
duration: 300,
})
.catch(() => {});
}
},
};
elementIds = ['label', 'buttonTop', 'grid1', 'buttonShake', 'stack1', 'button2', 'button3', 'button4', 'button5'];
constructor(private page: Page) {
super();
TouchManager.enableGlobalTapAnimations = true;
this.page.on('navigatingFrom', () => {
TouchManager.enableGlobalTapAnimations = false;
});
// reuse instance level animations but customize to ensure they are different
TouchManager.animations = {
down: {
...this.touchAnimation.down,
backgroundColor: new Color('rgba(48, 188, 255, .7)'),
duration: 150,
},
up: {
...this.touchAnimation.up,
duration: 150,
},
};
}
loadedContainer(args) {
if (global.isAndroid) {
if (args.object.android.setClipToPadding) {
args.object.android.setClipToPadding(false);
}
if (args.object.android.setClipChildren) {
args.object.android.setClipChildren(false);
}
}
}
onTapAnything() {
console.log('onTapAnything');
}
}

View File

@ -0,0 +1,40 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="Touch Animations" class="action-bar">
</ActionBar>
</Page.actionBar>
<!-- <ScrollView> -->
<StackLayout class="p-x-20" loaded="{{ loadedContainer }}">
<Label id="label" tap="{{ onTapAnything }}" text="Touchable label" class="t-18 c-black text-center m-t-5" touchAnimation="{{ touchAnimationLabel }}" />
<Button id="buttonTop" text="Touch me for puple vibes" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="{{ touchAnimation }}" />
<GridLayout id="grid1" rows="auto" columns="*,auto,auto,*" class="p-10 m-y-10" tap="{{ onTapAnything }}" touchAnimation="{{ touchAnimationLayout }}" borderRadius="8" borderWidth="1" borderColor="#999">
<ContentView col="1" backgroundColor="gray" borderRadius="15" width="30" height="30" verticalAlignment="middle" />
<Label col="2" text="Touchable GridLayout" class="t-18 m-l-10" verticalAlignment="middle" />
</GridLayout>
<Button id="buttonShake" text="Tap to shake, rattle n' pop" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-lime" touchAnimation="{{ touchAnimationNative }}" />
<StackLayout id="stack1" rows="auto" columns="*,auto,auto,*" class="p-10 m-y-10" tap="{{ onTapAnything }}" touchAnimation="{{ touchAnimationLayout }}" borderRadius="8" borderWidth="1" borderColor="#999">
<ContentView col="1" backgroundColor="orange" borderRadius="10" width="20" height="20" verticalAlignment="middle" />
<Label col="2" text="Touchable StackLayout" class="t-18 text-center" verticalAlignment="middle" />
</StackLayout>
<Button id="button2" text="Auto animation w/ TouchManager" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button id="button3" text="Touch animation ignored" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" ignoreTouchAnimation="true" isEnabled="false" />
<Button id="button4" text="Touch rotate" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-ruby" touchAnimation="{{ touchAnimationRotate }}" />
<Button id="button5" text="Touch grow, slow return" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-forest" touchAnimation="{{ touchAnimationGrow }}" />
<Button id="button6" text="Touch me, I'm a lil' shifty!" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-orange" touchAnimation="{{ touchAnimationBlowAway }}" />
<!-- uncomment the following along with ScrollView to test behavior in ScrollView -->
<!-- <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
<Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" /> -->
</StackLayout>
<!-- </ScrollView> -->
</Page>

View File

@ -11,10 +11,10 @@
"@nativescript/core": "file:../../packages/core"
},
"devDependencies": {
"@nativescript/android": "8.1.1",
"@nativescript/ios": "8.1.0",
"@nativescript/android": "alpha",
"@nativescript/ios": "alpha",
"@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
"typescript": "4.3.5"
"typescript": "4.5.4"
},
"gitHead": "8ab7726d1ee9991706069c1359c552e67ee0d1a4",
"readme": "NativeScript Application",