Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: example of popover

Browse Source
This commit is contained in:
Vincent Chan 2022-09-01 15:28:16 +08:00
parent ac91b25219
commit 9574f282e7
4 changed files with 74 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/app_flowy/packages/appflowy_popover/README.md
View File

@ -1,39 +1,39 @@
<!--
<!--
This README describes the package. If you publish this package to pub.dev,
this README's contents appear on the landing page for your package.
For information about how to write a good package README, see the guide for
[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
For general information about developing packages, see the Dart guide for
[creating packages](https://dart.dev/guides/libraries/create-library-packages)
and the Flutter guide for
[developing packages and plugins](https://flutter.dev/developing-packages).
[developing packages and plugins](https://flutter.dev/developing-packages).
-->
# AppFlowy Popover
TODO: Put a short description of the package here that helps potential users
know whether this package might be useful for them.
## Features
TODO: List what your package can do. Maybe include images, gifs, or videos.
> A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal. A nonmodal popover is dismissed by tapping another part of the screen or a button on the popover. A modal popover is dismissed by tapping a Cancel or other button on the popover.
## Getting started
Source: [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/).
TODO: List prerequisites and provide or point to information on how to
start using the package.
- Basic popover style
- Nested popover support
- Exclusive popover API
## Usage
TODO: Include short and useful examples for package users. Add longer examples
to `/example` folder.
## Example
```dart
const like = 'sample';
Popover(
triggerActions: PopoverTriggerActionFlags.click,
child: TextButton(child: Text("Popover"), onPressed: () {}),
popupBuilder(BuildContext context) {
return PopoverMenu();
},
);
```
## Additional information
TODO: Tell users more about the package: where to find more information, how to
contribute to the package, how to file issues, what response they can expect
from the package authors, and more.

7
frontend/app_flowy/packages/appflowy_popover/example/lib/example_button.dart
View File

@ -50,15 +50,13 @@ class _PopoverMenuState extends State<PopoverMenu> {
class ExampleButton extends StatelessWidget {
final String label;
final Alignment targetAnchor;
final Alignment followerAnchor;
final Offset? offset;
final PopoverDirection? direction;
const ExampleButton({
Key? key,
required this.label,
this.targetAnchor = Alignment.topLeft,
this.followerAnchor = Alignment.topLeft,
this.direction,
this.offset = Offset.zero,
}) : super(key: key);
@ -67,6 +65,7 @@ class ExampleButton extends StatelessWidget {
return Popover(
triggerActions: PopoverTriggerActionFlags.click,
offset: offset,
direction: direction ?? PopoverDirection.rightWithTopAligned,
child: TextButton(child: Text(label), onPressed: () {}),
popupBuilder: (BuildContext context) {
return PopoverMenu();

48
frontend/app_flowy/packages/appflowy_popover/example/lib/main.dart
View File

@ -1,3 +1,4 @@
import 'package:appflowy_popover/popover.dart';
import 'package:flutter/material.dart';
import "./example_button.dart";
@ -65,65 +66,60 @@ class _MyHomePageState extends State<MyHomePage> {
),
body: Row(children: [
Column(children: [
ExampleButton(
const ExampleButton(
label: "Left top",
targetAnchor: Alignment.bottomLeft,
offset: const Offset(0, 10),
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithLeftAligned,
),
Expanded(child: Container()),
ExampleButton(
const ExampleButton(
label: "Left bottom",
followerAnchor: Alignment.bottomLeft,
offset: const Offset(0, -10),
offset: Offset(0, -10),
direction: PopoverDirection.topWithLeftAligned,
),
]),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ExampleButton(
const ExampleButton(
label: "Top",
targetAnchor: Alignment.bottomCenter,
followerAnchor: Alignment.topCenter,
offset: const Offset(0, 10),
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithCenterAligned,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
children: const [
ExampleButton(
label: "Central",
targetAnchor: Alignment.bottomCenter,
followerAnchor: Alignment.topCenter,
offset: const Offset(0, 10),
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithCenterAligned,
),
],
),
),
ExampleButton(
const ExampleButton(
label: "Bottom",
targetAnchor: Alignment.topCenter,
followerAnchor: Alignment.bottomCenter,
offset: const Offset(0, -10),
offset: Offset(0, -10),
direction: PopoverDirection.topWithCenterAligned,
),
],
),
),
Column(
children: [
ExampleButton(
const ExampleButton(
label: "Right top",
targetAnchor: Alignment.bottomRight,
followerAnchor: Alignment.topRight,
offset: const Offset(0, 10),
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithRightAligned,
),
Expanded(child: Container()),
ExampleButton(
const ExampleButton(
label: "Right bottom",
targetAnchor: Alignment.topRight,
followerAnchor: Alignment.bottomRight,
offset: const Offset(0, -10),
offset: Offset(0, -10),
direction: PopoverDirection.topWithRightAligned,
),
],
)

39
frontend/app_flowy/packages/appflowy_popover/lib/popover.dart
View File

@ -3,6 +3,8 @@ import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
/// If multiple popovers are exclusive,
/// pass the same mutex to them.
class PopoverMutex {
PopoverState? state;
}
@ -50,16 +52,29 @@ enum PopoverDirection {
}
class Popover extends StatefulWidget {
final Widget child;
final PopoverController? controller;
final Offset? offset;
final Decoration? maskDecoration;
/// The function used to build the popover.
final Widget Function(BuildContext context) popupBuilder;
final int triggerActions;
/// If multiple popovers are exclusive,
/// pass the same mutex to them.
final PopoverMutex? mutex;
/// The direction of the popover
final PopoverDirection direction;
final void Function()? onClose;
/// The content area of the popover.
final Widget child;
const Popover({
Key? key,
required this.child,
@ -174,17 +189,25 @@ class PopoverState extends State<Popover> {
}
}
_buildContent(BuildContext context) {
if (widget.triggerActions == 0) {
return widget.child;
}
return MouseRegion(
onEnter: _handleTargetPointerEnter,
child: Listener(
onPointerDown: _handleTargetPointerDown,
child: widget.child,
),
);
}
@override
Widget build(BuildContext context) {
return PopoverTarget(
link: popoverLink,
child: MouseRegion(
onEnter: _handleTargetPointerEnter,
child: Listener(
onPointerDown: _handleTargetPointerDown,
child: widget.child,
),
),
child: _buildContent(context),
);
}
}