status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Mohsen 2023-10-23 20:40:22 +03:00 committed by GitHub
parent 221c501279
commit c42fc5153d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 103 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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
@ -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

49
src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs
View File

@ -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

60
src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs
View File

@ -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]
@ -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"}
@ -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}
@ -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)})
@ -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"
@ -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
src/status_im2/contexts/quo_preview/tabs/account_selector.cljs
View File

@ -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
@ -46,7 +37,7 @@
:account-emoji "🍟"
:label-text "Label 3"}])
(defn preview-this
(defn view
[]
(let [state (reagent/atom {:show-label? true
:transparent? false
@ -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
src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs
View File

@ -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
src/status_im2/contexts/quo_preview/tabs/tabs.cljs
View File

@ -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?]
@ -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}))]])))

40
src/status_im2/contexts/quo_preview/text_combinations/preview.cljs
View File

@ -1,28 +1,15 @@
(ns status-im2.contexts.quo-preview.text-combinations.preview
(:require
[quo.components.text-combinations.view :as quo]
[react-native.core :as rn]
[quo.core :as quo]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Title"
:key :title
:type :text}
{:label :avatar
:key :avatar
:type :boolean}
{:label "Description type:"
:key :description
:type :select
:options [{:key :none
:value nil}
{:key :description
:value :description}]}
{:label "Description text"
:key :description-props
:type :text}])
[{:key :title :type :text}
{:key :avatar :type :boolean}
{:key :description
:type :text}])
(defn state->text-combinations-props
[state]
@ -30,20 +17,15 @@
(assoc state :avatar (resources/get-mock-image :user-picture-male4))
state))
(defn preview
(defn view
[]
(let [state (reagent/atom {:title "Title"
:title-accessibility-label :title
:description nil
:description-props ""
:description ""
:description-accessibility-label :subtitle})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:align-items :center}
[quo/view
(state->text-combinations-props @state)]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60}}
[quo/text-combinations (state->text-combinations-props @state)]])))