From 425ebd9e818854cb859982797133562d1aab5309 Mon Sep 17 00:00:00 2001 From: Decoder07 Date: Mon, 22 Jul 2024 16:05:13 +0530 Subject: [PATCH] Added bottom sheet for role change --- .../lib/src/assets/icons/peer_settings.svg | 13 ++ .../change_role_bottom_sheet.dart | 142 ++++++++++++++++++ 2 files changed, 155 insertions(+) create mode 100644 packages/hms_room_kit/lib/src/assets/icons/peer_settings.svg create mode 100644 packages/hms_room_kit/lib/src/widgets/bottom_sheets/change_role_bottom_sheet.dart diff --git a/packages/hms_room_kit/lib/src/assets/icons/peer_settings.svg b/packages/hms_room_kit/lib/src/assets/icons/peer_settings.svg new file mode 100644 index 000000000..a0215f427 --- /dev/null +++ b/packages/hms_room_kit/lib/src/assets/icons/peer_settings.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/hms_room_kit/lib/src/widgets/bottom_sheets/change_role_bottom_sheet.dart b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/change_role_bottom_sheet.dart new file mode 100644 index 000000000..337be7eff --- /dev/null +++ b/packages/hms_room_kit/lib/src/widgets/bottom_sheets/change_role_bottom_sheet.dart @@ -0,0 +1,142 @@ +library; + +///Dart imports +import 'dart:math' as Math; + +///Package imports +import 'package:dropdown_button2/dropdown_button2.dart'; +import 'package:flutter/material.dart'; +import 'package:collection/collection.dart'; +import 'package:hmssdk_flutter/hmssdk_flutter.dart'; + +///Project imports +import 'package:hms_room_kit/src/widgets/common_widgets/hms_dropdown.dart'; +import 'package:hms_room_kit/hms_room_kit.dart'; +import 'package:hms_room_kit/src/widgets/common_widgets/hms_cross_button.dart'; + +///[ChangeRoleBottomSheet] is a bottom sheet that allows the user to change the role of a peer it contains a dropdown to select the new role for the peer +class ChangeRoleBottomSheet extends StatefulWidget { + final String peerName; + final List roles; + final Function(HMSRole, bool) changeRole; + final bool force; + final HMSPeer peer; + const ChangeRoleBottomSheet({ + super.key, + required this.peerName, + required this.roles, + required this.changeRole, + required this.peer, + this.force = true, + }); + + @override + ChangeRoleBottomSheetState createState() => ChangeRoleBottomSheetState(); +} + +class ChangeRoleBottomSheetState extends State { + HMSRole? roleSelected; + + void _updateDropDownValue(dynamic newValue) { + roleSelected = newValue; + setState(() {}); + } + + @override + void initState() { + super.initState(); + roleSelected = widget.roles[0]; + } + + @override + Widget build(BuildContext context) { + String message = + "Switch the role of '${widget.peerName.substring(0, Math.min(30, widget.peerName.length))}' from '${widget.peer.role.name.substring(0, Math.min(20, widget.peer.role.name.length))}' to "; + return FractionallySizedBox( + heightFactor: 0.3, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 24.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + HMSTitleText( + text: "Switch Role", + fontSize: 20, + letterSpacing: 0.15, + textColor: HMSThemeColors.onSecondaryHighEmphasis, + ), + HMSCrossButton() + ], + ), + HMSSubtitleText( + text: message, + textColor: HMSThemeColors.onSurfaceMediumEmphasis, + maxLines: 2, + ), + const SizedBox( + height: 24, + ), + DropdownButtonHideUnderline( + child: HMSDropDown( + dropDownItems: [ + ...widget.roles + .sortedBy((element) => element.priority.toString()) + .map((role) => DropdownMenuItem( + value: role, + child: HMSTitleText( + text: role.name, + textColor: HMSThemeColors.onSurfaceHighEmphasis, + fontWeight: FontWeight.w400, + letterSpacing: 0.5, + ), + )) + .toList(), + ], + iconStyleData: IconStyleData( + icon: const Icon(Icons.keyboard_arrow_down), + iconEnabledColor: HMSThemeColors.onSurfaceHighEmphasis, + ), + selectedValue: roleSelected, + updateSelectedValue: _updateDropDownValue)), + const SizedBox( + height: 24, + ), + ElevatedButton( + style: ButtonStyle( + backgroundColor: MaterialStateProperty.all( + roleSelected == null + ? HMSThemeColors.primaryDisabled + : HMSThemeColors.primaryDefault), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.0), + ))), + onPressed: () => { + Navigator.pop(context), + if (roleSelected != null) + {widget.changeRole(roleSelected!, true)} + }, + child: Row( + children: [ + Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 12), + child: Center( + child: HMSTitleText( + text: "Switch Role", + textColor: HMSThemeColors.onPrimaryHighEmphasis), + ), + ), + ), + ], + ), + ), + ], + ), + ), + ); + } +}