feat: button longpress handler (#30200)

* feat: button longpress handler

* review suggestion

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/packages/ui/lib/src/components/column_button.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:core';
 
 import 'package:flutter/material.dart';
 import 'package:immich_ui/src/constants.dart';
@@ -8,6 +9,7 @@ class ImmichColumnButton extends StatefulWidget {
   final IconData icon;
   final String label;
   final FutureOr<void> Function() onPressed;
+  final FutureOr<void> Function()? onLongPress;
   final bool disabled;
   final bool? loading;
 
@@ -16,6 +18,7 @@ class ImmichColumnButton extends StatefulWidget {
     required this.icon,
     required this.label,
     required this.onPressed,
+    this.onLongPress,
     this.disabled = false,
     this.loading,
   });
@@ -25,26 +28,44 @@ class ImmichColumnButton extends StatefulWidget {
 }
 
 class _ImmichColumnButtonState extends State<ImmichColumnButton> {
-  bool _loading = false;
+  bool _running = false;
-  bool get _isLoading => widget.loading ?? _loading;
+  bool get _isLoading => widget.loading ?? _running;
+  bool get _isDisabled => widget.disabled || _isLoading;
 
-  Future<void> _onPressed() async {
+  Future<void> _runAction(FutureOr<void> Function() action) async {
-    setState(() => _loading = true);
+    setState(() => _running = true);
     try {
-      await widget.onPressed();
+      await action();
     } finally {
       if (mounted) {
-        setState(() => _loading = false);
+        setState(() => _running = false);
       }
     }
   }
 
+  Future<void>? _onPressed() {
+    if (_isDisabled) {
+      return null;
+    }
+
+    return _runAction(widget.onPressed);
+  }
+
+  Future<void>? _onLongPress() {
+    if (_isDisabled || widget.onLongPress == null) {
+      return null;
+    }
+
+    return _runAction(widget.onLongPress!);
+  }
+
   @override
   Widget build(BuildContext context) {
     final foreground = context.colorOverride ?? Theme.of(context).colorScheme.onSurface;
 
     return TextButton(
-      onPressed: widget.disabled || _isLoading ? null : _onPressed,
+      onPressed: _onPressed,
+      onLongPress: _onLongPress,
       style: TextButton.styleFrom(
         foregroundColor: foreground,
         padding: const .symmetric(horizontal: ImmichSpacing.sm, vertical: ImmichSpacing.md),

mobile/packages/ui/lib/src/components/icon_button.dart

@@ -7,6 +7,7 @@ import 'package:immich_ui/src/internal.dart';
 class ImmichIconButton extends StatefulWidget {
   final IconData icon;
   final FutureOr<void> Function() onPressed;
+  final FutureOr<void> Function()? onLongPress;
   final ImmichVariant variant;
   final ImmichColor color;
   final bool disabled;
@@ -16,6 +17,7 @@ class ImmichIconButton extends StatefulWidget {
     super.key,
     required this.icon,
     required this.onPressed,
+    this.onLongPress,
     this.color = .primary,
     this.variant = .filled,
     this.disabled = false,
@@ -27,20 +29,37 @@ class ImmichIconButton extends StatefulWidget {
 }
 
 class _ImmichIconButtonState extends State<ImmichIconButton> {
-  bool _loading = false;
+  bool _running = false;
-  bool get _isLoading => widget.loading ?? _loading;
+  bool get _isLoading => widget.loading ?? _running;
+  bool get _isDisabled => widget.disabled || _isLoading;
 
-  Future<void> _onPressed() async {
+  Future<void> _runAction(FutureOr<void> Function() action) async {
-    setState(() => _loading = true);
+    setState(() => _running = true);
     try {
-      await widget.onPressed();
+      await action();
     } finally {
       if (mounted) {
-        setState(() => _loading = false);
+        setState(() => _running = false);
       }
     }
   }
 
+  Future<void>? _onPressed() {
+    if (_isDisabled) {
+      return null;
+    }
+
+    return _runAction(widget.onPressed);
+  }
+
+  Future<void>? _onLongPress() {
+    if (_isDisabled || widget.onLongPress == null) {
+      return null;
+    }
+
+    return _runAction(widget.onLongPress!);
+  }
+
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
@@ -73,7 +92,8 @@ class _ImmichIconButtonState extends State<ImmichIconButton> {
               child: CircularProgressIndicator(strokeWidth: ImmichBorderWidth.md),
             )
           : Icon(widget.icon),
-      onPressed: widget.disabled || _isLoading ? null : _onPressed,
+      onPressed: _onPressed,
+      onLongPress: _onLongPress,
       style: IconButton.styleFrom(backgroundColor: background, foregroundColor: foreground),
     );
   }

mobile/packages/ui/lib/src/components/text_button.dart

@@ -7,6 +7,7 @@ class ImmichTextButton extends StatefulWidget {
   final String labelText;
   final IconData? icon;
   final FutureOr<void> Function() onPressed;
+  final FutureOr<void> Function()? onLongPress;
   final ImmichVariant variant;
   final bool expanded;
   final bool disabled;
@@ -17,6 +18,7 @@ class ImmichTextButton extends StatefulWidget {
     required this.labelText,
     this.icon,
     required this.onPressed,
+    this.onLongPress,
     this.variant = .filled,
     this.expanded = true,
 
@@ -29,20 +31,37 @@ class ImmichTextButton extends StatefulWidget {
 }
 
 class _ImmichTextButtonState extends State<ImmichTextButton> {
-  bool _loading = false;
+  bool _running = false;
-  bool get _isLoading => widget.loading ?? _loading;
+  bool get _isLoading => widget.loading ?? _running;
+  bool get _isDisabled => widget.disabled || _isLoading;
 
-  Future<void> _onPressed() async {
+  Future<void> _runAction(FutureOr<void> Function() action) async {
-    setState(() => _loading = true);
+    setState(() => _running = true);
     try {
-      await widget.onPressed();
+      await action();
     } finally {
       if (mounted) {
-        setState(() => _loading = false);
+        setState(() => _running = false);
       }
     }
   }
 
+  Future<void>? _onPressed() {
+    if (_isDisabled) {
+      return null;
+    }
+
+    return _runAction(widget.onPressed);
+  }
+
+  Future<void>? _onLongPress() {
+    if (_isDisabled || widget.onLongPress == null) {
+      return null;
+    }
+
+    return _runAction(widget.onLongPress!);
+  }
+
   @override
   Widget build(BuildContext context) {
     final Widget? icon = _isLoading
@@ -59,11 +78,22 @@ class _ImmichTextButtonState extends State<ImmichTextButton> {
       style: const .new(fontSize: ImmichTextSize.body, fontWeight: .bold),
     );
     final style = ElevatedButton.styleFrom(padding: const .symmetric(vertical: ImmichSpacing.md));
-    final onPressed = widget.disabled || _isLoading ? null : _onPressed;
 
     final button = switch (widget.variant) {
-      ImmichVariant.filled => ElevatedButton.icon(style: style, onPressed: onPressed, icon: icon, label: label),
+      ImmichVariant.filled => ElevatedButton.icon(
-      ImmichVariant.ghost => TextButton.icon(style: style, onPressed: onPressed, icon: icon, label: label),
+        style: style,
+        onPressed: _onPressed,
+        onLongPress: _onLongPress,
+        icon: icon,
+        label: label,
+      ),
+      ImmichVariant.ghost => TextButton.icon(
+        style: style,
+        onPressed: _onPressed,
+        onLongPress: _onLongPress,
+        icon: icon,
+        label: label,
+      ),
     };
 
     if (widget.expanded) {