#7 Chat | Compose textfield (just the view, not Schema)

Memri.xcodeproj/project.pbxproj

@@ -24,6 +24,7 @@
 		543C918F2600B39300804B8F /* CVU_SubView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 543C918E2600B39300804B8F /* CVU_SubView.swift */; };
 		5443F793260B7E7900B86094 /* ActionButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5443F792260B7E7900B86094 /* ActionButton.swift */; };
 		5443F7CC260C827F00B86094 /* BrowserView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5443F7CB260C827F00B86094 /* BrowserView.swift */; };
+		544FA40526B1D6FB00CD9183 /* CVU_MessageComposer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 544FA40426B1D6FB00CD9183 /* CVU_MessageComposer.swift */; };
 		54557B3D260143B800631EC6 /* SubView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 54557B3C260143B800631EC6 /* SubView.swift */; };
 		54557B422602398800631EC6 /* CVU_Grid.swift in Sources */ = {isa = PBXBuildFile; fileRef = 54557B412602398800631EC6 /* CVU_Grid.swift */; };
 		545A24AE2639ECAB00E0CC12 /* Authentication.swift in Sources */ = {isa = PBXBuildFile; fileRef = 545A24AD2639ECAA00E0CC12 /* Authentication.swift */; };
@@ -261,6 +262,7 @@
 		543C918E2600B39300804B8F /* CVU_SubView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CVU_SubView.swift; sourceTree = "<group>"; };
 		5443F792260B7E7900B86094 /* ActionButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ActionButton.swift; sourceTree = "<group>"; };
 		5443F7CB260C827F00B86094 /* BrowserView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BrowserView.swift; sourceTree = "<group>"; };
+		544FA40426B1D6FB00CD9183 /* CVU_MessageComposer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CVU_MessageComposer.swift; sourceTree = "<group>"; };
 		54557B3C260143B800631EC6 /* SubView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SubView.swift; sourceTree = "<group>"; };
 		54557B412602398800631EC6 /* CVU_Grid.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CVU_Grid.swift; sourceTree = "<group>"; };
 		545A24AD2639ECAA00E0CC12 /* Authentication.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Authentication.swift; sourceTree = "<group>"; };
@@ -942,6 +944,7 @@
 				5429EC8F2604C4220045C2E3 /* CVU_EditorRow.swift */,
 				5429EC942604C59C0045C2E3 /* CVU_MemriButton.swift */,
 				547B4FC626121723006A052E /* CVU_ActionButton.swift */,
+				544FA40426B1D6FB00CD9183 /* CVU_MessageComposer.swift */,
 			);
 			path = CVUElements;
 			sourceTree = "<group>";
@@ -1574,6 +1577,7 @@
 				D7784F9E25B78A90004AB982 /* BarChartView.swift in Sources */,
 				5429EC9B2604C6280045C2E3 /* MemriButton.swift in Sources */,
 				D7F9BD4025BBAD780098B3F8 /* CVU_Toggle.swift in Sources */,
+				544FA40526B1D6FB00CD9183 /* CVU_MessageComposer.swift in Sources */,
 				54E1CE492656CFB2009C7029 /* EdgeRecord+Sync.swift in Sources */,
 				5443F7CC260C827F00B86094 /* BrowserView.swift in Sources */,
 				D7E9990025C5254600401451 /* CVU_ForEach.swift in Sources */,

MemriApp/Assets/defaultCVU/type/MessageChannel.cvu

@@ -47,6 +47,10 @@ MessageChannel {
         item: {{channel}}
     }
     
+    bottomBar: {
+        messageComposer
+    }
+        
     [datasource = pod] {
         query: Message
         filter: {

MemriApp/CVU/definitions/CVUUIElementFamily.swift

@@ -21,6 +21,7 @@ public enum CVUUIElementFamily: String, CaseIterable, Codable {
     case Toggle = "toggle"
     case Picker = "picker"
     case MemriButton = "memributton"
+    case MessageComposer = "messagecomposer"
     case Button = "button"
     case ActionButton = "actionbutton"
     case Map = "map"

MemriApp/UI/CVUComponents/CVUElementView.swift

@@ -66,6 +66,9 @@ struct CVUElementView: View {
             CVU_MemriButton(nodeResolver: nodeResolver)
         case .ActionButton:
             CVU_ActionButton(nodeResolver: nodeResolver)
+        case .MessageComposer:
+            CVU_MessageComposer(nodeResolver: nodeResolver)
+
 //        case .Picker:
 //            picker
 //        case .EditorSection:

MemriApp/UI/CVUComponents/CVUElements/CVU_MessageComposer.swift

+//
+//  CVU_MessageComposer.swift
+//  Memri
+//
+//  Created by Chaitanya Pandit on 28/07/21.
+//
+
+import SwiftUI
+
+struct CVU_MessageComposer: View {
+    @State private var isEditingComposedMessage: Bool = false
+    @State var composedMessage: String?
+
+    var nodeResolver: CVUUINodeResolver
+
+    var body: some View {
+        VStack(spacing: 0) {
+            Divider()
+            HStack(spacing: 6) {
+                MemriFittedTextEditor(
+                    contentBinding: $composedMessage,
+                    placeholder: "Type a message...",
+                    backgroundColor: CVUColor.system(.systemBackground),
+                    isEditing: $isEditingComposedMessage
+                )
+
+                Button(action: onPressSend) {
+                    Image(systemName: "arrow.up.circle.fill")
+                        .foregroundColor(canSend ? .blue : Color(.systemFill))
+                        .font(.system(size: 30))
+                }
+                .disabled(!canSend)
+            }
+            .padding(.vertical, 10)
+            .padding(.leading, 15)
+            .padding(.trailing, 15)
+            .background(Color(.secondarySystemBackground))
+            Divider()
+        }
+    }
+    
+    var canSend: Bool {
+        !(composedMessage?.isOnlyWhitespace ?? true)
+    }
+    
+    func onPressSend() {
+        isEditingComposedMessage = false
+    }
+}

MemriApp/UI/SceneContentView.swift

@@ -58,6 +58,17 @@ struct SceneContentView: View {
         return context.viewDefinitionPropertyResolver.bool("showBottomBar") ?? true
     }
     
+    var bottomBar: CVUDefinitionContent? {
+        guard let bottomBarDef = context.cvuController.viewDefinitionFor(viewName: context.config.viewName
+            ?? context.config.rendererName)?.properties["bottomBar"],
+            let bottomBarSubdef = bottomBarDef.getSubdefinition()
+        else {
+            return nil
+        }
+        
+        return bottomBarSubdef
+    }
+    
     var body: some View {
         VStack(spacing: 0) {
             renderer
@@ -70,13 +81,17 @@ struct SceneContentView: View {
                 }
                 
                 if (showBottomBar) {
-                    BottomBarView(context: context,
-                                  onSearchPressed: { searchBarOpen = true },
-                                  onFilterButtonPressed: {
-                                    withAnimation {
-                                        sceneController.filterPanelIsVisible = true
-                                    }
-                                  })
+                    if let nodeDefinition = bottomBar {
+                        context.render(nodeDefinition: nodeDefinition)
+                    } else {
+                        BottomBarView(context: context,
+                                      onSearchPressed: { searchBarOpen = true },
+                                      onFilterButtonPressed: {
+                                        withAnimation {
+                                            sceneController.filterPanelIsVisible = true
+                                        }
+                                      })
+                    }
                 }
             }
         }