Skip to content

Commit cbd0cc5

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 0e8503c commit cbd0cc5

File tree

1 file changed

+51
-41
lines changed

1 file changed

+51
-41
lines changed

lib/widgets/compose_box.dart

Lines changed: 51 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -501,8 +501,12 @@ class _ContentInput extends StatelessWidget {
501501
this.hintText,
502502
this.enabled = true,
503503
});
504+
/// The narrow used for autocomplete.
505+
///
506+
/// If `null`, autocomplete is disabled.
507+
// TODO support autocomplete without a narrow
508+
final Narrow? narrow;
504509

505-
final Narrow narrow;
506510
final ComposeBoxController controller;
507511
final String? hintText;
508512
final bool enabled;
@@ -536,49 +540,55 @@ class _ContentInput extends StatelessWidget {
536540
Widget build(BuildContext context) {
537541
final designVariables = DesignVariables.of(context);
538542

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

0 commit comments

Comments
 (0)