[WIP] Mobile toolbar - Bottom Dialog Block Option;

edityomurti · edityomurti · commit dc6061e4610c · 2021-08-24T20:18:34.000+07:00
diff --git a/lib/src/widgets/controller.dart b/lib/src/widgets/controller.dart
@@ -1,6 +1,7 @@
 import 'dart:math' as math;
 
 import 'package:flutter/cupertino.dart';
+import 'package:flutter_quill/models/documents/nodes/leaf.dart';
 import 'package:flutter_quill/src/models/documents/nodes/line.dart';
 import 'package:flutter_quill/src/widgets/sym_widgets/sym_title_widgets/sym_title_kalpataru.dart';
 import 'package:tuple/tuple.dart';
@@ -266,5 +267,40 @@ class QuillController extends ChangeNotifier {
         extentOffset: math.min(selection.extentOffset, end));
   }
 
-  void showMenuBlockCreation() {}
+  void deleteCurrentLine() {
+    final line = document.getLineFromTextIndex(selection.baseOffset);
+
+    final isEmbed = (line.children.first as Leaf).value is Embeddable;
+    final textIndex = line.offset;
+    int textLength;
+    if (!isEmbed) {
+      textLength = line.length + 1;
+    } else {
+      textLength = 1;
+    }
+
+    /* SOMEHOW IT DOESN'T WORK LIKE ON THE SymMenuBlockOption */
+    if (textLength < document.length) {
+      document.delete(textIndex, line.length);
+
+      final lastCursorIndex = selection.baseOffset;
+
+      if (lastCursorIndex > textIndex) {
+        var newCursorIndex = lastCursorIndex - textLength;
+
+        if (newCursorIndex < 0) {
+          newCursorIndex = 0;
+        }
+
+        updateSelection(
+            TextSelection(
+                baseOffset: newCursorIndex, extentOffset: newCursorIndex),
+            ChangeSource.LOCAL);
+      }
+    } else {
+      print('replaceText: ${line.length}');
+      replaceText(
+          0, line.length - 1, '\n', const TextSelection.collapsed(offset: 0));
+    }
+  }
 }
diff --git a/lib/src/widgets/sym_widgets/sym_asset_image.dart b/lib/src/widgets/sym_widgets/sym_asset_image.dart
@@ -7,7 +7,7 @@ class SymAssetImage extends StatelessWidget {
     this.assetName, {
     this.size,
     this.color,
-    this.fit = BoxFit.none,
+    this.fit = BoxFit.scaleDown,
     Key? key,
   }) : super(key: key);
 
diff --git a/lib/src/widgets/sym_widgets/sym_menu_block_option.dart b/lib/src/widgets/sym_widgets/sym_menu_block_option.dart
@@ -12,6 +12,41 @@ import '../common_widgets/gap.dart';
 import 'sym_text.dart';
 import '../text_line.dart';
 
+class MenuBlockOptionItem {
+  MenuBlockOptionItem({
+    required this.title,
+    required this.iconAssetName,
+    required this.type,
+  });
+
+  final _BlockOptionType type;
+  final String title;
+  final String iconAssetName;
+}
+
+class MenuBlockOptionSection {
+  MenuBlockOptionSection(this.title, this.items);
+
+  final String title;
+  final List<MenuBlockOptionItem> items;
+}
+
+abstract class _BlockOptionType {}
+
+class BlockOptionTypeAction extends _BlockOptionType {
+  BlockOptionTypeAction(this.type);
+
+  final BlockActionItem type;
+}
+
+enum BlockActionItem { DELETE, COPY, DUPLICATE, INDENT_LEFT, INDENT_RIGHT }
+
+class BlockOptionTypeAttribute extends _BlockOptionType {
+  BlockOptionTypeAttribute(this.attr);
+
+  final Attribute attr;
+}
+
 class SymMenuBlockOption extends StatefulWidget {
   const SymMenuBlockOption({
     required this.renderEditableTextLine,
@@ -291,7 +326,8 @@ class _SymMenuBlockOptionState extends State<SymMenuBlockOption> {
         actionListener.onDuplicate();
       }),
       if (!widget.isEmbeddable)
-        _itemMenuContent(Assets.INDENT_LEFT_INACTIVE, 'Indent kiri', maxMenuWidth,
+        _itemMenuContent(
+            Assets.INDENT_LEFT_INACTIVE, 'Indent kiri', maxMenuWidth,
             enabled: (indentLevel ?? 0) > 0, onTap: () {
           if (indentLevel == 1) {
             widget.controller.formatLine(
@@ -382,3 +418,69 @@ class MenuBlockOptionTurnIntoListener {
 
   final Function(Attribute) turnInto;
 }
+
+/* DEFAULT MENU ITEM */
+
+List<MenuBlockOptionSection> defaultMenuBlockOptionSections(bool isEmbed) {
+  return [
+    MenuBlockOptionSection('Aksi', [
+      MenuBlockOptionItem(
+          title: 'Hapus blok',
+          iconAssetName: Assets.TRASH,
+          type: BlockOptionTypeAction(BlockActionItem.DELETE)),
+      MenuBlockOptionItem(
+          title: 'Salin teks',
+          iconAssetName: Assets.COPY,
+          type: BlockOptionTypeAction(BlockActionItem.COPY)),
+      MenuBlockOptionItem(
+          title: 'Duplikat blok',
+          iconAssetName: Assets.DUPLICATE,
+          type: BlockOptionTypeAction(BlockActionItem.DUPLICATE)),
+      if (!isEmbed)
+        MenuBlockOptionItem(
+            title: 'Indent kiri',
+            iconAssetName: Assets.INDENT_LEFT_INACTIVE,
+            type: BlockOptionTypeAction(BlockActionItem.INDENT_LEFT)),
+      if (!isEmbed)
+        MenuBlockOptionItem(
+            title: 'Indent kanan',
+            iconAssetName: Assets.INDENT_RIGHT_ACTIVE,
+            type: BlockOptionTypeAction(BlockActionItem.INDENT_RIGHT)),
+    ]),
+    if (!isEmbed)
+      MenuBlockOptionSection('Change Section Into', [
+        MenuBlockOptionItem(
+            title: 'Text Biasa',
+            iconAssetName: Assets.H1,
+            type: BlockOptionTypeAttribute(Attribute.h1)),
+        MenuBlockOptionItem(
+            title: 'Judul Sedang',
+            iconAssetName: Assets.H2,
+            type: BlockOptionTypeAttribute(Attribute.h2)),
+        MenuBlockOptionItem(
+            title: 'Judul Kecil',
+            iconAssetName: Assets.H3,
+            type: BlockOptionTypeAttribute(Attribute.h3)),
+        MenuBlockOptionItem(
+            title: 'Bullet List',
+            iconAssetName: Assets.BULLET_LIST,
+            type: BlockOptionTypeAttribute(Attribute.ul)),
+        MenuBlockOptionItem(
+            title: 'Numbering List',
+            iconAssetName: Assets.NUMBERING_LIST,
+            type: BlockOptionTypeAttribute(Attribute.ol)),
+        MenuBlockOptionItem(
+            title: 'To-Do List',
+            iconAssetName: Assets.TODO_LIST,
+            type: BlockOptionTypeAttribute(Attribute.checked)),
+        MenuBlockOptionItem(
+            title: 'Block Code',
+            iconAssetName: Assets.FORMAT_INLINECODE_INACTIVE,
+            type: BlockOptionTypeAttribute(Attribute.codeBlock)),
+        MenuBlockOptionItem(
+            title: 'Blockquote',
+            iconAssetName: Assets.FORMAT_INLINECODE_INACTIVE,
+            type: BlockOptionTypeAttribute(Attribute.blockQuote)),
+      ]),
+  ];
+}
diff --git a/lib/src/widgets/sym_widgets/sym_toolbar/sym_bottom_menu_block_option.dart b/lib/src/widgets/sym_widgets/sym_toolbar/sym_bottom_menu_block_option.dart
@@ -0,0 +1,174 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_quill/flutter_quill.dart';
+import 'package:flutter_quill/src/utils/color.dart';
+import 'package:flutter_quill/src/widgets/common_widgets/gap.dart';
+import 'package:flutter_quill/src/widgets/sym_widgets/sym_asset_image.dart';
+import 'package:flutter_quill/src/widgets/sym_widgets/sym_menu_block_option.dart';
+import 'package:flutter_quill/src/widgets/sym_widgets/sym_text.dart';
+import 'package:flutter_quill/utils/assets.dart';
+import '../../../../src/utils/iterator_ext.dart';
+
+class SymBottomMenuBlockOption {
+  SymBottomMenuBlockOption._(this.context, this.controller) {
+    showModalBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        backgroundColor: Colors.transparent,
+        builder: (context) => _layout
+    );
+  }
+
+  factory SymBottomMenuBlockOption.show(
+      BuildContext context, QuillController controller) {
+    return SymBottomMenuBlockOption._(context, controller);
+  }
+
+  final BuildContext context;
+  final QuillController controller;
+
+  Widget get _layout {
+    final sections = defaultMenuBlockOptionSections(false);
+    final children = Container(
+      color: SymColors.light_bgWhite,
+      child: Column(
+        children: [
+          _headerMenu(() => Navigator.pop(context)),
+          const GapV(21),
+          ...sections.mapIndexed((e, i) {
+            return _buildSection(e, i != sections.length - 1);
+          }).toList()
+        ],
+      ),
+    );
+    return DraggableScrollableSheet(
+        initialChildSize: 0.6,
+        builder: (context, scrollController) {
+          return SingleChildScrollView(
+            controller: scrollController,
+            child: children,
+          );
+        }
+    );
+  }
+
+  Widget _headerMenu(VoidCallback onClose) {
+    return Column(
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(left: 16, right: 16, top: 12),
+          child: Row(
+            children: [
+              InkWell(
+                onTap: onClose,
+                child: const SymAssetImage(
+                  Assets.CIRCLE_CLOSE,
+                  size: Size(40, 40),
+                ),
+              ),
+              const GapH(16),
+              const SymText(
+                'Opsi format lainnya',
+                size: 16,
+                bold: true,
+              ),
+              Container(
+                color: SymColors.light_line,
+                height: 1,
+              ),
+            ],
+          ),
+        ),
+        GapV(12),
+        Container(
+          color: SymColors.light_line,
+          height: 1,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildSection(MenuBlockOptionSection section, bool widthDivider) {
+    final title = section.title;
+    final items = section.items;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          color: SymColors.light_bgWhite,
+          child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 20),
+              child: SymText(
+                title,
+              )),
+        ),
+        ...items.map(_buildItem).toList(),
+        if (widthDivider) _divider()
+      ],
+    );
+  }
+
+  Widget _buildItem(MenuBlockOptionItem item) {
+    final title = item.title;
+    final type = item.type;
+    final iconAssetName = item.iconAssetName;
+
+    return Material(
+      child: InkWell(
+        onTap: () {
+          Navigator.pop(context);
+          WidgetsBinding.instance!.addPostFrameCallback((_) {
+            if (type is BlockOptionTypeAction) {
+              switch (type.type) {
+                case BlockActionItem.DELETE:
+                  controller.deleteCurrentLine();
+                  break;
+                case BlockActionItem.COPY:
+                // TODO: Handle this case.
+                  break;
+                case BlockActionItem.DUPLICATE:
+                // TODO: Handle this case.
+                  break;
+                case BlockActionItem.INDENT_LEFT:
+                // TODO: Handle this case.
+                  break;
+                case BlockActionItem.INDENT_RIGHT:
+                // TODO: Handle this case.
+                  break;
+              }
+            }
+          });
+        },
+        child: Ink(
+          color: SymColors.light_bgWhite,
+          child: Container(
+            padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 20),
+            child: Row(
+              children: [
+                SymAssetImage(
+                  iconAssetName,
+                  size: const Size(17, 17),
+                ),
+                const GapH(17),
+                SymText(
+                  title,
+                  size: 14,
+                  bold: true,
+                )
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _divider() {
+    return Container(
+      margin: const EdgeInsets.only(top: 10, bottom: 16, left: 16, right: 16),
+      color: SymColors.light_line,
+      height: 1,
+    );
+  }
+}
diff --git a/lib/src/widgets/sym_widgets/sym_toolbar/sym_toolbar.dart b/lib/src/widgets/sym_widgets/sym_toolbar/sym_toolbar.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_quill/src/widgets/sym_widgets/sym_toolbar/sym_bottom_menu_block_creation.dart';
+import 'package:flutter_quill/src/widgets/sym_widgets/sym_toolbar/sym_bottom_menu_block_option.dart';
 import 'package:flutter_quill/src/widgets/sym_widgets/sym_toolbar/sym_toolbar_button/sym_toggle_style_button.dart';
 import 'package:flutter_quill/src/widgets/sym_widgets/sym_toolbar/sym_toolbar_button/sym_toolbar_button.dart';
 import 'package:flutter_quill/utils/assets.dart';
@@ -34,7 +35,9 @@ class SymToolbar extends StatelessWidget implements PreferredSizeWidget {
             SymBottomMenuBlockCreation.show(context, controller);
           }),
       divider,
-      SymToolbarButton(iconAssetName: Assets.MORE_VERT, onPressed: () {}),
+      SymToolbarButton(iconAssetName: Assets.MORE_VERT, onPressed: () {
+        SymBottomMenuBlockOption.show(context, controller);
+      }),
       divider,
       SymToggleStyleButton(
           attribute: Attribute.bold,
diff --git a/lib/src/widgets/sym_widgets/sym_toolbar/sym_toolbar_button/sym_toggle_style_button.dart b/lib/src/widgets/sym_widgets/sym_toolbar/sym_toolbar_button/sym_toggle_style_button.dart
@@ -71,6 +71,9 @@ class _SymToggleStyleButtonState extends State<SymToggleStyleButton> {
   }
 
   void _didChangeEditingValue() {
+    if (!mounted) {
+      return;
+    }
     setState(() {
       _isToggled = _getIsToggled(_selectionStyle.attributes);
     });

Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,9 @@ class _SymToggleStyleButtonState extends State<SymToggleStyleButton> {`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`void _didChangeEditingValue() {`
	`74`	`+ if (!mounted) {`
	`75`	`+ return;`
	`76`	`+ }`
`74`	`77`	`setState(() {`
`75`	`78`	`_isToggled = _getIsToggled(_selectionStyle.attributes);`
`76`	`79`	`});`