status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-11 11:34:45 +00:00
Code Issues Projects Releases Wiki Activity

Support remote SVG images [#4709]

Browse Source 
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-06-19 16:59:12 +03:00
parent 8307e80182
commit bbdb90fdf6
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
5 changed files with 73 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/status_im/ui/components/svgimage.cljs Normal file
View File

@ -0,0 +1,52 @@
(ns status-im.ui.components.svgimage
(:require [status-im.ui.components.react :as react]
[reagent.core :as reagent]
[status-im.utils.platform :as platform]))
(defn html [uri width height]
(str
"<!DOCTYPE html>\n
<html>
<head>
<style type=\"text/css\">
img {
display: block;
max-width:" width "px;
max-height:" height "px;
width: auto;
height: auto;
margin: auto;
}
div {
width:" width "px;
height:" height "px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
body {margin: 0;}
</style>
</head>
<body>
<div>
<img src=" uri " align=\"middle\" />
</div>
</body>
</html>"))
(defn svgimage [{:keys [style source]}]
(let [width (reagent/atom nil)
{:keys [uri k] :or {k 1}} source]
(when (re-find #"^(https:)([/|.|\w|\s|-])*\.(?:jpg|svg|png)$" uri)
(fn []
[react/view {:style style
:on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))}
[react/web-view
{:java-script-enabled false
:third-party-cookies-enabled false
:scroll-enabled false
:bounces false
:scales-page-to-fit platform/android?
:style {:width @width :height (* @width k) :background-color :transparent}
:source {:html (html uri @width (* @width k))}}]]))))

9
src/status_im/ui/screens/wallet/collectibles/cryptokitties.cljs
View File

@ -7,7 +7,8 @@
[status-im.ui.screens.wallet.collectibles.views :as collectibles] [status-im.ui.screens.wallet.collectibles.views :as collectibles]
[status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.utils.handlers :as handlers] [status-im.utils.handlers :as handlers]
[status-im.utils.http :as http])) [status-im.utils.http :as http]
[status-im.ui.components.svgimage :as svgimage]))
(def ck :CK) (def ck :CK)
@ -46,9 +47,9 @@
(defmethod collectibles/render-collectible ck [_ {:keys [id name bio image_url]}] (defmethod collectibles/render-collectible ck [_ {:keys [id name bio image_url]}]
[react/view {:style styles/details} [react/view {:style styles/details}
[react/view {:style styles/details-text} [react/view {:style styles/details-text}
;; TODO reenable image once SVG is supported [svgimage/svgimage {:style styles/details-image
#_[react/image {:style {:width 80 :height 80 :margin 10 :background-color "red"} :source {:uri image_url}}] :source {:uri image_url}}]
[react/view {} [react/view {:flex 1}
[react/text {:style styles/details-name} [react/text {:style styles/details-name}
(or name (i18n/label :t/cryptokitty-name {:id id}))] (or name (i18n/label :t/cryptokitty-name {:id id}))]
[react/text {:number-of-lines 3 [react/text {:number-of-lines 3

12
src/status_im/ui/screens/wallet/collectibles/cryptostrikers.cljs
View File

@ -6,12 +6,13 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.screens.wallet.collectibles.views :as collectibles] [status-im.ui.screens.wallet.collectibles.views :as collectibles]
[status-im.utils.http :as http])) [status-im.utils.http :as http]
[status-im.ui.components.svgimage :as svgimage]))
(def strikers :STRK) (def strikers :STRK)
(defmethod collectibles/load-collectible-fx strikers [_ id] (defmethod collectibles/load-collectible-fx strikers [_ id]
{:http-get {:url (str "https://us-central1-cryptostrikers-prod.cloudfunctions.net/cards/" id) {:http-get {:url (str "https://us-central1-cryptostrikers-prod.cloudfunctions.net/cards/" id)
:success-event-creator (fn [o] :success-event-creator (fn [o]
[:load-collectible-success strikers {id (http/parse-payload o)}]) [:load-collectible-success strikers {id (http/parse-payload o)}])
:failure-event-creator (fn [o] :failure-event-creator (fn [o]
@ -20,9 +21,10 @@
(defmethod collectibles/render-collectible strikers [_ {:keys [external_url description name image]}] (defmethod collectibles/render-collectible strikers [_ {:keys [external_url description name image]}]
[react/view {:style styles/details} [react/view {:style styles/details}
[react/view {:style styles/details-text} [react/view {:style styles/details-text}
[react/image {:style styles/details-image [svgimage/svgimage {:style styles/details-image
:source {:uri image}}] :source {:uri image
[react/view {:justify-content :center} :k 1.4}}]
[react/view {:flex 1 :justify-content :center}
[react/text {:style styles/details-name} [react/text {:style styles/details-name}
name] name]
[react/text [react/text

13
src/status_im/ui/screens/wallet/collectibles/etheremon.cljs
View File

@ -6,12 +6,13 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.screens.wallet.collectibles.views :as collectibles] [status-im.ui.screens.wallet.collectibles.views :as collectibles]
[status-im.utils.http :as http])) [status-im.utils.http :as http]
[status-im.ui.components.svgimage :as svgimage]))
(def emona :EMONA) (def emona :EMONA)
(defmethod collectibles/load-collectible-fx emona [_ id] (defmethod collectibles/load-collectible-fx emona [_ id]
{:http-get {:url (str "https://www.etheremon.com/api/monster/get_data?monster_ids=" id) {:http-get {:url (str "https://www.etheremon.com/api/monster/get_data?monster_ids=" id)
:success-event-creator (fn [o] :success-event-creator (fn [o]
[:load-collectible-success emona (:data (http/parse-payload o))]) [:load-collectible-success emona (:data (http/parse-payload o))])
:failure-event-creator (fn [o] :failure-event-creator (fn [o]
@ -22,9 +23,11 @@
(defmethod collectibles/render-collectible emona [_ {:keys [monster_id user_defined_name image]}] (defmethod collectibles/render-collectible emona [_ {:keys [monster_id user_defined_name image]}]
[react/view {:style styles/details} [react/view {:style styles/details}
[react/view {:style styles/details-text} [react/view {:style styles/details-text}
[react/image {:style styles/details-image [react/view {:flex 1}
:source {:uri image}}] [svgimage/svgimage {:style styles/details-image
[react/view {:justify-content :center} :source {:uri image
:k 2}}]]
[react/view {:flex 1 :justify-content :center}
[react/text {:style styles/details-name} [react/text {:style styles/details-name}
user_defined_name]]] user_defined_name]]]
[action-button/action-button {:label (i18n/label :t/view-etheremon) [action-button/action-button {:label (i18n/label :t/view-etheremon)

3
src/status_im/ui/screens/wallet/collectibles/styles.cljs
View File

@ -25,6 +25,5 @@
:margin-bottom 10}) :margin-bottom 10})
(def details-image (def details-image
{:width 80 {:flex 1
:height 80
:margin 10}) :margin 10})