Skip to content

Commit

Permalink
feat: Created text input (#78)
Browse files Browse the repository at this point in the history
refactor: Refactored date and time inputs to use text input
  • Loading branch information
thelukewalton committed May 23, 2024
1 parent 60a4afb commit 57c72f4
Show file tree
Hide file tree
Showing 14 changed files with 1,022 additions and 531 deletions.
2 changes: 2 additions & 0 deletions example/lib/home.dart
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import 'package:zeta_example/pages/components/switch_example.dart';
import 'package:zeta_example/pages/components/snackbar_example.dart';
import 'package:zeta_example/pages/components/tabs_example.dart';
import 'package:zeta_example/pages/components/pagination_example.dart';
import 'package:zeta_example/pages/components/text_input_example.dart';
import 'package:zeta_example/pages/components/time_input_example.dart';
import 'package:zeta_example/pages/components/tooltip_example.dart';
import 'package:zeta_example/pages/components/top_app_bar_example.dart';
Expand Down Expand Up @@ -90,6 +91,7 @@ final List<Component> components = [
Component(FilterSelectionExample.name, (context) => const FilterSelectionExample()),
Component(StepperInputExample.name, (context) => const StepperInputExample()),
Component(TimeInputExample.name, (context) => const TimeInputExample()),
Component(TextInputExample.name, (context) => const TextInputExample()),
];

final List<Component> theme = [
Expand Down
25 changes: 8 additions & 17 deletions example/lib/pages/components/date_input_example.dart
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,9 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Birthdate',
hint: 'Enter birthdate',
hasError: _errorText != null,
hintText: 'Enter birthdate',
errorText: _errorText ?? 'Invalid date',
onChanged: (value) {
if (value == null) return setState(() => _errorText = null);
final now = DateTime.now();
setState(
() => _errorText = value.difference(DateTime(now.year, now.month, now.day)).inDays > 0
? 'Birthdate cannot be in the future'
: null,
);
},
initialValue: DateTime.now(),
),
),
Divider(color: Colors.grey[200]),
Expand All @@ -52,10 +43,10 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Label',
hint: 'Default hint text',
hintText: 'Default hint text',
errorText: 'Oops! Error hint text',
rounded: false,
datePattern: 'yyyy-MM-dd',
dateFormat: 'yyyy-MM-dd',
),
),
Divider(color: Colors.grey[200]),
Expand All @@ -67,8 +58,8 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Label',
hint: 'Default hint text',
enabled: false,
hintText: 'Default hint text',
disabled: true,
),
),
Divider(color: Colors.grey[200]),
Expand All @@ -80,7 +71,7 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Label',
hint: 'Default hint text',
hintText: 'Default hint text',
errorText: 'Oops! Error hint text',
size: ZetaWidgetSize.medium,
),
Expand All @@ -94,7 +85,7 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Label',
hint: 'Default hint text',
hintText: 'Default hint text',
errorText: 'Oops! Error hint text',
size: ZetaWidgetSize.small,
),
Expand Down
75 changes: 75 additions & 0 deletions example/lib/pages/components/text_input_example.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class TextInputExample extends StatelessWidget {
static const name = 'TextInput';

const TextInputExample({super.key});

@override
Widget build(BuildContext context) {
GlobalKey<ZetaTextInputState> key = GlobalKey<ZetaTextInputState>();
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: Icon(ZetaIcons.add_alert_round),
onPressed: () {},
),
),
ZetaButton(
label: 'Clear',
onPressed: () => key.currentState?.reset(),
),
ZetaTextInput(
placeholder: 'Placeholder',
prefixText: '£',
),
ZetaTextInput(
size: ZetaWidgetSize.small,
placeholder: 'Placeholder',
prefix: IconButton(
iconSize: 12,
icon: Icon(
ZetaIcons.add_alert_round,
),
onPressed: () {},
),
),
const SizedBox(height: 8),
ZetaTextInput(
placeholder: 'Placeholder',
prefix: Icon(
ZetaIcons.star_round,
size: 20,
),
),
ZetaTextInput(
size: ZetaWidgetSize.small,
placeholder: 'Placeholder',
suffixText: 'kg',
prefixText: '£',
),
].divide(const SizedBox(height: 12)).toList(),
),
),
),
));
}
}
10 changes: 6 additions & 4 deletions example/lib/pages/components/time_input_example.dart
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,23 @@ class TimeInputExample extends StatelessWidget {
),
ZetaTimeInput(
label: 'Large',
hint: 'Default hint text',
hintText: 'Default hint text',
onChange: (value) => print(value),
errorText: 'Oops! Error hint text',
size: ZetaWidgetSize.large,
initialValue: TimeOfDay.now(),
),
ZetaTimeInput(
label: 'Medium',
hint: 'Default hint text',
hintText: 'Default hint text',
requirementLevel: ZetaFormFieldRequirement.optional,
onChange: (value) => print(value),
errorText: 'Oops! Error hint text',
size: ZetaWidgetSize.medium,
),
ZetaTimeInput(
label: 'Small',
hint: 'Default hint text',
hintText: 'Default hint text',
onChange: (value) => print(value),
errorText: 'Oops! Error hint text',
size: ZetaWidgetSize.small,
Expand All @@ -55,7 +57,7 @@ class TimeInputExample extends StatelessWidget {
height: 48,
),
ZetaTimeInput(label: '12 Hr Time Picker', use12Hr: true),
ZetaTimeInput(label: 'Disabled Time Picker', disabled: true, hint: 'Disabled time picker'),
ZetaTimeInput(label: 'Disabled Time Picker', disabled: true, hintText: 'Disabled time picker'),
ZetaTimeInput(label: 'Sharp Time Picker', rounded: false),
].divide(const SizedBox(height: 12)).toList(),
),
Expand Down
4 changes: 3 additions & 1 deletion example/widgetbook/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';

import 'pages/assets/icon_widgetbook.dart';
import 'pages/components/accordion_widgetbook.dart';
import 'pages/components/text_input_widgetbook.dart';
import 'pages/components/top_app_bar_widgetbook.dart';
import 'pages/components/avatar_widgetbook.dart';
import 'pages/components/badges_widgetbook.dart';
Expand Down Expand Up @@ -39,7 +40,7 @@ import 'pages/components/stepper_widgetbook.dart';
import 'pages/components/switch_widgetbook.dart';
import 'pages/components/snack_bar_widgetbook.dart';
import 'pages/components/tabs_widgetbook.dart';
import 'pages/components/time_input.dart';
import 'pages/components/time_input_widgetbook.dart';
import 'pages/components/tooltip_widgetbook.dart';
import 'pages/theme/color_widgetbook.dart';
import 'pages/theme/radius_widgetbook.dart';
Expand Down Expand Up @@ -140,6 +141,7 @@ class HotReload extends StatelessWidget {
WidgetbookUseCase(name: 'Screen Header Bar', builder: (context) => screenHeaderBarUseCase(context)),
WidgetbookUseCase(name: 'Filter Selection', builder: (context) => filterSelectionUseCase(context)),
WidgetbookUseCase(name: 'Time Input', builder: (context) => timeInputUseCase(context)),
WidgetbookUseCase(name: 'Text Input', builder: (context) => textInputUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
WidgetbookCategory(
Expand Down
11 changes: 5 additions & 6 deletions example/widgetbook/pages/components/date_input_widgetbook.dart
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Widget dateInputUseCase(BuildContext context) {
initialValue: 'Invalid date',
);
final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
final enabled = context.knobs.boolean(label: 'Enabled', initialValue: true);
final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
final size = context.knobs.list<ZetaWidgetSize>(
label: 'Size',
options: ZetaWidgetSize.values,
Expand All @@ -32,13 +32,12 @@ Widget dateInputUseCase(BuildContext context) {
child: ZetaDateInput(
size: size,
rounded: rounded,
enabled: enabled,
disabled: disabled,
label: 'Birthdate',
hint: 'Enter birthdate',
datePattern: datePattern,
hasError: _errorText != null,
hintText: 'Enter birthdate',
dateFormat: datePattern,
errorText: _errorText ?? errorText,
onChanged: (value) {
onChange: (value) {
if (value == null) return setState(() => _errorText = null);
final now = DateTime.now();
setState(
Expand Down
51 changes: 51 additions & 0 deletions example/widgetbook/pages/components/text_input_widgetbook.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../test/test_components.dart';

Widget textInputUseCase(BuildContext context) {
return WidgetbookTestWidget(
widget: StatefulBuilder(
builder: (context, setState) {
final label = context.knobs.string(
label: 'Label',
initialValue: 'Label',
);
final errorText = context.knobs.stringOrNull(
label: 'Error message',
initialValue: 'Oops! Error hint text',
);
final hintText = context.knobs.string(
label: 'Hint',
initialValue: 'Default hint text',
);
final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
final disabled = context.knobs.boolean(label: 'Disabled', initialValue: false);
final size = context.knobs.list<ZetaWidgetSize>(
label: 'Size',
options: ZetaWidgetSize.values,
labelBuilder: (size) => size.name,
);

return Padding(
padding: const EdgeInsets.all(ZetaSpacing.x5),
child: ZetaTextInput(
size: size,
rounded: rounded,
disabled: disabled,
label: label,
hintText: hintText,
errorText: errorText,
prefixText: '£',
suffix: IconButton(
icon: Icon(ZetaIcons.star_round),
onPressed: () {},
),
onChange: (value) {},
),
);
},
),
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Widget timeInputUseCase(BuildContext context) {
rounded: rounded,
disabled: disabled,
label: label,
hint: hintText,
hintText: hintText,
errorText: _errorText ?? errorText,
onChange: (value) {},
),
Expand Down
Loading

0 comments on commit 57c72f4

Please sign in to comment.