Skip to content

Commit

Permalink
refactor: Form fields now correctly implement FormField (#139)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikecoomber
mikecoomber authored Jul 30, 2024
1 parent 7905388 commit 065a0f1
Show file tree
Hide file tree
Showing 28 changed files with 1,535 additions and 1,390 deletions.
7 changes: 3 additions & 4 deletions example/lib/pages/components/date_input_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ class DateInputExample extends StatefulWidget {
}

class _DateInputExampleState extends State<DateInputExample> {
String? _errorText;

@override
Widget build(BuildContext context) {
return ExampleScaffold(
Expand All @@ -29,8 +27,10 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Birthdate',
onChange: (DateTime? value) {
print(value);
},
hintText: 'Enter birthdate',
errorText: _errorText ?? 'Invalid date',
initialValue: DateTime.now(),
size: ZetaWidgetSize.large,
),
Expand All @@ -45,7 +45,6 @@ class _DateInputExampleState extends State<DateInputExample> {
child: ZetaDateInput(
label: 'Label',
hintText: 'Default hint text',
errorText: 'Oops! Error hint text',
size: ZetaWidgetSize.medium,
),
),
Expand Down
23 changes: 15 additions & 8 deletions example/lib/pages/components/password_input_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,25 @@ class _PasswordInputExampleState extends State<PasswordInputExample> {
hintText: 'Password',
controller: _passwordController,
validator: (value) {
if (value != null) {
final regExp = RegExp(r'\d');
if (regExp.hasMatch(value)) return 'Password is incorrect';
print('validating');
if (value == null || value.isEmpty) {
return 'Please enter a password';
}
return null;
},
),
ZetaButton.primary(
label: 'Validate',
onPressed: () {
_formKey.currentState?.validate();
},
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZetaButton(
label: 'Reset',
onPressed: () => _formKey.currentState?.reset(),
),
ZetaButton(
label: 'Validate',
onPressed: () => _formKey.currentState?.validate(),
),
],
),
SizedBox(height: ZetaSpacing.xl_6),
...passwordInputExampleRow(ZetaWidgetSize.large),
Expand Down
102 changes: 51 additions & 51 deletions example/lib/pages/components/phone_input_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,67 +12,67 @@ class PhoneInputExample extends StatefulWidget {
}

class _PhoneInputExampleState extends State<PhoneInputExample> {
String? _errorText;
final key = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: 'Phone Input',
child: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
hasError: _errorText != null,
errorText: _errorText,
onChange: (value) {
if (value?.isEmpty ?? true) setState(() => _errorText = null);
print(value);
},
initialCountry: 'GB',
countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
child: Form(
key: key,
child: Column(
children: [
ZetaButton(label: 'Reset', onPressed: () => key.currentState?.reset()),
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
initialValue: const PhoneNumber(dialCode: '+44', number: '1234567890'),
onChange: (value) {
print(value?.dialCode);
print(value?.number);
},
countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
hasError: _errorText != null,
size: ZetaWidgetSize.large,
errorText: 'Error',
onChange: (value) {
if (value?.isEmpty ?? true) setState(() => _errorText = null);
print(value);
},
countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
selectCountrySemanticLabel: 'Choose country code',
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
size: ZetaWidgetSize.large,
errorText: 'Error',
onChange: (value) {
print(value);
},
countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
selectCountrySemanticLabel: 'Choose country code',
),
),
),
Divider(color: Colors.grey[200]),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Text('Disabled', style: ZetaTextStyles.titleMedium),
),
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
disabled: true,
Divider(color: Colors.grey[200]),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Text('Disabled', style: ZetaTextStyles.titleMedium),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
disabled: true,
),
),
),
],
Padding(
padding: const EdgeInsets.all(20),
child: ZetaPhoneInput(
label: 'Phone number',
hintText: 'Enter your phone number',
),
),
],
),
),
),
);
Expand Down
4 changes: 2 additions & 2 deletions example/lib/pages/components/search_bar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ class _SearchBarExampleState extends State<SearchBarExample> {
Padding(
padding: const EdgeInsets.all(20),
child: ZetaSearchBar(
onChanged: (value) {},
onChange: (value) {},
textInputAction: TextInputAction.search,
onSubmit: (text) {
onFieldSubmitted: (text) {
print(text);
},
),
Expand Down
34 changes: 29 additions & 5 deletions example/lib/pages/components/select_input_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,25 @@ class _SelectInputExampleState extends State<SelectInputExample> {
placeholder: 'Placeholder',
initialValue: "Item 1",
items: items,
validator: (value) {
if (value == null) {
return 'Please select an item';
}
return null;
},
dropdownSemantics: 'Open dropdown',
),
ZetaSelectInput(
label: 'Medium',
hintText: 'Default hint text',
placeholder: 'Placeholder',
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (value != 'Item 2') {
return 'Please select Item 2';
}
return null;
},
items: items,
),
ZetaSelectInput(
Expand All @@ -68,11 +81,22 @@ class _SelectInputExampleState extends State<SelectInputExample> {
disabled: true,
items: items,
),
ZetaButton(
label: 'Validate',
onPressed: () {
formKey.currentState?.validate();
},
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZetaButton(
label: 'Validate',
onPressed: () {
formKey.currentState?.validate();
},
),
ZetaButton(
label: 'Reset',
onPressed: () {
formKey.currentState?.reset();
},
),
],
)
].divide(const SizedBox(height: 8)).toList(),
),
Expand Down
123 changes: 72 additions & 51 deletions example/lib/pages/components/text_input_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,68 +9,89 @@ class TextInputExample extends StatelessWidget {

@override
Widget build(BuildContext context) {
GlobalKey<ZetaTextInputState> key = GlobalKey<ZetaTextInputState>();
final controller = TextEditingController(text: 'Initial value');
final key = GlobalKey<FormState>();
return ExampleScaffold(
name: 'Text Input',
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
ZetaTextInput(
size: ZetaWidgetSize.large,
key: key,
placeholder: 'Placeholder',
prefixText: '£',
label: 'Label',
requirementLevel: ZetaFormFieldRequirement.mandatory,
errorText: 'Error text',
disabled: false,
hintText: 'hint text',
suffix: IconButton(
icon: ZetaIcon(ZetaIcons.add_alert),
onPressed: () {},
child: Form(
key: key,
child: Column(
children: [
ZetaTextInput(
size: ZetaWidgetSize.large,
placeholder: 'Placeholder',
prefixText: '£',
controller: controller,
onChange: print,
label: 'Label',
requirementLevel: ZetaFormFieldRequirement.mandatory,
errorText: 'Error text',
disabled: false,
hintText: 'hint text',
suffix: IconButton(
icon: ZetaIcon(ZetaIcons.add_alert),
onPressed: () {},
),
),
ZetaTextInput(
placeholder: 'Placeholder',
prefixText: '£',
initialValue: 'Initial value',
),
),
ZetaButton(
label: 'Clear',
onPressed: () => key.currentState?.reset(),
),
ZetaTextInput(
placeholder: 'Placeholder',
prefixText: '£',
),
ZetaTextInput(
size: ZetaWidgetSize.small,
placeholder: 'Placeholder',
prefix: SizedBox(
height: 8,
child: IconButton(
iconSize: 12,
splashRadius: 1,
icon: ZetaIcon(
ZetaIcons.add_alert,
ZetaTextInput(
size: ZetaWidgetSize.small,
placeholder: 'Placeholder',
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a value';
}
return null;
},
prefix: SizedBox(
height: 8,
child: IconButton(
iconSize: 12,
splashRadius: 1,
icon: ZetaIcon(
ZetaIcons.add_alert,
),
onPressed: () {},
),
onPressed: () {},
),
),
),
const SizedBox(height: 8),
ZetaTextInput(
placeholder: 'Placeholder',
prefix: ZetaIcon(
ZetaIcons.star,
size: 20,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZetaButton(
label: 'Reset',
onPressed: () => key.currentState?.reset(),
),
ZetaButton(
label: 'Validate',
onPressed: () => key.currentState?.validate(),
),
],
),
const SizedBox(height: 8),
ZetaTextInput(
placeholder: 'Placeholder',
prefix: ZetaIcon(
ZetaIcons.star,
size: 20,
),
),
ZetaTextInput(
size: ZetaWidgetSize.small,
placeholder: 'Placeholder',
suffixText: 'kg',
prefixText: '£',
),
),
ZetaTextInput(
size: ZetaWidgetSize.small,
placeholder: 'Placeholder',
suffixText: 'kg',
prefixText: '£',
),
].divide(const SizedBox(height: 12)).toList(),
].divide(const SizedBox(height: 12)).toList(),
),
),
),
),
Expand Down
Loading

0 comments on commit 065a0f1

Please sign in to comment.