Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#17288] refactor: migrate previews to new api #17695

Merged
merged 1 commit into from
Oct 23, 2023
Merged

[#17288] refactor: migrate previews to new api #17695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/status_im2/contexts/quo_preview/main.cljs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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