Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Created text input #78

Merged
merged 7 commits into from
May 23, 2024
Merged

feat: Created text input #78

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1f68b1b
created text input
mikecoomber May 20, 2024
1b3e89e
fixing error height
mikecoomber May 21, 2024
d026030
date input refactor
mikecoomber May 22, 2024
e042b34
validation with requirement level
mikecoomber May 22, 2024
e483be0
widget book
mikecoomber May 22, 2024
ce59c54
lint fixes
mikecoomber May 22, 2024
493980b
PR comments
mikecoomber May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions example/lib/home.dart
View file
Open in desktop
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
31 changes: 11 additions & 20 deletions example/lib/pages/components/date_input_example.dart
View file
Open in desktop
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',
errorText: 'Oops! Error hint text',
hintText: 'Default hintText text',
thelukewalton marked this conversation as resolved.
Show resolved Hide resolved
errorText: 'Oops! Error hintText 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 hintText text',
disabled: true,
),
),
Divider(color: Colors.grey[200]),
Expand All @@ -80,8 +71,8 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Label',
hint: 'Default hint text',
errorText: 'Oops! Error hint text',
hintText: 'Default hintText text',
errorText: 'Oops! Error hintText text',
size: ZetaWidgetSize.medium,
),
),
Expand All @@ -94,8 +85,8 @@ class _DateInputExampleState extends State<DateInputExample> {
padding: const EdgeInsets.all(20),
child: ZetaDateInput(
label: 'Label',
hint: 'Default hint text',
errorText: 'Oops! Error hint text',
hintText: 'Default hintText text',
errorText: 'Oops! Error hintText text',
size: ZetaWidgetSize.small,
),
),
Expand Down
75 changes: 75 additions & 0 deletions example/lib/pages/components/text_input_example.dart
View file
Open in desktop
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: true,
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
View file
Open in desktop
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
View file
Open in desktop
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
9 changes: 4 additions & 5 deletions example/widgetbook/pages/components/date_input_widgetbook.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,12 @@ Widget dateInputUseCase(BuildContext context) {
child: ZetaDateInput(
size: size,
rounded: rounded,
enabled: enabled,
disabled: enabled,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is wrong way around

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
View file
Open in desktop
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) {},
),
);
},
),
);
}
2 changes: 1 addition & 1 deletion ...dgetbook/pages/components/time_input.dart → ...ges/components/time_input_widgetbook.dart
View file
Open in desktop
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