Merge branch 'main' into scroll-notifier

Author: snehmehta

Diff for: integration_test/framework/test_helper.dart

@@ -17,9 +17,11 @@ class TestHelper {
   /// the result but no longer available for the next run, causing the
   /// subsequent tests to hang. For this reason, call this in your Test class's
   /// setupApp() once before running the tests.
-  static Future<EnsembleConfig> setupApp({required String appName}) async {
-    I18nProps i18nProps = I18nProps('en', 'en', false);
-    i18nProps.path = 'ensemble/i18n';
+  static Future<EnsembleConfig> setupApp(
+      {required String appName, String? forcedLocale}) async {
+    I18nProps i18nProps =
+        I18nProps('en', 'en', false, forcedLocale: forcedLocale);
+    i18nProps.path = 'integration_test/local/$appName/i18n';
 
     EnsembleConfig config = EnsembleConfig(
         definitionProvider: LocalDefinitionProvider(

Diff for: integration_test/local/customWidget_test.dart

@@ -0,0 +1,52 @@
+import 'package:ensemble/ensemble.dart';
+import 'package:ensemble/widget/button.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import '../framework/test_helper.dart';
+
+void main() {
+  late EnsembleConfig config;
+  setUpAll(() async {
+    config = await TestHelper.setupApp(appName: 'widgets');
+  });
+
+  group('Custom Widgets', () {
+    testWidgets("test basic widget features", (tester) async {
+      await TestHelper.loadScreen(tester, 'Custom Widget', config);
+
+      // test visibility
+      expect(find.text('I am visible'), findsOneWidget);
+      expect(find.text('I am really visible'), findsOneWidget);
+      expect(find.text('I am invisible'), findsNothing);
+
+      await tester.tap(find.descendant(
+          of: find.byType(Button), matching: find.text('Toggle Visibility')));
+      await tester.pumpAndSettle();
+      expect(find.text('I am visible'), findsNothing);
+      expect(find.text('I am really visible'), findsNothing);
+      expect(find.text('I am invisible'), findsOneWidget);
+
+      // test flex and its modification
+
+      // equal distribution with default flex
+      expect(tester.getSize(find.text("hello")).width,
+          tester.getSize(find.text("world")).width);
+
+      // changing flex under FlexBox is a problem because the parent FlexBox already
+      // make the child Expanded if not specified, so if we update it later, there will
+      // be duplicate Expanded.
+      // ALmost like we want to travel up to the Flexbox and ask it to refresh itself,
+      // but that is not recommended. TODO: figure this out
+      // change "world" to 2x
+      // await tester.tap(find.descendant(
+      //     of: find.byType(Button), matching: find.text('Change Flex')));
+      // await tester.pumpAndSettle();
+      // expect(tester.getSize(find.text("hello")).width, 100);
+      // expect(tester.getSize(find.text("world")).width, 200);
+
+      expect(tester.getSize(find.text("1x")).width, 100);
+      expect(tester.getSize(find.text("2x")).width, 200);
+    });
+  });
+}

Diff for: integration_test/local/defaultApp/Widget Bindings.yaml renamed to integration_test/local/defaultApp/Custom Widget.yaml

@@ -22,6 +22,9 @@ View:
 
 Custom:
   inputs: [txt]
+  onLoad:
+    showToast:
+      message: Hello ${txt}
   body:
     Column:
       children:
@@ -35,6 +38,13 @@ Custom:
 
 Custom2:
   inputs: [text]
+  onLoad: |-
+    setByJS.text = "Hi " + text;
+
   body:
-    Text:
-      text: "Custom Custom Widget: ${text}"
+    Column:
+      children:
+        - Text:
+            text: "Custom Custom Widget: ${text}"
+        - Text:
+            id: setByJS

Diff for: integration_test/local/defaultApp_test.dart

@@ -24,15 +24,22 @@ void main() {
     /// test that binding to a TextInput works properly in the same scope
     /// and also in a custom widget's scope
     testWidgets("Bindings to widget's value", (tester) async {
-      await TestHelper.loadScreen(tester, 'Widget Bindings', config);
-      // await tester.pumpAndSettle();
+      await TestHelper.loadScreen(tester, 'Custom Widget', config);
 
       // TextInput has initial value of 'first'
       // so first make sure our EnsembleText is correctly bind to that
       Finder text = find.descendant(
           of: find.byType(EnsembleText), matching: find.text('first'));
       expect(text, findsOneWidget);
 
+      // Custom Widget's onLoad can access inputs
+      // search for toast message
+      await tester.pumpAndSettle();
+      expect(find.text('Hello first'), findsOneWidget);
+
+      // ensure Nested widget's onLoad can access inputs via JS too
+      expect(find.text('Hi first'), findsOneWidget);
+
       // Custom Widget's text should also bind to the same value
       Finder customText = find.descendant(
           of: find.byType(EnsembleText),
@@ -68,6 +75,9 @@ void main() {
           of: find.byType(EnsembleText),
           matching: find.text('Custom Custom Widget: second'));
       expect(customCustomText, findsOneWidget);
+
+      // ensure onLoad never run again and still retain original value
+      expect(find.text('Hi first'), findsOneWidget);
     });
 
     /// test bindings to API is working properly

Diff for: integration_test/local/dialog/Toast.yaml renamed to integration_test/local/dialogsAndToast/Toast.yaml

@@ -8,7 +8,7 @@ import '../framework/test_helper.dart';
 void main() {
   late EnsembleConfig config;
   setUpAll(() async {
-    config = await TestHelper.setupApp(appName: 'dialog');
+    config = await TestHelper.setupApp(appName: 'dialogsAndToast');
   });
 
   group('Testing Toast', () {

Diff for: integration_test/local/dialog_test.dart renamed to integration_test/local/dialogsAndToast_test.dart

@@ -0,0 +1,16 @@
+View:
+  styles:
+    useSafeArea: true
+  body:
+    Column:
+      children:
+        - TextInput:
+            id: myName
+            value: Peter
+        - Text:
+            text: [email protected] ${myName.value}
+        - Button:
+            label: Show Toast
+            onTap:
+              showToast:
+                message: [email protected] [email protected] ${myName.value}

Diff for: integration_test/local/translation/Basic.yaml

@@ -0,0 +1,2 @@
+home:
+  hello: Hello

Diff for: integration_test/local/translation/i18n/en.yaml

@@ -0,0 +1,2 @@
+home:
+  hello: Hola

Diff for: integration_test/local/translation/i18n/es.yaml

@@ -0,0 +1,77 @@
+View:
+  styles:
+    useSafeArea: true
+  body:
+    Column:
+      children:
+        # visibility test
+        - TextWidget:
+            id: visibleWidget
+            inputs:
+              text: I am visible
+        - TextWidget:
+            id: reallyVisibleWidget
+            inputs:
+              text: I am really visible
+            styles:
+              visible: true
+        - TextWidget:
+            id: invisibleWidget
+            inputs:
+              text: I am invisible
+            styles:
+              visible: false
+        - Button:
+            label: Toggle Visibility
+            onTap: |-
+              visibleWidget.visible = false;
+              reallyVisibleWidget.visible = false;
+              invisibleWidget.visible = true;
+
+        # default flex - equal distribution
+        - FlexRow:
+            styles:
+              width: 300
+            children:
+              - TextWidget:
+                  inputs:
+                    text: hello
+              - TextWidget:
+                  id: world
+                  inputs:
+                    text: world
+
+# Doesn't work well yet. See note in the test
+#        - Button:
+#            label: Change Flex
+#            onTap: |-
+#              world.flex = 2;
+
+        - FlexRow:
+            styles:
+              width: 300
+            children:
+              - TextWidget:
+                  inputs:
+                    text: 1x
+              - TextWidget:
+                  inputs:
+                    text: 2x
+                  styles:
+                    flex: 2
+
+
+TextWidget:
+  inputs: [text]
+  body:
+    Text:
+      text: ${text}
+
+Rectangle:
+  inputs: [color]
+  body:
+    Shape:
+      type: rectangle
+      styles:
+        height: 50
+        backgroundColor: ${color}

Diff for: integration_test/local/widgets/Custom Widget.yaml

@@ -0,0 +1,33 @@
+import 'package:ensemble/ensemble.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'framework/test_helper.dart';
+
+void main() {
+  group('Default English locale', () {
+    testWidgets("default locale should work properly", (tester) async {
+      EnsembleConfig config = await TestHelper.setupApp(appName: 'translation');
+      await TestHelper.loadScreen(tester, 'Basic', config);
+
+      expect(find.text("Hello Peter"), findsOneWidget);
+
+      await tester.tap(find.text("Show Toast"));
+      await tester.pumpAndSettle();
+      expect(find.text("Hello Hello Peter"), findsOneWidget);
+    });
+  });
+
+  group('Forcing Spanish locale', () {
+    testWidgets("forcing Spanish locale should work", (tester) async {
+      EnsembleConfig config =
+          await TestHelper.setupApp(appName: 'translation', forcedLocale: 'es');
+      await TestHelper.loadScreen(tester, 'Basic', config);
+
+      expect(find.text("Hola Peter"), findsOneWidget);
+
+      await tester.tap(find.text("Show Toast"));
+      await tester.pumpAndSettle();
+      expect(find.text("Hola Hola Peter"), findsOneWidget);
+    });
+  });
+}

Diff for: integration_test/translation_test.dart

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:ensemble/framework/action.dart';
 import 'package:ensemble/framework/data_context.dart';
 import 'package:ensemble/framework/error_handling.dart';
@@ -21,6 +22,8 @@ class ShowBottomSheetAction extends EnsembleAction {
   });
 
   static const defaultTopBorderRadius = Radius.circular(16);
+  static const dragHandleHeight = 3.0;
+  static const dragHandleVerticalMargin = 10.0;
 
   final Map payload;
   final dynamic body;
@@ -85,6 +88,14 @@ class ShowBottomSheetAction extends EnsembleAction {
       min: 0,
       max: 1);
 
+  bool isSnap(scopeManager) =>
+      Utils.optionalBool(
+          eval(payload["scrollOptions"]?["snap"], scopeManager)) ??
+      false;
+
+  List<double>? additionalSnaps(scopeManager) => Utils.getList<double>(
+      eval(payload["scrollOptions"]?["additionalViewportSnaps"], scopeManager));
+
   @override
   Future<dynamic> execute(BuildContext context, ScopeManager scopeManager) {
     if (body != null) {
@@ -123,7 +134,21 @@ class ShowBottomSheetAction extends EnsembleAction {
   }
 
   Widget getBodyWidget(ScopeManager scopeManager, BuildContext context) {
-    var widget = scopeManager.buildWidgetFromDefinition(body);
+    // We have to handle the BottomSheet's padding directly around the widget,
+    // such that it is inside the Scrollable area to be able to move up and down.
+    var sheetPadding = padding(scopeManager) ?? EdgeInsets.zero;
+
+    // account for the drag handle
+    if (showDragHandle(scopeManager)) {
+      var additionalPaddingTop =
+          dragHandleVerticalMargin * 2 + dragHandleHeight;
+      sheetPadding =
+          sheetPadding.copyWith(top: sheetPadding.top + additionalPaddingTop);
+    }
+
+    var widget = Padding(
+        padding: sheetPadding,
+        child: scopeManager.buildWidgetFromDefinition(body));
 
     if (isScrollable(scopeManager) == true) {
       // fix the viewport numbers if used incorrectly
@@ -140,14 +165,22 @@ class ShowBottomSheetAction extends EnsembleAction {
         initialViewport = (minViewport + maxViewport) / 2.0;
       }
 
+      bool useSnap = isSnap(scopeManager);
+      List<double>? snaps = additionalSnaps(scopeManager)
+          ?.where((item) => item > minViewport && item < maxViewport)
+          .toList();
+      snaps?.sort();
+
       // On platforms with a mouse (Web/desktop), there is no min/maxViewport due to platform consistency,
       // so the height will be fixed to initialViewport, and content will just scroll within it.
       // https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag
       return DraggableScrollableSheet(
-          expand: false,
+          expand: true,
           minChildSize: minViewport,
           maxChildSize: maxViewport,
           initialChildSize: initialViewport,
+          snap: useSnap,
+          snapSizes: useSnap ? snaps : null,
           builder: (context, scrollController) =>
               buildRootContainer(scopeManager, context,
                   child: SingleChildScrollView(
@@ -164,8 +197,6 @@ class ShowBottomSheetAction extends EnsembleAction {
   Widget buildRootContainer(ScopeManager scopeManager, BuildContext context,
       {required Widget child, required bool isScrollable}) {
     Widget rootWidget = Container(
-        margin: margin(scopeManager),
-        padding: padding(scopeManager),
         decoration: BoxDecoration(
             color: getBackgroundColor(scopeManager) ??
                 Theme.of(context).dialogBackgroundColor,
@@ -185,14 +216,17 @@ class ShowBottomSheetAction extends EnsembleAction {
         children: [rootWidget, _buildDragHandle(scopeManager)],
       );
     }
-    return rootWidget;
+    // This is the Margin of the bottom sheet.
+    // Padding will be handled separately inside the scrollable area
+    return Padding(
+        padding: margin(scopeManager) ?? EdgeInsets.zero, child: rootWidget);
   }
 
   Widget _buildDragHandle(ScopeManager scopeManager) {
     return Container(
-      margin: const EdgeInsets.only(top: 10),
+      margin: const EdgeInsets.only(top: dragHandleVerticalMargin),
       width: 32,
-      height: 3,
+      height: dragHandleHeight,
       decoration: BoxDecoration(
         color: dragHandleColor(scopeManager) ?? Colors.grey[500],
         borderRadius: BorderRadius.circular(12),