-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b52a5b0
commit 7ebf90b
Showing
5 changed files
with
237 additions
and
14 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,37 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:mix/mix.dart'; | ||
| import 'package:remix_ui/remix_ui.dart'; | ||
| import 'package:widgetbook/widgetbook.dart'; | ||
| import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook; | ||
|
|
||
| @widgetbook.UseCase( | ||
| name: 'interactive playground', | ||
| type: RemixAlert, | ||
| ) | ||
| Widget buildCheckboxUseCase(BuildContext context) { | ||
| return Center( | ||
| child: SizedBox( | ||
| width: 300, | ||
| child: RemixAlert( | ||
| title: StyledText( | ||
| context.knobs.string( | ||
| label: 'Title', | ||
| initialValue: 'Error', | ||
| ), | ||
| ), | ||
| subtitle: StyledText( | ||
| context.knobs.string( | ||
| label: 'Subtitle', | ||
| initialValue: 'Your session has expired. Please log in again.', | ||
| ), | ||
| ), | ||
| leading: context.knobs.boolean( | ||
| label: 'Leading', | ||
| initialValue: false, | ||
| ) | ||
| ? const StyledIcon(Icons.warning_amber_rounded) | ||
| : null, | ||
| ), | ||
| ), | ||
| ); | ||
| } |
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,67 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:mix/mix.dart'; | ||
| import 'package:remix_ui/components/alert/alert.style.dart'; | ||
| import 'package:remix_ui/components/card/card.style.dart'; | ||
|
|
||
| import '../../utils/component_recipe.dart'; | ||
|
|
||
| class RemixAlert extends StatelessWidget | ||
| implements RemixComponentRecipe<AlertStyles> { | ||
| const RemixAlert({ | ||
| super.key, | ||
| this.leading, | ||
| this.title, | ||
| this.subtitle, | ||
| this.style, | ||
| this.variants = const [], | ||
| }); | ||
|
|
||
| final Widget? leading; | ||
| final Widget? title; | ||
| final Widget? subtitle; | ||
|
|
||
| @override | ||
| final AlertStyles? style; | ||
|
|
||
| @override | ||
| final List<Variant> variants; | ||
|
|
||
| AlertStyles buildStyle(List<Variant> variants) { | ||
| final result = style == null ? AlertStyles.base() : style!; | ||
| return result.applyVariants(variants); | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final style = buildStyle(variants); | ||
|
|
||
| return HBox( | ||
| style: style.outerRowContainer, | ||
| children: [ | ||
| if (leading != null) | ||
| MixProvider.build( | ||
| context, | ||
| style: style.icon, | ||
| builder: (_) => leading!, | ||
| ), | ||
| VBox( | ||
| style: style.innerColumnContainer, | ||
| children: [ | ||
| if (title != null) | ||
| MixProvider.build( | ||
| context, | ||
| style: style.title, | ||
| builder: (_) => title!, | ||
| ), | ||
| if (subtitle != null) | ||
| MixProvider.build( | ||
| context, | ||
| style: style.subtitle, | ||
| builder: (_) => subtitle!, | ||
| ), | ||
| ], | ||
| ), | ||
| ], | ||
| ); | ||
| } | ||
| } |
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,104 @@ | ||
| import 'package:mix/mix.dart'; | ||
|
|
||
| class AlertStyles extends StyleRecipe<AlertStyles> { | ||
| const AlertStyles({ | ||
| this.outerRowContainer = const Style.empty(), | ||
| this.innerColumnContainer = const Style.empty(), | ||
| this.title = const Style.empty(), | ||
| this.subtitle = const Style.empty(), | ||
| this.icon = const Style.empty(), | ||
| }); | ||
|
|
||
| final Style outerRowContainer; | ||
| final Style innerColumnContainer; | ||
| final Style title; | ||
| final Style subtitle; | ||
| final Style icon; | ||
|
|
||
| factory AlertStyles.base() { | ||
| return AlertStyles( | ||
| outerRowContainer: _outerRowContainer(), | ||
| innerColumnContainer: _innerColumnContainer(), | ||
| title: _title(), | ||
| subtitle: _subtitle(), | ||
| icon: _icon(), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| AlertStyles applyVariants(List<Variant> variants) { | ||
| return AlertStyles( | ||
| outerRowContainer: outerRowContainer.applyVariants(variants), | ||
| innerColumnContainer: innerColumnContainer.applyVariants(variants), | ||
| title: title.applyVariants(variants), | ||
| subtitle: subtitle.applyVariants(variants), | ||
| icon: icon.applyVariants(variants), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| AlertStyles merge(AlertStyles? other) { | ||
| if (other == null) return this; | ||
| return copyWith( | ||
| outerRowContainer: outerRowContainer.merge(other.outerRowContainer), | ||
| innerColumnContainer: | ||
| innerColumnContainer.merge(other.innerColumnContainer), | ||
| title: title.merge(other.title), | ||
| subtitle: subtitle.merge(other.subtitle), | ||
| icon: icon.merge(other.icon), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| AlertStyles copyWith({ | ||
| Style? outerRowContainer, | ||
| Style? innerColumnContainer, | ||
| Style? title, | ||
| Style? subtitle, | ||
| Style? icon, | ||
| }) { | ||
| return AlertStyles( | ||
| outerRowContainer: outerRowContainer ?? this.outerRowContainer, | ||
| innerColumnContainer: innerColumnContainer ?? this.innerColumnContainer, | ||
| title: title ?? this.title, | ||
| subtitle: subtitle ?? this.subtitle, | ||
| icon: icon ?? this.icon, | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| Style _outerRowContainer() => Style( | ||
| flex.gap(8), | ||
| box.padding(16), | ||
| box.borderRadius(8), | ||
| box.border.width(1), | ||
| box.border.color.redAccent(), | ||
| flex.mainAxisSize.min(), | ||
| flex.mainAxisAlignment.start(), | ||
| flex.crossAxisAlignment.start(), | ||
| ); | ||
|
|
||
| Style _innerColumnContainer() => Style( | ||
| flex.gap(2), | ||
| flex.mainAxisSize.min(), | ||
| flex.mainAxisAlignment.start(), | ||
| flex.crossAxisAlignment.start(), | ||
| flexible.expanded(), | ||
| ); | ||
|
|
||
| Style _title() => Style( | ||
| text.style.fontSize(14), | ||
| text.style.fontWeight.w600(), | ||
| text.style.color.redAccent(), | ||
| ); | ||
|
|
||
| Style _subtitle() => Style( | ||
| text.style.fontSize(14), | ||
| text.style.fontWeight.normal(), | ||
| text.style.color.redAccent(), | ||
| ); | ||
|
|
||
| Style _icon() => Style( | ||
| icon.size(20), | ||
| icon.color.redAccent(), | ||
| ); |
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