bambinoua
2 years ago
parent
c3e156bb3d
commit
748ddfba58
3 changed files with 358 additions and 56 deletions
@ -0,0 +1,299 @@ |
||||
import 'package:flutter/foundation.dart'; |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_quill/extensions.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart' hide Text; |
||||
import 'package:flutter_quill/translations.dart'; |
||||
import 'package:image_picker/image_picker.dart'; |
||||
|
||||
import '../embed_types.dart'; |
||||
import 'image_video_utils.dart' hide LinkDialog; |
||||
|
||||
/// Alternative version of [ImageButton]. This widget has more customization |
||||
/// and uses dialog similar to one which is used on [http://quilljs.com]. |
||||
class ImageButton2 extends StatelessWidget { |
||||
const ImageButton2({ |
||||
required this.controller, |
||||
required this.icon, |
||||
this.iconSize = kDefaultIconSize, |
||||
this.fillColor, |
||||
this.onImagePickCallback, |
||||
this.webImagePickImpl, |
||||
this.filePickImpl, |
||||
this.mediaPickSettingSelector, |
||||
this.iconTheme, |
||||
this.dialogTheme, |
||||
this.tooltip, |
||||
this.childrenSpacing = 16.0, |
||||
this.contentPadding = const EdgeInsets.all(16), |
||||
this.constraints, |
||||
this.buttonSize, |
||||
this.labelText, |
||||
this.hintText, |
||||
this.buttonText, |
||||
this.autovalidateMode = AutovalidateMode.disabled, |
||||
Key? key, |
||||
this.validationMessage, |
||||
}) : super(key: key); |
||||
|
||||
final QuillController controller; |
||||
final IconData icon; |
||||
final double iconSize; |
||||
final Color? fillColor; |
||||
final OnImagePickCallback? onImagePickCallback; |
||||
final WebImagePickImpl? webImagePickImpl; |
||||
final FilePickImpl? filePickImpl; |
||||
final MediaPickSettingSelector? mediaPickSettingSelector; |
||||
final QuillIconTheme? iconTheme; |
||||
final QuillDialogTheme? dialogTheme; |
||||
final String? tooltip; |
||||
|
||||
/// The margin between child widgets in the dialog. |
||||
final double childrenSpacing; |
||||
|
||||
/// The padding for content of dialog. |
||||
final EdgeInsetsGeometry contentPadding; |
||||
|
||||
/// The constrains for dialog. |
||||
final BoxConstraints? constraints; |
||||
|
||||
/// The size of dialog buttons. |
||||
final Size? buttonSize; |
||||
|
||||
/// The text of label in link add mode. |
||||
final String? labelText; |
||||
|
||||
/// The hint text for link [TextField]. |
||||
final String? hintText; |
||||
|
||||
/// The text of the submit button. |
||||
final String? buttonText; |
||||
|
||||
final AutovalidateMode autovalidateMode; |
||||
final String? validationMessage; |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final theme = Theme.of(context); |
||||
final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color; |
||||
final iconFillColor = |
||||
iconTheme?.iconUnselectedFillColor ?? fillColor ?? theme.canvasColor; |
||||
|
||||
return QuillIconButton( |
||||
icon: Icon(icon, size: iconSize, color: iconColor), |
||||
tooltip: tooltip, |
||||
highlightElevation: 0, |
||||
hoverElevation: 0, |
||||
size: iconSize * 1.77, |
||||
fillColor: iconFillColor, |
||||
borderRadius: iconTheme?.borderRadius ?? 2, |
||||
onPressed: () => _onPressedHandler(context), |
||||
); |
||||
} |
||||
|
||||
Future<void> _onPressedHandler(BuildContext context) async { |
||||
if (onImagePickCallback != null) { |
||||
final selector = |
||||
mediaPickSettingSelector ?? ImageVideoUtils.selectMediaPickSetting; |
||||
final source = await selector(context); |
||||
if (source != null) { |
||||
if (source == MediaPickSetting.Gallery) { |
||||
_pickImage(context); |
||||
} else { |
||||
_typeLink(context); |
||||
} |
||||
} |
||||
} else { |
||||
_typeLink(context); |
||||
} |
||||
} |
||||
|
||||
void _pickImage(BuildContext context) { |
||||
ImageVideoUtils.handleImageButtonTap( |
||||
context, |
||||
controller, |
||||
ImageSource.gallery, |
||||
onImagePickCallback!, |
||||
filePickImpl: filePickImpl, |
||||
webImagePickImpl: webImagePickImpl, |
||||
); |
||||
} |
||||
|
||||
void _typeLink(BuildContext context) { |
||||
showDialog<String>( |
||||
context: context, |
||||
builder: (_) => EmbedLinkDialog( |
||||
dialogTheme: dialogTheme, |
||||
constraints: constraints, |
||||
labelText: labelText, |
||||
childrenSpacing: childrenSpacing, |
||||
autovalidateMode: autovalidateMode, |
||||
validationMessage: validationMessage, |
||||
buttonSize: buttonSize, |
||||
), |
||||
).then(_linkSubmitted); |
||||
} |
||||
|
||||
void _linkSubmitted(String? value) { |
||||
if (value != null && value.isNotEmpty) { |
||||
final index = controller.selection.baseOffset; |
||||
final length = controller.selection.extentOffset - index; |
||||
controller.replaceText(index, length, BlockEmbed.image(value), null); |
||||
} |
||||
} |
||||
} |
||||
|
||||
/// |
||||
class EmbedLinkDialog extends StatefulWidget { |
||||
const EmbedLinkDialog({ |
||||
Key? key, |
||||
this.link, |
||||
this.dialogTheme, |
||||
this.contentPadding = const EdgeInsets.all(16), |
||||
this.childrenSpacing = 16.0, |
||||
this.constraints, |
||||
this.buttonSize, |
||||
this.labelText, |
||||
this.hintText, |
||||
this.buttonText, |
||||
this.autovalidateMode = AutovalidateMode.disabled, |
||||
this.validationMessage, |
||||
}) : assert(childrenSpacing > 0), |
||||
super(key: key); |
||||
|
||||
final String? link; |
||||
final QuillDialogTheme? dialogTheme; |
||||
|
||||
/// The margin between child widgets in the dialog. |
||||
final double childrenSpacing; |
||||
|
||||
/// The padding for content of dialog. |
||||
final EdgeInsetsGeometry contentPadding; |
||||
|
||||
/// The constrains for dialog. |
||||
final BoxConstraints? constraints; |
||||
|
||||
/// The size of dialog buttons. |
||||
final Size? buttonSize; |
||||
|
||||
/// The text of label in link add mode. |
||||
final String? labelText; |
||||
|
||||
/// The hint text for link [TextField]. |
||||
final String? hintText; |
||||
|
||||
/// The text of the submit button. |
||||
final String? buttonText; |
||||
|
||||
final AutovalidateMode autovalidateMode; |
||||
final String? validationMessage; |
||||
|
||||
@override |
||||
State<EmbedLinkDialog> createState() => _EmbedLinkDialogState(); |
||||
} |
||||
|
||||
class _EmbedLinkDialogState extends State<EmbedLinkDialog> { |
||||
final _linkFocus = FocusNode(); |
||||
final _linkController = TextEditingController(); |
||||
|
||||
@override |
||||
void dispose() { |
||||
_linkFocus.dispose(); |
||||
_linkController.dispose(); |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final constraints = widget.dialogTheme?.linkDialogConstraints ?? |
||||
() { |
||||
final mediaQuery = MediaQuery.of(context); |
||||
final maxWidth = |
||||
kIsWeb ? mediaQuery.size.width / 4 : mediaQuery.size.width - 80; |
||||
return BoxConstraints(maxWidth: maxWidth, maxHeight: 80); |
||||
}(); |
||||
|
||||
final buttonStyle = widget.buttonSize != null |
||||
? Theme.of(context) |
||||
.elevatedButtonTheme |
||||
.style |
||||
?.copyWith(fixedSize: MaterialStatePropertyAll(widget.buttonSize)) |
||||
: widget.dialogTheme?.buttonStyle; |
||||
|
||||
final isWrappable = widget.dialogTheme?.isWrappable ?? false; |
||||
|
||||
final children = [ |
||||
Text(widget.labelText ?? 'Enter link'.i18n), |
||||
UtilityWidgets.maybeWidget( |
||||
enabled: !isWrappable, |
||||
wrapper: (child) => Expanded( |
||||
child: child, |
||||
), |
||||
child: Padding( |
||||
padding: EdgeInsets.symmetric(horizontal: widget.childrenSpacing), |
||||
child: TextFormField( |
||||
controller: _linkController, |
||||
focusNode: _linkFocus, |
||||
style: widget.dialogTheme?.inputTextStyle, |
||||
keyboardType: TextInputType.url, |
||||
textInputAction: TextInputAction.done, |
||||
decoration: InputDecoration( |
||||
labelStyle: widget.dialogTheme?.labelTextStyle, |
||||
hintText: widget.hintText, |
||||
), |
||||
autofocus: true, |
||||
autovalidateMode: widget.autovalidateMode, |
||||
validator: _validateLink, |
||||
onChanged: _linkChanged, |
||||
), |
||||
), |
||||
), |
||||
ElevatedButton( |
||||
onPressed: _canPress() ? _submitLink : null, |
||||
style: buttonStyle, |
||||
child: Text(widget.buttonText ?? 'Ok'.i18n), |
||||
), |
||||
]; |
||||
|
||||
return Dialog( |
||||
backgroundColor: widget.dialogTheme?.dialogBackgroundColor, |
||||
shape: widget.dialogTheme?.shape ?? |
||||
DialogTheme.of(context).shape ?? |
||||
RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)), |
||||
child: ConstrainedBox( |
||||
constraints: constraints, |
||||
child: Padding( |
||||
padding: widget.contentPadding, |
||||
child: isWrappable |
||||
? Wrap( |
||||
alignment: WrapAlignment.center, |
||||
crossAxisAlignment: WrapCrossAlignment.center, |
||||
runSpacing: widget.dialogTheme?.runSpacing ?? 0.0, |
||||
children: children, |
||||
) |
||||
: Row( |
||||
children: children, |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
bool _canPress() => _validateLink(_linkController.text) == null; |
||||
|
||||
void _linkChanged(String value) { |
||||
setState(() { |
||||
_linkController.text = value; |
||||
}); |
||||
} |
||||
|
||||
void _submitLink() => Navigator.pop(context, _linkController.text); |
||||
|
||||
String? _validateLink(String? value) { |
||||
if ((value?.isEmpty ?? false) || |
||||
!AutoFormatMultipleLinksRule.linkRegExp.hasMatch(value!)) { |
||||
return widget.validationMessage ?? 'That is not a valid URL'; |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue