Enable links within messages (#638)

This commit is contained in:
alwx 2017-01-19 13:25:10 +03:00 committed by Roman Volosovskyi
parent 4a73facf4e
commit e1a1ab5c37
4 changed files with 43 additions and 21 deletions

View File

@ -35,7 +35,8 @@
"chance",
"react-native-swiper",
"react-native-share",
"react-native-emoji-picker"
"react-native-emoji-picker",
"react-native-autolink"
],
"imageDirs": [
"images"

View File

@ -44,6 +44,7 @@
"react-native": "^0.38.0",
"react-native-action-button": "2.0.13",
"react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix",
"react-native-autolink": "^0.10.0",
"react-native-camera": "git+https://github.com/alwx/react-native-camera.git",
"react-native-circle-checkbox": "github:paramoshkinandrew/ReactNativeCircleCheckbox",
"react-native-contacts": "^0.2.4",

View File

@ -9,7 +9,9 @@
image
icon
animated-view
touchable-without-feedback
touchable-highlight
autolink
get-dimensions]]
[status-im.components.animation :as anim]
[status-im.chat.constants :as chat-consts]
@ -198,10 +200,15 @@
(defn text-message
[{:keys [content] :as message}]
[message-view message
[text {:style (st/text-message message)
:font :default
:on-long-press #(share content (label :t/message))}
(parse-text content)]])
(let [parsed-text (parse-text content)
simple-text? (= (count parsed-text) 2)]
(if simple-text?
[autolink {:style (st/text-message message)
:font :default
:text (apply str parsed-text)}]
[text {:style (st/text-message message)
:font :default}
(parse-text content)]))])
(defmethod message-content text-content-type
[wrapper message]
@ -377,12 +384,14 @@
:from from
:message-id message-id}])))
:reagent-render
(fn [{:keys [outgoing group-chat] :as message}]
(fn [{:keys [outgoing group-chat content-type content] :as message}]
[message-container message
[view
(let [incoming-group (and group-chat (not outgoing))]
[message-content
(if incoming-group
incoming-group-message-body
message-body)
(merge message {:incoming-group incoming-group})])]])})))
[touchable-highlight {:on-long-press (when (= content-type text-content-type)
#(share content (label :t/message)))}
[view
(let [incoming-group (and group-chat (not outgoing))]
[message-content
(if incoming-group
incoming-group-message-body
message-body)
(merge message {:incoming-group incoming-group})])]]])})))

View File

@ -52,20 +52,23 @@
;; Accessor methods for React Components
(defn add-font-style [style-key {:keys [font] :as opts :or {font :default}}]
(let [font (get-in platform-specific [:fonts (keyword font)])
style (get opts style-key)]
(-> opts
(dissoc :font)
(assoc style-key (merge style font)))))
(defn text
([t]
(r/as-element [text-class t]))
([{:keys [style font uppercase?] :as opts
([{:keys [uppercase?] :as opts
:or {font :default}} t & ts]
(r/as-element
(let [font (get-in platform-specific [:fonts (keyword font)])
ts (cond->> (conj ts t)
uppercase? (map clojure.string/upper-case))]
(let [ts (cond->> (conj ts t)
uppercase? (map clojure.string/upper-case))]
(vec (concat
[text-class
(-> opts
(dissoc :font)
(assoc :style (merge style font)))]
[text-class (add-font-style :style opts)]
ts))))))
(defn text-input [{:keys [font style] :as opts
@ -133,3 +136,11 @@
(def emoji-picker
(let [emoji-picker (.-default emoji-picker-class)]
(r/adapt-react-class emoji-picker)))
;; Autolink
(def autolink-class (r/adapt-react-class (.-default (js/require "react-native-autolink"))))
(defn autolink [opts]
(r/as-element
[autolink-class (add-font-style :style opts)]))