diff --git a/.re-natal b/.re-natal index d64f30c702..54c02eccf9 100644 --- a/.re-natal +++ b/.re-natal @@ -35,7 +35,8 @@ "chance", "react-native-swiper", "react-native-share", - "react-native-emoji-picker" + "react-native-emoji-picker", + "react-native-autolink" ], "imageDirs": [ "images" diff --git a/package.json b/package.json index fe0035cde6..8ff2e73d02 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/status_im/chat/views/message.cljs b/src/status_im/chat/views/message.cljs index 806e434a15..5a4b33b63c 100644 --- a/src/status_im/chat/views/message.cljs +++ b/src/status_im/chat/views/message.cljs @@ -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})])]]])}))) diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index 841c86c13c..830bbb1101 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -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)])) \ No newline at end of file