virvar
parent
8fa81ec0ff
commit
5cd48e241a
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,34 +22,42 @@
|
|||
[: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]}
|
||||
(om/props this)]
|
||||
(view {:height 70}
|
||||
(text {:style {:marginVertical 10
|
||||
:fontFamily "Avenir-Roman"
|
||||
:fontSize 11
|
||||
:color "#AAB2B2"
|
||||
:letterSpacing 1
|
||||
:lineHeight 15
|
||||
:textAlign "center"
|
||||
:opacity 0.8}}
|
||||
datetime)
|
||||
(view {:style (merge {:borderRadius 6
|
||||
:marginVertical 5
|
||||
:paddingVertical 12
|
||||
:paddingHorizontal 16}
|
||||
(if outgoing
|
||||
{:backgroundColor "#D3EEEF"
|
||||
:alignSelf "flex-end"}
|
||||
{:backgroundColor "#FBF6E3"
|
||||
:alignSelf "flex-start"}))}
|
||||
(text {:style {:fontSize 14
|
||||
:fontFamily "Avenir-Roman"
|
||||
:color "#4A5258"}}
|
||||
body))))))
|
||||
(render
|
||||
[this]
|
||||
(let [{:keys [id body outgoing delivery-status date new-day]}
|
||||
(om/props this)]
|
||||
(view {:paddingHorizontal 15}
|
||||
;;; date
|
||||
(when new-day
|
||||
(text {:style {:marginVertical 10
|
||||
:fontFamily "Avenir-Roman"
|
||||
:fontSize 11
|
||||
:color "#AAB2B2"
|
||||
:letterSpacing 1
|
||||
:lineHeight 15
|
||||
:textAlign "center"
|
||||
:opacity 0.8}}
|
||||
date))
|
||||
;;; body
|
||||
(view {:style (merge {:width 260
|
||||
:marginVertical 5}
|
||||
(if outgoing
|
||||
{:alignSelf "flex-end"}
|
||||
{:alignSelf "flex-start"}))}
|
||||
(view {:style (merge {:borderRadius 6
|
||||
:paddingVertical 12
|
||||
:paddingHorizontal 16}
|
||||
(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}))
|
||||
|
||||
|
|
@ -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,31 +80,42 @@
|
|||
(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]
|
||||
(let [{:keys [nav]} (om/get-computed this)
|
||||
messages-ds (load-messages)]
|
||||
(view {:style {:flex 1}}
|
||||
(toolbar-android {:logo res/logo-icon
|
||||
:title "Chat name"
|
||||
:titleColor "#4A5258"
|
||||
:subtitle "Last seen just now"
|
||||
:subtitleColor "#AAB2B2"
|
||||
:navIcon res/nav-back-icon
|
||||
:style {:backgroundColor "#e9eaed"
|
||||
:height 56}
|
||||
:onIconClicked (fn []
|
||||
(nav-pop nav))})
|
||||
(list-view {:dataSource messages-ds
|
||||
:renderRow render-row
|
||||
:style {}})))))
|
||||
(render
|
||||
[this]
|
||||
(let [{:keys [nav]} (om/get-computed this)
|
||||
messages-ds (load-messages)]
|
||||
(view {:style {:flex 1}}
|
||||
(toolbar-android {:logo res/logo-icon
|
||||
:title "Chat name"
|
||||
:titleColor "#4A5258"
|
||||
:subtitle "Last seen just now"
|
||||
:subtitleColor "#AAB2B2"
|
||||
:navIcon res/nav-back-icon
|
||||
:style {:backgroundColor "#e9eaed"
|
||||
:height 56}
|
||||
: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 {}})
|
||||
(new-message)))))
|
||||
|
||||
(def chat (om/factory Chat))
|
||||
|
|
|
|||
Loading…
Reference in New Issue