Skip to content

Commit 2d9067e

Browse files
mikecoombermikecoomber
committed
docs
1 parent 7616c79 commit 2d9067e

File tree

6 files changed

+84
-430
lines changed

6 files changed

+84
-430
lines changed

‎example/lib/pages/components/phone_input_example.dart

+5-13
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ class _PhoneInputExampleState extends State<PhoneInputExample> {
2828
hintText: 'Enter your phone number',
2929
hasError: _errorText != null,
3030
errorText: _errorText,
31-
onChanged: (value) {
31+
onChange: (value) {
3232
if (value?.isEmpty ?? true) setState(() => _errorText = null);
3333
print(value);
3434
},
35-
// countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
35+
initialCountry: 'GB',
36+
countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
3637
),
3738
),
3839
Padding(
@@ -42,8 +43,8 @@ class _PhoneInputExampleState extends State<PhoneInputExample> {
4243
hintText: 'Enter your phone number',
4344
hasError: _errorText != null,
4445
size: ZetaWidgetSize.large,
45-
errorText: _errorText,
46-
onChanged: (value) {
46+
errorText: 'Error',
47+
onChange: (value) {
4748
if (value?.isEmpty ?? true) setState(() => _errorText = null);
4849
print(value);
4950
},
@@ -70,15 +71,6 @@ class _PhoneInputExampleState extends State<PhoneInputExample> {
7071
hintText: 'Enter your phone number',
7172
),
7273
),
73-
Padding(
74-
padding: const EdgeInsets.all(20),
75-
child: TextFormField(
76-
decoration: InputDecoration(
77-
isDense: true,
78-
prefixText: 'ddddddddddd',
79-
),
80-
),
81-
),
8274
],
8375
),
8476
),

‎lib/src/components/phone_input/phone_input.dart

+49-46
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,27 @@ import 'package:flutter/services.dart';
55

66
import '../../../zeta_flutter.dart';
77

8+
import '../../interfaces/form_field.dart';
89
import '../text_input/hint_text.dart';
910
import '../text_input/input_label.dart';
1011
import '../text_input/text_input.dart';
1112
import 'countries.dart';
1213

1314
/// ZetaPhoneInput allows entering phone numbers.
14-
class ZetaPhoneInput extends ZetaStatefulWidget {
15+
class ZetaPhoneInput extends ZetaFormField<String> {
1516
/// Constructor for [ZetaPhoneInput].
1617
const ZetaPhoneInput({
1718
super.key,
1819
super.rounded,
20+
super.initialValue,
21+
super.onChange,
22+
super.requirementLevel = ZetaFormFieldRequirement.none,
1923
this.label,
2024
this.hintText,
21-
this.disabled = false,
25+
super.disabled = false,
2226
this.hasError = false,
2327
this.errorText,
24-
this.onChanged,
25-
this.countryDialCode,
26-
this.phoneNumber,
28+
this.initialCountry,
2729
this.countries,
2830
this.countrySearchHint,
2931
this.size = ZetaWidgetSize.medium,
@@ -35,9 +37,6 @@ class ZetaPhoneInput extends ZetaStatefulWidget {
3537
/// If provided, displays a hint below the input field.
3638
final String? hintText;
3739

38-
/// Determines if the inputs should be enabled (default) or disabled.
39-
final bool disabled;
40-
4140
/// Determines if the input field should be displayed in error style.
4241
/// Default is `false`.
4342
/// If `enabled` is `false`, this has no effect.
@@ -47,14 +46,8 @@ class ZetaPhoneInput extends ZetaStatefulWidget {
4746
/// to be displayed below the input field.
4847
final String? errorText;
4948

50-
/// A callback, which provides the entered phone number.
51-
final void Function(Map<String, String>?)? onChanged;
52-
53-
/// The initial value for the country dial code including leading +
54-
final String? countryDialCode;
55-
56-
/// The initial value for the phone number
57-
final String? phoneNumber;
49+
/// The initial value for the selected country.
50+
final String? initialCountry;
5851

5952
/// List of countries ISO 3166-1 alpha-2 codes
6053
final List<String>? countries;
@@ -63,6 +56,9 @@ class ZetaPhoneInput extends ZetaStatefulWidget {
6356
/// Default is `Search by name or dial code`.
6457
final String? countrySearchHint;
6558

59+
/// The size of the input.
60+
///
61+
/// Setting this to small will have no effect.
6662
final ZetaWidgetSize size;
6763

6864
@override
@@ -77,11 +73,10 @@ class ZetaPhoneInput extends ZetaStatefulWidget {
7773
..add(DiagnosticsProperty<bool>('rounded', rounded))
7874
..add(DiagnosticsProperty<bool>('hasError', hasError))
7975
..add(StringProperty('errorText', errorText))
80-
..add(ObjectFlagProperty<void Function(Map<String, String>? p1)?>.has('onChanged', onChanged))
81-
..add(StringProperty('countryDialCode', countryDialCode))
82-
..add(StringProperty('phoneNumber', phoneNumber))
76+
..add(StringProperty('countryDialCode', initialCountry))
8377
..add(IterableProperty<String>('countries', countries))
84-
..add(StringProperty('countrySearchHint', countrySearchHint));
78+
..add(StringProperty('countrySearchHint', countrySearchHint))
79+
..add(EnumProperty<ZetaWidgetSize>('size', size));
8580
}
8681
}
8782

@@ -91,11 +86,31 @@ class _ZetaPhoneInputState extends State<ZetaPhoneInput> {
9186
late Country _selectedCountry;
9287
late String _phoneNumber;
9388

94-
final FocusNode inputFocusNode = FocusNode();
89+
final FocusNode _inputFocusNode = FocusNode();
90+
91+
ZetaWidgetSize get _size => widget.size == ZetaWidgetSize.small ? ZetaWidgetSize.medium : widget.size;
9592

9693
@override
9794
void initState() {
9895
super.initState();
96+
_setCountries();
97+
_setInitialCountry();
98+
_setDropdownItems();
99+
}
100+
101+
@override
102+
void didUpdateWidget(ZetaPhoneInput oldWidget) {
103+
if (oldWidget.countries != widget.countries) {
104+
_setCountries();
105+
setState(_setDropdownItems);
106+
}
107+
if (oldWidget.initialCountry != widget.initialCountry) {
108+
setState(_setInitialCountry);
109+
}
110+
super.didUpdateWidget(oldWidget);
111+
}
112+
113+
void _setCountries() {
99114
_countries = widget.countries?.isEmpty ?? true
100115
? Countries.list
101116
: Countries.list.where((country) => widget.countries!.contains(country.isoCode)).toList();
@@ -107,21 +122,14 @@ class _ZetaPhoneInputState extends State<ZetaPhoneInput> {
107122
);
108123
}
109124
if (_countries.isEmpty) _countries = Countries.list;
125+
}
126+
127+
void _setInitialCountry() {
110128
_selectedCountry = _countries.firstWhereOrNull(
111-
(country) => country.dialCode == widget.countryDialCode,
129+
(country) => country.isoCode == widget.initialCountry,
112130
) ??
113131
_countries.first;
114-
_phoneNumber = widget.phoneNumber ?? '';
115-
116-
_setDropdownItems();
117-
}
118-
119-
@override
120-
void didUpdateWidget(ZetaPhoneInput oldWidget) {
121-
if (oldWidget.countries != widget.countries) {
122-
setState(_setDropdownItems);
123-
}
124-
super.didUpdateWidget(oldWidget);
132+
_phoneNumber = widget.initialValue ?? '';
125133
}
126134

127135
void _setDropdownItems() {
@@ -147,14 +155,7 @@ class _ZetaPhoneInputState extends State<ZetaPhoneInput> {
147155
if (selectedCountry != null) _selectedCountry = selectedCountry;
148156
if (phoneNumber != null) _phoneNumber = phoneNumber;
149157
});
150-
widget.onChanged?.call(
151-
_phoneNumber.isEmpty
152-
? {}
153-
: {
154-
'countryDialCode': _selectedCountry.dialCode,
155-
'phoneNumber': _phoneNumber,
156-
},
157-
);
158+
widget.onChange?.call('${_selectedCountry.dialCode}$_phoneNumber');
158159
}
159160

160161
@override
@@ -167,7 +168,7 @@ class _ZetaPhoneInputState extends State<ZetaPhoneInput> {
167168
if (widget.label != null) ...[
168169
ZetaInputLabel(
169170
label: widget.label!,
170-
requirementLevel: ZetaFormFieldRequirement.none, //TODO implement form field
171+
requirementLevel: widget.requirementLevel,
171172
disabled: widget.disabled,
172173
),
173174
const SizedBox(height: ZetaSpacing.minimum),
@@ -181,7 +182,7 @@ class _ZetaPhoneInputState extends State<ZetaPhoneInput> {
181182
setState(() {
182183
_selectedCountry = _countries.firstWhere((country) => country.dialCode == value.value);
183184
});
184-
inputFocusNode.requestFocus();
185+
_inputFocusNode.requestFocus();
185186
}
186187
: null,
187188
value: _selectedCountry.dialCode,
@@ -240,11 +241,13 @@ class _ZetaPhoneInputState extends State<ZetaPhoneInput> {
240241
),
241242
Expanded(
242243
child: textInputWithBorder(
243-
initialValue: widget.phoneNumber,
244+
initialValue: widget.initialValue,
244245
disabled: widget.disabled,
245-
size: widget.size,
246+
size: _size,
247+
requirementLevel: widget.requirementLevel,
246248
rounded: rounded,
247-
focusNode: inputFocusNode,
249+
focusNode: _inputFocusNode,
250+
errorText: widget.errorText != null ? '' : null,
248251
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[\d\s\-]'))],
249252
keyboardType: TextInputType.phone,
250253
onChange: (value) => _onChanged(phoneNumber: value),

‎lib/src/components/text_input/hint_text.dart

+11-3
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,24 @@ import 'package:flutter/widgets.dart';
33

44
import '../../../zeta_flutter.dart';
55

6-
class ZetaHintText extends StatelessWidget {
6+
/// A widget that displays hint or error text below a form field.
7+
class ZetaHintText extends ZetaStatelessWidget {
8+
/// Creates a new [ZetaHintText]
79
const ZetaHintText({
810
required this.disabled,
911
required this.hintText,
1012
required this.errorText,
11-
required this.rounded,
13+
super.rounded,
14+
super.key,
1215
});
16+
17+
/// If true, the hint text will be disabled.
1318
final bool disabled;
14-
final bool rounded;
19+
20+
/// The hint text.
1521
final String? hintText;
22+
23+
/// The error text. If defined, it will be shown instead of the hint text.
1624
final String? errorText;
1725

1826
@override

‎lib/src/components/text_input/input_label.dart

+12-1
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,26 @@ import 'package:flutter/widgets.dart';
33

44
import '../../../zeta_flutter.dart';
55

6-
class ZetaInputLabel extends StatelessWidget {
6+
/// A widget that displays a label above a form field.
7+
class ZetaInputLabel extends ZetaStatelessWidget {
8+
/// Creates a new [ZetaInputLabel]
79
const ZetaInputLabel({
810
required this.label,
911
required this.requirementLevel,
1012
required this.disabled,
13+
super.key,
1114
});
1215

16+
/// The label text.
1317
final String label;
18+
19+
/// The requirement level of the field.
20+
///
21+
/// If set to [ZetaFormFieldRequirement.optional], the label will display '(optional)'.
22+
/// If set to [ZetaFormFieldRequirement.mandatory], the label will have an asterix next to it.
1423
final ZetaFormFieldRequirement requirementLevel;
24+
25+
/// If true, the label will be disabled.
1526
final bool disabled;
1627

1728
@override

0 commit comments

Comments
 (0)