Skip to content

Commit 6f1c7f7

Browse files
committed
compose [nfc]: Make narrow nullable on _ContentInput
This will disable autocomplete on the input, since narrow is required for MentionAutocomplete… classes to function. In the future, a better solution can make these autocomplete classes support null narrow, by perhaps disabling wildcard mentions autocomplete, while still allowing other types of autocompletion that make sense in a saved snippet's compose box.
1 parent ea2b8a8 commit 6f1c7f7

File tree

1 file changed

+50
-40
lines changed

1 file changed

+50
-40
lines changed

lib/widgets/compose_box.dart

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -497,8 +497,12 @@ class _ContentInput extends StatelessWidget {
497497
required this.controller,
498498
required this.hintText,
499499
});
500+
/// The narrow used for autocomplete.
501+
///
502+
/// If `null`, autocomplete is disabled.
503+
// TODO support autocomplete without a narrow
504+
final Narrow? narrow;
500505

501-
final Narrow narrow;
502506
final ComposeBoxController controller;
503507
final String hintText;
504508

@@ -531,48 +535,54 @@ class _ContentInput extends StatelessWidget {
531535
Widget build(BuildContext context) {
532536
final designVariables = DesignVariables.of(context);
533537

538+
final inputWidget = ConstrainedBox(
539+
constraints: BoxConstraints(maxHeight: maxHeight(context)),
540+
// This [ClipRect] replaces the [TextField] clipping we disable below.
541+
child: ClipRect(
542+
child: InsetShadowBox(
543+
top: _verticalPadding, bottom: _verticalPadding,
544+
color: designVariables.composeBoxBg,
545+
child: TextField(
546+
controller: controller.content,
547+
focusNode: controller.contentFocusNode,
548+
// Let the content show through the `contentPadding` so that
549+
// our [InsetShadowBox] can fade it smoothly there.
550+
clipBehavior: Clip.none,
551+
style: TextStyle(
552+
fontSize: _fontSize,
553+
height: _lineHeightRatio,
554+
color: designVariables.textInput),
555+
// From the spec at
556+
// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
557+
// > Compose box has the height to fit 2 lines. This is [done] to
558+
// > have a bigger hit area for the user to start the input. […]
559+
minLines: 2,
560+
maxLines: null,
561+
textCapitalization: TextCapitalization.sentences,
562+
decoration: InputDecoration(
563+
// This padding ensures that the user can always scroll long
564+
// content entirely out of the top or bottom shadow if desired.
565+
// With this and the `minLines: 2` above, an empty content input
566+
// gets 60px vertical distance (with no text-size scaling)
567+
// between the top of the top shadow and the bottom of the
568+
// bottom shadow. That's a bit more than the 54px given in the
569+
// Figma, and we can revisit if needed, but it's tricky to get
570+
// that 54px distance while also making the scrolling work like
571+
// this and offering two lines of touchable area.
572+
contentPadding: const EdgeInsets.symmetric(vertical: _verticalPadding),
573+
hintText: hintText,
574+
hintStyle: TextStyle(
575+
color: designVariables.textInput.withFadedAlpha(0.5)))))));
576+
577+
if (narrow == null) {
578+
return inputWidget;
579+
}
580+
534581
return ComposeAutocomplete(
535-
narrow: narrow,
582+
narrow: narrow!,
536583
controller: controller.content,
537584
focusNode: controller.contentFocusNode,
538-
fieldViewBuilder: (context) => ConstrainedBox(
539-
constraints: BoxConstraints(maxHeight: maxHeight(context)),
540-
// This [ClipRect] replaces the [TextField] clipping we disable below.
541-
child: ClipRect(
542-
child: InsetShadowBox(
543-
top: _verticalPadding, bottom: _verticalPadding,
544-
color: designVariables.composeBoxBg,
545-
child: TextField(
546-
controller: controller.content,
547-
focusNode: controller.contentFocusNode,
548-
// Let the content show through the `contentPadding` so that
549-
// our [InsetShadowBox] can fade it smoothly there.
550-
clipBehavior: Clip.none,
551-
style: TextStyle(
552-
fontSize: _fontSize,
553-
height: _lineHeightRatio,
554-
color: designVariables.textInput),
555-
// From the spec at
556-
// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
557-
// > Compose box has the height to fit 2 lines. This is [done] to
558-
// > have a bigger hit area for the user to start the input. […]
559-
minLines: 2,
560-
maxLines: null,
561-
textCapitalization: TextCapitalization.sentences,
562-
decoration: InputDecoration(
563-
// This padding ensures that the user can always scroll long
564-
// content entirely out of the top or bottom shadow if desired.
565-
// With this and the `minLines: 2` above, an empty content input
566-
// gets 60px vertical distance (with no text-size scaling)
567-
// between the top of the top shadow and the bottom of the
568-
// bottom shadow. That's a bit more than the 54px given in the
569-
// Figma, and we can revisit if needed, but it's tricky to get
570-
// that 54px distance while also making the scrolling work like
571-
// this and offering two lines of touchable area.
572-
contentPadding: const EdgeInsets.symmetric(vertical: _verticalPadding),
573-
hintText: hintText,
574-
hintStyle: TextStyle(
575-
color: designVariables.textInput.withFadedAlpha(0.5))))))));
585+
fieldViewBuilder: (context) => inputWidget);
576586
}
577587
}
578588

0 commit comments

Comments
 (0)