Add onReset to form fields (#696)

* Add `onReset` to form fields

* Prepare Forui for review

---------

Co-authored-by: Pante <[email protected]>

Author: Pante

docs/app/docs/form/autocomplete/page.mdx

@@ -59,6 +59,7 @@ FAutocomplete(
   hint: 'Type to search countries',
   onChange: (value) => print('Selected country: $value'),
   onSaved: (value) => print('Saved country: $value'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUserInteraction,
   builder: (context, styles, child) => child!,
   prefixBuilder: (context, style, states) => Icon(FIcons.globe),
@@ -97,6 +98,7 @@ FAutocomplete.builder(
   hint: 'Type to search countries',
   onChange: (value) => print('Selected country: $value'),
   onSaved: (value) => print('Saved country: $value'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUserInteraction,
   builder: (context, styles, child) => child!,
   prefixBuilder: (context, style, states) => Icon(FIcons.globe),

docs/app/docs/form/date-field/page.mdx

@@ -89,6 +89,7 @@ FDateField(
   enabled: true,
   onChange: (date) => print('Date changed: $date'),
   onSaved: (date) => print('Date saved: $date'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUnfocus,
   forceErrorText: null,
   errorBuilder: (context, error) => Text(error, style: TextStyle(color: Colors.red)),

docs/app/docs/form/multi-select/page.mdx

@@ -86,6 +86,7 @@ FMultiSelect<Locale>(
   sort: (a, b) => a.compareTo(b),
   onChange: (value) => print('Selected country: $value'),
   onSaved: (value) => print('Saved country: $value'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUserInteraction,
   prefixBuilder: (context, styles) => Icon(FIcons.globe),
   suffixBuilder: (context, styles) => Icon(FIcons.arrowDown),
@@ -113,6 +114,7 @@ FMultiSelect<String>.rich(
   sort: (a, b) => a.compareTo(b),
   onChange: (value) => print('Selected country: $value'),
   onSaved: (value) => print('Saved country: $value'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUserInteraction,
   prefixBuilder: (context, styles) => Icon(FIcons.globe),
   suffixBuilder: (context, styles) => Icon(FIcons.arrowDown),

docs/app/docs/form/select/page.mdx

@@ -84,6 +84,7 @@ FSelect<Locale>(
   format: (value) => value.toUpperCase(),
   onChange: (value) => print('Selected country: $value'),
   onSaved: (value) => print('Saved country: $value'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUserInteraction,
   builder: (context, style, state, child) => child,
   prefixBuilder: (context, style, states) => Icon(FIcons.globe),
@@ -106,6 +107,7 @@ FSelect<String>.rich(
   format: (value) => value.toUpperCase(),
   onChange: (value) => print('Selected country: $value'),
   onSaved: (value) => print('Saved country: $value'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUserInteraction,
   builder: (context, style, state, child) => child,
   prefixBuilder: (context, style, states) => Icon(FIcons.globe),

docs/app/docs/form/text-form-field/page.mdx

@@ -105,6 +105,7 @@ FTextFormField(
   clearable: (value) => value.text.isNotEmpty,
   enabled: true,
   onSaved: (value) {},
+  onReset: () => print('Reset'),
   validator: (value) => true,
   label: const Text('Email'),
   hint: '[email protected]',
@@ -125,6 +126,7 @@ FTextFormField.email(
   clearable: (value) => value.text.isNotEmpty,
   enabled: true,
   onSaved: (value) {},
+  onReset: () => print('Reset'),
   validator: (value) => true,
   label: const Text('Email'),
   hint: '[email protected]',
@@ -145,6 +147,7 @@ FTextFormField.password(
   clearable: (value) => value.text.isNotEmpty,
   enabled: true,
   onSaved: (value) {},
+  onReset: () => print('Reset'),
   validator: (value) => true,
   label: const Text('Password'),
   hint: 'Enter password',
@@ -166,6 +169,7 @@ FTextFormField.multiline(
   clearable: (value) => value.text.isNotEmpty,
   enabled: true,
   onSaved: (value) {},
+  onReset: () => print('Reset'),
   validator: (value) => true,
   label: const Text('Description'),
   hint: 'Enter description',

docs/app/docs/form/time-field/page.mdx

@@ -97,6 +97,7 @@ FTimeField(
   enabled: true,
   onChange: (time) => print('Time changed: $time'),
   onSaved: (time) => print('Time saved: $time'),
+  onReset: () => print('Reset'),
   autovalidateMode: AutovalidateMode.onUnfocus,
 );
 ```

docs/app/docs/themes/page.mdx

@@ -76,23 +76,32 @@ class FAccordionStyle {
     +FAccordionStyle(...)
     +FAccordionStyle.inherit(colors, typography, style)
 }
+
+class FAccordionMotion {
+    +FAccordionMotion(...)
+}
+
 note for FAccordionStyle "Each Forui widget has a corresponding style.\nWe use FAccordionStyle here as an example."
 
+note for FAccordionMotion "Some Forui widgets have a motion which controls its animation
+properties. We use FAccordionMotion here as an example."
+
 FAnimatedTheme --> FThemeData
 FThemeData --> FColors
 FThemeData --> FTypography
 FThemeData --> FStyle
 FThemeData --> FAccordionStyle
 ```
 
-There are **5** core components in Forui's theming system.
+There are **6** core components in Forui's theming system.
 
 - **[`FAnimatedTheme`](https://pub.dev/documentation/forui/latest/forui.theme/FAnimatedTheme-class.html)**: The root widget that provides the theme data to all widgets in the subtree.
 - **[`FThemeData`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData-class.html)**: Main class that holds:
   - **[`FColors`](https://pub.dev/documentation/forui/latest/forui.theme/FColors-class.html)**: Color scheme including primary, foreground, and background colors.
   - **[`FTypography`](https://pub.dev/documentation/forui/latest/forui.theme/FTypography-class.html)**: Typography settings including font family and text styles.
   - **[`FStyle`](https://pub.dev/documentation/forui/latest/forui.theme/FStyle-class.html)**: Misc. options such as border radius and icon size.
-  - **Individual widget styles**.
+  - Individual widget styles.
+  - Individual widget motions.
 
 
 The included `BuildContext` extension allows `FThemeData` can be accessed via [`context.theme`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeBuildContext.html):

forui/CHANGELOG.md

@@ -6,18 +6,20 @@ We've improved the styles' generated documentation. They should be much easier t
 
 
 ### `FAccordion`
-
 * Add `FAccordionMotion`.
+
 * **Breaking** Move animation related fields from `FAccordionStyle` to `FAccordionMoton`.
 
 
 ### `FAutocomplete`
-
+* Add `FAutocomplete.onReset`.
 * Add `FAutocompletController(popoverMotion: ...)`.
+
 * **Breaking** Change `FAutocompleteContentStyle.loadingIndicatorStyle` to `FAutocompleteContentStyle.progressStyle`.
 
 
 ### `FDateField`
+* Add `FDateField.onReset`.
 
 * **Breaking** Replace `FDateFieldController(animationDuration: ...)` with `FDateFieldController(popoverMotion: ...)`.
 
@@ -32,9 +34,14 @@ We've improved the styles' generated documentation. They should be much easier t
 * **Breaking** Move animation related fields from `FDialogStyle` to `FDialogMotion`.
 
 
-### `FPopover` & `FPopoverMenu`
+### `FFormField`
+* **Breaking** Add `FFormField(onReset: ...)`.
+* **Breaking** Add `FFormFieldProperties(onReset: ...)`.
+
 
+### `FPopover` & `FPopoverMenu`
 * Add `FPopoverMotion`.
+
 * Change default animations to be more subtle.
 * **Breaking** Replace `FPopoverController(animationDuration: ...)` with `FPopoverController(motion: ...)`.
 * **Breaking** Change `FPopoverMenu.hideRegion`'s default value from `FHidePopoverRegion.anywhere` to `FHidePopoverRegion.excludeChild`.
@@ -48,19 +55,33 @@ We've reworked `FProgress` to be more customizable and easier to use.
 * Add `FInheritedCircularProgressStyle`.
 * Add `FDeterminateProgress` which represents determinate linear progress.
 * Add `FDeterminateProgressStyle`.
+
 * **Breaking** Change `FProgress` to represent indeterminate linear progress.
 * **Breaking** Remove `FProgressStyles`.
 
 
 ### `FSelect` & `FMultiSelect`
+* Add `FSelect.onReset`.
+* Add `FMultiSelect.onReset`.
 
 * **Breaking** Rename `FSelectSearchStyle.loadingIndicatorStyle` to `FSelectSearchStyle.progressStyle`.
 * **Breaking** Replace `FSelectController(animationDuration: ...)` with `FSelectController(popoverMotion: ...)`.
 * **Breaking** Replace `FMultiSelectController(animationDuration: ...)` with `FMultiSelectController(popoverMotion: ...)`.
 
 
-### `FSheet`
+### `FSelectGroup`
+* Add `FSelectGroup.onReset`.
+
+
+### `FSelectMenuTile`
+* Add `FSelectMenuTile.onReset`.
+
+
+### `FSelectTileGroup`
+* Add `FSelectTileGroup.onReset`.
+
 
+### `FSheet`
 * Add `FModalSheetStyle`.
 * Add `FPersistentSheetStyle`.
 * Add `FSheetMotion`.
@@ -74,25 +95,24 @@ We've reworked `FProgress` to be more customizable and easier to use.
 
 
 ### `FSidebar`
-
 * Add `FSidebarItemMotion`.
+
 * **Breaking** Move animation related fields from `FSiderbarItemStyle` to `FSiderbarItemMotion`.
 
 
 ### `FSlider`
-
+* Add `FSlider.onReset`.
 * Add `FSliderStyle.tooltipMotion`.
 
 
 ### `FTab`
-
 * Add `FTabMotion`.
 * **Breaking** Replace `FTabController(animationDuration: ...)` with `FTabController(motion: ...)`.
 
 
 ### `FTappable`
-
 * Add `FTappableMotion`.
+
 * **Breaking** Move animation related fields from `FTappableStyle` to `FTappableMotion`.
 
 
@@ -101,22 +121,24 @@ We've added a password visibility toggle to password fields.
 
 * Add password visibility toggle to `FTextField.password(...)`.
 * Add password visibility toggle to `FTextFormField.password(...)`.
+* Add `FTextFormField.onReset`.
 
 
 ### `FThemeData`
 We've added support for animated theme transitions. This should make transitions between themes gradual instead of abrupt.
 
 * Add `FThemeData.lerp(...)`.
+
 * Change `FThemeData.copyWith(...)` to accept style builder functions.
 
 
 ### `FTimeField`
+* Add `FTimeField.onReset`.
 
 * **Breaking** Replace `FTimeFieldController(animationDuration: ...)` with `FTimeFieldController(popoverMotion: ...)`.
 
 
 ### `FToast`
-
 * Add `FToastMotion`.
 * Add `FToasterMotion`.
 
@@ -128,8 +150,8 @@ We've added support for animated theme transitions. This should make transitions
 
 
 ### `FTooltip`
-
 * Add `FTooltipMotion`.
+
 * **Breaking** Replace `FTooltipController(animationDuration: ...)` with `FTooltipController(motion: ...)`.
 
 
@@ -143,12 +165,14 @@ We've added support for animated theme transitions. This should make transitions
 
 ### `FToaster`
 * Add `FToaster.of(...)`.
+
 * Make `FToasterState.show(context: ...)` optional.
 
 
 ## Others
 * Add `FImmutableTween`.
 * Add `FLabel.expands`.
+
 * Fix `FTextField.expands` causing a render error.
 
 

forui/lib/src/foundation/form_field.dart

@@ -11,6 +11,7 @@ class Field<T> extends FormField<T> {
     required super.autovalidateMode,
     required super.forceErrorText,
     required super.onSaved,
+    required super.onReset,
     required super.validator,
     required T? initialValue,
     required super.builder,

forui/lib/src/foundation/form_field_properties.dart

@@ -31,6 +31,11 @@ mixin FFormFieldProperties<T> {
   /// {@endtemplate}
   FormFieldSetter<T>? get onSaved;
 
+  /// {@template forui.foundation.form_field_properties.onReset}
+  /// An optional method to call when the form field is reset via [FormFieldState.reset].
+  /// {@endtemplate}
+  VoidCallback? get onReset;
+
   /// {@template forui.foundation.form_field_properties.validator}
   /// An optional method that validates an input. Returns an error string to
   /// display if the input is invalid, or null otherwise.