Improve FResizable (#128)

* Remove select and resize behavior * WIP * Simplify a little * Simplify even more * Prepare to implement cascading resizable properly * Add cascading resizable controller * Replace slider with divider * Add golden tests for resizable * Implement shortcuts * Update FResizable's API docs * Finish documentation * Commit from GitHub Actions (Forui Samples Presubmit) * Commit from GitHub Actions (Forui Presubmit) * Fix failing tests * Fix PR issues --------- Co-authored-by: Pante <[email protected]>
forus-labs · Aug 1, 2024 · f645218 · f645218
1 parent 2d55a2b
commit f645218
Show file tree

Hide file tree

Showing 35 changed files with 1,617 additions and 1,403 deletions.
diff --git a/docs/pages/docs/resizable.mdx b/docs/pages/docs/resizable.mdx
diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md
@@ -1,9 +1,9 @@
 ## Next
 
 ### Additions
-* Add `FAvatar`
+* Add `FAvatar`.
 * **Breaking:** Add `FCalendarEntryStyle.focusedBorderColor`. This only affects users that customized `FCalendarEntryStyle`.
-* Add `FResizable`
+* Add `FResizable`.
 
 ### Changes
 * Change number of years displayed per page in `FCalendar` from 12 to 15.

diff --git a/forui/example/ios/Runner.xcodeproj/project.pbxproj b/forui/example/ios/Runner.xcodeproj/project.pbxproj
@@ -477,7 +477,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.foruslabs.forui.samples.samples;
+				PRODUCT_BUNDLE_IDENTIFIER = com.foruslabs.forui.example;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
@@ -660,7 +660,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.foruslabs.forui.samples.samples;
+				PRODUCT_BUNDLE_IDENTIFIER = com.foruslabs.forui.example;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -683,7 +683,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.foruslabs.forui.samples.samples;
+				PRODUCT_BUNDLE_IDENTIFIER = com.foruslabs.forui.example;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;

diff --git a/forui/example/ios/Runner/Info.plist b/forui/example/ios/Runner/Info.plist
@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<key>CFBundleDisplayName</key>
@@ -24,6 +26,8 @@
 	<string>$(FLUTTER_BUILD_NUMBER)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>UIApplicationSupportsIndirectInputEvents</key>
+	<true/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
@@ -41,9 +45,5 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
-	<key>UIApplicationSupportsIndirectInputEvents</key>
-	<true/>
 </dict>
 </plist>
diff --git a/forui/example/lib/example.dart b/forui/example/lib/example.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:forui/forui.dart';
+import 'package:intl/intl.dart';
 
 class Example extends StatefulWidget {
   const Example({super.key});
@@ -18,12 +19,81 @@ class _ExampleState extends State<Example> {
   @override
   Widget build(BuildContext context) => Column(
         children: [
-          FCalendar(
-            controller: FCalendarValueController(),
-            initialType: FCalendarPickerType.yearMonth,
-            start: DateTime.utc(2000),
-            end: DateTime.utc(2030),
+          DecoratedBox(
+            decoration: BoxDecoration(
+              border: Border.all(color: context.theme.colorScheme.border),
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: FResizable(
+              controller: FResizableController.cascade(),
+              axis: Axis.vertical,
+              divider: FResizableDivider.dividerThumb,
+              crossAxisExtent: 300,
+              children: [
+                FResizableRegion(
+                  initialExtent: 200,
+                  minExtent: 100,
+                  builder: (_, data, __) => Label(data: data, icon: FAssets.icons.sunrise, label: 'Morning'),
+                ),
+                FResizableRegion(
+                  initialExtent: 200,
+                  minExtent: 100,
+                  builder: (_, data, __) => Label(data: data, icon: FAssets.icons.sun, label: 'Afternoon'),
+                ),
+                FResizableRegion(
+                  initialExtent: 200,
+                  minExtent: 100,
+                  builder: (_, data, __) => Label(data: data, icon: FAssets.icons.sunset, label: 'Evening'),
+                ),
+              ],
+            ),
           ),
         ],
       );
 }
+
+class Label extends StatelessWidget {
+  static final DateFormat format = DateFormat.jm(); // Requires package:intl
+
+  final FResizableRegionData data;
+  final SvgAsset icon;
+  final String label;
+
+  const Label({required this.data, required this.icon, required this.label, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final FThemeData(:colorScheme, :typography) = context.theme;
+    final start = DateTime.fromMillisecondsSinceEpoch(
+      (data.offsetPercentage.min * Duration.millisecondsPerDay).round(),
+      isUtc: true,
+    );
+
+    final end = DateTime.fromMillisecondsSinceEpoch(
+      (data.offsetPercentage.max * Duration.millisecondsPerDay).round(),
+      isUtc: true,
+    );
+
+    return Align(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              icon(height: 15, colorFilter: ColorFilter.mode(colorScheme.foreground, BlendMode.srcIn)),
+              const SizedBox(width: 3),
+              Text(label, style: typography.sm.copyWith(color: colorScheme.foreground)),
+            ],
+          ),
+          const SizedBox(height: 5),
+          Text(
+            '${format.format(start)} - ${format.format(end)}',
+            style: typography.sm.copyWith(color: colorScheme.foreground),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/forui/example/pubspec.lock b/forui/example/pubspec.lock
@@ -450,18 +450,18 @@ packages:
     dependency: transitive
     description:
       name: path_provider
-      sha256: c9e7d3a4cd1410877472158bee69963a4579f78b68c65a2b7d40d1a7a88bb161
+      sha256: fec0d61223fba3154d87759e3cc27fe2c8dc498f6386c6d6fc80d1afdd1bf378
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   path_provider_android:
     dependency: transitive
     description:
       name: path_provider_android
-      sha256: "30c5aa827a6ae95ce2853cdc5fe3971daaac00f6f081c419c013f7f57bff2f5e"
+      sha256: "490539678396d4c3c0b06efdaab75ae60675c3e0c66f72bc04c2e2c1e0e2abeb"
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.7"
+    version: "2.2.9"
   path_provider_foundation:
     dependency: transitive
     description:

diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart
@@ -58,6 +58,9 @@ final class FThemeData with Diagnosticable {
   /// The progress styles.
   final FProgressStyle progressStyle;
 
+  /// The resizable style.
+  final FResizableStyle resizableStyle;
+
   /// The tabs styles.
   final FTabsStyle tabsStyle;
 
@@ -92,6 +95,7 @@ final class FThemeData with Diagnosticable {
     required this.dialogStyle,
     required this.headerStyle,
     required this.progressStyle,
+    required this.resizableStyle,
     required this.tabsStyle,
     required this.textFieldStyle,
     required this.scaffoldStyle,
@@ -124,6 +128,7 @@ final class FThemeData with Diagnosticable {
       dialogStyle: FDialogStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       headerStyle: FHeaderStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
       progressStyle: FProgressStyle.inherit(colorScheme: colorScheme, style: style),
+      resizableStyle: FResizableStyle.inherit(colorScheme: colorScheme),
       tabsStyle: FTabsStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       textFieldStyle: FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       scaffoldStyle: FScaffoldStyle.inherit(colorScheme: colorScheme, style: style),
@@ -164,6 +169,7 @@ final class FThemeData with Diagnosticable {
     FDialogStyle? dialogStyle,
     FHeaderStyles? headerStyle,
     FProgressStyle? progressStyle,
+    FResizableStyle? resizableStyle,
     FTabsStyle? tabsStyle,
     FTextFieldStyle? textFieldStyle,
     FScaffoldStyle? scaffoldStyle,
@@ -185,6 +191,7 @@ final class FThemeData with Diagnosticable {
         dialogStyle: dialogStyle ?? this.dialogStyle,
         headerStyle: headerStyle ?? this.headerStyle,
         progressStyle: progressStyle ?? this.progressStyle,
+        resizableStyle: resizableStyle ?? this.resizableStyle,
         tabsStyle: tabsStyle ?? this.tabsStyle,
         textFieldStyle: textFieldStyle ?? this.textFieldStyle,
         scaffoldStyle: scaffoldStyle ?? this.scaffoldStyle,
@@ -210,6 +217,7 @@ final class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('dialogStyle', dialogStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('headerStyle', headerStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('progressStyle', progressStyle))
+      ..add(DiagnosticsProperty('resizableStyle', resizableStyle))
       ..add(DiagnosticsProperty('tabsStyle', tabsStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('textFieldStyle', textFieldStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('scaffoldStyle', scaffoldStyle, level: DiagnosticLevel.debug))
@@ -236,6 +244,7 @@ final class FThemeData with Diagnosticable {
           dialogStyle == other.dialogStyle &&
           headerStyle == other.headerStyle &&
           progressStyle == other.progressStyle &&
+          resizableStyle == other.resizableStyle &&
           tabsStyle == other.tabsStyle &&
           textFieldStyle == other.textFieldStyle &&
           scaffoldStyle == other.scaffoldStyle &&
@@ -258,6 +267,7 @@ final class FThemeData with Diagnosticable {
       dialogStyle.hashCode ^
       headerStyle.hashCode ^
       progressStyle.hashCode ^
+      resizableStyle.hashCode ^
       tabsStyle.hashCode ^
       textFieldStyle.hashCode ^
       scaffoldStyle.hashCode ^