-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [MDS-447] Create Toast component (#103)
- Loading branch information
Showing
11 changed files
with
648 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import 'package:example/src/storybook/common/color_options.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| class ToastStory extends Story { | ||
| ToastStory() | ||
| : super( | ||
| name: "Moon", | ||
| builder: (context) { | ||
| final customLabelTextKnob = context.knobs.text( | ||
| label: "Custom label text", | ||
| initial: "This is a custom MoonToast text", | ||
| ); | ||
|
|
||
| final toastPositionKnob = context.knobs.options( | ||
| label: "MoonToastPosition", | ||
| description: "The position of the MoonToast.", | ||
| initial: MoonToastPosition.bottom, | ||
| options: const [ | ||
| Option(label: "top", value: MoonToastPosition.top), | ||
| Option(label: "bottom", value: MoonToastPosition.bottom), | ||
| ], | ||
| ); | ||
|
|
||
| final toastVariantKnob = context.knobs.options( | ||
| label: "MoonToastVariant", | ||
| description: "The color variant of the MoonToast.", | ||
| initial: MoonToastVariant.original, | ||
| options: const [ | ||
| Option(label: "original", value: MoonToastVariant.original), | ||
| Option(label: "inverted", value: MoonToastVariant.inverted), | ||
| ], | ||
| ); | ||
|
|
||
| final backgroundColorsKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for MoonToast background.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[backgroundColorsKnob]; | ||
|
|
||
| final displayDurationKnob = context.knobs.sliderInt( | ||
| min: 1, | ||
| max: 10, | ||
| initial: 5, | ||
| label: "displayDuration", | ||
| description: "The duration to show the MoonToast.", | ||
| ); | ||
|
|
||
| final borderRadiusKnob = context.knobs.sliderInt( | ||
| max: 20, | ||
| initial: 8, | ||
| label: "borderRadius", | ||
| description: "Border radius for MoonToast.", | ||
| ); | ||
|
|
||
| final setRtlModeKnob = context.knobs.boolean( | ||
| label: "RTL mode", | ||
| description: "Switch between LTR and RTL modes.", | ||
| ); | ||
|
|
||
| return Directionality( | ||
| textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr, | ||
| child: Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| Builder( | ||
| builder: (context) { | ||
| return MoonFilledButton( | ||
| label: const Text("Tap me"), | ||
| onTap: () { | ||
| MoonToast().show( | ||
| context, | ||
| position: toastPositionKnob, | ||
| variant: toastVariantKnob, | ||
| backgroundColor: backgroundColor, | ||
| displayDuration: Duration(seconds: displayDurationKnob), | ||
| borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), | ||
| leading: const Icon(MoonIcons.info_24), | ||
| title: Text(customLabelTextKnob), | ||
| trailing: const Icon(MoonIcons.star_24), | ||
| ); | ||
| }, | ||
| ); | ||
| }, | ||
| ), | ||
| const SizedBox(height: 64), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/colors.dart'; | ||
|
|
||
| @immutable | ||
| class MoonToastColors extends ThemeExtension<MoonToastColors> with DiagnosticableTreeMixin { | ||
| static final light = MoonToastColors( | ||
| lightVariantBackgroundColor: MoonColors.light.gohan, | ||
| darkVariantBackgroundColor: MoonColors.dark.gohan, | ||
| ); | ||
|
|
||
| static final dark = MoonToastColors( | ||
| lightVariantBackgroundColor: MoonColors.dark.gohan, | ||
| darkVariantBackgroundColor: MoonColors.light.gohan, | ||
| ); | ||
|
|
||
| /// Toast light variant background color. | ||
| final Color lightVariantBackgroundColor; | ||
|
|
||
| /// Toast dark variant background color. | ||
| final Color darkVariantBackgroundColor; | ||
|
|
||
| const MoonToastColors({ | ||
| required this.lightVariantBackgroundColor, | ||
| required this.darkVariantBackgroundColor, | ||
| }); | ||
|
|
||
| @override | ||
| MoonToastColors copyWith({ | ||
| Color? lightVariantBackgroundColor, | ||
| Color? darkVariantBackgroundColor, | ||
| }) { | ||
| return MoonToastColors( | ||
| lightVariantBackgroundColor: lightVariantBackgroundColor ?? this.lightVariantBackgroundColor, | ||
| darkVariantBackgroundColor: darkVariantBackgroundColor ?? this.darkVariantBackgroundColor, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonToastColors lerp(ThemeExtension<MoonToastColors>? other, double t) { | ||
| if (other is! MoonToastColors) return this; | ||
|
|
||
| return MoonToastColors( | ||
| lightVariantBackgroundColor: Color.lerp(lightVariantBackgroundColor, other.lightVariantBackgroundColor, t)!, | ||
| darkVariantBackgroundColor: Color.lerp(darkVariantBackgroundColor, other.darkVariantBackgroundColor, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonToastColors")) | ||
| ..add(ColorProperty("lightVariantBackgroundColor", lightVariantBackgroundColor)) | ||
| ..add(ColorProperty("darkVariantBackgroundColor", darkVariantBackgroundColor)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
|
|
||
| import 'dart:ui'; | ||
|
|
||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/borders.dart'; | ||
| import 'package:moon_design/src/theme/sizes.dart'; | ||
|
|
||
| @immutable | ||
| class MoonToastProperties extends ThemeExtension<MoonToastProperties> with DiagnosticableTreeMixin { | ||
| static final properties = MoonToastProperties( | ||
| borderRadius: MoonBorders.borders.surfaceSm, | ||
| contentPadding: EdgeInsets.all(MoonSizes.sizes.x2s), | ||
| gap: MoonSizes.sizes.x2s, | ||
| displayDuration: const Duration(seconds: 5), | ||
| transitionDuration: const Duration(milliseconds: 200), | ||
| transitionCurve: Curves.easeInOutCubic, | ||
| ); | ||
|
|
||
| /// Toast border radius. | ||
| final BorderRadius borderRadius; | ||
|
|
||
| /// Padding around toast content. | ||
| final EdgeInsets contentPadding; | ||
|
|
||
| /// Space between toast children. | ||
| final double gap; | ||
|
|
||
| /// Toast display duration. | ||
| final Duration displayDuration; | ||
|
|
||
| /// Toast transition duration. | ||
| final Duration transitionDuration; | ||
|
|
||
| /// Toast transition curve. | ||
| final Curve transitionCurve; | ||
|
|
||
| const MoonToastProperties({ | ||
| required this.borderRadius, | ||
| required this.contentPadding, | ||
| required this.gap, | ||
| required this.displayDuration, | ||
| required this.transitionDuration, | ||
| required this.transitionCurve, | ||
| }); | ||
|
|
||
| @override | ||
| MoonToastProperties copyWith({ | ||
| BorderRadius? borderRadius, | ||
| EdgeInsets? contentPadding, | ||
| double? gap, | ||
| Duration? displayDuration, | ||
| Duration? transitionDuration, | ||
| Curve? transitionCurve, | ||
| }) { | ||
| return MoonToastProperties( | ||
| borderRadius: borderRadius ?? this.borderRadius, | ||
| contentPadding: contentPadding ?? this.contentPadding, | ||
| gap: gap ?? this.gap, | ||
| displayDuration: displayDuration ?? this.displayDuration, | ||
| transitionDuration: transitionDuration ?? this.transitionDuration, | ||
| transitionCurve: transitionCurve ?? this.transitionCurve, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonToastProperties lerp(ThemeExtension<MoonToastProperties>? other, double t) { | ||
| if (other is! MoonToastProperties) return this; | ||
|
|
||
| return MoonToastProperties( | ||
| borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, | ||
| contentPadding: EdgeInsets.lerp(contentPadding, other.contentPadding, t)!, | ||
| gap: lerpDouble(gap, other.gap, t)!, | ||
| displayDuration: lerpDuration(displayDuration, other.displayDuration, t), | ||
| transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), | ||
| transitionCurve: other.transitionCurve, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonToastProperties")) | ||
| ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius)) | ||
| ..add(DiagnosticsProperty<EdgeInsets>("contentPadding", contentPadding)) | ||
| ..add(DoubleProperty("gap", gap)) | ||
| ..add(DiagnosticsProperty<Duration>("displayDuration", displayDuration)) | ||
| ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration)) | ||
| ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve)); | ||
| } | ||
| } |
Oops, something went wrong.