Skip to content

fix: [MDS-1244] General fixes and improvements #426

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

Merged
GittHub-d merged 1 commit into from
Jul 17, 2024
Merged

fix: [MDS-1244] General fixes and improvements #426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 12 additions & 17 deletions example/assets/code_snippets/dropdown.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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