-
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-389] Create MoonLoader (#56)
- Loading branch information
Showing
11 changed files
with
310 additions
and
5 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
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:example/src/storybook/common/options.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| class LoaderStory extends Story { | ||
| LoaderStory() | ||
| : super( | ||
| name: "Loader", | ||
| builder: (context) { | ||
| final loaderSizesKnob = context.knobs.options( | ||
| label: "loaderSize", | ||
| description: "Loader size variants.", | ||
| initial: MoonLoaderSize.md, | ||
| options: const [ | ||
| Option(label: "x2s", value: MoonLoaderSize.x2s), | ||
| Option(label: "xs", value: MoonLoaderSize.xs), | ||
| Option(label: "sm", value: MoonLoaderSize.sm), | ||
| Option(label: "md", value: MoonLoaderSize.md), | ||
| Option(label: "lg", value: MoonLoaderSize.lg), | ||
| ], | ||
| ); | ||
|
|
||
| final loaderColorKnob = context.knobs.options( | ||
| label: "color", | ||
| description: "MoonColors variants for Loader color.", | ||
| initial: 1, // hit | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final color = colorTable(context)[loaderColorKnob]; | ||
|
|
||
| final loaderBackgroundColorKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for Loader background.", | ||
| initial: 39, // none | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[loaderBackgroundColorKnob]; | ||
|
|
||
| return Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| MoonLoader( | ||
| color: color, | ||
| backgroundColor: backgroundColor, | ||
| loaderSize: loaderSizesKnob, | ||
| ), | ||
| 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,75 @@ | ||
| import 'dart:ui'; | ||
|
|
||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/sizes.dart'; | ||
|
|
||
| @immutable | ||
| class MoonLoaderSizes extends ThemeExtension<MoonLoaderSizes> with DiagnosticableTreeMixin { | ||
| static final x2s = MoonLoaderSizes( | ||
| loaderSizeValue: MoonSizes.sizes.x2s, | ||
| loaderStrokeWidth: MoonSizes.sizes.x6s, | ||
| ); | ||
|
|
||
| static final xs = MoonLoaderSizes( | ||
| loaderSizeValue: MoonSizes.sizes.xs, | ||
| loaderStrokeWidth: MoonSizes.sizes.x6s, | ||
| ); | ||
|
|
||
| static final sm = MoonLoaderSizes( | ||
| loaderSizeValue: MoonSizes.sizes.sm, | ||
| loaderStrokeWidth: MoonSizes.sizes.x6s, | ||
| ); | ||
|
|
||
| static final md = MoonLoaderSizes( | ||
| loaderSizeValue: MoonSizes.sizes.md, | ||
| loaderStrokeWidth: MoonSizes.sizes.x5s, | ||
| ); | ||
|
|
||
| static final lg = MoonLoaderSizes( | ||
| loaderSizeValue: MoonSizes.sizes.lg, | ||
| loaderStrokeWidth: MoonSizes.sizes.x5s, | ||
| ); | ||
|
|
||
| /// Loader size value. | ||
| final double loaderSizeValue; | ||
|
|
||
| /// Loader stroke width. | ||
| final double loaderStrokeWidth; | ||
|
|
||
| const MoonLoaderSizes({ | ||
| required this.loaderSizeValue, | ||
| required this.loaderStrokeWidth, | ||
| }); | ||
|
|
||
| @override | ||
| MoonLoaderSizes copyWith({ | ||
| double? loaderSizeValue, | ||
| double? loaderStrokeWidth, | ||
| }) { | ||
| return MoonLoaderSizes( | ||
| loaderSizeValue: loaderSizeValue ?? this.loaderSizeValue, | ||
| loaderStrokeWidth: loaderStrokeWidth ?? this.loaderStrokeWidth, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonLoaderSizes lerp(ThemeExtension<MoonLoaderSizes>? other, double t) { | ||
| if (other is! MoonLoaderSizes) return this; | ||
|
|
||
| return MoonLoaderSizes( | ||
| loaderSizeValue: lerpDouble(loaderSizeValue, other.loaderSizeValue, t)!, | ||
| loaderStrokeWidth: lerpDouble(loaderStrokeWidth, other.loaderStrokeWidth, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonLoaderSizes")) | ||
| ..add(DoubleProperty("loaderSizeValue", loaderSizeValue)) | ||
| ..add(DoubleProperty("loaderStrokeWidth", loaderStrokeWidth)); | ||
| } | ||
| } |
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,80 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/loader/loader_sizes.dart'; | ||
|
|
||
| @immutable | ||
| class MoonLoaderTheme extends ThemeExtension<MoonLoaderTheme> with DiagnosticableTreeMixin { | ||
| static final sizes = MoonLoaderTheme( | ||
| x2s: MoonLoaderSizes.x2s, | ||
| xs: MoonLoaderSizes.xs, | ||
| sm: MoonLoaderSizes.sm, | ||
| md: MoonLoaderSizes.md, | ||
| lg: MoonLoaderSizes.lg, | ||
| ); | ||
|
|
||
| /// (2x) Extra small avatar properties. | ||
| final MoonLoaderSizes x2s; | ||
|
|
||
| /// Extra small avatar properties. | ||
| final MoonLoaderSizes xs; | ||
|
|
||
| /// Small avatar properties. | ||
| final MoonLoaderSizes sm; | ||
|
|
||
| /// Medium avatar properties. | ||
| final MoonLoaderSizes md; | ||
|
|
||
| /// Large avatar properties. | ||
| final MoonLoaderSizes lg; | ||
|
|
||
| const MoonLoaderTheme({ | ||
| required this.x2s, | ||
| required this.xs, | ||
| required this.sm, | ||
| required this.md, | ||
| required this.lg, | ||
| }); | ||
|
|
||
| @override | ||
| MoonLoaderTheme copyWith({ | ||
| MoonLoaderSizes? x2s, | ||
| MoonLoaderSizes? xs, | ||
| MoonLoaderSizes? sm, | ||
| MoonLoaderSizes? md, | ||
| MoonLoaderSizes? lg, | ||
| }) { | ||
| return MoonLoaderTheme( | ||
| x2s: x2s ?? this.x2s, | ||
| xs: xs ?? this.xs, | ||
| sm: sm ?? this.sm, | ||
| md: md ?? this.md, | ||
| lg: lg ?? this.lg, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonLoaderTheme lerp(ThemeExtension<MoonLoaderTheme>? other, double t) { | ||
| if (other is! MoonLoaderTheme) return this; | ||
|
|
||
| return MoonLoaderTheme( | ||
| x2s: x2s.lerp(other.x2s, t), | ||
| xs: xs.lerp(other.xs, t), | ||
| sm: sm.lerp(other.sm, t), | ||
| md: md.lerp(other.md, t), | ||
| lg: lg.lerp(other.lg, t), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonLoaderTheme")) | ||
| ..add(DiagnosticsProperty<MoonLoaderSizes>("x2s", x2s)) | ||
| ..add(DiagnosticsProperty<MoonLoaderSizes>("xs", xs)) | ||
| ..add(DiagnosticsProperty<MoonLoaderSizes>("sm", sm)) | ||
| ..add(DiagnosticsProperty<MoonLoaderSizes>("md", md)) | ||
| ..add(DiagnosticsProperty<MoonLoaderSizes>("lg", lg)); | ||
| } | ||
| } |
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
Oops, something went wrong.