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

Support remote SVG images [#4709] 

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.styles :as styles]
[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)
@ -46,9 +47,9 @@
(defmethod collectibles/render-collectible ck [_ {:keys [id name bio image_url]}]
[react/view {:style styles/details}
[react/view {:style styles/details-text}
;; TODO reenable image once SVG is supported
#_[react/image {:style {:width 80 :height 80 :margin 10 :background-color "red"} :source {:uri image_url}}]
[react/view {}
[svgimage/svgimage {:style styles/details-image
:source {:uri image_url}}]
[react/view {:flex 1}
[react/text {:style styles/details-name}
(or name (i18n/label :t/cryptokitty-name {:id id}))]
[react/text {:number-of-lines 3

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

@ -6,7 +6,8 @@
[status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[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)
@ -20,9 +21,10 @@
(defmethod collectibles/render-collectible strikers [_ {:keys [external_url description name image]}]
[react/view {:style styles/details}
[react/view {:style styles/details-text}
[react/image {:style styles/details-image
:source {:uri image}}]
[react/view {:justify-content :center}
[svgimage/svgimage {:style styles/details-image
:source {:uri image
:k 1.4}}]
[react/view {:flex 1 :justify-content :center}
[react/text {:style styles/details-name}
name]
[react/text

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

@ -6,7 +6,8 @@
[status-im.ui.components.react :as react]
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[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)
@ -22,9 +23,11 @@
(defmethod collectibles/render-collectible emona [_ {:keys [monster_id user_defined_name image]}]
[react/view {:style styles/details}
[react/view {:style styles/details-text}
[react/image {:style styles/details-image
:source {:uri image}}]
[react/view {:justify-content :center}
[react/view {:flex 1}
[svgimage/svgimage {:style styles/details-image
:source {:uri image
:k 2}}]]
[react/view {:flex 1 :justify-content :center}
[react/text {:style styles/details-name}
user_defined_name]]]
[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})
(def details-image
{:width 80
:height 80
{:flex 1
:margin 10})