git-touch-android-ios-app/lib/scaffolds/long_list.dart

230 lines
6.4 KiB
Dart
Raw Normal View History

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:git_touch/models/theme.dart';
2019-09-07 11:48:59 +02:00
import 'package:git_touch/utils/utils.dart';
import 'package:provider/provider.dart';
import '../widgets/loading.dart';
import '../widgets/link.dart';
import '../widgets/error_reload.dart';
class LongListPayload<T, K> {
T header;
int totalCount;
String cursor;
List<K> leadingItems;
List<K> trailingItems;
LongListPayload({
this.header,
this.totalCount,
this.cursor,
this.leadingItems,
this.trailingItems,
});
}
// This is a scaffold for issue and pull request
// Since the list could be very long, and some users may only want to to check trailing items
// We should load leading and trailing items at first fetching, and do load more in the middle
// e.g. https://github.com/reactjs/rfcs/pull/68
2019-10-03 05:00:59 +02:00
class LongListStatefulScaffold<T, K> extends StatefulWidget {
final Widget title;
2020-01-07 13:48:50 +01:00
final Widget Function(
T headerPayload, void Function(VoidCallback fn) setState) trailingBuilder;
final Widget Function(T headerPayload) headerBuilder;
final Widget Function(K itemPayload) itemBuilder;
final Future<LongListPayload<T, K>> Function() onRefresh;
final Future<LongListPayload<T, K>> Function(String cursor) onLoadMore;
2019-10-03 05:00:59 +02:00
LongListStatefulScaffold({
@required this.title,
this.trailingBuilder,
@required this.headerBuilder,
@required this.itemBuilder,
@required this.onRefresh,
@required this.onLoadMore,
});
@override
2019-12-03 04:26:08 +01:00
_LongListStatefulScaffoldState<T, K> createState() =>
2019-10-03 05:00:59 +02:00
_LongListStatefulScaffoldState();
}
2019-10-03 05:00:59 +02:00
class _LongListStatefulScaffoldState<T, K>
extends State<LongListStatefulScaffold<T, K>> {
bool loading;
bool loadingMore = false;
String error = '';
LongListPayload<T, K> payload;
@override
void initState() {
super.initState();
_refresh();
}
Future<void> _refresh() async {
// Fimber.d('long list scaffold refresh');
setState(() {
error = '';
loading = true;
});
try {
payload = await widget.onRefresh();
} catch (err) {
error = err.toString();
throw err;
} finally {
if (mounted) {
setState(() {
loading = false;
});
}
}
}
Future<void> _loadMore() async {
// Fimber.d('long list scaffold load more');
setState(() {
loadingMore = true;
});
try {
var _payload = await widget.onLoadMore(payload.cursor);
payload.totalCount = _payload.totalCount;
payload.cursor = _payload.cursor;
payload.leadingItems.addAll(_payload.leadingItems);
} finally {
if (mounted) {
setState(() {
loadingMore = false;
});
}
}
}
Widget _buildItem(BuildContext context, int index) {
2019-11-08 11:29:08 +01:00
final theme = Provider.of<ThemeModel>(context);
if (index % 2 == 1) {
2019-10-02 10:09:54 +02:00
return CommonStyle.border;
}
int realIndex = index ~/ 2;
if (realIndex < payload.leadingItems.length) {
return widget.itemBuilder(payload.leadingItems[realIndex]);
} else if (realIndex == payload.leadingItems.length) {
var count = payload.totalCount -
payload.leadingItems.length +
payload.trailingItems.length;
return Container(
2019-10-02 10:09:54 +02:00
padding: CommonStyle.padding,
child: Center(
child: Link(
onTap: _loadMore,
child: Container(
2019-10-02 10:09:54 +02:00
padding: CommonStyle.padding,
decoration: BoxDecoration(
2020-01-27 08:11:51 +01:00
border: Border.all(color: theme.palette.text),
),
child: Column(
children: <Widget>[
Text('$count hidden items',
2020-01-27 08:11:51 +01:00
style:
TextStyle(color: theme.palette.text, fontSize: 15)),
Padding(padding: EdgeInsets.only(top: 4)),
loadingMore
? CupertinoActivityIndicator()
: Text(
'Load more...',
2019-11-08 11:29:08 +01:00
style: TextStyle(
2020-01-27 08:11:51 +01:00
color: theme.palette.primary, fontSize: 16),
),
],
),
),
),
),
);
} else {
return widget.itemBuilder(
payload.trailingItems[realIndex - payload.leadingItems.length - 1]);
}
}
int get _itemCount {
int count = payload.leadingItems.length + payload.trailingItems.length;
if (payload.totalCount > count) {
count++;
}
return 2 * count; // including bottom border
}
Widget _buildSliver() {
if (error.isNotEmpty) {
return SliverToBoxAdapter(
child: ErrorReload(text: error, onTap: _refresh));
} else if (loading) {
2019-03-02 09:51:28 +01:00
// TODO:
return SliverToBoxAdapter(child: Loading(more: false));
} else {
return SliverList(
delegate:
SliverChildBuilderDelegate(_buildItem, childCount: _itemCount),
);
}
}
@override
Widget build(BuildContext context) {
switch (Provider.of<ThemeModel>(context).theme) {
2019-09-19 15:10:50 +02:00
case AppThemeType.cupertino:
List<Widget> slivers = [
2019-03-02 09:51:28 +01:00
CupertinoSliverRefreshControl(onRefresh: _refresh)
];
if (payload != null) {
slivers.add(
SliverToBoxAdapter(child: widget.headerBuilder(payload.header)),
);
}
slivers.add(_buildSliver());
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: widget.title,
2020-01-07 13:48:50 +01:00
trailing: payload == null
? null
: widget.trailingBuilder(payload.header, setState),
),
child: SafeArea(
2019-09-28 15:40:42 +02:00
child: CupertinoScrollbar(
child: CustomScrollView(slivers: slivers),
),
),
);
default:
return Scaffold(
appBar: AppBar(
title: widget.title,
2019-02-20 09:31:22 +01:00
actions: payload == null
? null
2020-01-07 13:48:50 +01:00
: [widget.trailingBuilder(payload.header, setState)],
),
body: RefreshIndicator(
2019-03-02 09:51:28 +01:00
onRefresh: _refresh,
2019-09-28 15:40:42 +02:00
child: Scrollbar(
child: CustomScrollView(slivers: [
if (payload != null)
SliverToBoxAdapter(
child: widget.headerBuilder(payload.header)),
_buildSliver(),
]),
),
),
);
}
}
}