Skip to content

Commit

Permalink
[#17288] refactor: migrate previews to new api (#17470)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohsen-ghafouri
mohsen-ghafouri authored Oct 2, 2023
1 parent d8d8a6c commit ee85d6d
Show file tree
Hide file tree
Showing 12 changed files with 134 additions and 283 deletions.
5 changes: 5 additions & 0 deletions src/quo2/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@
quo2.components.numbered-keyboard.numbered-keyboard.view
quo2.components.onboarding.small-option-card.view
quo2.components.password.tips.view
quo2.components.profile.collectible.view
quo2.components.profile.profile-card.view
quo2.components.profile.select-profile.view
quo2.components.profile.showcase-nav.view
Expand Down Expand Up @@ -297,6 +298,7 @@
(def tips quo2.components.password.tips.view/view)

;;;; Profile
(def collectible quo2.components.profile.collectible.view/collectible)
(def profile-card quo2.components.profile.profile-card.view/profile-card)
(def select-profile quo2.components.profile.select-profile.view/view)
(def showcase-nav quo2.components.profile.showcase-nav.view/view)
Expand All @@ -315,6 +317,9 @@
(def filter quo2.components.selectors.filter.view/view)
(def reactions quo2.components.selectors.reactions.view/view)
(def checkbox quo2.components.selectors.selectors.view/checkbox)
(def toggle quo2.components.selectors.selectors.view/toggle)
(def radio quo2.components.selectors.selectors.view/radio)
(def checkbox-prefill quo2.components.selectors.selectors.view/checkbox-prefill)

;;;; Settings
(def account quo2.components.settings.accounts.view/account)
Expand Down
18 changes: 9 additions & 9 deletions src/status_im2/contexts/quo_preview/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,25 +352,25 @@
:password [{:name :tips
:component tips/view}]
:profile [{:name :profile-card
:component profile-card/preview-profile-card}
:component profile-card/view}
{:name :collectible
:component collectible/preview-collectible}
:component collectible/view}
{:name :select-profile
:component select-profile/preview-select-profile}
:component select-profile/view}
{:name :showcase-nav
:component showcase-nav/view}]
:reactions [{:name :react
:component react/preview-react}]
:component react/view}]
:record-audio [{:name :record-audio
:component record-audio/preview-record-audio}]
:component record-audio/view}]
:selectors [{:name :disclaimer
:component disclaimer/preview-disclaimer}
:component disclaimer/view}
{:name :filter
:component filter/preview}
:component filter/view}
{:name :selectors
:component selectors/preview-selectors}
:component selectors/view}
{:name :select-reactions
:component selector-reactions/preview}]
:component selector-reactions/view}]
:settings [{:name :privacy-option
:component privacy-option/preview-options}
{:name :accounts
Expand Down
37 changes: 13 additions & 24 deletions src/status_im2/contexts/quo_preview/profile/collectible.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.profile.collectible
(:require
[quo2.components.profile.collectible.view :as quo]
[react-native.core :as rn]
[quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]))
Expand All @@ -10,31 +9,21 @@
(def test-images (repeat 10 test-image))

(def descriptor
[{:label "Number of images"
:key :num-images
[{:key :num-images
:type :select
:options (map (fn [n]
{:key n :value (str n " images")})
(range 1 (inc (count test-images))))}
{:label "Random order of images"
:key :shuffle-images
:type :boolean}])
(range 1 (inc (count test-images))))}])

(defn preview-collectible
(defn view
[]
(let [state (reagent/atom {:num-images 1 :shuffle-images false})]
(let [state (reagent/atom {:num-images 1})]
(fn []
(let [images-to-show (cond->> test-images
(:shuffle-images @state)
(shuffle)
:always
(take (:num-images @state)))]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 100
:align-items :center}
[quo/collectible
{:images images-to-show
:on-press #(js/alert "Pressed")}]]]))))
[preview/preview-container
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 20
:align-items :center}}
[quo/collectible
{:images (repeat (:num-images @state) test-image)
:on-press #(js/alert "Pressed")}]])))
66 changes: 17 additions & 49 deletions src/status_im2/contexts/quo_preview/profile/profile_card.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,23 @@
(ns status-im2.contexts.quo-preview.profile.profile-card
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
(:require [reagent.core :as reagent]
[quo2.core :as quo]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Show: Is from key card?"
:key :keycard-account?
:type :boolean}
{:label "Show: Emoji hash?"
:key :show-emoji-hash?
:type :boolean}
{:label "Show: User hash?"
:key :show-user-hash?
:type :boolean}
{:label "Show: Options Button?"
:key :show-options-button?
:type :boolean}
{:label "Show: Logged In?"
:key :show-logged-in?
:type :boolean}
{:label "Login Card?"
:key :login-card?
:type :boolean}
{:label "Last Item?"
:key :last-item?
:type :boolean}
{:label "Customization Color"
:key :customization-color
:type :select
:options (map (fn [[color-kw _]]
{:key color-kw
:value (name color-kw)})
colors/customization)}
{:label "Name"
:key :name
:type :text}
{:label "Hash"
:key :hash
:type :text}
{:label "Emoji hash"
:key :emoji-hash
:type :text}])
[{:key :keycard-account? :type :boolean}
{:key :show-emoji-hash? :type :boolean}
{:key :show-user-hash? :type :boolean}
{:key :show-options-button? :type :boolean}
{:key :show-logged-in? :type :boolean}
{:key :login-card? :type :boolean}
{:key :last-item? :type :boolean}
{:key :name :type :text}
{:key :hash :type :text}
{:key :emoji-hash :type :text}
(preview/customization-color-option)])

(defn preview-profile-card
(defn view
[]
(let [state (reagent/atom {:keycard-account? false
:name "Matt Grote"
Expand All @@ -64,11 +36,7 @@
:emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo/profile-card @state]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-bottom 50}}
[quo/profile-card @state]])))
36 changes: 9 additions & 27 deletions src/status_im2/contexts/quo_preview/profile/select_profile.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,15 @@
(ns status-im2.contexts.quo-preview.profile.select-profile
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
(:require [reagent.core :as reagent]
[quo2.core :as quo]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Customization Color"
:key :customization-color
:type :select
:options (map (fn [color]
{:key color
:value color})
(keys colors/customization))}
{:label "Name"
:key :name
:type :text}
{:label "Selected"
:key :selected?
:type :boolean}])
[(preview/customization-color-option)
{:key :name :type :text}
{:key :selected? :type :boolean}])

(defn preview-select-profile
(defn view
[]
(let [state (reagent/atom {:selected? false
:name "Alisher Yakupov"
Expand All @@ -30,13 +18,7 @@
selected? (reagent/cursor state [:selected?])]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:flex-direction :row
:padding-horizontal 20
:background-color colors/neutral-90
:justify-content :center}
[quo/select-profile (merge @state {:on-change #(reset! selected? %)})]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding 20}}
[quo/select-profile (merge @state {:on-change #(reset! selected? %)})]])))
20 changes: 8 additions & 12 deletions src/status_im2/contexts/quo_preview/profile/showcase_nav.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,17 @@
:id index}))))

(def descriptor
[{:type :number
:key :previews-length}
[{:type :number :key :previews-length}
{:type :select
:key :state
:options [{:key :default
:value "default"}
{:key :scroll
:value "scroll"}]}])
:options [{:key :default}
{:key :scroll}]}])

(defn view
[]
(let [state (reagent/atom {:state :default
:previews-length 10
:active-id 0})
:active-id 3})
component-state (reagent/cursor state [:state])
previews-length (reagent/cursor state [:previews-length])
active-id (reagent/cursor state [:active-id])
Expand All @@ -36,8 +33,7 @@
:descriptor descriptor
:component-container-style {:padding-horizontal 0}}
[quo/showcase-nav
{:default-active 3
:state @component-state
:active-id @active-id
:data (take (or @previews-length 1) nav-data)
:on-press #(swap! state assoc :active-id %)}]])))
{:state @component-state
:active-id @active-id
:data (take (or @previews-length 1) nav-data)
:on-press #(swap! state assoc :active-id %)}]])))
31 changes: 11 additions & 20 deletions src/status_im2/contexts/quo_preview/reactions/react.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.reactions.react
(:require [clojure.string :as string]
[quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.constants :as constants]
[status-im2.contexts.quo-preview.preview :as preview]))
Expand All @@ -10,31 +9,23 @@
[{:label "Count"
:key :clicks
:type :text}
{:label "Emoji"
:key :emoji
{:key :emoji
:type :select
:options (for [reaction (vals constants/reactions)]
{:key reaction
:value (string/capitalize (name reaction))})}
{:label "Neutral"
:key :neutral?
:type :boolean}])
{:key :neutral? :type :boolean}])

(defn preview-react
(defn view
[]
(let [state (reagent/atom {:emoji :reaction/love})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-bottom 150
:align-items :center}
[rn/view
{:width 100
:padding-vertical 60
:justify-content :space-evenly
:flex-direction :row
:align-items :center}
[quo/reaction @state]
[quo/add-reaction]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-bottom 50
:flex-direction :row
:align-items :center
:justify-content :center}}
[quo/reaction @state]
[quo/add-reaction]])))
17 changes: 7 additions & 10 deletions src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.record-audio.record-audio
(:require [quo2.components.record-audio.record-audio.view :as record-audio]
[quo2.core :as quo]
(:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
Expand All @@ -12,7 +11,7 @@

(defonce record-audio-permission-granted (reagent/atom false))

(defn preview-record-audio
(defn view
[]
(let [message (reagent/atom
"Press & hold the mic button to start recording...")
Expand Down Expand Up @@ -41,13 +40,11 @@
:t/audio-recorder-permissions-error)))
50)}]))]
(fn []
[preview/preview-container
[preview/preview-container {:component-container-style {:justify-content :center}}
[rn/view
{:padding-top 150
:align-items :center
:background-color :transparent
:flex-direction :row}
[record-audio/record-audio
{:align-items :center
:justify-content :center}
[quo/record-audio
{:record-audio-permission-granted @record-audio-permission-granted
:on-send on-send
:on-start-recording on-start-recording
Expand All @@ -56,4 +53,4 @@
:on-check-audio-permissions on-check-audio-permissions
:on-request-record-audio-permission on-request-record-audio-permission
:max-duration-ms constants/audio-max-duration-ms}]]
[quo/text {:style {:margin-horizontal 20}} @message]])))
[quo/text @message]])))
Loading

0 comments on commit ee85d6d

Please sign in to comment.