TF-2101 Add date selection field widget

(cherry picked from commit 9dccc8f1ad3aa89bf5cd4e2721ba8ff5dfa19858)
2023-12-21 00:17:08 +07:00
parent 019176d5a2
commit fffceef99e
5 changed files with 364 additions and 0 deletions
@@ -0,0 +1,39 @@
+import 'package:dropdown_button2/dropdown_button2.dart';
+import 'package:flutter/material.dart';
+
+class DateSelectionDropdownButtonStyles {
+  static const double height = 44.0;
+  static const double borderWidth = 0.5;
+  static const double dropdownMaxHeight = 200.0;
+  static const double scrollbarThickness = 6.0;
+  static const double checkedIconSize = 20.0;
+
+  static const int dropdownElevation = 4;
+
+  static const Offset dropdownOffset = Offset(0.0, -8.0);
+
+  static const EdgeInsetsGeometry padding = EdgeInsets.only(
+    left: 12,
+    right: 10
+  );
+
+  static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(10));
+
+  static const Radius scrollbarRadius = Radius.circular(40);
+
+  static const BoxDecoration dropdownDecoration = BoxDecoration(
+    borderRadius: borderRadius,
+    color: Colors.white,
+  );
+
+  static const TextStyle selectedValueTexStyle = TextStyle(
+    fontSize: 16,
+    fontWeight: FontWeight.w400,
+    color: Colors.black,
+  );
+
+  static const MenuItemStyleData menuItemStyleData = MenuItemStyleData(
+    height: height,
+    padding: EdgeInsets.symmetric(horizontal: 12),
+  );
+}
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class DateSelectionFieldStyles {
+  static const double height = 44.0;
+  static const double titleWidth = 112.0;
+  static const double titleSpace = 12.0;
+  static const double titleSpaceMobile = 8.0;
+  static const double icCalendarSize = 24.0;
+  static const double icCalenderSpace = 10.0;
+  static const double borderWidthMobile = 0.5;
+  static const double radius = 12.0;
+
+  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(
+    vertical: 8.0
+  );
+  static const EdgeInsetsGeometry paddingMobile = EdgeInsets.symmetric(
+    vertical: 7.0
+  );
+  static const EdgeInsetsGeometry inputFieldMobilePadding = EdgeInsets.symmetric(
+    horizontal: 12.0
+  );
+
+  static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(12));
+}
@@ -0,0 +1,139 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:dropdown_button2/dropdown_button2.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_time_type.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart';
+
+typedef OnRecoveryTimeSelected = void Function(EmailRecoveryTimeType recoveryTime);
+
+class DateSelectionDropDownButton extends StatelessWidget {
+
+  final ImagePaths imagePaths;
+  final List<EmailRecoveryTimeType> items;
+  final DateTime? startDate;
+  final DateTime? endDate;
+  final EmailRecoveryTimeType? recoveryTimeSelected;
+  final OnRecoveryTimeSelected? onRecoveryTimeSelected;
+
+  const DateSelectionDropDownButton({
+    super.key,
+    required this.imagePaths,
+    required this.items,
+    this.startDate,
+    this.endDate,
+    this.recoveryTimeSelected,
+    this.onRecoveryTimeSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DropdownButtonHideUnderline(
+      child: PointerInterceptor(
+        child: DropdownButton2<EmailRecoveryTimeType>(
+          isExpanded: true,
+          items: items
+            .map((item) => _buildItemMenu(context, item))
+            .toList(),
+          value: recoveryTimeSelected,
+          customButton: Container(
+            height: DateSelectionDropdownButtonStyles.height,
+            decoration: BoxDecoration(
+              borderRadius: DateSelectionDropdownButtonStyles.borderRadius,
+              border: Border.all(
+                color: AppColor.colorInputBorderCreateMailbox,
+                width: DateSelectionDropdownButtonStyles.borderWidth,
+              ),
+              color: AppColor.colorInputBackgroundCreateMailbox
+            ),
+            padding: DateSelectionDropdownButtonStyles.padding,
+            child: Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    recoveryTimeSelected?.getTitle(context, startDate: startDate, endDate: endDate) ?? '',
+                    style: DateSelectionDropdownButtonStyles.selectedValueTexStyle,
+                    maxLines: 1,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                  )
+                ),
+                SvgPicture.asset(imagePaths.icDropDown)
+              ]
+            ),
+          ),
+          onChanged: (value) {
+            if (value != null) {
+              onRecoveryTimeSelected?.call(value);
+            }
+          },
+          buttonStyleData: ButtonStyleData(
+            height: DateSelectionDropdownButtonStyles.height,
+            padding: DateSelectionDropdownButtonStyles.padding,
+            decoration: BoxDecoration(
+              borderRadius: DateSelectionDropdownButtonStyles.borderRadius,
+              border: Border.all(
+                color: AppColor.colorInputBorderCreateMailbox,
+                width: DateSelectionDropdownButtonStyles.borderWidth,
+              ),
+              color: AppColor.colorInputBackgroundCreateMailbox
+            )
+          ),
+          dropdownStyleData: DropdownStyleData(
+            maxHeight: DateSelectionDropdownButtonStyles.dropdownMaxHeight,
+            decoration: DateSelectionDropdownButtonStyles.dropdownDecoration,
+            elevation: DateSelectionDropdownButtonStyles.dropdownElevation,
+            offset: DateSelectionDropdownButtonStyles.dropdownOffset,
+            scrollbarTheme: ScrollbarThemeData(
+              radius: DateSelectionDropdownButtonStyles.scrollbarRadius,
+              thickness: MaterialStateProperty.all<double>(DateSelectionDropdownButtonStyles.scrollbarThickness),
+              thumbVisibility: MaterialStateProperty.all<bool>(true),
+            ),
+          ),
+          iconStyleData: IconStyleData(
+            icon: SvgPicture.asset(imagePaths.icDropDown),
+          ),
+          menuItemStyleData: DateSelectionDropdownButtonStyles.menuItemStyleData
+        ),
+      ),
+    );
+  }
+
+  DropdownMenuItem<EmailRecoveryTimeType> _buildItemMenu(
+    BuildContext context,
+    EmailRecoveryTimeType recoveryTime
+  ) {
+    return DropdownMenuItem<EmailRecoveryTimeType>(
+      value: recoveryTime,
+      child: PointerInterceptor(
+        child: Container(
+          color: Colors.transparent,
+          height: DateSelectionDropdownButtonStyles.height,
+          child: Row(
+            children: [
+              Expanded(
+                child: Text(
+                  recoveryTime.getTitle(context),
+                  style: DateSelectionDropdownButtonStyles.selectedValueTexStyle,
+                  maxLines: 1,
+                  softWrap: CommonTextStyle.defaultSoftWrap,
+                  overflow: CommonTextStyle.defaultTextOverFlow,
+                )
+              ),
+              if (recoveryTime == recoveryTimeSelected)
+                SvgPicture.asset(
+                  imagePaths.icChecked,
+                  width: DateSelectionDropdownButtonStyles.checkedIconSize,
+                  height: DateSelectionDropdownButtonStyles.checkedIconSize,
+                  fit: BoxFit.fill
+                )
+            ]
+          ),
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,85 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_time_type.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/styles/date_selection_field/date_selection_field_styles.dart';
+
+class DateSelectionFieldMobileWidget extends StatelessWidget {
+  final EmailRecoveryField field;
+  final EmailRecoveryTimeType recoveryTimeSelected;
+  final ImagePaths imagePaths;
+  final VoidCallback? onTap;
+  final DateTime? startDate;
+  final DateTime? endDate;
+
+  const DateSelectionFieldMobileWidget({
+    super.key,
+    required this.field,
+    required this.recoveryTimeSelected,
+    required this.imagePaths,
+    this.onTap,
+    this.startDate,
+    this.endDate,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: DateSelectionFieldStyles.paddingMobile,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            field.getTitle(context),
+            style: field.getTitleTextStyle(),
+          ),
+          const SizedBox(height: DateSelectionFieldStyles.titleSpaceMobile),
+          Container(
+            width: double.infinity,
+            height: DateSelectionFieldStyles.height,
+            decoration: const ShapeDecoration(
+              color: AppColor.loginTextFieldBackgroundColor,
+              shape: RoundedRectangleBorder(
+                side: BorderSide(
+                  width: DateSelectionFieldStyles.borderWidthMobile,
+                  color: AppColor.colorInputBorderCreateMailbox
+                ),
+                borderRadius: DateSelectionFieldStyles.borderRadius
+              )
+            ),
+            child: Material(
+              color: Colors.transparent,
+              child: InkWell(
+                radius: DateSelectionFieldStyles.radius,
+                onTap: onTap,
+                child: Padding(
+                  padding: DateSelectionFieldStyles.inputFieldMobilePadding,
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(
+                        recoveryTimeSelected.getTitle(
+                          context,
+                          startDate: startDate,
+                          endDate: endDate
+                        ),
+                        style: field.getHintTextStyle(),
+                      ),
+                      SvgPicture.asset(
+                        imagePaths.icCalendar,
+                        width: DateSelectionFieldStyles.icCalendarSize,
+                        height: DateSelectionFieldStyles.icCalendarSize,
+                      )
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,77 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_time_type.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/styles/date_selection_field/date_selection_field_styles.dart';
+import 'package:tmail_ui_user/features/email_recovery/presentation/widgets/date_selection_field/date_selection_dropdown_button.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class DateSelectionFieldWebWidget extends StatelessWidget {
+  final EmailRecoveryField field;
+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
+  final DateTime? startDate;
+  final DateTime? endDate;
+  final EmailRecoveryTimeType? recoveryTimeSelected;
+  final OnRecoveryTimeSelected? onRecoveryTimeSelected;
+  final VoidCallback? onTapCalendar;
+
+  const DateSelectionFieldWebWidget({
+    super.key,
+    required this.field,
+    required this.responsiveUtils,
+    required this.imagePaths,
+    this.startDate,
+    this.endDate,
+    this.recoveryTimeSelected,
+    this.onRecoveryTimeSelected,
+    this.onTapCalendar,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: DateSelectionFieldStyles.padding,
+      child: SizedBox(
+        height: DateSelectionFieldStyles.height,
+        child: Row(
+          children: [
+            SizedBox(
+              width: DateSelectionFieldStyles.titleWidth,
+              child: Text(
+                field.getTitle(context),
+                style: field.getTitleTextStyle(),
+              ),
+            ),
+            const SizedBox(width: DateSelectionFieldStyles.titleSpace),
+            Expanded(
+              child: DateSelectionDropDownButton(
+                imagePaths: imagePaths,
+                startDate: startDate,
+                endDate: endDate,
+                recoveryTimeSelected: recoveryTimeSelected,
+                onRecoveryTimeSelected: onRecoveryTimeSelected,
+                items: field.getSupportedTimeTypes(),
+              ),
+            ),
+            const SizedBox(width: DateSelectionFieldStyles.icCalenderSpace),
+            buildIconWeb(
+              icon: SvgPicture.asset(
+                imagePaths.icCalendarSB,
+                width: DateSelectionFieldStyles.icCalendarSize,
+                height: DateSelectionFieldStyles.icCalendarSize,
+                fit: BoxFit.fill,
+              ),
+              tooltip: AppLocalizations.of(context).selectDate,
+              iconPadding: EdgeInsets.zero,
+              onTap: onTapCalendar
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}