From ea8b8d142bf8ea28db1051c89cc133dcf70104d6 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Mon, 16 Oct 2023 11:52:58 +0300 Subject: [PATCH] [#17288] refactor: migrate previews to new api (#17624) --- .../settings/settings_list/style.cljs | 56 --------------- src/status_im2/contexts/quo_preview/main.cljs | 18 ++--- .../quo_preview/settings/accounts.cljs | 36 +++------- .../quo_preview/settings/category.cljs | 57 ++++----------- .../quo_preview/settings/data_item.cljs | 59 +++++----------- .../quo_preview/settings/privacy_option.cljs | 10 +-- .../quo_preview/settings/reorder_item.cljs | 23 ++----- .../quo_preview/settings/section_label.cljs | 2 +- .../quo_preview/settings/settings_item.cljs | 6 +- .../quo_preview/settings/settings_list.cljs | 69 ------------------- .../contexts/quo_preview/share/qr_code.cljs | 2 +- .../quo_preview/share/share_qr_code.cljs | 40 ++++------- 12 files changed, 79 insertions(+), 299 deletions(-) delete mode 100644 src/quo2/components/settings/settings_list/style.cljs delete mode 100644 src/status_im2/contexts/quo_preview/settings/settings_list.cljs diff --git a/src/quo2/components/settings/settings_list/style.cljs b/src/quo2/components/settings/settings_list/style.cljs deleted file mode 100644 index 4b090ea885..0000000000 --- a/src/quo2/components/settings/settings_list/style.cljs +++ /dev/null @@ -1,56 +0,0 @@ -(ns quo2.components.settings.settings-list.style - (:require [quo2.foundations.colors :as colors])) - -(def title-container - {:flex 1}) - -(defn title - [override-theme] - {:color (colors/theme-colors - colors/neutral-100 - colors/white - override-theme)}) - -(def icon - {:margin-right 12 - :align-self :flex-start}) - -(def item-container - {:justify-content :space-between - :align-items :center - :padding-horizontal 12 - :padding-vertical 13}) - -(def inner-container - {:flex-direction :row - :align-items :center}) - -(defn dot - [override-theme] - {:width 15 - :height 15 - :border-radius 8 - :margin-right 14.5 - :background-color (colors/theme-colors (colors/custom-color :blue 50) - (colors/custom-color :blue 60) - override-theme)}) - -(defn community-icon - [index override-theme] - {:width 24 - :height 24 - :border-width 1 - :border-color (colors/theme-colors colors/white colors/black override-theme) - :border-radius 12 - :position :absolute - :right (* 20 index)}) - -(def communities-container - {:flex 1 - :justify-content :center - :align-content :center - :margin-right 12}) - -(def tag-container - {:margin-top 8 - :margin-left -1}) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 3a940a06fa..5e6b9e8bc7 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -385,23 +385,23 @@ {:name :react :component react/preview-react}] :settings [{:name :privacy-option - :component privacy-option/preview-options} + :component privacy-option/view} {:name :accounts - :component accounts/preview-accounts} + :component accounts/view} {:name :settings-item - :component settings-item/preview} + :component settings-item/view} {:name :reorder-item - :component reorder-item/preview-reorder-item} + :component reorder-item/view} {:name :category - :component category/preview} + :component category/view} {:name :data-item - :component data-item/preview-data-item} + :component data-item/view} {:name :section-label - :component section-label/preview}] + :component section-label/view}] :share [{:name :qr-code - :component qr-code/preview} + :component qr-code/view} {:name :share-qr-code - :component share-qr-code/preview-share-qr-code}] + :component share-qr-code/view}] :switchers [{:name :group-messaging-card :component group-messaging-card/view} {:name :switcher-cards diff --git a/src/status_im2/contexts/quo_preview/settings/accounts.cljs b/src/status_im2/contexts/quo_preview/settings/accounts.cljs index 77510c26a9..4fe14beaf2 100644 --- a/src/status_im2/contexts/quo_preview/settings/accounts.cljs +++ b/src/status_im2/contexts/quo_preview/settings/accounts.cljs @@ -1,26 +1,14 @@ (ns status-im2.contexts.quo-preview.settings.accounts - (:require [clojure.string :as string] - [quo2.components.settings.accounts.view :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Custom color" - :key :customization-color - :type :select - :options (map (fn [[k _]] - {:key k :value (string/capitalize (name k))}) - colors/customization)} - {:label "Account name" - :key :account-name - :type :text} - {:label "Account address" - :key :account-address - :type :text}]) + [(preview/customization-color-option) + {:key :account-name :type :text} + {:key :account-address :type :text}]) -(defn preview-accounts +(defn view [] (let [state (reagent/atom {:customization-color :blue :account-name "Booze for Dubai" @@ -30,12 +18,8 @@ (js/alert "Menu button pressed"))})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:padding-vertical 100 - :align-items :center - :background-color (colors/theme-colors - colors/neutral-30 - colors/neutral-95)} - [quo/account @state]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 100 + :align-items :center}} + [quo/account @state]]))) diff --git a/src/status_im2/contexts/quo_preview/settings/category.cljs b/src/status_im2/contexts/quo_preview/settings/category.cljs index 2fe9f02106..1a0bc71674 100644 --- a/src/status_im2/contexts/quo_preview/settings/category.cljs +++ b/src/status_im2/contexts/quo_preview/settings/category.cljs @@ -6,60 +6,33 @@ [status-im2.contexts.quo-preview.preview :as preview])) (defn create-item-array - [n {:keys [right-icon? image? subtitle? list-type]}] + [n] (vec (for [i (range n)] {:title (str "Item " i) - :subtitle (when subtitle? "subtitle") + :subtitle "subtitle" :action :arrow - :right-icon (when right-icon? :i/globe) - :image (if (= list-type :settings) :icon (when image? (resources/get-mock-image :diamond))) + :right-icon :i/globe + :image (resources/get-mock-image :diamond) :image-props :i/browser - :image-size (if image? 32 0)}))) + :image-size 32}))) -(def reorder-descriptor - [{:label "Right icon:" - :key :right-icon? - :type :boolean} - {:label "Image:" - :key :image? - :type :boolean} - {:label "Subtitle:" - :key :subtitle? - :type :boolean} - {:label "Blur:" - :key :blur? - :type :boolean} - {:label "List type:" - :key :list-type +(def descriptor + [{:key :blur? :type :boolean} + {:key :list-type :type :select :options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}]) -(def settings-descriptor - [{:label "Blur:" - :key :blur? - :type :boolean} - {:label "List type:" - :key :list-type - :type :select - :options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}]) - -(defn preview +(defn view [] - (let [state (reagent/atom {:label "Label" - :size "5" - :blur? false - :right-icon? true - :image? true - :subtitle? true - :list-type :settings})] + (let [state (reagent/atom {:label "Label" + :blur? false + :list-type :settings})] (fn [] - (let [data (reagent/atom (create-item-array (max (js/parseInt (:size @state)) 1) @state))] + (let [data (create-item-array 5)] [preview/preview-container {:state state - :descriptor (if (= (:list-type @state) :settings) - settings-descriptor - reorder-descriptor) + :descriptor descriptor :blur? (:blur? @state) :show-blur-background? true :blur-dark-only? true @@ -67,5 +40,5 @@ [quo/category {:list-type (:list-type @state) :label (:label @state) - :data @data + :data data :blur? (:blur? @state)}]])))) diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs index db961a0c4b..4e186df419 100644 --- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/data_item.cljs @@ -5,56 +5,35 @@ [status-im2.common.resources :as resources])) (def descriptor - [{:label "Blur:" - :key :blur? - :type :boolean} - {:label "Card:" - :key :card? - :type :boolean} - {:label "Icon Right:" - :key :icon-right? - :type :boolean} - {:label "Label:" - :type :select + [{:key :blur? :type :boolean} + {:key :card? :type :boolean} + {:key :icon-right? :type :boolean} + {:type :select :key :label - :options [{:key :none - :value "None"} - {:key :graph - :value "Graph"} - {:key :preview - :value "Preview"}]} - {:label "Description:" - :type :select + :options [{:key :none} + {:key :graph} + {:key :preview}]} + {:type :select :key :description - :options [{:key :default - :value "Default"} - {:key :icon - :value "Icon"} - {:key :network - :value "Network"} - {:key :account - :value "Account"}]} - {:label "Status:" - :type :select + :options [{:key :default} + {:key :icon} + {:key :network} + {:key :account}]} + {:type :select :key :status - :options [{:key :default - :value "Default"} - {:key :loading - :value "Loading"}]} - {:label "Size:" - :type :select + :options [{:key :default} + {:key :loading}]} + {:type :select :key :size - :options [{:key :default - :value "Default"} - {:key :small - :value "Small"}]}]) + :options [{:key :default} + {:key :small}]}]) (def communities-list [{:source (resources/get-mock-image :coinbase)} {:source (resources/get-mock-image :decentraland)} {:source (resources/get-mock-image :rarible)}]) -(defn preview-data-item +(defn view [] (let [state (reagent/atom {:on-press #(js/alert (str "pressed")) :blur? false diff --git a/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs index 032865c0fa..bd08e7958b 100644 --- a/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs +++ b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs @@ -5,12 +5,8 @@ [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Header:" - :key :header - :type :text} - {:label "Footer:" - :key :footer - :type :text} + [{:key :header :type :text} + {:key :footer :type :text} {:label "Line 1:" :key :li1 :type :text} @@ -21,7 +17,7 @@ :key :li3 :type :text}]) -(defn preview-options +(defn view [] (let [state (reagent/atom {:selected :contacts :header "header" diff --git a/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs b/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs index 3d5fbc5dee..503f48f18f 100644 --- a/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs @@ -1,10 +1,9 @@ (ns status-im2.contexts.quo-preview.settings.reorder-item (:require [quo2.core :as quo] - [react-native.core :as rn] [status-im2.common.resources :as resources] [quo2.foundations.resources :as quo2.resources] - [quo2.foundations.colors :as colors] + [status-im2.contexts.quo-preview.preview :as preview] [quo2.components.settings.reorder-item.types :as types])) (def mock-data @@ -77,19 +76,9 @@ :on-change (fn [tab-id] (println tab-id)) :default-active 1}}]) - -(defn container +(defn view [] - {:padding-horizontal 38 - :padding-vertical 20 - :background-color (colors/theme-colors - colors/neutral-10 - colors/neutral-100) - :flex 1}) - -(defn preview-reorder-item - [] - [rn/scroll-view - {:style (container)} - (for [item mock-data] - [quo/reorder-item (item :data) (item :type)])]) + (fn [] + [preview/preview-container {} + (for [item mock-data] + [quo/reorder-item (item :data) (item :type)])])) diff --git a/src/status_im2/contexts/quo_preview/settings/section_label.cljs b/src/status_im2/contexts/quo_preview/settings/section_label.cljs index f16b9fee94..4849b3f006 100644 --- a/src/status_im2/contexts/quo_preview/settings/section_label.cljs +++ b/src/status_im2/contexts/quo_preview/settings/section_label.cljs @@ -12,7 +12,7 @@ {:key :blur? :type :boolean}]) -(defn preview +(defn view [] (let [state (reagent/atom {:section "Section label" :description "" diff --git a/src/status_im2/contexts/quo_preview/settings/settings_item.cljs b/src/status_im2/contexts/quo_preview/settings/settings_item.cljs index ce65bdb1e0..ccac4ac907 100644 --- a/src/status_im2/contexts/quo_preview/settings/settings_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/settings_item.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.quo-preview.settings.settings-item (:require [quo2.core :as quo] - [react-native.core :as rn] [status-im2.common.resources :as resources] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -100,7 +99,7 @@ :context "Context"} nil)})) -(defn preview +(defn view [] (let [state (reagent/atom {:title "Account" :accessibility-label :settings-item @@ -115,5 +114,4 @@ :blur? (:blur? @state) :show-blur-background? true :blur-dark-only? true} - [rn/view {:style {:flex 1}} - [quo/settings-item (get-props @state)]]]))) + [quo/settings-item (get-props @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/settings/settings_list.cljs b/src/status_im2/contexts/quo_preview/settings/settings_list.cljs deleted file mode 100644 index c058c44a35..0000000000 --- a/src/status_im2/contexts/quo_preview/settings/settings_list.cljs +++ /dev/null @@ -1,69 +0,0 @@ -(ns status-im2.contexts.quo-preview.settings.settings-list - (:require [quo2.components.settings.settings-list.view :as quo] - [react-native.core :as rn] - [status-im2.common.resources :as resources] - [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview])) - -(def descriptor - [{:label "Account name:" - :key :title - :type :text} - {:label "Chevron:" - :key :chevron? - :type :boolean} - {:label "Badge:" - :key :badge? - :type :boolean} - {:label "Toggle:" - :key :toggle-props - :type :boolean} - {:label "Communities" - :key :communities-props - :type :boolean} - {:label "Button" - :key :button-props - :type :boolean} - {:label "Status Tag" - :key :status-tag-props - :type :boolean}]) - -(defn get-props - [data] - (when (:toggle-props data) (js/console.warn data)) - (merge - data - {:toggle-props (when (:toggle-props data) - {:checked? true - :on-change (fn [new-value] (js/alert new-value))}) - :button-props (when (:button-props data) - {:title "Button" :on-press (fn [] (js/alert "Button pressed"))}) - :communities-props - (when (:communities-props data) - {:data - [{:source (resources/mock-images :rarible)} - {:source (resources/mock-images :decentraland)} - {:source (resources/mock-images :coinbase)}]}) - :status-tag-props (when (:status-tag-props data) - {:size :small - :status {:type :positive} - :no-icon? true - :label "example" - :override-theme :dark})})) - -(defn preview-settings-list - [] - (let [state (reagent/atom {:title "Account" - :accessibility-label :settings-list-item - :left-icon :browser-context - :chevron? true - :on-press (fn [] (js/alert "Settings list item pressed"))})] - (fn [] - [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:padding-vertical 100 - :padding-horizontal 20 - :align-items :center} - [quo/settings-list (get-props @state)]]]))) diff --git a/src/status_im2/contexts/quo_preview/share/qr_code.cljs b/src/status_im2/contexts/quo_preview/share/qr_code.cljs index e12843c458..a7d9075ca6 100644 --- a/src/status_im2/contexts/quo_preview/share/qr_code.cljs +++ b/src/status_im2/contexts/quo_preview/share/qr_code.cljs @@ -57,7 +57,7 @@ :type :text} (preview/customization-color-option)]) -(defn preview +(defn view [] (let [media-server-port (rf/sub [:mediaserver/port]) state (reagent/atom diff --git a/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs index 7a63b50eb4..9cd2a4b5a5 100644 --- a/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs +++ b/src/status_im2/contexts/quo_preview/share/share_qr_code.cljs @@ -1,20 +1,15 @@ (ns status-im2.contexts.quo-preview.share.share-qr-code (:require [quo2.core :as quo] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview] [utils.image-server :as image-server] [utils.re-frame :as rf])) (def descriptor - [{:label "URL" - :key :url - :type :text} - {:label "Link title" - :key :link-title - :type :text}]) + [{:key :url :type :text} + {:key :link-title :type :text}]) -(defn preview-share-qr-code +(defn view [] (let [state (reagent/atom {:info-button? true :link-title "Link to profile" @@ -26,22 +21,13 @@ :qr-size 300 :error-level :highest})] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}}] - [rn/view - {:style {:padding-vertical 60 - :justify-content :center}} - [preview/blur-view - {:show-blur-background? true - :height 600 - :blur-view-props {:padding-top 20 - :padding-horizontal 20}} - [quo/share-qr-code - {:qr-image-uri qr-media-server-uri - :link-title (:link-title @state) - :url-on-press #(js/alert "url pressed") - :url-on-long-press #(js/alert "url long pressed") - :share-on-press #(js/alert "share pressed") - :qr-url (:url @state)}]]]]])))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 20}} + [quo/share-qr-code + {:qr-image-uri qr-media-server-uri + :link-title (:link-title @state) + :url-on-press #(js/alert "url pressed") + :url-on-long-press #(js/alert "url long pressed") + :share-on-press #(js/alert "share pressed") + :qr-url (:url @state)}]]))))