use a function for textPatternStyle and add default to theme

This commit is contained in:
Salvatore Giordano
2022-01-03 09:20:47 +01:00
parent e85b1a8b3f
commit fbf8694f58
4 changed files with 34 additions and 11 deletions
@@ -17,7 +17,7 @@ class MessageInputController extends ValueNotifier<Message> {
/// message. /// message.
factory MessageInputController({ factory MessageInputController({
Message? message, Message? message,
Map<RegExp, TextStyle>? textPatternStyle, Map<RegExp, TextStyleBuilder>? textPatternStyle,
}) => }) =>
MessageInputController._( MessageInputController._(
initialMessage: message ?? Message(), initialMessage: message ?? Message(),
@@ -27,7 +27,7 @@ class MessageInputController extends ValueNotifier<Message> {
/// Creates a controller for an editable text field from an initial [text]. /// Creates a controller for an editable text field from an initial [text].
factory MessageInputController.fromText( factory MessageInputController.fromText(
String? text, { String? text, {
Map<RegExp, TextStyle>? textPatternStyle, Map<RegExp, TextStyleBuilder>? textPatternStyle,
}) => }) =>
MessageInputController._( MessageInputController._(
initialMessage: Message(text: text), initialMessage: Message(text: text),
@@ -38,7 +38,7 @@ class MessageInputController extends ValueNotifier<Message> {
/// [attachments]. /// [attachments].
factory MessageInputController.fromAttachments( factory MessageInputController.fromAttachments(
List<Attachment> attachments, { List<Attachment> attachments, {
Map<RegExp, TextStyle>? textPatternStyle, Map<RegExp, TextStyleBuilder>? textPatternStyle,
}) => }) =>
MessageInputController._( MessageInputController._(
initialMessage: Message(attachments: attachments), initialMessage: Message(attachments: attachments),
@@ -47,7 +47,7 @@ class MessageInputController extends ValueNotifier<Message> {
MessageInputController._({ MessageInputController._({
required Message initialMessage, required Message initialMessage,
Map<RegExp, TextStyle>? textPatternStyle, Map<RegExp, TextStyleBuilder>? textPatternStyle,
}) : _textEditingController = MessageTextFieldController.fromValue( }) : _textEditingController = MessageTextFieldController.fromValue(
initialMessage.text == null initialMessage.text == null
? const TextEditingValue() ? const TextEditingValue()
@@ -1,4 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
/// A function that takes a [BuildContext] and returns a [TextStyle].
typedef TextStyleBuilder = TextStyle Function(BuildContext context);
/// Controller for the [StreamTextField] widget. /// Controller for the [StreamTextField] widget.
class MessageTextFieldController extends TextEditingController { class MessageTextFieldController extends TextEditingController {
@@ -15,7 +19,7 @@ class MessageTextFieldController extends TextEditingController {
}) : super.fromValue(value); }) : super.fromValue(value);
/// A map of style to apply to the text matching the RegExp patterns. /// A map of style to apply to the text matching the RegExp patterns.
final Map<RegExp, TextStyle>? textPatternStyle; final Map<RegExp, TextStyleBuilder>? textPatternStyle;
/// Builds a [TextSpan] from the current text, /// Builds a [TextSpan] from the current text,
/// highlighting the matches for [textPatternStyle]. /// highlighting the matches for [textPatternStyle].
@@ -25,8 +29,14 @@ class MessageTextFieldController extends TextEditingController {
TextStyle? style, TextStyle? style,
required bool withComposing, required bool withComposing,
}) { }) {
final pattern = textPatternStyle; final pattern = textPatternStyle ??
if (pattern == null) { {
RegExp(r'(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-?=%.]+'):
(context) => TextStyle(
color: MessageInputTheme.of(context).linkHighlightColor,
),
};
if (pattern.isEmpty) {
return super.buildTextSpan( return super.buildTextSpan(
context: context, context: context,
style: style, style: style,
@@ -41,7 +51,7 @@ class MessageTextFieldController extends TextEditingController {
final key = pattern.keys.firstWhere((it) => it.hasMatch(text)); final key = pattern.keys.firstWhere((it) => it.hasMatch(text));
return TextSpan( return TextSpan(
text: text, text: text,
style: pattern[key], style: pattern[key]?.call(context),
); );
}, },
); );
@@ -259,6 +259,7 @@ class StreamChatThemeData {
sendButtonIdleColor: colorTheme.disabled, sendButtonIdleColor: colorTheme.disabled,
inputBackgroundColor: colorTheme.barsBg, inputBackgroundColor: colorTheme.barsBg,
inputTextStyle: textTheme.body, inputTextStyle: textTheme.body,
linkHighlightColor: colorTheme.accentPrimary,
idleBorderGradient: LinearGradient( idleBorderGradient: LinearGradient(
colors: [ colors: [
colorTheme.disabled, colorTheme.disabled,
@@ -65,6 +65,7 @@ class MessageInputThemeData with Diagnosticable {
this.idleBorderGradient, this.idleBorderGradient,
this.borderRadius, this.borderRadius,
this.expandButtonColor, this.expandButtonColor,
this.linkHighlightColor,
}); });
/// Duration of the [MessageInput] send button animation /// Duration of the [MessageInput] send button animation
@@ -73,6 +74,9 @@ class MessageInputThemeData with Diagnosticable {
/// Background color of [MessageInput] send button /// Background color of [MessageInput] send button
final Color? sendButtonColor; final Color? sendButtonColor;
/// Color of a link
final Color? linkHighlightColor;
/// Background color of [MessageInput] action buttons /// Background color of [MessageInput] action buttons
final Color? actionButtonColor; final Color? actionButtonColor;
@@ -110,6 +114,7 @@ class MessageInputThemeData with Diagnosticable {
Color? actionButtonColor, Color? actionButtonColor,
Color? sendButtonColor, Color? sendButtonColor,
Color? actionButtonIdleColor, Color? actionButtonIdleColor,
Color? linkHighlightColor,
Color? sendButtonIdleColor, Color? sendButtonIdleColor,
Color? expandButtonColor, Color? expandButtonColor,
TextStyle? inputTextStyle, TextStyle? inputTextStyle,
@@ -133,6 +138,7 @@ class MessageInputThemeData with Diagnosticable {
activeBorderGradient: activeBorderGradient ?? this.activeBorderGradient, activeBorderGradient: activeBorderGradient ?? this.activeBorderGradient,
idleBorderGradient: idleBorderGradient ?? this.idleBorderGradient, idleBorderGradient: idleBorderGradient ?? this.idleBorderGradient,
borderRadius: borderRadius ?? this.borderRadius, borderRadius: borderRadius ?? this.borderRadius,
linkHighlightColor: linkHighlightColor ?? this.linkHighlightColor,
); );
/// Linearly interpolate from one [MessageInputThemeData] to another. /// Linearly interpolate from one [MessageInputThemeData] to another.
@@ -161,6 +167,8 @@ class MessageInputThemeData with Diagnosticable {
Color.lerp(a.sendButtonIdleColor, b.sendButtonIdleColor, t), Color.lerp(a.sendButtonIdleColor, b.sendButtonIdleColor, t),
sendAnimationDuration: a.sendAnimationDuration, sendAnimationDuration: a.sendAnimationDuration,
inputDecoration: a.inputDecoration, inputDecoration: a.inputDecoration,
linkHighlightColor:
Color.lerp(a.linkHighlightColor, b.linkHighlightColor, t),
); );
/// Merges [this] [MessageInputThemeData] with the [other] /// Merges [this] [MessageInputThemeData] with the [other]
@@ -181,6 +189,7 @@ class MessageInputThemeData with Diagnosticable {
idleBorderGradient: other.idleBorderGradient, idleBorderGradient: other.idleBorderGradient,
borderRadius: other.borderRadius, borderRadius: other.borderRadius,
expandButtonColor: other.expandButtonColor, expandButtonColor: other.expandButtonColor,
linkHighlightColor: other.linkHighlightColor,
); );
} }
@@ -200,7 +209,8 @@ class MessageInputThemeData with Diagnosticable {
inputDecoration == other.inputDecoration && inputDecoration == other.inputDecoration &&
idleBorderGradient == other.idleBorderGradient && idleBorderGradient == other.idleBorderGradient &&
activeBorderGradient == other.activeBorderGradient && activeBorderGradient == other.activeBorderGradient &&
borderRadius == other.borderRadius; borderRadius == other.borderRadius &&
linkHighlightColor == other.linkHighlightColor;
@override @override
int get hashCode => int get hashCode =>
@@ -215,7 +225,8 @@ class MessageInputThemeData with Diagnosticable {
inputDecoration.hashCode ^ inputDecoration.hashCode ^
idleBorderGradient.hashCode ^ idleBorderGradient.hashCode ^
activeBorderGradient.hashCode ^ activeBorderGradient.hashCode ^
borderRadius.hashCode; borderRadius.hashCode ^
linkHighlightColor.hashCode;
@override @override
void debugFillProperties(DiagnosticPropertiesBuilder properties) { void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -232,6 +243,7 @@ class MessageInputThemeData with Diagnosticable {
..add(DiagnosticsProperty('activeBorderGradient', activeBorderGradient)) ..add(DiagnosticsProperty('activeBorderGradient', activeBorderGradient))
..add(DiagnosticsProperty('idleBorderGradient', idleBorderGradient)) ..add(DiagnosticsProperty('idleBorderGradient', idleBorderGradient))
..add(DiagnosticsProperty('borderRadius', borderRadius)) ..add(DiagnosticsProperty('borderRadius', borderRadius))
..add(ColorProperty('expandButtonColor', expandButtonColor)); ..add(ColorProperty('expandButtonColor', expandButtonColor))
..add(ColorProperty('linkHighlightColor', linkHighlightColor));
} }
} }