Messages scroll direction

Former-commit-id: 995738ba19

.re-natal

@@ -3,7 +3,8 @@
   "interface": "om-next",
   "androidHost": "10.0.3.2",
   "modules": [
-    "react-native-contacts"
+    "react-native-contacts",
+    "react-native-invertible-scroll-view"
   ],
   "imageDirs": [
     "images"

package.json

@@ -9,6 +9,7 @@
     "react-native": "0.20.0",
     "react-native-contacts": "^0.2.1",
     "react-native-i18n": "0.0.8",
+    "react-native-invertible-scroll-view": "^0.2.0",
     "web3": "^0.15.2"
   }
 }

src/messenger/android/chat.cljs

@@ -1,7 +1,7 @@
 (ns messenger.android.chat
   (:require-macros
    [natal-shell.components :refer [view text image touchable-highlight list-view
-                                   toolbar-android]]
+                                   text-input toolbar-android]]
    [natal-shell.data-source :refer [data-source clone-with-rows]]
    [natal-shell.core :refer [with-error-view]]
    [natal-shell.alert :refer [alert]])
@@ -10,6 +10,8 @@
             [messenger.state :as state]
             [messenger.android.resources :as res]))
 
+(set! js/InvertibleScrollView (js/require "react-native-invertible-scroll-view"))
+
 (defn nav-pop [nav]
   (binding [state/*nav-render* false]
     (.pop nav)))
@@ -20,12 +22,15 @@
          [:message/by-id id])
   static om/IQuery
   (query [this]
-         '[:id :body :outgoing :delivery-status :datetime])
+         '[:id :body :outgoing :delivery-status :date :new-day])
   Object
-  (render [this]
-          (let [{:keys [id body outgoing delivery-status datetime]}
+  (render
+   [this]
+   (let [{:keys [id body outgoing delivery-status date new-day]}
          (om/props this)]
-            (view {:height 70}
+     (view {:paddingHorizontal 15}
+           ;;; date
+           (when new-day
              (text {:style {:marginVertical 10
                             :fontFamily "Avenir-Roman"
                             :fontSize 11
@@ -34,9 +39,14 @@
                             :lineHeight 15
                             :textAlign "center"
                             :opacity 0.8}}
-                        datetime)
+                   date))
+           ;;; body
+           (view {:style (merge {:width 260
+                                 :marginVertical 5}
+                                (if outgoing
+                                  {:alignSelf "flex-end"}
+                                  {:alignSelf "flex-start"}))}
                  (view {:style (merge {:borderRadius 6
-                                        :marginVertical 5
                                        :paddingVertical 12
                                        :paddingHorizontal 16}
                                       (if outgoing
@@ -47,7 +57,7 @@
                        (text {:style {:fontSize 14
                                       :fontFamily "Avenir-Roman"
                                       :color "#4A5258"}}
-                              body))))))
+                             body)))))))
 
 (def message (om/factory Message {:keyfn :id}))
 
@@ -56,10 +66,13 @@
 
 (defn generate-message [n]
   {:id n
-   :body "This is a text. This is a text."
+   :body (if (= (rem n 3) 0)
+           (apply str n "." (repeat 5 " This is a text."))
+           (str n ". This is a text."))
    :outgoing (< (rand) 0.5)
    :delivery-status (if (< (rand) 0.5) :delivered :seen)
-   :datetime "15:30"})
+   :date "TODAY"
+   :new-day (= (rem n 3) 0)})
 
 (defn generate-messages [n]
   (map generate-message (range 1 (inc n))))
@@ -67,16 +80,21 @@
 (defn load-messages []
   (clone-with-rows (data-source {:rowHasChanged (fn [row1 row2]
                                                   (not= row1 row2))})
-                   (vec (generate-messages 10))))
+                   (vec (generate-messages 100))))
+
+(defui NewMessage
+  Object
+  (render
+   [this]
+   (view {}
+         (text-input {}))))
+
+(def new-message (om/factory NewMessage))
 
 (defui Chat
-  ;; static om/IQuery
-  ;; (query [this]
-  ;;        '[:contacts-ds])
   Object
-  ;; (componentDidMount [this]
-  ;;                    (load-contacts))
-  (render [this]
+  (render
+   [this]
    (let [{:keys [nav]} (om/get-computed this)
          messages-ds (load-messages)]
      (view {:style {:flex 1}}
@@ -91,7 +109,13 @@
                              :onIconClicked (fn []
                                               (nav-pop nav))})
            (list-view {:dataSource messages-ds
+                       :renderScrollComponent
+                       (fn [props]
+                         (js/React.createElement js/InvertibleScrollView
+                                                 (clj->js (merge (js->clj props)
+                                                                 {:inverted true}))))
                        :renderRow render-row
-                              :style {}})))))
+                       :style {}})
+           (new-message)))))
 
 (def chat (om/factory Chat))