Skip to content

Commit

Permalink
[#17288] refactor: migrate previews to new api (#17695)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohsen-ghafouri @yevh-berdnyk
mohsen-ghafouri authored and yevh-berdnyk committed Dec 8, 2023
1 parent a023bf1 commit 1e7296d
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 194 deletions.
10 changes: 5 additions & 5 deletions src/status_im2/contexts/quo_preview/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,13 +408,13 @@
:switchers [{:name :group-messaging-card
:component group-messaging-card/view}
{:name :switcher-cards
:component switcher-cards/preview-switcher-cards}]
:component switcher-cards/view}]
:tabs [{:name :segmented
:component segmented/preview-segmented}
:component segmented/view}
{:name :tabs
:component tabs/preview-tabs}
:component tabs/view}
{:name :account-selector
:component account-selector/preview-this}]
:component account-selector/view}]
:tags [{:name :context-tags
:component context-tags/preview-context-tags}
{:name :network-tags
Expand All @@ -432,7 +432,7 @@
{:name :token-tag
:component token-tag/preview-token-tag}]
:text-combinations [{:name :text-combinations
:component text-combinations/preview}]
:component text-combinations/view}]
:wallet [{:name :account-card :component account-card/preview-account-card}
{:name :account-origin :component account-origin/view}
{:name :account-overview
Expand Down
49 changes: 15 additions & 34 deletions src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,27 @@
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Title"
:key :title
:type :text}
{:label "Status"
:key :status
[{:key :title :type :text}
{:key :status
:type :select
:options [{:key :read
:value :read}
{:key :unread
:value :unread}
{:key :mention
:value :mention}]}
{:label "Counter Label"
:key :counter-label
:type :text}
{:label "Type"
:key :type
:options [{:key :read}
{:key :unread}
{:key :mention}]}
{:key :counter-label :type :text}
{:key :type
:type :select
:options [{:key :message
:value :text}
{:key :photo
:value :photo}
{:key :sticker
:value :sticker}
{:key :gif
:value :gif}
{:key :audio
:value :audio}
{:key :community
:value :community}
{:key :link
:value :link}
{:key :photo}
{:key :sticker}
{:key :gif}
{:key :audio}
{:key :community}
{:key :link}
{:key :code
:value :code-snippet}]}
{:label "Last Message"
:key :last-message
:type :text}
{:label "Avatar:"
:key :avatar?
:type :boolean}
{:key :last-message :type :text}
{:key :avatar? :type :boolean}
(preview/customization-color-option)])

;; Mock data
Expand Down
60 changes: 16 additions & 44 deletions src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.switcher.switcher-cards
(:require
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.constants :as constants]
Expand All @@ -10,8 +9,7 @@
[status-im2.contexts.shell.jump-to.constants :as shell.constants]))

(def descriptor
[{:label "Type"
:key :type
[{:key :type
:type :select
:options [{:key shell.constants/communities-discover
:value "Communities Discover"}
Expand All @@ -33,27 +31,15 @@
:value "Wallet Graph"}
{:key shell.constants/empty-card
:value "Empty Card"}]}
{:label "Title"
:key :title
:type :text}
{:label "New Notifications?"
:key :new-notifications?
:type :boolean}
{:label "Banner?"
:key :banner?
:type :boolean}
{:label "Notification Indicator"
:key :notification-indicator
{:key :title :type :text}
{:key :new-notifications? :type :boolean}
{:key :banner? :type :boolean}
{:key :notification-indicator
:type :select
:options [{:key :counter
:value :counter}
{:key :unread-dot
:value :unread-dot}]}
{:label "Counter Label"
:key :counter-label
:type :text}
{:label "Content Type"
:key :content-type
:options [{:key :counter}
{:key :unread-dot}]}
{:key :counter-label :type :text}
{:key :content-type
:type :select
:options [{:key constants/content-type-text
:value :text}
Expand All @@ -69,21 +55,10 @@
:value :community}
{:key constants/content-type-link
:value :link}]}
{:label "Last Message"
:key :last-message
:type :text}
{:label "Customization"
:key :customization-color
:type :select
:options
(map
(fn [c]
{:key c
:value c})
(keys colors/customization))}])
{:key :last-message :type :text}
(preview/customization-color-option)])

;; Mocked Data

(def banner (resources/get-mock-image :community-banner))
(def sticker {:source (resources/get-mock-image :sticker)})
(def community-avatar {:source (resources/get-mock-image :community-logo)})
Expand Down Expand Up @@ -151,7 +126,7 @@
:else
{})))

(defn preview-switcher-cards
(defn view
[]
(let [state (reagent/atom {:type shell.constants/private-group-chat-card
:title "Alisher Yakupov"
Expand All @@ -165,10 +140,7 @@
:preview-label-color colors/white})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:align-items :center}
[switcher-cards/card (get-mock-data @state)]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60}}
[switcher-cards/card (get-mock-data @state)]])))
32 changes: 10 additions & 22 deletions src/status_im2/contexts/quo_preview/tabs/account_selector.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,14 @@
(ns status-im2.contexts.quo-preview.tabs.account-selector
(:require
[quo.components.tabs.account-selector :as quo]
[react-native.core :as rn]
[quo.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Show Label?:"
:key :show-label?
:type :boolean}
{:label "Transparent Background?:"
:key :transparent?
:type :boolean}
{:label "Account Text"
:key :account-text
:type :text}
{:label "Label Text"
:key :label-text
:type :text}])
[{:key :show-label? :type :boolean}
{:key :transparent? :type :boolean}
{:key :account-text :type :text}
{:key :label-text :type :text}])

;; keeping this unused data structure in the code for now
;; will reference them when I introduce multiple account support
Expand Down Expand Up @@ -46,7 +37,7 @@
:account-emoji "🍟"
:label-text "Label 3"}])

(defn preview-this
(defn view
[]
(let [state (reagent/atom {:show-label? true
:transparent? false
Expand All @@ -56,10 +47,7 @@
:label-text "Label"})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:align-items :center}
[quo/account-selector @state]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60}}
[quo/account-selector @state]])))
58 changes: 26 additions & 32 deletions src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,44 @@
(ns status-im2.contexts.quo-preview.tabs.segmented-tab
(:require
[quo.components.tabs.segmented-tab :as quo]
[quo.theme :as theme]
[quo.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Size:"
:key :size
[{:key :size
:type :select
:options [{:key 28
:value "28"}
{:key 20
:value "20"}]}
{:label "Blur?"
:key :blur?
:type :boolean}])
{:key :blur?
:type :boolean}])

(defn preview-segmented
(defn view
[]
(let [state (reagent/atom {:size 32
:blur? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[preview/blur-view
{:show-blur-background? (:blur? @state)
:height 200
:style {:width "100%"}
:blur-view-props {:blur-type (theme/get-theme)}}
[:<>
[quo/segmented-control
(merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]
[rn/view {:style {:padding-top 24}}
[quo/segmented-control
(merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}]
:on-change #(println "Active tab" %)})]]]]]])))
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:component-container-style {:padding-vertical 60}}
[:<>
[quo/segmented-control
(assoc @state
:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %))]
[rn/view {:style {:padding-top 24}}
[quo/segmented-control
(assoc @state
:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}]
:on-change #(println "Active tab" %))]]]])))
48 changes: 20 additions & 28 deletions src/status_im2/contexts/quo_preview/tabs/tabs.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
(ns status-im2.contexts.quo-preview.tabs.tabs
(:require
[quo.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Size:"
:key :size
[{:key :size
:type :select
:options [{:key 32
:value "32"}
{:key 24
:value "24"}]}
{:label "Show unread indicators?"
:key :unread-indicators?
:type :boolean}
{:label "Scrollable:"
:key :scrollable?
:type :boolean}])
{:key :unread-indicators? :type :boolean}
{:key :scrollable? :type :boolean}])

(defn generate-tab-items
[length unread-indicators?]
Expand All @@ -28,27 +22,25 @@
:label (str "Tab " (inc index))
:notification-dot? (and unread-indicators? (zero? (rem index 2)))}))

(defn preview-tabs
(defn view
[]
(let [state (reagent/atom {:size 32
:scrollable? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:padding-horizontal 20
:flex-direction :row
:justify-content :center}
[quo/tabs
(merge @state
{:default-active 1
:data (generate-tab-items (if (:scrollable? @state) 15 4)
(:unread-indicators? @state))
:on-change #(println "Active tab" %)}
(when (:scrollable? @state)
{:scroll-on-press? true
:fade-end-percentage 0.4
:fade-end? true}))]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60
:padding-horizontal 20
:flex-direction :row
:justify-content :center}}
[quo/tabs
(merge @state
{:default-active 1
:data (generate-tab-items (if (:scrollable? @state) 15 4)
(:unread-indicators? @state))
:on-change #(println "Active tab" %)}
(when (:scrollable? @state)
{:scroll-on-press? true
:fade-end-percentage 0.4
:fade-end? true}))]])))
Loading

0 comments on commit 1e7296d

Please sign in to comment.