From 051240a2fbdbd85f0934379a2b36c994b8d84826 Mon Sep 17 00:00:00 2001
From: Jaylen Bian <minecoder@163.com>
Date: Mon, 9 Aug 2021 10:48:45 +0800
Subject: [PATCH] [infra_ui][overlay] Implement list overlay

---
 .../packages/flowy_infra_ui/lib/basis.dart    |  3 +
 .../lib/src/flowy_overlay/list_overlay.dart   | 99 +++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart

diff --git a/app_flowy/packages/flowy_infra_ui/lib/basis.dart b/app_flowy/packages/flowy_infra_ui/lib/basis.dart
index 3758072c99..59a2bc6533 100644
--- a/app_flowy/packages/flowy_infra_ui/lib/basis.dart
+++ b/app_flowy/packages/flowy_infra_ui/lib/basis.dart
@@ -3,3 +3,6 @@ import 'package:flutter/material.dart';
 // MARK: - Shared Builder
 
 typedef WidgetBuilder = Widget Function();
+
+typedef IndexedCallback = void Function(int index);
+typedef IndexedValueCallback<T> = void Function(T value, int index);
diff --git a/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart b/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart
new file mode 100644
index 0000000000..61d7ec8fe4
--- /dev/null
+++ b/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart
@@ -0,0 +1,99 @@
+import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
+import 'package:flutter/material.dart';
+
+class ListOverlay extends StatelessWidget {
+  const ListOverlay({
+    Key? key,
+    required this.itemBuilder,
+    this.itemCount,
+    this.controller,
+    this.maxWidth = double.infinity,
+    this.maxHeight = double.infinity,
+  }) : super(key: key);
+
+  final IndexedWidgetBuilder itemBuilder;
+  final int? itemCount;
+  final ScrollController? controller;
+  final double maxWidth;
+  final double maxHeight;
+
+  static void showWithAnchor(
+    BuildContext context, {
+    required String identifier,
+    required IndexedWidgetBuilder itemBuilder,
+    int? itemCount,
+    ScrollController? controller,
+    double maxWidth = double.infinity,
+    double maxHeight = double.infinity,
+    required BuildContext anchorContext,
+    AnchorDirection? anchorDirection,
+    FlowyOverlayDelegate? delegate,
+    OverlapBehaviour? overlapBehaviour,
+  }) {
+    FlowyOverlay.of(context).insertWithAnchor(
+      widget: ListOverlay(
+        itemBuilder: itemBuilder,
+        itemCount: itemCount,
+        controller: controller,
+        maxWidth: maxWidth,
+        maxHeight: maxHeight,
+      ),
+      identifier: identifier,
+      anchorContext: anchorContext,
+      anchorDirection: anchorDirection,
+      delegate: delegate,
+      overlapBehaviour: overlapBehaviour,
+    );
+  }
+
+  static void showWithRect(
+    BuildContext context, {
+    required BuildContext anchorContext,
+    required String identifier,
+    required IndexedWidgetBuilder itemBuilder,
+    int? itemCount,
+    ScrollController? controller,
+    double maxWidth = double.infinity,
+    double maxHeight = double.infinity,
+    required Offset anchorPosition,
+    required Size anchorSize,
+    AnchorDirection? anchorDirection,
+    FlowyOverlayDelegate? delegate,
+    OverlapBehaviour? overlapBehaviour,
+  }) {
+    FlowyOverlay.of(context).insertWithRect(
+      widget: ListOverlay(
+        itemBuilder: itemBuilder,
+        itemCount: itemCount,
+        controller: controller,
+        maxWidth: maxWidth,
+        maxHeight: maxHeight,
+      ),
+      identifier: identifier,
+      anchorPosition: anchorPosition,
+      anchorSize: anchorSize,
+      anchorDirection: anchorDirection,
+      delegate: delegate,
+      overlapBehaviour: overlapBehaviour,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      constraints: BoxConstraints.tight(Size(maxWidth, maxHeight)),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: const BorderRadius.all(Radius.circular(6)),
+        boxShadow: [
+          BoxShadow(color: Colors.black.withOpacity(0.1), spreadRadius: 1, blurRadius: 20.0),
+        ],
+      ),
+      child: ListView.builder(
+        shrinkWrap: true,
+        itemBuilder: itemBuilder,
+        itemCount: itemCount,
+      ),
+    );
+  }
+}