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

Select input #89

Merged
merged 3 commits into from
Jun 10, 2024
Merged

Select input #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c5a1d3
refactoring to use text input, added builder to dropdown
mikecoomber Jun 5, 2024
38b2e2a
lint and docs
mikecoomber Jun 6, 2024
ee1c468
fixed widget book, created input icon button
mikecoomber Jun 6, 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
136 changes: 54 additions & 82 deletions example/lib/pages/components/select_input_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,99 +11,71 @@ class SelectInputExample extends StatefulWidget {
}

class _SelectInputExampleState extends State<SelectInputExample> {
String? _errorText;
ZetaSelectInputItem? selectedItem = ZetaSelectInputItem(
value: 'Item 1',
);
final formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
final zeta = Zeta.of(context);
final items = [
ZetaDropdownItem(
value: "Item 1",
icon: Icon(ZetaIcons.star_round),
),
ZetaDropdownItem(
value: "Item 2",
icon: Icon(ZetaIcons.star_half_round),
),
ZetaDropdownItem(
value: "Item 3",
),
];

return ExampleScaffold(
name: 'Select Input',
child: Center(
child: SingleChildScrollView(
child: SizedBox(
width: 320,
child: Column(
children: [
ZetaSelectInput(
label: Row(
children: [
Text('Label'),
Padding(
padding: const EdgeInsets.only(left: 6),
child: Text(
'*',
style: TextStyle(color: zeta.colors.red.shade60),
),
),
],
child: Form(
key: formKey,
child: Column(
children: [
ZetaSelectInput(
label: 'Large',
size: ZetaWidgetSize.large,
hintText: 'Default hint text',
rounded: false,
placeholder: 'Placeholder',
initialValue: "Item 1",
items: items,
),
ZetaSelectInput(
label: 'Medium',
hintText: 'Default hint text',
placeholder: 'Placeholder',
items: items,
),
ZetaSelectInput(
label: 'Small',
size: ZetaWidgetSize.small,
hintText: 'Default hint text',
placeholder: 'Placeholder',
items: items,
),
ZetaSelectInput(
label: 'Disabled',
hintText: 'Default hint text',
placeholder: 'Placeholder',
disabled: true,
items: items,
),
hint: 'Default hint text',
leadingIcon: Icon(ZetaIcons.star_round),
hasError: _errorText != null,
errorText: _errorText,
onChanged: (item) {
setState(() {
selectedItem = item;
if (item != null) {
_errorText = null;
}
});
},
onTextChanged: (value) {
setState(() {
if (value.isEmpty) {
_errorText = 'Required';
} else {
_errorText = null;
}
});
},
selectedItem: selectedItem,
items: [
ZetaSelectInputItem(
value: 'Item 1',
),
ZetaSelectInputItem(
value: 'Item 2',
),
ZetaSelectInputItem(
value: 'Item 3',
),
ZetaSelectInputItem(
value: 'Item 4',
),
ZetaSelectInputItem(
value: 'Item 5',
),
ZetaSelectInputItem(
value: 'Item 6',
),
ZetaSelectInputItem(
value: 'Item 7',
),
ZetaSelectInputItem(
value: 'Item 8',
),
ZetaSelectInputItem(
value: 'Item 9',
),
ZetaSelectInputItem(
value: 'Item 10',
),
ZetaSelectInputItem(
value: 'Item 11',
),
ZetaSelectInputItem(
value: 'Item 12',
),
],
),
const SizedBox(height: 120),
],
ZetaButton(
label: 'Validate',
onPressed: () {
formKey.currentState?.validate();
},
)
].divide(const SizedBox(height: 8)).toList(),
),
),
),
),
Expand Down
14 changes: 9 additions & 5 deletions example/lib/pages/components/text_input_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,16 @@ class TextInputExample extends StatelessWidget {
ZetaTextInput(
size: ZetaWidgetSize.small,
placeholder: 'Placeholder',
prefix: IconButton(
iconSize: 12,
icon: Icon(
ZetaIcons.add_alert_round,
prefix: SizedBox(
height: 8,
child: IconButton(
iconSize: 12,
splashRadius: 1,
icon: Icon(
ZetaIcons.add_alert_round,
),
onPressed: () {},
),
onPressed: () {},
),
),
const SizedBox(height: 8),
Expand Down
91 changes: 30 additions & 61 deletions example/widgetbook/pages/components/select_input_widgetbook.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,44 +6,44 @@ import '../../test/test_components.dart';
import '../../utils/utils.dart';

Widget selectInputUseCase(BuildContext context) {
final zeta = Zeta.of(context);
final items = [
ZetaSelectInputItem(value: 'Item 1'),
ZetaSelectInputItem(value: 'Item 2'),
ZetaSelectInputItem(value: 'Item 3'),
ZetaSelectInputItem(value: 'Item 4'),
ZetaSelectInputItem(value: 'Item 5'),
ZetaSelectInputItem(value: 'Item 6'),
ZetaSelectInputItem(value: 'Item 7'),
ZetaSelectInputItem(value: 'Item 8'),
ZetaSelectInputItem(value: 'Item 9'),
ZetaSelectInputItem(value: 'Item 10'),
ZetaSelectInputItem(value: 'Item 11'),
ZetaSelectInputItem(value: 'Item 12'),
ZetaDropdownItem(
value: "Item 1",
icon: Icon(ZetaIcons.star_round),
),
ZetaDropdownItem(
value: "Item 2",
icon: Icon(ZetaIcons.star_half_round),
),
ZetaDropdownItem(
value: "Item 3",
),
];
late ZetaSelectInputItem? selectedItem = items.first;
String? _errorText;
final label = context.knobs.string(
label: 'Label',
initialValue: 'Label',
);
final hint = context.knobs.string(
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 enabled = context.knobs.boolean(label: 'Enabled', initialValue: true);
final required = context.knobs.boolean(label: 'Required', initialValue: true);
final rounded = roundedKnob(context);
final disabled = disabledKnob(context);

final size = context.knobs.list<ZetaWidgetSize>(
label: 'Size',
options: ZetaWidgetSize.values,
labelBuilder: (size) => size.name,
labelBuilder: (size) => enumLabelBuilder(size),
);
final iconData = iconKnob(
context,
name: "Icon",
rounded: rounded,
initial: rounded ? ZetaIcons.star_round : ZetaIcons.star_sharp,

final requirementLevel = context.knobs.list<ZetaFormFieldRequirement>(
label: 'Requirement Level',
options: ZetaFormFieldRequirement.values,
labelBuilder: (requirementLevel) => enumLabelBuilder(requirementLevel),
);

return WidgetbookTestWidget(
Expand All @@ -53,44 +53,13 @@ Widget selectInputUseCase(BuildContext context) {
padding: const EdgeInsets.all(ZetaSpacing.xL2),
child: ZetaSelectInput(
rounded: rounded,
enabled: enabled,
disabled: disabled,
size: size,
label: Row(
children: [
Text(label),
if (required)
Padding(
padding: const EdgeInsets.only(left: 6),
child: Text(
'*',
style: TextStyle(color: zeta.colors.red.shade60),
),
),
],
),
hint: hint,
leadingIcon: Icon(iconData),
hasError: _errorText != null,
errorText: _errorText,
onChanged: (item) {
setState(() {
selectedItem = item;
if (item != null) {
_errorText = null;
}
});
},
onTextChanged: (value) {
setState(() {
if (required && value.isEmpty) {
_errorText = 'Required';
} else {
_errorText = null;
}
});
},
selectedItem: selectedItem,
items: items,
label: label,
hintText: hintText,
requirementLevel: requirementLevel,
errorText: errorText,
),
);
},
Expand Down
73 changes: 73 additions & 0 deletions lib/src/components/buttons/input_icon_button.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import '../../../zeta_flutter.dart';

/// An icon button to be used internally in inputs
class InputIconButton extends StatelessWidget {
/// Creates a new [InputIconButton]
const InputIconButton({
super.key,
required this.icon,
required this.onTap,
required this.disabled,
required this.size,
required this.color,
});

/// The icon
final IconData icon;

/// On tap
final VoidCallback onTap;

/// Disables the icon and its on tap
final bool disabled;

/// The size of the icon
final ZetaWidgetSize size;

/// The color of the icon
final Color color;

double get _iconSize {
switch (size) {
case ZetaWidgetSize.large:
return ZetaSpacing.xL2;
case ZetaWidgetSize.medium:
return ZetaSpacing.xL;
case ZetaWidgetSize.small:
return ZetaSpacing.large;
}
}

@override
Widget build(BuildContext context) {
final colors = Zeta.of(context).colors;

return IconButton(
padding: EdgeInsets.all(_iconSize / 2),
constraints: BoxConstraints(
maxHeight: _iconSize * 2,
maxWidth: _iconSize * 2,
minHeight: _iconSize * 2,
minWidth: _iconSize * 2,
),
color: !disabled ? color : colors.iconDisabled,
onPressed: disabled ? null : onTap,
iconSize: _iconSize,
icon: Icon(icon),
);
}

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(DiagnosticsProperty<IconData>('icon', icon))
..add(ObjectFlagProperty<VoidCallback>.has('onTap', onTap))
..add(DiagnosticsProperty<bool>('disabled', disabled))
..add(ColorProperty('color', color))
..add(EnumProperty<ZetaWidgetSize>('size', size));
}
}
Loading