Merge branch 'master' of github.com:nativescript-community/ui-material-components

farfromrefug · farfromrefug · commit 6cbe8d3635ae · 2021-04-26T21:19:38.000+02:00
diff --git a/demo-vue/app.webpack.config.js b/demo-vue/app.webpack.config.js
@@ -149,7 +149,7 @@ module.exports = (env, params = {}) => {
             exclude: /\.module\.scss$/,
             use: [
                 {
-                    loader: '@nativescript/webpack/helpers/css2json-loader',
+                    loader: '@nativescript/webpack/dist/loaders/css2json-loader',
                     options: { useForImports: true }
                 },
                 {
diff --git a/demo/app/app.ts b/demo/app/app.ts
@@ -1,5 +1,5 @@
 ﻿import './bundle-config';
-import * as app from '@nativescript/core/application';
+import { Application } from '@nativescript/core';
 
 import { installMixins, themer } from '@nativescript-community/ui-material-core';
 import { install } from '@nativescript-community/ui-material-bottomsheet';
@@ -9,4 +9,4 @@ installMixins();
 // themer.setPrimaryColor('red');
 // themer.setPrimaryColorVariant('#3cff0000');
 
-app.run({ moduleName: 'app-root' });
+Application.run({ moduleName: 'app-root' });
diff --git a/demo/app/examples/bottomnavigationbar-fragment.ts b/demo/app/examples/bottomnavigationbar-fragment.ts
@@ -1,5 +1,5 @@
 import { BottomNavigationBar, TabPressedEventData, TabReselectedEventData, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar';
-import { EventData } from '@nativescript/core/ui/core/view';
+import { EventData } from '@nativescript/core';
 
 export function onbottomNavigationBarLoaded(args: EventData): void {
     const bottomNavigationBar = args.object as BottomNavigationBar;
diff --git a/demo/app/examples/bottomsheetinner1-fragment.ts b/demo/app/examples/bottomsheetinner1-fragment.ts
@@ -1,4 +1,4 @@
-import { EventData, View } from '@nativescript/core/ui/core/view';
+import { EventData, View } from '@nativescript/core';
 
 // let closeCallback
 
diff --git a/demo/app/examples/bottomsheetinner2-fragment.ts b/demo/app/examples/bottomsheetinner2-fragment.ts
@@ -1,5 +1,4 @@
-import { EventData, View } from '@nativescript/core/ui/core/view';
-import { ItemEventData } from '@nativescript/core/ui/list-view/list-view';
+import { EventData, View, ItemEventData } from '@nativescript/core';
 
 export function onTap(args: ItemEventData) {
     const bindingContext = (args.object as View).bindingContext;
diff --git a/demo/app/examples/bottomsheetinner2-fragment.xml b/demo/app/examples/bottomsheetinner2-fragment.xml
@@ -1,12 +1,10 @@
-<StackLayout 
-    xmlns:lv="nativescript-ui-listview"
-    xmlns:mdcr="@nativescript-community/ui-material-ripple" 
-    >
-    <ListView id="listview" height="200" items="{{ dataItems }}" itemTap="onTap" class="list-group" backgroundColor="transparent">
+<StackLayout xmlns:lv="nativescript-ui-listview" xmlns:mdcr="@nativescript-community/ui-material-ripple">
+    <Label text="Please select a value" backgroundColor="lightgrey" class="p-10"></Label>
+    <ListView id="listview" height="200" items="{{ dataItems }}" itemTap="onTap" class="list-group" backgroundColor="grey">
         <ListView.itemTemplate>
             <mdcr:Ripple class="list-group-item item-with-border">
                 <Label text="{{ title }}" textWrap="true" class="title"/>
             </mdcr:Ripple>
         </ListView.itemTemplate>
     </ListView>
-</StackLayout>
+</StackLayout>
diff --git a/demo/app/examples/bottomsheetinner4-fragment.xml b/demo/app/examples/bottomsheetinner4-fragment.xml
@@ -0,0 +1 @@
+<WebView id="webview" height="300" src="https://github.com/nativescript-community/ui-material-components/blob/master/packages/bottomsheet/README.md" backgroundColor="red" padding="0" margin="0"></WebView>
diff --git a/demo/app/examples/bottomsheets-fragment.ts b/demo/app/examples/bottomsheets-fragment.ts
@@ -1,4 +1,4 @@
-import { View } from '@nativescript/core/ui/core/view';
+import { View } from '@nativescript/core';
 
 export function onViewTestLayoutChanged(args) {
     const view: View = <View>args.object;
diff --git a/demo/app/examples/bottomsheets-fragment.xml b/demo/app/examples/bottomsheets-fragment.xml
@@ -1,10 +1,23 @@
 <StackLayout xmlns:mdb="@nativescript-community/ui-material-button">
-    <mdb:Button id="bottomsheet1" text="bottomsheet" tap="{{ onTap }}"/>
-    <mdb:Button id="bottomsheet2" text="bottomsheet listview" tap="{{ onTap }}"/>
-    <mdb:Button id="bottomsheet3" text="bottomsheet without drag to close" tap="{{ onTap }}"/>
+    <ScrollView>
+        <StackLayout>
+            <mdb:Button id="bottomsheet1none" text="bottomsheet buttons\nignoreSafeArea: none" tap="{{ onTap }}" textWrap="true"/>
+            <mdb:Button id="bottomsheet1top" text="bottomsheet buttons\nignoreSafeArea: top (default)" tap="{{ onTap }}" textWrap="true"/>
+            <mdb:Button id="bottomsheet1bottom" text="bottomsheet buttons\nignoreSafeArea: bottom" tap="{{ onTap }}" textWrap="true"/>
+            <mdb:Button id="bottomsheet1both" text="bottomsheet buttons\nignoreSafeArea: both" tap="{{ onTap }}" textWrap="true"/>
+
+            <mdb:Button id="bottomsheet2" text="bottomsheet listview" tap="{{ onTap }}"/>
+            <mdb:Button id="bottomsheet3" text="bottomsheet without drag to close" tap="{{ onTap }}"/>
+
+            <mdb:Button id="bottomsheet4none" text="bottomsheet webview\nignoreSafeArea: none" tap="{{ onTap }}" textWrap="true"/>
+            <mdb:Button id="bottomsheet4top" text="bottomsheet webview\nignoreSafeArea: top (default)" tap="{{ onTap }}" textWrap="true"/>
+            <mdb:Button id="bottomsheet4bottom" text="bottomsheet webview\nignoreSafeArea: bottom" tap="{{ onTap }}" textWrap="true"/>
+            <mdb:Button id="bottomsheet4both" text="bottomsheet webview\nignoreSafeArea: both" tap="{{ onTap }}" textWrap="true"/>
+        </StackLayout>
+    </ScrollView>
 
     <StackLayout backgroundColor="red" xmlns:mdb="@nativescript-community/ui-material-button"  layoutChanged="onViewTestLayoutChanged">
         <mdb:Button id="test1" text="test1"/>
         <mdb:Button id="test2" text="test2"/>
     </StackLayout>
-</StackLayout>
+</StackLayout>
diff --git a/demo/app/examples/dialogcustomview-fragment.ts b/demo/app/examples/dialogcustomview-fragment.ts
@@ -1,5 +1,4 @@
-import { EventData, View } from '@nativescript/core/ui/core/view';
-import { ItemEventData } from '@nativescript/core/ui/list-view/list-view';
+import { EventData, View, ItemEventData } from '@nativescript/core';
 
 export function onTap(args: ItemEventData) {
     const bindingContext = (args.object as View).bindingContext;
diff --git a/demo/app/examples/example-page.ts b/demo/app/examples/example-page.ts
@@ -1,14 +1,9 @@
-import { NavigationButton } from '@nativescript/core/ui/action-bar/action-bar';
-import { EventData, Frame, View } from '@nativescript/core/ui/frame/frame';
+import { NavigationButton, EventData, Frame, View, ObservableArray, StackLayout, Label, Builder } from '@nativescript/core';
 import { alert, AlertDialog, login, prompt } from '@nativescript-community/ui-material-dialogs';
-import { ObservableArray } from '@nativescript/core/data/observable-array/observable-array';
-const builder = require('@nativescript/core/ui/builder');
+
 // importing adds the View augmentation
 import { BottomSheetOptions } from '@nativescript-community/ui-material-bottomsheet';
-import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout/stack-layout';
 import { ActivityIndicator } from '@nativescript-community/ui-material-activityindicator';
-import { Label } from '@nativescript/core/ui/label/label';
-import { Button } from '@nativescript/core/ui/button/button';
 
 function getObjectClass(obj) {
     if (typeof obj !== 'object' || obj === null) return false;
@@ -82,9 +77,47 @@ class Model {
                 }).then(result => console.log('login result', result));
                 break;
             }
-            case 'bottomsheet1': {
+            case 'bottomsheet1none': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner1-fragment',
+                    ignoreBottomSafeArea: false,
+                    ignoreTopSafeArea: false,
+                    context: {},
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
+            case 'bottomsheet1top': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner1-fragment',
+                    ignoreBottomSafeArea: false,
+                    ignoreTopSafeArea: true,
+                    context: {},
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
+            case 'bottomsheet1bottom': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner1-fragment',
+                    ignoreBottomSafeArea: true,
+                    ignoreTopSafeArea: false,
+                    context: {},
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
+            case 'bottomsheet1both': {
                 obj.showBottomSheet({
                     view: 'examples/bottomsheetinner1-fragment',
+                    ignoreBottomSafeArea: true,
+                    ignoreTopSafeArea: true,
                     context: {},
                     closeCallback: objId => {
                         alert(`bottomsheet closed ${objId}`);
@@ -118,6 +151,62 @@ class Model {
                 });
                 break;
             }
+            case 'bottomsheet4none': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner4-fragment',
+                    trackingScrollView: 'webview',
+                    dismissOnDraggingDownSheet: false,
+                    ignoreBottomSafeArea: false,
+                    ignoreTopSafeArea: false,
+                    context: {},
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
+            case 'bottomsheet4top': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner4-fragment',
+                    trackingScrollView: 'webview',
+                    dismissOnDraggingDownSheet: false,
+                    ignoreBottomSafeArea: false,
+                    ignoreTopSafeArea: true,
+                    context: {},
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
+            case 'bottomsheet4bottom': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner4-fragment',
+                    trackingScrollView: 'webview',
+                    dismissOnDraggingDownSheet: false,
+                    ignoreBottomSafeArea: true,
+                    ignoreTopSafeArea: false,
+                    context: {},
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
+            case 'bottomsheet4both': {
+                obj.showBottomSheet({
+                    view: 'examples/bottomsheetinner4-fragment',
+                    trackingScrollView: 'webview',
+                    dismissOnDraggingDownSheet: false,
+                    ignoreBottomSafeArea: true,
+                    ignoreTopSafeArea: true,
+                    context: {},
+                    closeCallback: objId => {
+                        alert(`bottomsheet closed ${objId}`);
+                    }
+                });
+                break;
+            }
             case 'alertdialog':
                 const stack = new StackLayout();
                 stack.orientation = 'horizontal';
@@ -171,10 +260,10 @@ export function onNavigatingTo(args) {
         // some-fragment.xml registered via bundle-config.ts, because it's postfixed with "fragment"
         // so it already exist in bundle.js as module
         console.log('loading xml', `./${exampleTitle}-fragment.xml`);
-        innerComponent = builder.parse(require(`./${exampleTitle}-fragment.xml`) as string, theModule);
+        innerComponent = Builder.parse(require(`./${exampleTitle}-fragment.xml`) as string, theModule);
     } else {
         console.log('loading xml', `${__dirname}/${exampleTitle}-fragment.xml`);
-        innerComponent = builder.load(`${__dirname}/${exampleTitle}-fragment.xml`, theModule);
+        innerComponent = Builder.load(`${__dirname}/${exampleTitle}-fragment.xml`, theModule);
     }
 
     container.addChild(innerComponent);
diff --git a/demo/app/examples/progress-fragment.ts b/demo/app/examples/progress-fragment.ts
@@ -1,4 +1,4 @@
-import { Observable, Page, PropertyChangeData } from '@nativescript/core/ui/page';
+import { Observable, Page, PropertyChangeData } from '@nativescript/core';
 import { Progress } from '@nativescript-community/ui-material-progress';
 
 export function onNavigatingTo(args) {
diff --git a/demo/app/examples/sliders-fragment.ts b/demo/app/examples/sliders-fragment.ts
@@ -1,5 +1,4 @@
-import { Observable, PropertyChangeData } from '@nativescript/core/ui/core/view';
-import { Page } from '@nativescript/core/ui/page';
+import { Observable, PropertyChangeData, Page } from '@nativescript/core';
 import { Slider } from '@nativescript-community/ui-material-slider';
 
 export function onNavigatingTo(args) {
diff --git a/demo/app/home/home-view-model.ts b/demo/app/home/home-view-model.ts
@@ -1,5 +1,4 @@
-import { Frame } from '@nativescript/core/ui/frame/frame';
-import { ItemEventData } from '@nativescript/core/ui/list-view';
+import { Frame, ItemEventData } from '@nativescript/core';
 const examples = ['buttons', 'cardview', 'ripple', 'textfields', 'textviews', 'sliders', 'progress', 'activityindicators', 'dialogs', 'bottomsheets', 'mixins', 'snackbar', 'bottomnavigationbar'];
 
 export class ViewModel {
diff --git a/src/bottomsheet/bottomsheet-common.ts b/src/bottomsheet/bottomsheet-common.ts
@@ -46,7 +46,7 @@ export abstract class ViewWithBottomSheetBase extends View {
             eventName: shownInBottomSheetEvent,
             object: this,
             context: this._bottomSheetContext,
-            closeCallback: this._closeBottomSheetCallback,
+            closeCallback: this._closeBottomSheetCallback
         };
 
         this.notify(args);
@@ -114,7 +114,7 @@ export abstract class ViewWithBottomSheetBase extends View {
             eventName: showingInBottomSheetEvent,
             object: this,
             context: this._bottomSheetContext,
-            closeCallback: this._closeBottomSheetCallback,
+            closeCallback: this._closeBottomSheetCallback
         };
         this.notify(args);
     }
@@ -138,7 +138,7 @@ export abstract class ViewWithBottomSheetBase extends View {
                 options.view instanceof View
                     ? (options.view as ViewWithBottomSheetBase)
                     : (Builder.createViewFromEntry({
-                        moduleName: options.view as string,
+                        moduleName: options.view as string
                     }) as ViewWithBottomSheetBase);
             view._showNativeBottomSheet(this, options);
             return view;
diff --git a/src/bottomsheet/bottomsheet.ios.ts b/src/bottomsheet/bottomsheet.ios.ts
@@ -1,4 +1,6 @@
-import { IOSHelper, Page, Trace, Utils, View, fromObject } from '@nativescript/core';
+import { Application, IOSHelper, Page, Screen, Trace, Utils, View, fromObject } from '@nativescript/core';
+import { iOSNativeHelper } from '@nativescript/core/utils';
+import { iosIgnoreSafeAreaProperty } from '@nativescript/core/ui/core/view/view-common';
 import { applyMixins } from '@nativescript-community/ui-material-core';
 import { BottomSheetOptions } from './bottomsheet';
 import { ViewWithBottomSheetBase } from './bottomsheet-common';
@@ -92,11 +94,11 @@ function layoutView(controller: IUILayoutViewController, owner: View): void {
     const marginLeft = owner.effectiveMarginLeft + position.left;
     const marginRight = owner.effectiveMarginRight;
     const top = marginTop + position.top;
-    const width = owner.getMeasuredWidth();
+    const width = Screen.mainScreen.widthPixels;
     const height = owner.getMeasuredHeight();
-    View.layoutChild(null, owner, position.left, top, position.left + width + marginLeft + marginRight, position.top + height + marginBottom);
+    View.layoutChild(null, owner, marginLeft, top, width - marginLeft - marginRight, position.top + height + marginBottom);
 
-    const effectiveWidth = width + marginLeft + marginRight;
+    const effectiveWidth = width;
     let effectiveHeight = height + top + marginBottom;
     if (controller.ignoreTopSafeArea || controller.ignoreBottomSafeArea) {
         const frame = CGRectMake(
@@ -113,14 +115,40 @@ function layoutView(controller: IUILayoutViewController, owner: View): void {
 
         const adjustedPosition = startPos;
 
+        const orientation = UIDevice.currentDevice.orientation;
+        const isLandscape = Application.orientation() === 'landscape';
+
+        // there are still some issues in landscape Right but they seem to come from N
+
+        owner.iosIgnoreSafeArea = !isLandscape;
         if (controller.ignoreTopSafeArea) {
-            const delta = safeAreaPosition.top - fullscreenPosition.top;
+            let key = 'top';
+            let oppositeKey = 'bottom';
+            if (orientation === UIDeviceOrientation.LandscapeLeft) {
+                key = 'left';
+                oppositeKey = 'right';
+            } else if (orientation === UIDeviceOrientation.LandscapeRight) {
+                key = 'right';
+                oppositeKey = 'left';
+            } else if (orientation === UIDeviceOrientation.PortraitUpsideDown) {
+                key = 'bottom';
+                oppositeKey = 'top';
+            }
+            const delta = safeAreaPosition[key] - fullscreenPosition[key];
             effectiveHeight -= delta;
-            adjustedPosition.bottom -= delta;
-            adjustedPosition.top -= delta;
+            adjustedPosition[oppositeKey] -= delta;
+            adjustedPosition[key] -= delta;
         }
         if (controller.ignoreBottomSafeArea) {
-            const delta = fullscreenPosition.bottom - safeAreaPosition.bottom;
+            let key = 'bottom';
+            if (orientation === UIDeviceOrientation.LandscapeLeft) {
+                key = 'right';
+            } else if (orientation === UIDeviceOrientation.LandscapeRight) {
+                key = 'left';
+            } else if (orientation === UIDeviceOrientation.PortraitUpsideDown) {
+                key = 'top';
+            }
+            const delta = fullscreenPosition[key] - safeAreaPosition[key];
             effectiveHeight -= delta;
         }
         owner.nativeViewProtected.frame = CGRectMake(

Original file line number	Diff line number	Diff line change
`@@ -149,7 +149,7 @@ module.exports = (env, params = {}) => {`
`149`	`149`	`exclude: /\.module\.scss$/,`
`150`	`150`	`use: [`
`151`	`151`	`{`
`152`		`- loader: '@nativescript/webpack/helpers/css2json-loader',`
	`152`	`+ loader: '@nativescript/webpack/dist/loaders/css2json-loader',`
`153`	`153`	`options: { useForImports: true }`
`154`	`154`	`},`
`155`	`155`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { EventData, View } from '@nativescript/core/ui/core/view';`
	`1`	`+import { EventData, View } from '@nativescript/core';`
`2`	`2`
`3`	`3`	`// let closeCallback`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<WebView id="webview" height="300" src="https://github.com/nativescript-community/ui-material-components/blob/master/packages/bottomsheet/README.md" backgroundColor="red" padding="0" margin="0"></WebView>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { View } from '@nativescript/core/ui/core/view';`
	`1`	`+import { View } from '@nativescript/core';`
`2`	`2`
`3`	`3`	`export function onViewTestLayoutChanged(args) {`
`4`	`4`	`const view: View = <View>args.object;`