feat(core): nativescript.config and webpack updates (#8801)

apps/ui/src/scroll-view/layout-outside-scroll-page.ts

@@ -0,0 +1,11 @@
+import { EventData as ObservableEventData } from '@nativescript/core/data/observable';
+import { Page } from '@nativescript/core/ui/page';
+import { LayoutOutsideScrollViewModel } from './layout-outside-scroll-view-model';
+
+var viewModel = new LayoutOutsideScrollViewModel();
+
+export function pageLoaded(args: ObservableEventData) {
+	var page = <Page>args.object;
+
+	page.bindingContext = viewModel;
+}

apps/ui/src/scroll-view/layout-outside-scroll-page.xml

@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page">
+    <ScrollView id="scroll-view">
+        <StackLayout>
+            <GridLayout rows="auto, auto, auto" backgroundColor="lightgray">
+                <Button row="0" text="Change w/ Visibility" automationText="changeVisibilityTop" tap="{{ onChangeVisibility }}"></Button>
+                <Button row="1" text="Scroll To Bottom" automationText="scrollToBottom" tap="{{ onScrollToBottom }}"></Button>
+                <Label row="2" visibility="{{ isVisible ? 'visible' : 'collapsed' }}" text="{{ content }}" color="black"></Label>
+            </GridLayout>
+
+            <GridLayout height="2000" backgroundColor="yellow"></GridLayout>
+
+            <GridLayout rows="auto, auto, auto" backgroundColor="lightgray">
+                <Button row="0" text="Change w/ Visibility" automationText="changeVisibilityBottom"  tap="{{ onChangeVisibility }}"></Button>
+                <Button row="1" text="Scroll To Top" automationText="scrollToTop" tap="{{ onScrollToTop }}"></Button>
+                <Label row="2" visibility="{{ isVisible ? 'visible' : 'collapsed' }}" text="{{ content }}" color="black"></Label>
+            </GridLayout>
+        </StackLayout>
+    </ScrollView>
+</Page>

apps/ui/src/scroll-view/layout-outside-scroll-view-model.ts

@@ -0,0 +1,30 @@
+import { Observable } from '@nativescript/core/data/observable';
+import { ScrollView } from '@nativescript/core/ui/scroll-view';
+
+export class LayoutOutsideScrollViewModel extends Observable {
+	content: string =
+		'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,' +
+		'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. ' +
+		'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos ' +
+		'qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, ' +
+		'adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. ' +
+		'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? ' +
+		'Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, ' +
+		'vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?';
+	isVisible: boolean = true;
+
+	onChangeVisibility() {
+		this.isVisible = !this.isVisible;
+		this.notifyPropertyChange('isVisible', this.isVisible);
+	}
+
+	onScrollToBottom(args) {
+		const scrollView = <ScrollView>args.object.page.getViewById('scroll-view');
+		scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, false);
+	}
+
+	onScrollToTop(args) {
+		const scrollView = <ScrollView>args.object.page.getViewById('scroll-view');
+		scrollView.scrollToVerticalOffset(0, false);
+	}
+}

apps/ui/src/scroll-view/main-page.ts

@@ -0,0 +1,23 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { SubMainPageViewModel } from '../sub-main-page-view-model';
+import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
+import { Page } from '@nativescript/core/ui/page';
+
+export function pageLoaded(args: EventData) {
+	const page = <Page>args.object;
+	const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
+	page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
+
+export function loadExamples() {
+	const examples = new Map<string, string>();
+	examples.set('scrolling-and-sizing', 'scroll-view/scrolling-and-sizing-page');
+	examples.set('safe-area-root-element', 'scroll-view/safe-area-root-element-page');
+	examples.set('safe-area-sub-element', 'scroll-view/safe-area-sub-element-page');
+	examples.set('safe-area-images', 'scroll-view/safe-area-images-page');
+	examples.set('safe-area-images-overflow', 'scroll-view/safe-area-images-overflow-page');
+	examples.set('layout-outside-scroll', 'scroll-view/layout-outside-scroll-page');
+	examples.set('scroll-enabled', 'scroll-view/scroll-enabled-page');
+
+	return examples;
+}

apps/ui/src/scroll-view/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>

apps/ui/src/scroll-view/safe-area-images-overflow-page.xml

@@ -0,0 +1,24 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" actionBarHidden="true" class="page">
+
+    <GridLayout rows="*">
+        <ScrollView row="0" backgroundColor="DarkSlateGray">
+            <StackLayout>
+                <Image stretch="aspectFill" iosOverflowSafeArea="true" height="200" src="~/resources/images/woods.jpg"></Image>
+                <StackLayout backgroundColor="DarkSalmon">
+                    <Label verticalAlignment="top" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id sem ex. Aenean at ultricies metus, ut tincidunt nunc. Vivamus dictum sem sed ante fermentum, id congue lacus lacinia. Integer bibendum tincidunt quam ornare ullamcorper." textWrap="true" />
+                </StackLayout>
+                <Image stretch="aspectFill" iosOverflowSafeArea="true" height="200" src="~/resources/images/woods.jpg"></Image>
+                <StackLayout backgroundColor="YellowGreen">
+                    <Label verticalAlignment="top" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id sem ex. Aenean at ultricies metus, ut tincidunt nunc. Vivamus dictum sem sed ante fermentum, id congue lacus lacinia. Integer bibendum tincidunt quam ornare ullamcorper." textWrap="true" />
+                </StackLayout>
+                <Image stretch="aspectFill" iosOverflowSafeArea="true" height="200" src="~/resources/images/woods.jpg"></Image>
+                <StackLayout backgroundColor="DimGray">
+                    <Label verticalAlignment="top" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id sem ex. Aenean at ultricies metus, ut tincidunt nunc. Vivamus dictum sem sed ante fermentum, id congue lacus lacinia. Integer bibendum tincidunt quam ornare ullamcorper." textWrap="true" />
+                </StackLayout>
+            </StackLayout>
+        </ScrollView>
+
+        <!-- status bar overlay -->
+        <GridLayout row="0" backgroundColor="White" opacity="0.4" height="0" verticalAlignment="top"></GridLayout>
+    </GridLayout>
+</Page>

apps/ui/src/scroll-view/safe-area-images-page.xml

@@ -0,0 +1,24 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" actionBarHidden="true" class="page">
+
+    <GridLayout rows="*">
+        <ScrollView row="0" backgroundColor="DarkSlateGray">
+            <StackLayout>
+                <Image stretch="aspectFill" height="200" src="~/resources/images/woods.jpg"></Image>
+                <StackLayout backgroundColor="DarkSalmon">
+                    <Label verticalAlignment="top" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id sem ex. Aenean at ultricies metus, ut tincidunt nunc. Vivamus dictum sem sed ante fermentum, id congue lacus lacinia. Integer bibendum tincidunt quam ornare ullamcorper." textWrap="true" />
+                </StackLayout>
+                <Image stretch="aspectFill" height="200" src="~/resources/images/woods.jpg"></Image>
+                <StackLayout backgroundColor="YellowGreen">
+                    <Label verticalAlignment="top" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id sem ex. Aenean at ultricies metus, ut tincidunt nunc. Vivamus dictum sem sed ante fermentum, id congue lacus lacinia. Integer bibendum tincidunt quam ornare ullamcorper." textWrap="true" />
+                </StackLayout>
+                <Image stretch="aspectFill" height="200" src="~/resources/images/woods.jpg"></Image>
+                <StackLayout backgroundColor="DimGray">
+                    <Label verticalAlignment="top" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id sem ex. Aenean at ultricies metus, ut tincidunt nunc. Vivamus dictum sem sed ante fermentum, id congue lacus lacinia. Integer bibendum tincidunt quam ornare ullamcorper." textWrap="true" />
+                </StackLayout>
+            </StackLayout>
+        </ScrollView>
+
+        <!-- status bar overlay -->
+        <GridLayout row="0" backgroundColor="White" opacity="0.4" height="0" verticalAlignment="top"></GridLayout>
+    </GridLayout>
+</Page>

apps/ui/src/scroll-view/safe-area-root-element-page.xml

@@ -0,0 +1,15 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <ScrollView>
+        <StackLayout backgroundColor="teal">
+            <GridLayout height="30" backgroundColor="red" />
+            <GridLayout height="30" backgroundColor="yellow" />
+            <GridLayout height="30" backgroundColor="green" />
+        </StackLayout>
+    </ScrollView>
+</Page>

apps/ui/src/scroll-view/safe-area-sub-element-page.xml

@@ -0,0 +1,17 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <GridLayout>
+        <ScrollView>
+            <StackLayout backgroundColor="teal">
+                <GridLayout height="30" backgroundColor="red" />
+                <GridLayout height="30" backgroundColor="yellow" />
+                <GridLayout height="30" backgroundColor="green" />
+            </StackLayout>
+        </ScrollView>
+    </GridLayout>
+</Page>

apps/ui/src/scroll-view/scroll-enabled-page.ts

@@ -0,0 +1,22 @@
+import { EventData, GestureStateTypes, PanGestureEventData, Page, View, ScrollView } from '@nativescript/core';
+
+export function pageLoaded(args: EventData) {
+	var page = <Page>args.object;
+}
+
+let currentDeltaY = 0;
+export function panLayout(args: PanGestureEventData) {
+	const view = <View>args.object;
+	const scrollView = <ScrollView>view.parent;
+
+	if (args.state === GestureStateTypes.began) {
+		currentDeltaY = 0;
+		scrollView.isScrollEnabled = false;
+	} else if (args.state === GestureStateTypes.changed) {
+		const diff = args.deltaY - currentDeltaY;
+		view.translateY += diff;
+		currentDeltaY = args.deltaY;
+	} else if (args.state === GestureStateTypes.ended) {
+		scrollView.isScrollEnabled = true;
+	}
+}

apps/ui/src/scroll-view/scroll-enabled-page.xml

@@ -0,0 +1,7 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page">
+    <ScrollView id="scroll-view" height="300">
+        <StackLayout height="500" backgroundColor="red" pan="panLayout">
+            <Label text="Move Me" color="#fff" fontSize="22"/>
+        </StackLayout>
+    </ScrollView>
+</Page>

apps/ui/src/scroll-view/scrolling-and-sizing-page.css

@@ -0,0 +1,47 @@
+.p-10 {
+    padding: 10 20 10 20;
+}
+
+.m-b-10 {
+    margin-bottom: 10;
+}
+
+.page {
+    background-color: #F2F2F2;
+}
+
+ScrollView {
+    background-color: #FFF;
+}
+
+.bordered {
+    border-width: 5;
+    border-color: green;
+}
+
+.fixed-height {
+    height: 55;
+}
+
+.border-radius {
+    border-radius: 15;
+}
+
+.border-radius-nonuniform {
+    border-radius: 10 20 30 40;
+}
+
+.bordered-nonuniform {
+    border-top-color: red;
+    border-right-color: green;
+    border-bottom-color: blue;
+    border-left-color: purple;
+    border-top-width: 5;
+    border-right-width: 10;
+    border-bottom-width: 15;
+    border-left-width: 20;
+}
+
+.body {
+    font-size: 11;
+}

apps/ui/src/scroll-view/scrolling-and-sizing-page.xml

@@ -0,0 +1,65 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Default style = scrolls out of container" class="body m-b-10" />
+            <ScrollView height="40">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="1">
+            <Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
+            <ScrollView class="bordered" height="40">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="2">
+            <Label text="border-radius" class="body m-b-10" />
+            <ScrollView class="bordered fixed-height border-radius">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="2">
+            <Label text="border-radius = weird" class="body m-b-10" />
+            <ScrollView class="bordered fixed-height border-radius-nonuniform">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="3">
+            <Label text="border-width = weird" class="body m-b-10" />
+            <ScrollView class="bordered-nonuniform fixed-height">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+    </StackLayout>
+</Page>