Skip to content

Commit df0b4a7

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 bb7b030 commit df0b4a7

File tree

1 file changed

+51
-40
lines changed

1 file changed

+51
-40
lines changed

lib/widgets/compose_box.dart

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -499,7 +499,12 @@ class _ContentInput extends StatelessWidget {
499499
required this.hintText,
500500
});
501501

502-
final Narrow narrow;
502+
/// The narrow used for autocomplete.
503+
///
504+
/// If `null`, autocomplete is disabled.
505+
// TODO support autocomplete without a narrow
506+
final Narrow? narrow;
507+
503508
final BaseComposeBoxController controller;
504509
final String hintText;
505510

@@ -532,48 +537,54 @@ class _ContentInput extends StatelessWidget {
532537
Widget build(BuildContext context) {
533538
final designVariables = DesignVariables.of(context);
534539

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

0 commit comments

Comments
 (0)