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

Merge branch 'develop' into feature/#123 

Conflicts:
	android/app/build.gradle
	android/settings.gradle
	package.json
	src/status_im/chat/handlers.cljs
	src/status_im/chat/subs.cljs


Former-commit-id: dd3eb3c0eb
This commit is contained in:
Roman Volosovskyi 2016-06-23 12:02:39 +03:00
parent 3c62b92248 85c651e163
commit 5abe38445e
22 changed files with 301 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.re-natal
View File

@ -1,7 +1,7 @@
{
"name": "StatusIm",
"interface": "reagent",
"androidHost": "localhost",
"androidHost": "10.0.3.2",
"modules": [
"react-native-contacts",
"react-native-invertible-scroll-view",
@ -20,6 +20,7 @@
"react-native-status",
"react-native-camera",
"react-native-qrcode",
"react-native-orientation",
"identicon.js"
],
"imageDirs": [

1
android/app/build.gradle
View File

@ -132,6 +132,7 @@ dependencies {
compile project(':ReactNativeAndroidSmsListener')
compile project(':react-native-camera')
compile project(':react-native-status')
compile project(':react-native-orientation')
compile(group: 'status-im', name: 'status-go', version: '0.1.0-201606220917-ec4b9a', ext: 'aar')
compile fileTree(dir: "node_modules/realm/android/libs", include: ["*.jar"])

15
android/app/src/main/java/com/statusim/MainActivity.java
View File

@ -23,6 +23,7 @@ import android.content.Context;
import com.bitgo.randombytes.RandomBytesPackage;
import com.BV.LinearGradient.LinearGradientPackage;
import com.centaurwarchief.smslistener.SmsListener;
import com.github.yamill.orientation.OrientationPackage;
import android.util.Log;
@ -36,7 +37,8 @@ import com.statusim.Jail.JailPackage;
import com.lwansbrough.RCTCamera.*;
import com.i18n.reactnativei18n.ReactNativeI18n;
import io.realm.react.RealmReactPackage;
import android.content.Intent;
import android.content.res.Configuration;
public class MainActivity extends ReactActivity {
@ -183,7 +185,16 @@ public class MainActivity extends ReactActivity {
new RandomBytesPackage(),
new LinearGradientPackage(),
new RCTCameraPackage(),
new SmsListener(this)
new SmsListener(this),
new OrientationPackage(this)
);
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Intent intent = new Intent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
this.sendBroadcast(intent);
}
}

2
android/settings.gradle
View File

@ -24,3 +24,5 @@ project(':react-native-status').projectDir = new File(rootProject.projectDir, '.
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
include ':react-native-orientation', ':app'
project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')

1
package.json
View File

@ -22,6 +22,7 @@
"react-native-qrcode": "^0.2.2",
"react-native-randombytes": "^2.1.0",
"react-native-vector-icons": "^1.3.4",
"react-native-orientation": "^1.17.0",
"realm": "^0.11.1",
"react-native-status": "git+ssh://git@github.com/status-im/react-native-status"
}

55
src/status_im/android/core.cljs
View File

@ -5,7 +5,8 @@
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.handlers]
[status-im.subs]
[status-im.components.react :refer [navigator app-registry]]
[status-im.components.react :refer [navigator app-registry device-event-emitter
orientation]]
[status-im.components.main-tabs :refer [main-tabs]]
[status-im.contacts.views.contact-list :refer [contact-list] ]
[status-im.contacts.views.new-contact :refer [new-contact]]
@ -33,25 +34,45 @@
true)))]
(add-event-listener "hardwareBackPress" new-listener)))
(defn orientation->keyword [o]
(keyword (.toLowerCase o)))
(defn app-root []
(let [signed-up (subscribe [:get :signed-up])
view-id (subscribe [:get :view-id])]
(fn []
(case (if @signed-up @view-id :chat)
:discovery [main-tabs]
:discovery-tag [discovery-tag]
:add-participants [new-participants]
:remove-participants [remove-participants]
:chat-list [main-tabs]
:new-group [new-group]
:group-settings [group-settings]
:contact-list [main-tabs]
:group-contacts [contact-list]
:new-contact [new-contact]
:qr-scanner [qr-scanner]
:chat [chat]
:profile [profile]
:my-profile [my-profile]))))
(r/create-class
{:component-will-mount
(fn []
(let [o (orientation->keyword (.getInitialOrientation orientation))]
(dispatch [:set :orientation o]))
(.addOrientationListener
orientation
#(dispatch [:set :orientation (orientation->keyword %)]))
(.addListener device-event-emitter
"keyboardDidShow"
(fn [e]
(let [h (.. e -endCoordinates -height)]
(dispatch [:set :keyboard-height h]))))
(.addListener device-event-emitter
"keyboardDidHide"
#(dispatch [:set :keyboard-height 0])))
:render
(fn []
(case (if @signed-up @view-id :chat)
:discovery [main-tabs]
:discovery-tag [discovery-tag]
:add-participants [new-participants]
:remove-participants [remove-participants]
:chat-list [main-tabs]
:new-group [new-group]
:group-settings [group-settings]
:contact-list [main-tabs]
:group-contacts [contact-list]
:new-contact [new-contact]
:qr-scanner [qr-scanner]
:chat [chat]
:profile [profile]
:my-profile [my-profile]))})))
(defn init []
(dispatch-sync [:initialize-db])

26
src/status_im/chat/handlers.cljs
View File

@ -67,17 +67,10 @@
(register-handler :start-cancel-command
(u/side-effect!
(fn [db _]
(if (commands/get-chat-command-to-msg-id db)
(dispatch [:animate-cancel-command])
(dispatch [:cancel-command])))))
(defn animate-set-chat-command-content [db _]
(when (commands/get-chat-command-to-msg-id db)
(dispatch [:animate-response-resize])))
(dispatch [:animate-cancel-command]))))
(register-handler :set-chat-command-content
[(after invoke-suggestions-handler!)
(after animate-set-chat-command-content)]
[(after invoke-suggestions-handler!)]
(fn [{:keys [current-chat-id] :as db} [_ content]]
(as-> db db
(commands/set-chat-command-content db content)
@ -113,6 +106,7 @@
command-info {:command command
:content content}]
(-> db
;(assoc-in [:chats current-chat-id :command-input :command] nil)
(commands/stage-command command-info)
(assoc :staged-command command-info)))))
@ -128,6 +122,7 @@
(register-handler :set-response-chat-command
[(after invoke-suggestions-handler!)
(after #(dispatch [:command-edit-mode]))
(after #(dispatch [:animate-show-response]))]
(fn [db [_ to-msg-id command-key]]
(commands/set-response-chat-command db to-msg-id command-key)))
@ -308,8 +303,9 @@
(commands/unstage-command db staged-command)))
(register-handler :set-chat-command
[(after #(dispatch [:command-edit-mode]))
(after #(dispatch [:animate-show-response]))]
(fn [db [_ command-key]]
;; todo what is going on there?!
(commands/set-chat-command db command-key)))
(register-handler :init-console-chat
@ -491,3 +487,13 @@
;((after leaving-message!))
((after delete-messages!))
((after delete-chat!))))
(defn edit-mode-handler [mode]
(fn [{:keys [current-chat-id] :as db} _]
(assoc-in db [:edit-mode current-chat-id] mode)))
(register-handler :command-edit-mode
(edit-mode-handler :command))
(register-handler :text-edit-mode
(edit-mode-handler :text))

90
src/status_im/chat/handlers/animation.cljs
View File

@ -15,34 +15,12 @@
([name middleware handler]
(register-handler name [(path :animations) middleware] handler)))
(animation-handler :finish-animate-cancel-command
(fn [db _]
(assoc db :commands-input-is-switching? false)))
(animation-handler :animate-cancel-command
(after #(dispatch [:text-edit-mode]))
(fn [db _]
(if-not (:commands-input-is-switching? db)
(assoc db
:commands-input-is-switching? true
:message-input-buttons-scale 1
:message-input-offset 0
:to-response-height zero-height
:messages-offset 0)
db)))
(animation-handler :finish-animate-response-resize
(fn [db _]
(let [fixed (:to-response-height db)]
(assoc db :response-height-current fixed
:response-resize? false))))
(animation-handler :set-response-height
(fn [db [_ value]]
(assoc db :response-height-current value)))
(animation-handler :animate-response-resize
(fn [db _]
(assoc db :response-resize? true)))
(assoc db
:to-response-height zero-height
:messages-offset 0)))
(defn get-response-height [db]
(let [command (commands/get-chat-command db)
@ -58,18 +36,10 @@
(defn update-response-height [db]
(assoc-in db [:animations :to-response-height] (get-response-height db)))
(animation-handler :finish-show-response
(fn [db _]
(assoc db :commands-input-is-switching? false)))
(register-handler :animate-show-response
(after #(dispatch [:animate-response-resize]))
(after #(dispatch [:command-edit-mode]))
(fn [db _]
(-> db
(assoc-in [:animations :commands-input-is-switching?] true)
(assoc-in [:animations :response-height-current] zero-height)
(assoc-in [:animations :message-input-buttons-scale] 0.1)
(assoc-in [:animations :message-input-offset] -40)
(assoc-in [:animations :messages-offset] request-info-height)
(update-response-height))))
@ -79,33 +49,31 @@
(if (not= height prev-height)
(let [db (assoc db :response-height-max height)]
(if (= prev-height (:to-response-height db))
(assoc db :to-response-height height
:response-height-current height)
(assoc db :to-response-height height)
db))
db))))
(animation-handler :on-drag-response
(fn [db [_ dy]]
(let [fixed (:to-response-height db)]
(assoc db :response-height-current (- fixed dy)
:response-resize? false))))
(register-handler :fix-response-height
(fn [db _]
(if (and (commands/get-chat-command-to-msg-id db)
(not (get-in db [:animations :commands-input-is-switching?])))
(let [current (get-in db [:animations :response-height-current])
normal-height response-height-normal
command (commands/get-chat-command db)
text (commands/get-chat-command-content db)
suggestions (get-content-suggestions command text)
max-height (get-in db [:animations :response-height-max])
delta (/ normal-height 2)
new-fixed (cond
(or (<= current (+ zero-height delta))
(empty? suggestions)) (+ zero-height request-info-height)
(<= current (+ zero-height normal-height delta)) (get-response-height db)
:else max-height)]
(dispatch [:animate-response-resize])
(assoc-in db [:animations :to-response-height] new-fixed))
db)))
(fn [db [_ vy current]]
(let [max-height (get-in db [:animations :response-height-max])
;; todo magic value
middle 270
moving-down? (pos? vy)
moving-up? (not moving-down?)
under-middle-position? (<= current middle)
over-middle-position? (not under-middle-position?)
min-height (+ zero-height request-info-height)
new-fixed (cond (and under-middle-position? moving-down?)
min-height
(and under-middle-position? moving-up?)
middle
(and over-middle-position? moving-down?)
middle
(and over-middle-position? moving-up?)
max-height)]
(-> db
(assoc-in [:animations :to-response-height] new-fixed)
(update-in [:animations :response-height-changed] inc)))))

7
src/status_im/chat/screen.cljs
View File

@ -259,6 +259,7 @@
[group-chat [:chat :group-chat]
show-actions-atom [:show-actions]
command [:get-chat-command]
command? [:command?]
to-msg-id [:get-chat-command-to-msg-id]]
[view {:style st/chat-view
:onLayout (fn [event]
@ -268,9 +269,7 @@
[messages-container
[messages-view group-chat]]
(when group-chat [typing-all])
(cond
(and command to-msg-id) [response-view]
command [content-suggestions-view]
:else [suggestions-view])
[response-view]
(when-not command? [suggestions-view])
[chat-message-new]
(when show-actions-atom [actions-view])])

5
src/status_im/chat/styles/message_input.cljs
View File

@ -4,10 +4,9 @@
(def input-height 56)
(defn message-input-container [offset]
(def message-input-container
{:flex 1
:transform [{:translateX offset}]
:marginRight offset})
:marginRight 0})
(def input-container
{:flexDirection :column})

4
src/status_im/chat/styles/plain_message.cljs
View File

@ -2,8 +2,8 @@
(:require [status-im.components.styles :refer [font
text2-color]]))
(def message-input-button-touchable
{:width 56
(defn message-input-button-touchable [w]
{:width w
:height 56
:alignItems :center
:justifyContent :center})

1
src/status_im/chat/styles/response.cljs
View File

@ -87,7 +87,6 @@
(def command-input
{:flex 1
:marginLeft 56
:marginRight 16
:marginTop -2
:padding 0

24
src/status_im/chat/subs.cljs
View File

@ -1,13 +1,15 @@
(ns status-im.chat.subs
(:require-macros [reagent.ratom :refer [reaction]])
(:require [re-frame.core :refer [register-sub dispatch]]
(:require [re-frame.core :refer [register-sub dispatch subscribe]]
[status-im.db :as db]
;todo handlers in subs?...
[status-im.chat.suggestions :refer
[get-suggestions typing-command?]]
[status-im.models.commands :as commands]
[status-im.constants :refer [response-suggesstion-resize-duration]]
[status-im.handlers.content-suggestions :refer [get-content-suggestions]]))
[status-im.handlers.content-suggestions :refer [get-content-suggestions]]
[status-im.chat.views.plain-message :as plain-message]
[status-im.chat.views.command :as command]))
(register-sub :chat-properties
(fn [db [_ properties]]
@ -75,6 +77,18 @@
(get-in @db)
(reaction))))
(register-sub :valid-plain-message?
(fn [_ _]
(let [input-message (subscribe [:get-chat-input-text])
staged-commands (subscribe [:get-chat-staged-commands])]
(reaction
(plain-message/message-valid? @staged-commands @input-message)))))
(register-sub :valid-command?
(fn [_ [_ validator]]
(let [input (subscribe [:get-chat-command-content])]
(reaction (command/valid? @input validator)))))
(register-sub :get-chat-command
(fn [db _]
(reaction (commands/get-chat-command @db))))
@ -107,3 +121,9 @@
(register-sub :get-content-suggestions
(fn [db _]
(reaction (get-in @db [:suggestions (:current-chat-id @db)]))))
(register-sub :command?
(fn [db ]
(->> (get-in @db [:edit-mode (:current-chat-id @db)])
(= :command)
(reaction))))

33
src/status_im/chat/views/command.cljs
View File

@ -23,33 +23,6 @@
(validator message)
(pos? (count message))))
#_(defn simple-command-input-view [command input-options & {:keys [validator]}]
(let [message-atom (subscribe [:get-chat-command-content])]
(fn [command input-options & {:keys [validator]}]
(let [message @message-atom]
[view st/command-input-and-suggestions-container
[content-suggestions-view]
[view st/command-input-container
[view (st/command-text-container command)
[text {:style st/command-text} (str "!" (:name command))]]
[text-input (merge {:style st/command-input
:autoFocus true
:onChangeText set-input-message
:onSubmitEditing (fn []
(when (valid? message validator)
(send-command)))
:accessibility-label :command-input}
input-options)
message]
(if (valid? message validator)
[touchable-highlight {:on-press send-command
:accessibility-label :stage-command}
[view st/send-container [icon :send st/send-icon]]]
[touchable-highlight {:on-press cancel-command-input}
[view st/cancel-container
[icon :close-gray st/cancel-icon]]])]]))))
(defn try-send [message validator]
(when (valid? message validator)
(send-command)))
@ -58,10 +31,8 @@
[view (st/command-text-container command)
[text {:style st/command-text} (:text command)]])
(defview cancel-button []
[commands-input-is-switching? [:animations :commands-input-is-switching?]]
[touchable-highlight {:disabled commands-input-is-switching?
:on-press cancel-command-input}
(defn cancel-button []
[touchable-highlight {:on-press cancel-command-input}
[view st/cancel-container
[icon :close-gray st/cancel-icon]]])

145
src/status_im/chat/views/message_input.cljs
View File

@ -1,122 +1,65 @@
(ns status-im.chat.views.message-input
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
(:require [re-frame.core :refer [subscribe]]
[status-im.components.react :refer [view
animated-view
icon
touchable-highlight
text-input]]
[status-im.components.animation :as anim]
[status-im.chat.views.plain-message :as plain-message]
[status-im.chat.views.command :as command]
[status-im.chat.views.response :as response]
[status-im.chat.styles.message-input :as st]
[status-im.chat.styles.plain-message :as st-message]
[status-im.chat.styles.input :as st-command]
[status-im.chat.styles.response :as st-response]
[status-im.constants :refer [response-input-hiding-duration]]))
[status-im.chat.styles.response :as st-response]))
(defview send-button [{:keys [on-press accessibility-label]}]
[commands-input-is-switching? [:animations :commands-input-is-switching?]]
[touchable-highlight {:disabled commands-input-is-switching?
:on-press on-press
(defn send-button [{:keys [on-press accessibility-label]}]
[touchable-highlight {:on-press on-press
:accessibility-label accessibility-label}
[view st/send-container
[icon :send st/send-icon]]])
(defn animation-logic [{:keys [to-value val]}]
(fn [_]
(let [to-value @to-value]
(anim/start (anim/timing val {:toValue to-value
:duration response-input-hiding-duration})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-animation ::message-input-offset-current to-value])))))))
(defn message-input-container [input]
(let [to-message-input-offset (subscribe [:animations :message-input-offset])
cur-message-input-offset (subscribe [:animations ::message-input-offset-current])
message-input-offset (anim/create-value (or @cur-message-input-offset 0))
context {:to-value to-message-input-offset
:val message-input-offset}
on-update (animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [input]
@to-message-input-offset
[animated-view {:style (st/message-input-container message-input-offset)}
input])})))
[view st/message-input-container input])
(defview message-input [input-options validator]
[input-message [:get-chat-input-text]
command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id]
input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?]
commands-input-is-switching? [:animations :commands-input-is-switching?]]
(let [response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?)
animation? commands-input-is-switching?]
[text-input (merge {:style (cond
message-input? st-message/message-input
response? st-response/command-input
command st-command/command-input)
:ref (fn [input]
(dispatch [:set-message-input input]))
:autoFocus false
:blurOnSubmit false
:onChangeText (fn [text]
(when-not animation?
((if message-input?
plain-message/set-input-message
command/set-input-message)
text)))
:onSubmitEditing #(when-not animation?
(if message-input?
(plain-message/try-send staged-commands
input-message)
(command/try-send input-command validator)))}
(when command
{:accessibility-label :command-input})
input-options)
(if message-input?
input-message
input-command)]))
(def plain-input-options
{:style st-message/message-input
:onChangeText plain-message/set-input-message
:onSubmitEditing plain-message/send})
(def command-input-options
{:style st-response/command-input
:onChangeText command/set-input-message
:onSubmitEditing command/send-command})
(defview message-input [input-options]
[command? [:command?]
input-message [:get-chat-input-text]
input-command [:get-chat-command-content]]
[text-input (merge
(if command?
command-input-options
plain-input-options)
{:autoFocus false
:blurOnSubmit false
:accessibility-label :input}
input-options)
(if command? input-command input-message)])
(defview plain-message-input-view [{:keys [input-options validator]}]
[input-message [:get-chat-input-text]
command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id]
[command? [:command?]
input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?]
commands-input-is-switching? [:animations :commands-input-is-switching?]]
(let [response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?)]
[view st/input-container
[view st/input-view
(if message-input?
[plain-message/commands-button]
(when (and command (not response?))
[command/command-icon command response?]))
[message-input-container
[message-input input-options validator]]
;; TODO emoticons: not implemented
(when message-input?
[plain-message/smile-button])
(if message-input?
(when (plain-message/message-valid? staged-commands input-message)
[send-button {:on-press #(plain-message/try-send staged-commands
input-message)
:accessibility-label :send-message}])
(if (command/valid? input-command validator)
[send-button {:on-press command/send-command
:accessibility-label :stage-command}]
(when-not response?
[command/cancel-button])))]]))
valid-plain-message? [:valid-plain-message?]
valid-command? [:valid-command? validator]]
[view st/input-container
[view st/input-view
[plain-message/commands-button]
[message-input-container
[message-input input-options validator]]
;; TODO emoticons: not implemented
[plain-message/smile-button]
(when (if command? valid-command? valid-plain-message?)
(let [on-press (if command?
command/send-command
plain-message/send)]
[send-button {:on-press on-press
:accessibility-label :send-message}]))]])

11
src/status_im/chat/views/new_message.cljs
View File

@ -16,9 +16,11 @@
(for [command staged-commands]
^{:key command} [staged-command-view command])])
(defn show-input [command]
(defview show-input []
[command [:get-chat-command]
command? [:command?]]
[plain-message-input-view
(when command
(when command?
(case (:command command)
:phone {:input-options {:keyboardType :phone-pad}
:validator valid-mobile-number?}
@ -30,9 +32,8 @@
nil #_(throw (js/Error. "Uknown command type"))))])
(defview chat-message-new []
[command [:get-chat-command]
staged-commands [:get-chat-staged-commands]]
[staged-commands [:get-chat-staged-commands]]
[view st/new-message-container
(when (and staged-commands (pos? (count staged-commands)))
[staged-commands-view staged-commands])
[show-input command]])
[show-input]])

112
src/status_im/chat/views/plain_message.cljs
View File

@ -13,53 +13,37 @@
(defn set-input-message [message]
(dispatch [:set-chat-input-text message]))
(defn send []
(dispatch [:send-chat-msg]))
(defn message-valid? [staged-commands message]
(or (and (pos? (count message))
(not= "!" message))
(pos? (count staged-commands))))
(defn try-send [staged-commands message]
(when (message-valid? staged-commands message)
(dispatch [:send-chat-msg])))
(defn prepare-message-input [message-input]
(when message-input
(.clear message-input)
(.focus message-input)))
(defn commands-button-animation-callback [message-input]
(fn [arg to-value]
(when (.-finished arg)
(dispatch [:set-animation ::message-input-buttons-scale-current to-value])
(when (<= to-value 0.1)
(dispatch [:finish-show-response])
(prepare-message-input @message-input)))))
(defn button-animation-logic [{:keys [to-value val callback]}]
(defn button-animation-logic [{:keys [command? val]}]
(fn [_]
(let [to-scale @to-value
minimum 0.1
scale (cond (< 1 to-scale) 1
(< to-scale minimum) minimum
:else to-scale)]
(anim/start (anim/timing val {:toValue scale
:duration response-input-hiding-duration})
(when callback
(fn [arg]
(callback arg to-scale)))))))
(let [to-scale (if @command? 0 1)]
(anim/start (anim/spring val {:toValue to-scale})))))
(defn list-container [min]
(fn [{:keys [command? width]}]
(let [n-width (if @command? min 56)
delay (if @command? 100 0)]
(anim/start (anim/timing width {:toValue n-width
:duration response-input-hiding-duration
:delay delay})))))
(defn commands-button []
(let [typing-command? (subscribe [:typing-command?])
message-input (subscribe [:get :message-input])
animation? (subscribe [:animations :commands-input-is-switching?])
to-scale (subscribe [:animations :message-input-buttons-scale])
cur-scale (subscribe [:animations ::message-input-buttons-scale-current])
buttons-scale (anim/create-value (or @cur-scale 1))
anim-callback (commands-button-animation-callback message-input)
context {:to-value to-scale
:val buttons-scale
:callback anim-callback}
on-update (button-animation-logic context)]
(let [command? (subscribe [:command?])
buttons-scale (anim/create-value (if @command? 1 0))
container-width (anim/create-value (if @command? 20 56))
context {:command? command?
:val buttons-scale
:width container-width}
on-update (fn [_]
((button-animation-logic context))
((list-container 20) context))]
(r/create-class
{:component-did-mount
on-update
@ -67,24 +51,30 @@
on-update
:reagent-render
(fn []
(let [typing-command? @typing-command?]
@to-scale
[touchable-highlight {:disabled @animation?
:on-press #(dispatch [:switch-command-suggestions])
:style st/message-input-button-touchable}
[animated-view {:style (st/message-input-button buttons-scale)}
(if typing-command?
[icon :close-gray st/close-icon]
[icon :list st/list-icon])]]))})))
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])
:disabled @command?}
[animated-view {:style (st/message-input-button-touchable
container-width)}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :list st/list-icon]]]])})))
(defn smile-animation-logic [{:keys [command? val width]}]
(fn [_]
(let [to-scale (if @command? 0 1)]
(when-not @command? (anim/set-value width 56))
(anim/start (anim/spring val {:toValue to-scale})
(fn [e]
(when (and @command? (.-finished e))
(anim/set-value width 0.1)))))))
(defn smile-button []
(let [animation? (subscribe [:animations :commands-input-is-switching?])
to-scale (subscribe [:animations :message-input-buttons-scale])
cur-scale (subscribe [:animations ::message-input-buttons-scale-current])
buttons-scale (anim/create-value (or @cur-scale 1))
context {:to-value to-scale
:val buttons-scale}
on-update (button-animation-logic context)]
(let [command? (subscribe [:command?])
buttons-scale (anim/create-value (if @command? 1 0))
container-width (anim/create-value (if @command? 0.1 56))
context {:command? command?
:val buttons-scale
:width container-width}
on-update (smile-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
@ -92,11 +82,11 @@
on-update
:reagent-render
(fn []
@to-scale
[touchable-highlight {:disabled @animation?
:on-press (fn []
[touchable-highlight {:on-press (fn []
;; TODO emoticons: not implemented
)
:style st/message-input-button-touchable}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]])})))
:disabled @command?}
[animated-view {:style (st/message-input-button-touchable
container-width)}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]]])})))

101
src/status_im/chat/views/response.cljs
View File

@ -14,7 +14,8 @@
[status-im.chat.views.response-suggestions :refer [response-suggestions-view]]
[status-im.chat.styles.response :as st]
[status-im.chat.styles.message-input :refer [input-height]]
[status-im.components.animation :as anim]))
[status-im.components.animation :as anim]
[status-im.components.react :as react]))
(defn drag-icon []
[view st/drag-container
@ -33,17 +34,46 @@
;; TODO stub data: request message info
"By ???, MMM 1st at HH:mm"]])
(defn create-response-pan-responder []
(drag/create-pan-responder
{:on-move (fn [e gesture]
(dispatch [:on-drag-response (.-dy gesture)]))
:on-release (fn [e gesture]
(dispatch [:fix-response-height]))}))
;; todo bad name. Ideas?
(defn enough-dy [gesture]
(> (Math/abs (.-dy gesture)) 10))
(defn request-info []
(let [pan-responder (create-response-pan-responder)
command (subscribe [:get-chat-command])]
(fn []
(defn on-move [response-height kb-height orientation]
(fn [_ gesture]
(when (enough-dy gesture)
(let [w (react/get-dimensions "window")
;; depending on orientation use height or width of screen
prop (if (= :portrait @orientation)
:height
:width)
;; subtract keyboard height to get "real height" of screen
;; then subtract gesture position to get suggestions height
;; todo maybe it is better to use margin-top instead height
;; it is not obvious
to-value (- (prop w) @kb-height (.-moveY gesture))]
(anim/start
(anim/spring response-height {:toValue to-value}))))))
(defn on-release [response-height]
(fn [_ gesture]
(when (enough-dy gesture)
(dispatch [:fix-response-height
(.-vy gesture)
;; todo access to "private" property
;; better to find another way...
(.-_value response-height)]))))
(defn pan-responder [response-height kb-height orientation]
(drag/create-pan-responder
{:on-move (on-move response-height kb-height orientation)
:on-release (on-release response-height)}))
(defn request-info [response-height]
(let [orientation (subscribe [:get :orientation])
kb-height (subscribe [:get :keyboard-height])
pan-responder (pan-responder response-height kb-height orientation)
command (subscribe [:get-chat-command])]
(fn [response-height]
[view (merge (drag/pan-handlers pan-responder)
{:style (st/request-info (:color @command))})
[drag-icon]
@ -54,46 +84,33 @@
[view st/cancel-container
[icon :close-white st/cancel-icon]]]]])))
(defn container-animation-logic [{:keys [animation? to-value current-value val]}]
(defn container-animation-logic [{:keys [to-value val]}]
(fn [_]
(if @animation?
(let [to-value @to-value]
(anim/start (anim/spring val {:toValue to-value})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-animation :response-height-current to-value])
(dispatch [:finish-animate-response-resize])
(when (= to-value input-height)
(dispatch [:finish-animate-cancel-command])
(dispatch [:cancel-command]))))))
(anim/set-value val @current-value))))
(let [to-value @to-value]
(anim/start (anim/spring val {:toValue to-value})))))
(defn container [& children]
(let [commands-input-is-switching? (subscribe [:animations :commands-input-is-switching?])
response-resize? (subscribe [:animations :response-resize?])
(defn container [response-height & children]
(let [;; todo to-response-height, cur-response-height must be specific
;; for each chat
to-response-height (subscribe [:animations :to-response-height])
cur-response-height (subscribe [:animations :response-height-current])
response-height (anim/create-value (or @cur-response-height 0))
context {:animation? (reaction (or @commands-input-is-switching? @response-resize?))
:to-value to-response-height
:current-value cur-response-height
:val response-height}
on-update (container-animation-logic context)]
changed (subscribe [:animations :response-height-changed])
context {:to-value to-response-height
:val response-height}
on-update (container-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [& children]
@to-response-height
(into [animated-view {:style (st/response-view (if (or @commands-input-is-switching? @response-resize?)
response-height
(or @cur-response-height 0)))}]
(fn [response-height & children]
@to-response-height @changed
(into [animated-view {:style (st/response-view response-height)}]
children))})))
(defn response-view []
[container
[request-info]
[response-suggestions-view]
[view st/input-placeholder]])
(let [response-height (anim/create-value 0)]
[container response-height
[request-info response-height]
[response-suggestions-view]
[view st/input-placeholder]]))

3
src/status_im/components/animation.cljs
View File

@ -11,6 +11,9 @@
(defn spring [anim-value config]
(.spring animated anim-value (clj->js config)))
(defn decay [anim-value config]
(.decay animated anim-value (clj->js config)))
(defn anim-sequence [animations]
(.sequence animated (clj->js animations)))

2
src/status_im/components/react.cljs
View File

@ -76,3 +76,5 @@
(r/as-element component))
(def dismiss-keyboard! (u/require "dismissKeyboard"))
(def device-event-emitter (.-DeviceEventEmitter react))
(def orientation (u/require "react-native-orientation"))

2
src/status_im/constants.cljs
View File

@ -13,5 +13,5 @@
(def max-chat-name-length 20)
(def response-input-hiding-duration 300)
(def response-input-hiding-duration 100)
(def response-suggesstion-resize-duration 100)

9
src/status_im/db.cljs
View File

@ -37,14 +37,9 @@
:whisper-identity ""
:phone-number ""}
:disable-group-creation false
:animations {;; mutable data
:to-response-height nil
:response-height-current nil
:message-input-offset 0
:message-input-buttons-scale 1
:animations {:to-response-height 0.1
:messages-offset 0
:commands-input-is-switching? false
:response-resize? false
;; todo clear this
:tabs-bar-value (anim/create-value 0)}})
(def protocol-initialized-path [:protocol-initialized])