Skip to content

Commit

Permalink
feat: Created Select input (#89)
Browse files Browse the repository at this point in the history 
refactor: Select input now wraps a ZetaTextInput
feat: Dropdown now has a builder function to allow building custom children
fix: Select input menu appears in the correct position below the input
  • Loading branch information
@mikecoomber
mikecoomber authored Jun 10, 2024
1 parent 4b5c568 commit 6ac8c4d
Show file tree
Hide file tree
Showing 9 changed files with 438 additions and 887 deletions.
136 changes: 54 additions & 82 deletions example/lib/pages/components/select_input_example.dart
View file
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
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
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
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

0 comments on commit 6ac8c4d

Please sign in to comment.