Skip to content

Commit

Permalink
fix: [MDS-1244] General fixes and improvements (#426)
Browse files Browse the repository at this point in the history 
Co-authored-by: Birgitt Majas <[email protected]>
  • Loading branch information
@GittHub-d
GittHub-d and Birgitt Majas authored Jul 17, 2024
1 parent da3f0f6 commit 7edc0c4
Show file tree
Hide file tree
Showing 24 changed files with 1,332 additions and 905 deletions.
29 changes: 12 additions & 17 deletions example/assets/code_snippets/dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import 'package:moon_design/moon_design.dart';

const String _groupId = "dropdown";

enum Choices { first, second }
enum Choices {
first,
second;

extension ChoicesX on Choices {
String get name {
return switch (this) {
Choices.first => "Choice #1",
Expand Down Expand Up @@ -43,28 +44,22 @@ class _DropdownState extends State<Dropdown> {
constrainWidthToChild: true,
onTapOutside: () => setState(() => _showChoices = false),
content: Column(
children: [
MoonMenuItem(
children: List.generate(
2,
(int index) => MoonMenuItem(
absorbGestures: true,
onTap: () => setState(() => _availableChoices[Choices.first] = !_availableChoices[Choices.first]!),
label: Text(Choices.first.name),
trailing: MoonCheckbox(
value: _availableChoices[Choices.first],
tapAreaSizeValue: 0,
onChanged: (_) {},
onTap: () => setState(
() => _availableChoices[Choices.values[index]] =
!_availableChoices[Choices.values[index]]!,
),
),
MoonMenuItem(
absorbGestures: true,
onTap: () => setState(() => _availableChoices[Choices.second] = !_availableChoices[Choices.second]!),
label: Text(Choices.second.name),
label: Text(Choices.values[index].name),
trailing: MoonCheckbox(
value: _availableChoices[Choices.second],
value: _availableChoices[Choices.values[index]],
tapAreaSizeValue: 0,
onChanged: (_) {},
),
),
],
),
),
child: MoonTextInput(
width: 250,
Expand Down
4 changes: 2 additions & 2 deletions example/assets/code_snippets/search_with_dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ class _SearchWithDropdownState extends State<SearchWithDropdown> {
hintText: "Search components",
controller: _searchController,
borderRadius: _showDropdown ? const BorderRadius.vertical(top: Radius.circular(8)) : null,
// The onTap() and onChanged() properties are used instead of a listener to initiate search on every input tap.
// Listener only triggers on input change.
// The onTap() and onChanged() properties are used instead of a listener to initiate search
// on every input tap. Listener only triggers on input change.
onTap: () => _performSearch(),
onChanged: (String _) => _performSearch(),
leading: const Icon(MoonIcons.generic_search_24_light),
Expand Down
31 changes: 9 additions & 22 deletions example/assets/code_snippets/segmented_control.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,16 @@ class SegmentedControl extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Column(
children: [
MoonSegmentedControl(
segmentedControlSize: MoonSegmentedControlSize.sm,
segments: const [
Segment(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab1'),
trailing: Icon(MoonIcons.other_frame_24_light),
),
Segment(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab2'),
trailing: Icon(MoonIcons.other_frame_24_light),
),
Segment(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab3'),
trailing: Icon(MoonIcons.other_frame_24_light),
),
],
return MoonSegmentedControl(
segmentedControlSize: MoonSegmentedControlSize.sm,
segments: List.generate(
3,
(int index) => Segment(
leading: const Icon(MoonIcons.other_frame_24_light),
label: Text('Tab${index + 1}'),
trailing: const Icon(MoonIcons.other_frame_24_light),
),
],
),
);
}
}
100 changes: 42 additions & 58 deletions example/assets/code_snippets/tab_bar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,20 @@ class TabBar extends StatefulWidget {
}

class _TabBarState extends State<TabBar> with SingleTickerProviderStateMixin {
late TabController tabController;
late TabController _tabController;

@override
void initState() {
super.initState();

tabController = TabController(length: 3, vsync: this);
_tabController = TabController(length: 3, vsync: this);
}

@override
void dispose() {
_tabController.dispose();

super.dispose();
}

@override
Expand All @@ -24,65 +31,42 @@ class _TabBarState extends State<TabBar> with SingleTickerProviderStateMixin {
children: [
MoonTabBar(
tabBarSize: MoonTabBarSize.sm,
tabs: const [
MoonTab(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab1'),
trailing: Icon(MoonIcons.other_frame_24_light),
),
MoonTab(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab2'),
trailing: Icon(MoonIcons.other_frame_24_light),
tabs: List.generate(
3,
(int index) => MoonTab(
leading: const Icon(MoonIcons.other_frame_24_light),
label: Text('Tab${index + 1}'),
trailing: const Icon(MoonIcons.other_frame_24_light),
),
MoonTab(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab3'),
trailing: Icon(MoonIcons.other_frame_24_light),
),
],
),
),
MoonTabBar.pill(
tabBarSize: MoonTabBarSize.sm,
pillTabs: const [
MoonPillTab(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab1'),
trailing: Icon(MoonIcons.other_frame_24_light),
),
MoonPillTab(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab2'),
trailing: Icon(MoonIcons.other_frame_24_light),
pillTabs: List.generate(
3,
(int index) => MoonPillTab(
leading: const Icon(MoonIcons.other_frame_24_light),
label: Text('Tab${index + 1}'),
trailing: const Icon(MoonIcons.other_frame_24_light),
),
MoonPillTab(
leading: Icon(MoonIcons.other_frame_24_light),
label: Text('Tab3'),
trailing: Icon(MoonIcons.other_frame_24_light),
),
],
),
),

// MoonTabBar with TabBarView.
MoonTabBar(
isExpanded: true,
tabController: tabController,
tabs: const [
MoonTab(
label: const Text('Tab1'),
),
MoonTab(
label: const Text('Tab2'),
tabController: _tabController,
tabs: List.generate(
3,
(int index) => MoonTab(
label: Text('Tab${index + 1}'),
),
MoonTab(
label: const Text('Tab3'),
),
],
),
),
SizedBox(
height: 112,
child: TabBarView(
controller: tabController,
controller: _tabController,
children: [
Container(
color: context.moonColors!.whis60,
Expand All @@ -94,9 +78,9 @@ class _TabBarState extends State<TabBar> with SingleTickerProviderStateMixin {
),
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: () => tabController.animateTo(1),
child: const Icon(MoonIcons.controls_chevron_right_24_light),
child: MoonButton.icon(
onTap: () => _tabController.animateTo(1),
icon: const Icon(MoonIcons.controls_chevron_right_24_light),
),
),
],
Expand All @@ -108,14 +92,14 @@ class _TabBarState extends State<TabBar> with SingleTickerProviderStateMixin {
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () => tabController.animateTo(0),
child: const Icon(MoonIcons.controls_chevron_left_24_light),
MoonButton.icon(
onTap: () => _tabController.animateTo(0),
icon: const Icon(MoonIcons.controls_chevron_left_24_light),
),
const Text('Tab2'),
GestureDetector(
onTap: () => tabController.animateTo(2),
child: const Icon(MoonIcons.controls_chevron_right_24_light),
MoonButton.icon(
onTap: () => _tabController.animateTo(2),
icon: const Icon(MoonIcons.controls_chevron_right_24_light),
),
],
),
Expand All @@ -130,9 +114,9 @@ class _TabBarState extends State<TabBar> with SingleTickerProviderStateMixin {
),
Align(
alignment: Alignment.centerLeft,
child: GestureDetector(
onTap: () => tabController.animateTo(1),
child: const Icon(
child: MoonButton.icon(
onTap: () => _tabController.animateTo(1),
icon: const Icon(
MoonIcons.controls_chevron_left_24_light,
),
),
Expand Down
43 changes: 31 additions & 12 deletions example/lib/src/storybook/stories/composites/combobox_multi_select.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ class ComboboxMultiSelectStory extends StatefulWidget {
const ComboboxMultiSelectStory({super.key});

@override
State<ComboboxMultiSelectStory> createState() => _ComboboxMultiSelectStoryState();
State<ComboboxMultiSelectStory> createState() =>
_ComboboxMultiSelectStoryState();
}

class _ComboboxMultiSelectStoryState extends State<ComboboxMultiSelectStory> {
Expand All @@ -26,14 +27,22 @@ class _ComboboxMultiSelectStoryState extends State<ComboboxMultiSelectStory> {

void _performSearch() {
setState(() {
_filteredOptionsList =
_optionsList.where((Component option) => option.name.toLowerCase().contains(_inputValue)).toList();
_filteredOptionsList = _optionsList
.where(
(Component option) =>
option.name.toLowerCase().contains(_inputValue),
)
.toList();
_showDropdown = true;
});
}

void _handleSelect(Component option, bool isSelected) {
setState(() => isSelected ? _selectedOptions[option] = true : _selectedOptions.remove(option));
setState(
() => isSelected
? _selectedOptions[option] = true
: _selectedOptions.remove(option),
);
}

void _showAllOptionsList() {
Expand Down Expand Up @@ -100,7 +109,8 @@ class _ComboboxMultiSelectStoryState extends State<ComboboxMultiSelectStory> {
options: colorOptions,
);

final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40];
final inactiveBorderColor =
colorTable(context)[inactiveBorderColorKnob ?? 40];

final hoverBorderColorKnob = context.knobs.nullable.options(
label: "hoverBorderColor",
Expand All @@ -115,7 +125,8 @@ class _ComboboxMultiSelectStoryState extends State<ComboboxMultiSelectStory> {

final backgroundColorKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for MoonTextInput and MoonDropdown background.",
description:
"MoonColors variants for MoonTextInput and MoonDropdown background.",
enabled: false,
initial: 0,
// piccolo
Expand Down Expand Up @@ -157,8 +168,9 @@ class _ComboboxMultiSelectStoryState extends State<ComboboxMultiSelectStory> {
description: "Whether MoonTextInput has floating label.",
);

final BorderRadiusGeometry? borderRadius =
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null;
final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null
? BorderRadius.circular(borderRadiusKnob.toDouble())
: null;

return Center(
child: Padding(
Expand Down Expand Up @@ -187,13 +199,20 @@ class _ComboboxMultiSelectStoryState extends State<ComboboxMultiSelectStory> {
padding: EdgeInsets.zero,
itemCount: _filteredOptionsList.length,
itemBuilder: (BuildContext _, int index) {
if (index >= _filteredOptionsList.length) return const SizedBox.shrink();
final Component currentOption = _filteredOptionsList[index];
final bool isSelected = _selectedOptions.containsKey(currentOption);
if (index >= _filteredOptionsList.length) {
return const SizedBox.shrink();
}
final Component currentOption =
_filteredOptionsList[index];
final bool isSelected =
_selectedOptions.containsKey(currentOption);

return MoonMenuItem(
absorbGestures: true,
onTap: () => _handleSelect(currentOption, !isSelected),
onTap: () => _handleSelect(
currentOption,
!isSelected,
),
label: Text(currentOption.name),
trailing: MoonCheckbox(
value: isSelected,
Expand Down
Loading

0 comments on commit 7edc0c4

Please sign in to comment.