replace ratom in quo wallet component (#19687)
This commit is contained in:
parent
549efdb77c
commit
570c62e30e
|
@ -8,7 +8,6 @@
|
||||||
[quo.theme :as quo.theme]
|
[quo.theme :as quo.theme]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.svg :as svg]
|
[react-native.svg :as svg]
|
||||||
[reagent.core :as reagent]
|
|
||||||
[schema.core :as schema]))
|
[schema.core :as schema]))
|
||||||
|
|
||||||
(defn- circle
|
(defn- circle
|
||||||
|
@ -36,38 +35,38 @@
|
||||||
:stroke-width "1"}]])
|
:stroke-width "1"}]])
|
||||||
|
|
||||||
(defn link-linear
|
(defn link-linear
|
||||||
[]
|
[{:keys [source theme]}]
|
||||||
(let [container-width (reagent/atom 100)]
|
(let [[container-width
|
||||||
(fn [{:keys [source theme]}]
|
set-container-width] (rn/use-state 100)
|
||||||
(let [stroke-color (colors/resolve-color source theme)
|
stroke-color (colors/resolve-color source theme)
|
||||||
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)]
|
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
|
||||||
|
on-layout (rn/use-callback #(set-container-width
|
||||||
|
(oget % :nativeEvent :layout :width)))]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style style/link-linear-container
|
{:style style/link-linear-container
|
||||||
:on-layout (fn [e]
|
:on-layout on-layout}
|
||||||
(reset! container-width
|
[line stroke-color container-width]
|
||||||
(oget e :nativeEvent :layout :width)))}
|
|
||||||
[line stroke-color @container-width]
|
|
||||||
[rn/view {:style style/left-circle-container}
|
[rn/view {:style style/left-circle-container}
|
||||||
[circle fill-color stroke-color]]
|
[circle fill-color stroke-color]]
|
||||||
[rn/view {:style style/right-circle-container}
|
[rn/view {:style style/right-circle-container}
|
||||||
[circle fill-color stroke-color]]]))))
|
[circle fill-color stroke-color]]]))
|
||||||
|
|
||||||
(defn link-1x
|
(defn link-1x
|
||||||
[]
|
[{:keys [source destination theme]}]
|
||||||
(let [container-width (reagent/atom 100)
|
(let [[container-width
|
||||||
stroke-color "url(#gradient)"]
|
set-container-width] (rn/use-state 100)
|
||||||
(fn [{:keys [source destination theme]}]
|
stroke-color "url(#gradient)"
|
||||||
(let [source-color (colors/resolve-color source theme)
|
source-color (colors/resolve-color source theme)
|
||||||
destination-color (colors/resolve-color destination theme)
|
destination-color (colors/resolve-color destination theme)
|
||||||
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
|
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
|
||||||
view-box (str "0 0 " @container-width " 58")
|
view-box (str "0 0 " container-width " 58")
|
||||||
side-lines-path (helpers/calculate-side-lines-path-1x @container-width)
|
side-lines-path (helpers/calculate-side-lines-path-1x container-width)
|
||||||
central-transform (helpers/calculate-transform @container-width)]
|
central-transform (helpers/calculate-transform container-width)
|
||||||
|
on-layout (rn/use-callback #(set-container-width
|
||||||
|
(oget % :nativeEvent :layout :width)))]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style style/link-1x-container
|
{:style style/link-1x-container
|
||||||
:on-layout (fn [e]
|
:on-layout on-layout}
|
||||||
(reset! container-width
|
|
||||||
(oget e :nativeEvent :layout :width)))}
|
|
||||||
[svg/svg
|
[svg/svg
|
||||||
{:xmlns "http://www.w3.org/2000/svg"
|
{:xmlns "http://www.w3.org/2000/svg"
|
||||||
:height "100%"
|
:height "100%"
|
||||||
|
@ -98,23 +97,24 @@
|
||||||
[rn/view {:style style/bottom-left-circle-container}
|
[rn/view {:style style/bottom-left-circle-container}
|
||||||
[circle fill-color source-color]]
|
[circle fill-color source-color]]
|
||||||
[rn/view {:style style/top-right-circle-container}
|
[rn/view {:style style/top-right-circle-container}
|
||||||
[circle fill-color destination-color]]]))))
|
[circle fill-color destination-color]]]))
|
||||||
|
|
||||||
(defn link-2x
|
(defn link-2x
|
||||||
[]
|
[{:keys [source destination theme]}]
|
||||||
(let [container-width (reagent/atom 100)
|
(let [[container-width
|
||||||
stroke-color "url(#gradient)"]
|
set-container-width] (rn/use-state 100)
|
||||||
(fn [{:keys [source destination theme]}]
|
stroke-color "url(#gradient)"
|
||||||
(let [source-color (colors/resolve-color source theme)
|
source-color (colors/resolve-color source theme)
|
||||||
destination-color (colors/resolve-color destination theme)
|
destination-color (colors/resolve-color destination theme)
|
||||||
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
|
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
|
||||||
view-box (str "0 0 " @container-width " 114")
|
view-box (str "0 0 " container-width " 114")
|
||||||
side-lines-path (helpers/calculate-side-lines-path-2x @container-width)
|
side-lines-path (helpers/calculate-side-lines-path-2x container-width)
|
||||||
central-transform (helpers/calculate-transform @container-width)]
|
central-transform (helpers/calculate-transform container-width)
|
||||||
|
on-layout (rn/use-callback #(set-container-width
|
||||||
|
(oget % :nativeEvent :layout :width)))]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style style/link-2x-container
|
{:style style/link-2x-container
|
||||||
:on-layout #(reset! container-width
|
:on-layout on-layout}
|
||||||
(oget % :nativeEvent :layout :width))}
|
|
||||||
[svg/svg
|
[svg/svg
|
||||||
{:xmlns "http://www.w3.org/2000/svg"
|
{:xmlns "http://www.w3.org/2000/svg"
|
||||||
:height "100%"
|
:height "100%"
|
||||||
|
@ -145,7 +145,7 @@
|
||||||
[rn/view {:style style/bottom-left-circle-container}
|
[rn/view {:style style/bottom-left-circle-container}
|
||||||
[circle fill-color source-color]]
|
[circle fill-color source-color]]
|
||||||
[rn/view {:style style/top-right-circle-container}
|
[rn/view {:style style/top-right-circle-container}
|
||||||
[circle fill-color destination-color]]]))))
|
[circle fill-color destination-color]]]))
|
||||||
|
|
||||||
(defn- view-internal
|
(defn- view-internal
|
||||||
[{:keys [shape container-style] :as props}]
|
[{:keys [shape container-style] :as props}]
|
||||||
|
|
Loading…
Reference in New Issue