status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Messages scroll direction 

Former-commit-id: 995738ba19
This commit is contained in:
virvar 2016-02-26 12:22:25 +03:00
parent 8fa81ec0ff
commit 5cd48e241a
3 changed files with 80 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.re-natal
View File

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

1
package.json
View File

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

130
src/messenger/android/chat.cljs
View File

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