556 lines
20 KiB
Dart
556 lines
20 KiB
Dart
import 'dart:ui';
|
|
|
|
import 'package:didvan/config/design_config.dart';
|
|
import 'package:didvan/config/theme_data.dart';
|
|
import 'package:didvan/constants/app_icons.dart';
|
|
import 'package:didvan/constants/assets.dart';
|
|
import 'package:didvan/models/users_mention.dart';
|
|
import 'package:didvan/models/view/app_bar_data.dart';
|
|
import 'package:didvan/views/comments/comments_state.dart';
|
|
import 'package:didvan/views/comments/widgets/comment.dart';
|
|
import 'package:didvan/views/widgets/animated_visibility.dart';
|
|
import 'package:didvan/views/widgets/didvan/checkbox.dart';
|
|
import 'package:didvan/views/widgets/didvan/icon_button.dart';
|
|
import 'package:didvan/views/widgets/didvan/scaffold.dart';
|
|
import 'package:didvan/views/widgets/didvan/text.dart';
|
|
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
|
|
import 'package:didvan/views/widgets/state_handlers/empty_state.dart';
|
|
import 'package:didvan/views/widgets/state_handlers/sliver_state_handler.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import '../widgets/didvan/didvan_title_divider.dart';
|
|
import '../widgets/user_mention.dart';
|
|
|
|
class Comments extends StatefulWidget {
|
|
final Map<String, dynamic> pageData;
|
|
|
|
const Comments({
|
|
Key? key,
|
|
required this.pageData,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
State<Comments> createState() => _CommentsState();
|
|
}
|
|
|
|
class _CommentsState extends State<Comments> {
|
|
final _focusNode = FocusNode();
|
|
double _bottomPadding = 0;
|
|
|
|
@override
|
|
void initState() {
|
|
final state = context.read<CommentsState>();
|
|
state.itemId = widget.pageData['id'];
|
|
state.type = widget.pageData['type'];
|
|
state.onCommentsChanged = widget.pageData['onCommentsChanged'];
|
|
Future.delayed(
|
|
Duration.zero,
|
|
() => state.getComments(),
|
|
);
|
|
super.initState();
|
|
}
|
|
|
|
bool get _isPage => widget.pageData['isPage'] != false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final commentsState = context.watch<CommentsState>();
|
|
|
|
final bottomViewInset = MediaQuery.of(context).viewInsets.bottom;
|
|
if (bottomViewInset == 0) {
|
|
if (_bottomPadding != 0) {
|
|
FocusScope.of(context).unfocus();
|
|
_bottomPadding = 0;
|
|
}
|
|
}
|
|
_bottomPadding = bottomViewInset;
|
|
return Material(
|
|
child: Stack(
|
|
children: [
|
|
DidvanScaffold(
|
|
hidePlayer: true,
|
|
physics: const BouncingScrollPhysics(),
|
|
backgroundColor: Theme.of(context).colorScheme.surface,
|
|
appBarData: _isPage
|
|
? AppBarData(
|
|
hasBack: true,
|
|
title: 'نظرات',
|
|
subtitle: widget.pageData['title'],
|
|
)
|
|
: null,
|
|
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 92),
|
|
showSliversFirst: false,
|
|
slivers: [
|
|
Consumer<CommentsState>(
|
|
builder: (context, state, child) =>
|
|
SliverStateHandler<CommentsState>(
|
|
onRetry: state.getComments,
|
|
state: state,
|
|
itemPadding: const EdgeInsets.symmetric(vertical: 16),
|
|
childCount: state.comments.length,
|
|
placeholder: const _CommentPlaceholder(),
|
|
centerEmptyState: _isPage,
|
|
enableEmptyState:
|
|
state.comments.isEmpty && state.privateComments.isEmpty,
|
|
emptyState: EmptyState(
|
|
asset: Assets.emptyChat,
|
|
title: 'اولین نظر را بنویسید...',
|
|
),
|
|
builder: (context, state, index) => Comment(
|
|
key: ValueKey(
|
|
state.comments[index].id.toString() +
|
|
state.comments[index].text,
|
|
),
|
|
focusNode: _focusNode,
|
|
comment: state.comments[index],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
children: commentsState.privateComments.isNotEmpty
|
|
? [
|
|
const SizedBox(
|
|
height: 6,
|
|
),
|
|
DidvanTitleDivider(
|
|
title: "نظرات پنهان شده",
|
|
color: Theme.of(context).colorScheme.primary,
|
|
icon: Icon(
|
|
commentsState.showPrivates
|
|
? DidvanIcons.angle_up_regular
|
|
: DidvanIcons.angle_down_regular,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
),
|
|
onClick: () {
|
|
commentsState.showPrivates =
|
|
!commentsState.showPrivates;
|
|
commentsState.update();
|
|
},
|
|
),
|
|
const SizedBox(
|
|
height: 16,
|
|
),
|
|
AnimatedVisibility(
|
|
duration: DesignConfig.lowAnimationDuration,
|
|
isVisible: commentsState.showPrivates,
|
|
child: _buildPrivateComments(commentsState),
|
|
),
|
|
const SizedBox(
|
|
height: 16,
|
|
),
|
|
const DidvanTitleDivider(
|
|
title: "سایر نظرات",
|
|
),
|
|
]
|
|
: null,
|
|
),
|
|
AnimatedVisibility(
|
|
duration: DesignConfig.lowAnimationDuration,
|
|
isVisible: commentsState.showUsersForMentionsLayout,
|
|
child: BackdropFilter(
|
|
filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color:
|
|
Theme.of(context).colorScheme.focused.withOpacity(0.5)),
|
|
child: DidvanScaffold(
|
|
appBarData: null,
|
|
padding: const EdgeInsets.only(
|
|
left: 16, right: 16, top: 16, bottom: 92),
|
|
backgroundColor: Colors.white.withOpacity(0.0),
|
|
slivers: [
|
|
Consumer<CommentsState>(
|
|
builder: (context, state, child) =>
|
|
SliverStateHandler<CommentsState>(
|
|
onRetry: state.getUsersMention,
|
|
state: state,
|
|
itemPadding: const EdgeInsets.symmetric(vertical: 8),
|
|
childCount: state.usersMention.length,
|
|
placeholder: const _UsersPlaceholder(),
|
|
centerEmptyState: _isPage,
|
|
enableEmptyState: state.usersMention.isEmpty,
|
|
emptyState: EmptyState(
|
|
asset: Assets.emptyBookmark,
|
|
title: 'لیست خالی است',
|
|
),
|
|
builder: (context, state, index) {
|
|
return UserMention(
|
|
user: state.usersMention[index],
|
|
index: index,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
left: 0,
|
|
right: 0,
|
|
bottom: MediaQuery.of(context).viewInsets.bottom,
|
|
child: _MessageBox(focusNode: _focusNode),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
ListView _buildPrivateComments(CommentsState commentsState) {
|
|
return ListView.builder(
|
|
physics: const BouncingScrollPhysics(),
|
|
itemCount: commentsState.privateComments.length,
|
|
shrinkWrap: true,
|
|
itemBuilder: (context, index) {
|
|
return Comment(
|
|
key: ValueKey(
|
|
commentsState.privateComments[index].id.toString() +
|
|
commentsState.privateComments[index].text,
|
|
),
|
|
focusNode: _focusNode,
|
|
comment: commentsState.privateComments[index],
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
class _MessageBox extends StatefulWidget {
|
|
final FocusNode focusNode;
|
|
|
|
const _MessageBox({Key? key, required this.focusNode}) : super(key: key);
|
|
|
|
@override
|
|
State<_MessageBox> createState() => _MessageBoxState();
|
|
}
|
|
|
|
class _MessageBoxState extends State<_MessageBox> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final state = context.watch<CommentsState>();
|
|
|
|
void onCheckBoxChange(bool b) {
|
|
state.hideMentionedUser = b;
|
|
state.update();
|
|
}
|
|
|
|
return Column(
|
|
children: [
|
|
AnimatedVisibility(
|
|
duration: DesignConfig.lowAnimationDuration,
|
|
isVisible: state.showReplyBox,
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.secondCTA,
|
|
borderRadius: const BorderRadius.only(
|
|
topRight: Radius.circular(16),
|
|
topLeft: Radius.circular(16)),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Theme.of(context)
|
|
.colorScheme
|
|
.title
|
|
.withOpacity(0.2),
|
|
offset: const Offset(
|
|
5.0,
|
|
5.0,
|
|
),
|
|
blurRadius: 10.0,
|
|
spreadRadius: 2.0,
|
|
)
|
|
]
|
|
|
|
// border: Border(
|
|
// top: BorderSide(
|
|
// color: Theme.of(context).colorScheme.border,
|
|
// ),
|
|
// ),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
if (state.replyingTo != null)
|
|
DidvanText(
|
|
'پاسخ به ${state.replyingTo!.fullName}:',
|
|
color: Theme.of(context).colorScheme.primary,
|
|
style: Theme.of(context).textTheme.bodySmall,
|
|
),
|
|
const Spacer(),
|
|
DidvanIconButton(
|
|
gestureSize: 24,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
icon: DidvanIcons.close_regular,
|
|
onPressed: () {
|
|
state.commentId = null;
|
|
state.replyingTo = null;
|
|
state.showReplyBox = false;
|
|
state.update();
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
color: Theme.of(context).colorScheme.secondCTA,
|
|
padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
|
|
child: Divider(
|
|
height: 2,
|
|
color: Theme.of(context).colorScheme.border,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
AnimatedVisibility(
|
|
duration: DesignConfig.lowAnimationDuration,
|
|
isVisible: state.usersMentioned.name != null,
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.secondCTA,
|
|
borderRadius: !state.showReplyBox
|
|
? const BorderRadius.only(
|
|
topLeft: Radius.circular(16),
|
|
topRight: Radius.circular(16))
|
|
: null),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
color: Theme.of(context).colorScheme.primary,
|
|
width: 2,
|
|
height: 40,
|
|
),
|
|
const SizedBox(
|
|
width: 8,
|
|
),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
DidvanText(
|
|
"اشاره به",
|
|
color: Theme.of(context).colorScheme.text,
|
|
style: Theme.of(context).textTheme.labelSmall,
|
|
),
|
|
DidvanText(
|
|
state.usersMentioned.name.toString(),
|
|
color: Theme.of(context).colorScheme.text,
|
|
style: Theme.of(context).textTheme.bodySmall,
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
DidvanIconButton(
|
|
gestureSize: 24,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
icon: DidvanIcons.close_regular,
|
|
onPressed: () {
|
|
state.usersMentioned = UsersMention();
|
|
state.update();
|
|
},
|
|
),
|
|
!state.showReplyBox
|
|
? DidvanCheckbox(
|
|
title: "پنهان کردن فراخوانی",
|
|
value: state.hideMentionedUser,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
onChanged: onCheckBoxChange,
|
|
size: 12,
|
|
)
|
|
: const SizedBox(),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
boxShadow: state.showReplyBox && state.usersMentioned.name == null
|
|
? null
|
|
: [
|
|
BoxShadow(
|
|
color:
|
|
Theme.of(context).colorScheme.title.withOpacity(0.2),
|
|
offset: const Offset(
|
|
5.0,
|
|
5.0,
|
|
),
|
|
blurRadius: 10.0,
|
|
spreadRadius: 2.0,
|
|
)
|
|
],
|
|
color: state.showReplyBox && state.usersMentioned.name == null
|
|
? Theme.of(context).colorScheme.secondCTA
|
|
: Theme.of(context).colorScheme.surface,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
DidvanIconButton(
|
|
onPressed: () => _onSend(state),
|
|
icon: DidvanIcons.send_solid,
|
|
size: 24,
|
|
color: Theme.of(context).colorScheme.focusedBorder,
|
|
),
|
|
Expanded(
|
|
child: TextField(
|
|
focusNode: widget.focusNode,
|
|
controller: state.commentTextFieldController,
|
|
keyboardType: TextInputType.multiline,
|
|
textInputAction: TextInputAction.send,
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
onEditingComplete: () {},
|
|
onSubmitted: (value) => _onSend(state),
|
|
decoration: InputDecoration(
|
|
border: InputBorder.none,
|
|
hintText: 'پیام خود را ارسال کنید',
|
|
hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith(
|
|
color: Theme.of(context).colorScheme.disabledText),
|
|
),
|
|
onChanged: (value) => _onChange(state, value),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
void _onSend(CommentsState state) {
|
|
if (state.commentTextFieldController.text.replaceAll(' ', '').isNotEmpty) {
|
|
state.addComment();
|
|
state.commentTextFieldController.text = '';
|
|
}
|
|
}
|
|
|
|
void _onChange(CommentsState state, value) {
|
|
state.commentTextFieldController.text = value;
|
|
if (state.usersMentioned.name == null) {
|
|
if (state.commentTextFieldController.text.contains("@")) {
|
|
int index = state.commentTextFieldController.text.indexOf("@");
|
|
if (state.commentTextFieldController.text.length > index + 1) {
|
|
if (state.commentTextFieldController.text
|
|
.substring(index)
|
|
.contains(" ")) {
|
|
state.showUsersForMentionsLayout = false;
|
|
} else {
|
|
state.mentionedText =
|
|
state.commentTextFieldController.text.substring(index);
|
|
state.getUsersMention();
|
|
state.showUsersForMentionsLayout = true;
|
|
}
|
|
}
|
|
} else {
|
|
state.showUsersForMentionsLayout = false;
|
|
}
|
|
state.update();
|
|
}
|
|
}
|
|
}
|
|
|
|
class _CommentPlaceholder extends StatelessWidget {
|
|
const _CommentPlaceholder({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return const Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
ShimmerPlaceholder(
|
|
height: 24,
|
|
width: 24,
|
|
borderRadius: DesignConfig.highBorderRadius,
|
|
),
|
|
SizedBox(width: 16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
ShimmerPlaceholder(
|
|
height: 20,
|
|
width: 100,
|
|
),
|
|
ShimmerPlaceholder(
|
|
height: 14,
|
|
width: 100,
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 12),
|
|
ShimmerPlaceholder(
|
|
height: 16,
|
|
width: double.infinity,
|
|
),
|
|
SizedBox(height: 8),
|
|
ShimmerPlaceholder(
|
|
height: 16,
|
|
width: 200,
|
|
),
|
|
SizedBox(height: 8),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
ShimmerPlaceholder(
|
|
height: 24,
|
|
width: 48,
|
|
),
|
|
SizedBox(width: 8),
|
|
ShimmerPlaceholder(
|
|
height: 24,
|
|
width: 48,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _UsersPlaceholder extends StatelessWidget {
|
|
const _UsersPlaceholder({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return const Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
ShimmerPlaceholder(
|
|
height: 40,
|
|
width: 40,
|
|
borderRadius: DesignConfig.highBorderRadius,
|
|
),
|
|
SizedBox(width: 16),
|
|
Expanded(
|
|
child: ShimmerPlaceholder(
|
|
borderRadius: DesignConfig.highBorderRadius,
|
|
height: 40,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|