From a20f3ec546f08fc59fe804dc65a3e3a2c5657ca9 Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Tue, 20 Nov 2018 17:59:22 +0100 Subject: [PATCH] [Fixes #6800] Introduce picker componenet (and expose activity-loading, list) Signed-off-by: Julien Eluard --- .../src/status_im/ui/components/react.cljs | 15 +++++++++++- deps.edn | 2 +- project.clj | 2 +- src/status_im/extensions/core.cljs | 23 ++++++++++++++++--- src/status_im/extensions/registry.cljs | 6 ++--- 5 files changed, 39 insertions(+), 9 deletions(-) diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index eb190ecea2..0a0bde8ab8 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -12,7 +12,7 @@ (defn get-react-property [name] (if js-dependencies/react-native - (object/get js-dependencies/react-native name) + (or (object/get js-dependencies/react-native name) {}) #js {})) (defn adapt-class [class] @@ -48,6 +48,8 @@ (def text-class (get-class "Text")) (def text-input-class (get-class "TextInput")) (def image-class (get-class "Image")) +(def picker-class (get-class "Picker")) +(def picker-item-class (adapt-class (.-Item (get-react-property "Picker")))) (defn valid-source? [source] (or (not (map? source)) @@ -142,6 +144,17 @@ (defn list-item [component] (reagent/as-element component)) +(defn value->picker-item [{:keys [value label]}] + [picker-item-class {:value (or value "") :label (or label value "")}]) + +(defn picker [{:keys [style on-change selected enabled data]}] + (into + [picker-class (merge (when style {:style style}) + (when enabled {:enabled enabled}) + (when on-change {:on-value-change on-change}) + (when selected {:selected-value selected}))] + (map value->picker-item data))) + ;; Image picker (def image-picker-class js-dependencies/image-crop-picker) diff --git a/deps.edn b/deps.edn index e5e3b754c1..cb46030473 100644 --- a/deps.edn +++ b/deps.edn @@ -11,7 +11,7 @@ com.taoensso/timbre {:mvn/version "4.10.0"} hickory {:mvn/version "0.7.1"} com.cognitect/transit-cljs {:mvn/version "0.8.248"} - status-im/pluto {:mvn/version "iteration-4-2"} + status-im/pluto {:mvn/version "iteration-4-3"} mvxcvi/alphabase {:mvn/version "1.0.0"} rasom/cljs-react-navigation {:mvn/version "0.1.4"}} diff --git a/project.clj b/project.clj index 43ec794702..b22a8ad2be 100644 --- a/project.clj +++ b/project.clj @@ -11,7 +11,7 @@ [com.taoensso/timbre "4.10.0"] [hickory "0.7.1"] [com.cognitect/transit-cljs "0.8.248"] - [status-im/pluto "iteration-4-2"] + [status-im/pluto "iteration-4-3"] [mvxcvi/alphabase "1.0.0"] [rasom/cljs-react-navigation "0.1.4"]] :plugins [[lein-cljsbuild "1.1.7"] diff --git a/src/status_im/extensions/core.cljs b/src/status_im/extensions/core.cljs index 6a225f32ba..cb4529fd9d 100644 --- a/src/status_im/extensions/core.cljs +++ b/src/status_im/extensions/core.cljs @@ -201,8 +201,8 @@ :on-press #(re-frame/dispatch [:browser.ui/message-link-pressed uri])} uri]) -(defn list [{:keys [data item-view]}] - [list/flat-list {:data data :key-fn (fn [_ i] (str i)) :render-fn item-view}]) +(defn list [{:keys [key data item-view]}] + [list/flat-list {:data data :key-fn (or key (fn [_ i] (str i))) :render-fn item-view}]) (defn checkbox [{:keys [on-change checked]}] [react/view {:style {:background-color colors/white}} @@ -210,6 +210,21 @@ :style {:padding 0} :on-value-change #(re-frame/dispatch (on-change {:value %}))}]]) +(defn activity-indicator-size [k] + (condp = k + :small "small" + :large "large" + nil)) + +(defn activity-indicator [{:keys [animating hides-when-stopped color size]}] + [react/activity-indicator (merge (when animating {:animating animating}) + (when hides-when-stopped {:hidesWhenStopped hides-when-stopped}) + (when color {:color color}) + (when-let [size' (activity-indicator-size size)] {:size size'}))]) + +(defn picker [{:keys [style on-change selected enabled data]}] + [react/picker {:style style :on-change #(re-frame/dispatch (on-change {:value %})) :selected selected :enabled enabled :data data}]) + (defn text [o & children] (if (map? o) [react/text o children] @@ -231,8 +246,10 @@ 'input {:value input :properties {:on-change :event :placeholder :string}} 'button {:value button :properties {:disabled :boolean :on-click :event}} 'link {:value link :properties {:uri :string}} - ;'list {:value list :properties {:data :vector :item-view :view}} + 'list {:value list :properties {:data :vector :item-view :view :key? :keyword}} 'checkbox {:value checkbox :properties {:on-change :event :checked :boolean}} + 'activity-indicator {:value activity-indicator :properties {:animating :boolean :color :string :size :keyword :hides-when-stopped :boolean}} + 'picker {:value picker :properties {:on-change :event :selected :string :enabled :boolean :data :vector}} 'nft-token-viewer {:value transactions/nft-token :properties {:token :string}} 'transaction-status {:value transactions/transaction-status :properties {:outgoing :string :tx-hash :string}}} :queries {'identity {:value :extensions/identity :arguments {:value :map}} diff --git a/src/status_im/extensions/registry.cljs b/src/status_im/extensions/registry.cljs index e8e920c2f5..510a12b8c5 100644 --- a/src/status_im/extensions/registry.cljs +++ b/src/status_im/extensions/registry.cljs @@ -48,7 +48,7 @@ (update-hooks hook-fn extension-key)))) (fx/defn install - [{:keys [db] :as cofx} extension-data] + [{:keys [db] :as cofx} {:keys [hooks] :as extension-data}] (let [{:extensions/keys [manage] :account/keys [account]} db {:keys [url]} manage @@ -61,8 +61,8 @@ {:utils/show-popup {:title (i18n/label :t/success) :content (i18n/label :t/extension-installed) :on-dismiss #(re-frame/dispatch [:navigate-to-clean :my-profile])}} - (accounts.update/account-update {:extensions new-extensions} {}) - (add-to-registry (:value url) extension-data true)))) + (when hooks (accounts.update/account-update {:extensions new-extensions} {})) + (when hooks (add-to-registry (:value url) extension-data true))))) (fx/defn uninstall [{:keys [db] :as cofx} extension-key]