refactor: abstract suggestions menu box

This commit is contained in:
DenserMeerkat
2025-02-14 19:09:11 +05:30
parent 3f94de6f1b
commit 957613d54b
5 changed files with 66 additions and 73 deletions

View File

@ -34,7 +34,7 @@ class EnvironmentTriggerField extends StatelessWidget {
key: Key(keyId), key: Key(keyId),
textEditingController: controller, textEditingController: controller,
focusNode: focusNode, focusNode: focusNode,
optionsWidthFactor: optionsWidthFactor, optionsWidthFactor: optionsWidthFactor ?? 1,
autocompleteTriggers: [ autocompleteTriggers: [
if (autocompleteNoTrigger != null) autocompleteNoTrigger!, if (autocompleteNoTrigger != null) autocompleteNoTrigger!,
AutocompleteTrigger( AutocompleteTrigger(

View File

@ -1,9 +1,8 @@
import 'package:apidash/consts.dart';
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:apidash/models/models.dart'; import 'package:apidash/models/models.dart';
import 'package:apidash/providers/providers.dart'; import 'package:apidash/providers/providers.dart';
import 'package:apidash/widgets/widgets.dart';
import 'package:apidash/utils/utils.dart'; import 'package:apidash/utils/utils.dart';
import 'envvar_indicator.dart'; import 'envvar_indicator.dart';
@ -26,41 +25,21 @@ class EnvironmentTriggerOptions extends ConsumerWidget {
getEnvironmentTriggerSuggestions(query, envMap, activeEnvironmentId); getEnvironmentTriggerSuggestions(query, envMap, activeEnvironmentId);
return suggestions == null || suggestions.isEmpty return suggestions == null || suggestions.isEmpty
? const SizedBox.shrink() ? const SizedBox.shrink()
: ClipRRect( : SuggestionsMenuBox(
borderRadius: kBorderRadius8, child: ListView.separated(
child: Material( shrinkWrap: true,
type: MaterialType.card, itemCount: suggestions.length,
elevation: 8, separatorBuilder: (context, index) => const Divider(height: 2),
child: ConstrainedBox( itemBuilder: (context, index) {
constraints: final suggestion = suggestions[index];
const BoxConstraints(maxHeight: kSuggestionsMenuMaxHeight), return ListTile(
child: Ink( dense: true,
width: kSuggestionsMenuWidth, leading: EnvVarIndicator(suggestion: suggestion),
decoration: BoxDecoration( title: Text(suggestion.variable.key),
color: Theme.of(context).colorScheme.surface, subtitle: Text(suggestion.variable.value),
borderRadius: kBorderRadius8, onTap: () => onSuggestionTap(suggestion),
border: Border.all( );
color: Theme.of(context).colorScheme.outlineVariant, },
),
),
child: ListView.separated(
shrinkWrap: true,
itemCount: suggestions.length,
separatorBuilder: (context, index) =>
const Divider(height: 2),
itemBuilder: (context, index) {
final suggestion = suggestions[index];
return ListTile(
dense: true,
leading: EnvVarIndicator(suggestion: suggestion),
title: Text(suggestion.variable.key),
subtitle: Text(suggestion.variable.value),
onTap: () => onSuggestionTap(suggestion),
);
},
),
),
),
), ),
); );
} }

View File

@ -1,9 +1,8 @@
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:multi_trigger_autocomplete/multi_trigger_autocomplete.dart'; import 'package:multi_trigger_autocomplete/multi_trigger_autocomplete.dart';
import 'package:apidash/utils/utils.dart'; import 'package:apidash/utils/utils.dart';
import 'package:apidash/screens/common_widgets/common_widgets.dart'; import 'package:apidash/screens/common_widgets/common_widgets.dart';
import 'package:apidash/consts.dart'; import 'package:apidash/widgets/widgets.dart';
class HeaderField extends StatefulWidget { class HeaderField extends StatefulWidget {
const HeaderField({ const HeaderField({
@ -112,39 +111,19 @@ class _HeaderSuggestionsState extends State<HeaderSuggestions> {
} }
return suggestions!.isEmpty return suggestions!.isEmpty
? const SizedBox.shrink() ? const SizedBox.shrink()
: ClipRRect( : SuggestionsMenuBox(
borderRadius: kBorderRadius8, child: ListView.separated(
child: Material( shrinkWrap: true,
type: MaterialType.card, itemCount: suggestions!.length,
elevation: 8, separatorBuilder: (context, index) => const Divider(height: 2),
child: ConstrainedBox( itemBuilder: (context, index) {
constraints: final suggestion = suggestions![index];
const BoxConstraints(maxHeight: kSuggestionsMenuMaxHeight), return ListTile(
child: Ink( dense: true,
width: kSuggestionsMenuWidth, title: Text(suggestion),
decoration: BoxDecoration( onTap: () => widget.onSuggestionTap(suggestion),
color: Theme.of(context).colorScheme.surface, );
borderRadius: kBorderRadius8, },
border: Border.all(
color: Theme.of(context).colorScheme.outlineVariant,
),
),
child: ListView.separated(
shrinkWrap: true,
itemCount: suggestions!.length,
separatorBuilder: (context, index) =>
const Divider(height: 2),
itemBuilder: (context, index) {
final suggestion = suggestions![index];
return ListTile(
dense: true,
title: Text(suggestion),
onTap: () => widget.onSuggestionTap(suggestion),
);
},
),
),
),
), ),
); );
} }

View File

@ -0,0 +1,34 @@
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart';
import 'package:apidash/consts.dart';
class SuggestionsMenuBox extends StatelessWidget {
final Widget child;
const SuggestionsMenuBox({super.key, required this.child});
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: kBorderRadius8,
child: Material(
type: MaterialType.card,
elevation: 8,
child: ConstrainedBox(
constraints:
const BoxConstraints(maxHeight: kSuggestionsMenuMaxHeight),
child: Ink(
width: kSuggestionsMenuWidth,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: kBorderRadius8,
border: Border.all(
color: Theme.of(context).colorScheme.outlineVariant,
),
),
child: child,
),
),
),
);
}
}

View File

@ -51,6 +51,7 @@ export 'splitview_drawer.dart';
export 'splitview_dashboard.dart'; export 'splitview_dashboard.dart';
export 'splitview_equal.dart'; export 'splitview_equal.dart';
export 'splitview_history.dart'; export 'splitview_history.dart';
export 'suggestions_menu_box.dart';
export 'tabbar_segmented.dart'; export 'tabbar_segmented.dart';
export 'table_map.dart'; export 'table_map.dart';
export 'table_request_form.dart'; export 'table_request_form.dart';