Skip to content

Feature/long press and focus #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
itog wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feature/long press and focus #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d1c5831
feat: add callback function onLongPress
itog Feb 6, 2024
2afee42
feat: add focusDate parameter
itog Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions example/lib/pages/heatmap_calendar_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ class _HeatMapCalendarExample extends State<HeatMapCalendarExample> {
bool isOpacityMode = true;

Map<DateTime, int> heatMapDatasets = {};
DateTime _focusDate = DateTime.now();

@override
void dispose() {
Expand Down Expand Up @@ -61,6 +62,7 @@ class _HeatMapCalendarExample extends State<HeatMapCalendarExample> {
child: HeatMapCalendar(
flexible: true,
datasets: heatMapDatasets,
focusDate: _focusDate,
colorMode:
isOpacityMode ? ColorMode.opacity : ColorMode.color,
colorsets: const {
Expand All @@ -72,6 +74,11 @@ class _HeatMapCalendarExample extends State<HeatMapCalendarExample> {
11: Colors.indigo,
13: Colors.purple,
},
onClick: (date) {
setState(() {
_focusDate = date;
});
},
),
),
),
Expand Down
10 changes: 9 additions & 1 deletion example/lib/pages/heatmap_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ class _HeatMapExample extends State<HeatMapExample> {

Map<DateTime, int> heatMapDatasets = {};

DateTime _focusDate = DateTime.now();

@override
void dispose() {
super.dispose();
Expand Down Expand Up @@ -58,6 +60,7 @@ class _HeatMapExample extends State<HeatMapExample> {
padding: const EdgeInsets.all(20),
child: HeatMap(
scrollable: true,
focusDate: _focusDate,
colorMode:
isOpacityMode ? ColorMode.opacity : ColorMode.color,
datasets: heatMapDatasets,
Expand All @@ -71,8 +74,13 @@ class _HeatMapExample extends State<HeatMapExample> {
13: Colors.purple,
},
onClick: (value) {
setState(() {
_focusDate = value;
});
},
onLongPress: (value) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(value.toString())));
SnackBar(content: Text('Long pressed: $value')));
},
),
),
Expand Down
11 changes: 11 additions & 0 deletions lib/src/heatmap.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ class HeatMap extends StatefulWidget {
/// Parameter gives clicked [DateTime] value.
final Function(DateTime)? onClick;

/// Function that will be called when a block is long pressed.
///
/// Parameter gives pressed [DateTime] value.
final Function(DateTime)? onLongPress;

/// The margin value for every block.
final EdgeInsets? margin;

Expand Down Expand Up @@ -87,16 +92,20 @@ class HeatMap extends StatefulWidget {
/// The double value of [HeatMapColorTip]'s tip container's size.
final double? colorTipSize;

final DateTime? focusDate;

const HeatMap({
Key? key,
required this.colorsets,
this.colorMode = ColorMode.opacity,
this.startDate,
this.endDate,
this.focusDate,
this.textColor,
this.size = 20,
this.fontSize,
this.onClick,
this.onLongPress,
this.margin,
this.borderRadius,
this.datasets,
Expand Down Expand Up @@ -135,6 +144,7 @@ class _HeatMap extends State<HeatMap> {
endDate: widget.endDate ?? DateTime.now(),
startDate: widget.startDate ??
DateUtil.oneYearBefore(widget.endDate ?? DateTime.now()),
focusDate: widget.focusDate,
colorMode: widget.colorMode,
size: widget.size,
fontSize: widget.fontSize,
Expand All @@ -144,6 +154,7 @@ class _HeatMap extends State<HeatMap> {
colorsets: widget.colorsets,
borderRadius: widget.borderRadius,
onClick: widget.onClick,
onLongPress: widget.onLongPress,
margin: widget.margin,
showText: widget.showText,
)),
Expand Down
12 changes: 12 additions & 0 deletions lib/src/heatmap_calendar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ class HeatMapCalendar extends StatefulWidget {
/// Paratmeter gives clicked [DateTime] value.
final Function(DateTime)? onClick;

/// Function that will be called when a block is long pressed.
///
/// Paratmeter gives pressed [DateTime] value.
final Function(DateTime)? onLongPress;

/// Function that will be called when month is changed.
///
/// Paratmeter gives [DateTime] value of current month.
Expand All @@ -87,12 +92,16 @@ class HeatMapCalendar extends StatefulWidget {
/// The double value of [HeatMapColorTip]'s tip container's size.
final double? colorTipSize;

/// The DateTime value of focus date.
final DateTime? focusDate;

const HeatMapCalendar({
Key? key,
required this.colorsets,
this.colorMode = ColorMode.opacity,
this.defaultColor,
this.datasets,
this.focusDate,
this.initDate,
this.size = 42,
this.fontSize,
Expand All @@ -104,6 +113,7 @@ class HeatMapCalendar extends StatefulWidget {
this.flexible = false,
this.margin,
this.onClick,
this.onLongPress,
this.onMonthChange,
this.showColorTip = true,
this.colorTipHelper,
Expand Down Expand Up @@ -218,6 +228,7 @@ class _HeatMapCalendar extends State<HeatMapCalendar> {
HeatMapCalendarPage(
baseDate: _currentDate ?? DateTime.now(),
colorMode: widget.colorMode,
focusDate: widget.focusDate,
flexible: widget.flexible,
size: widget.size,
fontSize: widget.fontSize,
Expand All @@ -228,6 +239,7 @@ class _HeatMapCalendar extends State<HeatMapCalendar> {
colorsets: widget.colorsets,
borderRadius: widget.borderRadius,
onClick: widget.onClick,
onLongPress: widget.onLongPress,
),
if (widget.showColorTip == true)
HeatMapColorTip(
Expand Down
6 changes: 6 additions & 0 deletions lib/src/util/date_util.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,9 @@ class DateUtil {

//#endregion
}

extension DateTimeExtension on DateTime {
bool isOnSameDayAs(DateTime other) {
return year == other.year && month == other.month && day == other.day;
}
}
11 changes: 11 additions & 0 deletions lib/src/widget/heatmap_calendar_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,18 @@ class HeatMapCalendarPage extends StatelessWidget {
/// Paratmeter gives clicked [DateTime] value.
final Function(DateTime)? onClick;

/// Function that will be called when a block is long pressed.
///
/// Paratmeter gives pressed [DateTime] value.
final Function(DateTime)? onLongPress;

final DateTime? focusDate;

HeatMapCalendarPage({
Key? key,
required this.baseDate,
required this.colorMode,
this.focusDate,
this.flexible,
this.size,
this.fontSize,
Expand All @@ -75,6 +83,7 @@ class HeatMapCalendarPage extends StatelessWidget {
this.colorsets,
this.borderRadius,
this.onClick,
this.onLongPress,
}) : separatedDate = DateUtil.separatedMonth(baseDate),
maxValue = DatasetsUtil.getMaxValue(
DatasetsUtil.filterMonth(datasets, baseDate)),
Expand All @@ -89,6 +98,7 @@ class HeatMapCalendarPage extends StatelessWidget {
HeatMapCalendarRow(
startDate: date.keys.first,
endDate: date.values.first,
focusDate: focusDate,
colorMode: colorMode,
size: size,
fontSize: fontSize,
Expand All @@ -100,6 +110,7 @@ class HeatMapCalendarPage extends StatelessWidget {
margin: margin,
maxValue: maxValue,
onClick: onClick,
onLongPress: onLongPress,
datasets: Map.from(datasets ?? {})
..removeWhere(
(key, value) => !(key.isAfter(date.keys.first) &&
Expand Down
18 changes: 18 additions & 0 deletions lib/src/widget/heatmap_calendar_row.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,19 @@ class HeatMapCalendarRow extends StatelessWidget {
/// Paratmeter gives clicked [DateTime] value.
final Function(DateTime)? onClick;

/// Function that will be called when a block is long pressed.
///
/// Paratmeter gives pressed [DateTime] value.
final Function(DateTime)? onLongPress;

final DateTime? focusDate;

HeatMapCalendarRow({
Key? key,
required this.startDate,
required this.endDate,
required this.colorMode,
this.focusDate,
this.size,
this.fontSize,
this.defaultColor,
Expand All @@ -81,6 +89,7 @@ class HeatMapCalendarRow extends StatelessWidget {
this.datasets,
this.maxValue,
this.onClick,
this.onLongPress,
}) : dayContainers = List<Widget>.generate(
7,
// If current week has first day of the month and
Expand Down Expand Up @@ -109,12 +118,21 @@ class HeatMapCalendarRow extends StatelessWidget {
date: DateTime(startDate.year, startDate.month,
startDate.day - startDate.weekday % 7 + i),
backgroundColor: defaultColor,
focusColor: focusDate != null &&
DateTime(startDate.year, startDate.month,
startDate.day - startDate.weekday % 7 + i)
.isOnSameDayAs(focusDate)
? colorMode == ColorMode.opacity
? colorsets?.entries.first.value
: colorsets?.entries.last.value
: null,
size: size,
fontSize: fontSize,
textColor: textColor,
borderRadius: borderRadius,
margin: margin,
onClick: onClick,
onLongPress: onLongPress,
// If datasets has DateTime key which is equal to this HeatMapContainer's date,
// we have to color the matched HeatMapContainer.
//
Expand Down
101 changes: 61 additions & 40 deletions lib/src/widget/heatmap_column.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ class HeatMapColumn extends StatelessWidget {
/// Paratmeter gives clicked [DateTime] value.
final Function(DateTime)? onClick;

/// Function that will be called when a block is long pressed.
///
/// Paratmeter gives pressed [DateTime] value.
final Function(DateTime)? onLongPress;

/// The integer value of the maximum value for the highest value of the month.
final int? maxValue;

Expand All @@ -73,12 +78,16 @@ class HeatMapColumn extends StatelessWidget {
// current week.
final int numDays;

/// The date value of the focused date.
final DateTime? focusDate;

HeatMapColumn({
Key? key,
required this.startDate,
required this.endDate,
required this.colorMode,
required this.numDays,
this.focusDate,
this.size,
this.fontSize,
this.defaultColor,
Expand All @@ -88,52 +97,64 @@ class HeatMapColumn extends StatelessWidget {
this.margin,
this.colorsets,
this.onClick,
this.onLongPress,
this.maxValue,
this.showText,
}) :
// Init list.
dayContainers = List.generate(
numDays,
(i) => HeatMapContainer(
date: DateUtil.changeDay(startDate, i),
backgroundColor: defaultColor,
size: size,
fontSize: fontSize,
textColor: textColor,
borderRadius: borderRadius,
margin: margin,
onClick: onClick,
showText: showText,
// If datasets has DateTime key which is equal to this HeatMapContainer's date,
// we have to color the matched HeatMapContainer.
//
// If datasets is null or doesn't contains the equal DateTime value, send null.
selectedColor: datasets?.keys.contains(DateTime(
startDate.year,
startDate.month,
startDate.day - startDate.weekday % 7 + i)) ??
false
// If colorMode is ColorMode.opacity,
? colorMode == ColorMode.opacity
// Color the container with first value of colorsets
// and set opacity value to current day's datasets key
// devided by maxValue which is the maximum value of the month.
? colorsets?.values.first.withOpacity((datasets?[DateTime(
startDate.year,
startDate.month,
startDate.day + i - (startDate.weekday % 7))] ??
1) /
(maxValue ?? 1))
// Else if colorMode is ColorMode.Color.
//
// Get color value from colorsets which is filtered with DateTime value
// Using DatasetsUtil.getColor()
: DatasetsUtil.getColor(
colorsets,
datasets?[DateTime(startDate.year, startDate.month,
startDate.day + i - (startDate.weekday % 7))])
: null,
),
(i) {
final date = DateUtil.changeDay(startDate, i);
return HeatMapContainer(
date: date,
backgroundColor: defaultColor,
size: size,
fontSize: fontSize,
textColor: textColor,
borderRadius: borderRadius,
margin: margin,
onClick: onClick,
onLongPress: onLongPress,
showText: showText,
// If datasets has DateTime key which is equal to this HeatMapContainer's date,
// we have to color the matched HeatMapContainer.
//
// If datasets is null or doesn't contains the equal DateTime value, send null.
selectedColor: datasets?.keys.contains(DateTime(
startDate.year,
startDate.month,
startDate.day - startDate.weekday % 7 + i)) ??
false
// If colorMode is ColorMode.opacity,
? colorMode == ColorMode.opacity
// Color the container with first value of colorsets
// and set opacity value to current day's datasets key
// devided by maxValue which is the maximum value of the month.
? colorsets?.values.first.withOpacity((datasets?[DateTime(
startDate.year,
startDate.month,
startDate.day +
i -
(startDate.weekday % 7))] ??
1) /
(maxValue ?? 1))
// Else if colorMode is ColorMode.Color.
//
// Get color value from colorsets which is filtered with DateTime value
// Using DatasetsUtil.getColor()
: DatasetsUtil.getColor(
colorsets,
datasets?[DateTime(startDate.year, startDate.month,
startDate.day + i - (startDate.weekday % 7))])
: null,
focusColor: focusDate != null && date.isOnSameDayAs(focusDate)
? colorMode == ColorMode.opacity
? colorsets?.entries.first.value
: colorsets?.entries.last.value
: null,
);
},
),
// Fill emptySpace list only if given wek doesn't have 7 days.
emptySpace = (numDays != 7)
Expand Down
Loading