Skip to content

Commit

Permalink
[#17288] refactor: migrate previews to new api
Browse files Browse the repository at this point in the history
  • Loading branch information
mohsen-ghafouri committed Sep 21, 2023
1 parent 8151004 commit 3d24ac5
Show file tree
Hide file tree
Showing 14 changed files with 178 additions and 335 deletions.
4 changes: 2 additions & 2 deletions src/quo2/components/list_items/token_value/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
[reagent.core :as reagent]))

(defn- internal-view
[{:keys [theme customization-color status token metrics? values on-press]}]
[]
(let [state (reagent/atom :default)]
(fn []
(fn [{:keys [theme customization-color status token metrics? values on-press]}]
(let [bg-opacity (case @state
:active 10
:pressed 5
Expand Down
2 changes: 1 addition & 1 deletion src/quo2/components/navigation/bottom_nav_tab/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,6 @@
counter-label]
[rn/view {:style (styles/notification-dot customization-color)}]))]]))

(defn bottom-nav-tab
(defn view
[opts]
[:f> f-bottom-nav-tab opts])
2 changes: 2 additions & 0 deletions src/quo2/core.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
quo2.components.messages.gap
quo2.components.messages.system-message
quo2.components.navigation.floating-shell-button.view
quo2.components.navigation.bottom-nav-tab.view
quo2.components.navigation.page-nav.view
quo2.components.navigation.top-nav.view
quo2.components.notifications.activity-log.view
Expand Down Expand Up @@ -262,6 +263,7 @@
(def skeleton-list quo2.components.loaders.skeleton-list.view/view)

;;;; Navigation
(def bottom-nav-tab quo2.components.navigation.bottom-nav-tab.view/view)
(def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
(def page-nav quo2.components.navigation.page-nav.view/page-nav)
(def top-nav quo2.components.navigation.top-nav.view/view)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{:key :disabled? :type :boolean}
(preview/customization-color-option)])

(defn preview-browser-input
(defn view
[]
(let [state (reagent/atom {:blur? false
:disabled? false
Expand Down
52 changes: 18 additions & 34 deletions src/status_im2/contexts/quo_preview/list_items/token_value.cljs
Original file line number Diff line number Diff line change
@@ -1,42 +1,28 @@
(ns status-im2.contexts.quo-preview.list-items.token-value
(:require
[quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Token:"
:key :token
[{:key :token
:type :select
:options [{:key :eth
:value "ETH"}
{:key :snt
:value "SNT"}]}
{:label "State:"
:key :state
:options [{:key :eth}
{:key :snt}]}
{:key :state
:type :select
:options [{:key :default
:value "Default"}
{:key :pressed
:value "Pressed"}
{:key :active
:value "Active"}]}
{:label "Status:"
:key :status
:options [{:key :default}
{:key :pressed}
{:key :active}]}
{:key :status
:type :select
:options [{:key :empty
:value "Empty"}
{:key :positive
:value "Positive"}
{:key :negative
:value "Negative"}]}
:options [{:key :empty}
{:key :positive}
{:key :negative}]}
(preview/customization-color-option)
{:label "Metrics?:"
:key :metrics?
:type :boolean}])
{:key :metrics? :type :boolean}])

(defn preview
(defn view
[]
(let [state (reagent/atom {:token :snt
:state :default
Expand All @@ -49,11 +35,9 @@
:fiat-change "€0.00"}})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
[rn/view
{:style {:align-items :center
:margin-top 50}}
[quo/token-value @state]]]])))
{:state state
:descriptor descriptor
:component-container-style {:align-items :center
:margin-top 50}}
[quo/token-value @state]])))

49 changes: 15 additions & 34 deletions src/status_im2/contexts/quo_preview/list_items/user_list.cljs
Original file line number Diff line number Diff line change
@@ -1,35 +1,19 @@
(ns status-im2.contexts.quo-preview.list-items.user-list
(:require [react-native.core :as rn]
[reagent.core :as reagent]
(:require [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[quo2.components.list-items.user-list :as user-list]
[quo2.core :as quo]
[utils.address :as address]))

(def descriptor
[{:label "Primary name"
:key :primary-name
[{:key :primary-name
:type :text
:limit 24}
{:label "Secondary name"
:key :secondary-name
:type :text}
{:label "Chat key"
:key :chat-key
:type :text}
{:label "Is contact?"
:key :contact?
:type :boolean}
{:label "Is verified?"
:key :verified?
:type :boolean}
{:label "Is untrustworthy?"
:key :untrustworthy?
:type :boolean}
{:label "Online?"
:key :online?
:type :boolean}
{:label "Accessory:"
:key :accessory
{:key :secondary-name :type :text}
{:key :contact? :type :boolean}
{:key :verified? :type :boolean}
{:key :untrustworthy? :type :boolean}
{:key :online? :type :boolean}
{:key :accessory
:type :select
:options [{:key {:type :options}
:value "Options"}
Expand All @@ -38,7 +22,7 @@
{:key {:type :close}
:value "Close"}]}])

(defn preview-user-list
(defn view
[]
(let [state (reagent/atom {:primary-name "Alisher Yakupov"
:short-chat-key (address/get-shortened-compressed-key
Expand All @@ -50,11 +34,8 @@
:online? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:padding--horizontal 15
:justify-content :center}
[user-list/user-list @state]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 30
:padding-horizontal 15}}
[quo/user-list @state]])))
18 changes: 9 additions & 9 deletions src/status_im2/contexts/quo_preview/main.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@
{:name :wallet-ctas
:component wallet-ctas/view}]
:browser [{:name :browser-input
:component browser-input/preview-browser-input}]
:component browser-input/view}]
:calendar [{:name :calendar
:component calendar/view}
{:name :calendar-day
Expand Down Expand Up @@ -275,10 +275,10 @@
{:name :preview-lists
:component preview-lists/view}
{:name :token-value
:component token-value/preview}
:component token-value/view}
{:name :user-list
:options {:topBar {:visible true}}
:component user-list/preview-user-list}]
:component user-list/view}]
:loaders [{:name :skeleton-list
:options {:topBar {:visible true}}
:component skeleton-list/view}]
Expand All @@ -287,19 +287,19 @@
{:name :markdown-list
:component markdown-list/view}]
:messages [{:name :gap
:component messages-gap/preview-messages-gap}
:component messages-gap/view}
{:name :system-messages
:component system-message/preview-system-message}
:component system-message/view}
{:name :author
:component messages-author/view}]
:navigation [{:name :bottom-nav-tab
:component bottom-nav-tab/preview-bottom-nav-tab}
:component bottom-nav-tab/view}
{:name :top-nav
:component top-nav/preview}
:component top-nav/view}
{:name :page-nav
:component page-nav/preview-page-nav}
:component page-nav/view}
{:name :floating-shell-button
:component floating-shell-button/preview-floating-shell-button}]
:component floating-shell-button/view}]
:notifications [{:name :activity-logs
:component activity-logs/preview-activity-logs}
{:name :activity-logs-photos
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/contexts/quo_preview/messages/gap.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
[{:key :timestamp-far :type :text}
{:key :timestamp-near :type :text}])

(defn preview-messages-gap
(defn view
[]
(let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12"
:timestamp-near "Mar 8 · 22:42"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
{:child (when (= (:type @state) :pinned) [rn/text (:content @state)])
:display-name (:pinned-by @state)}))

(defn preview-system-message
(defn view
[]
(let [state (reagent/atom {:type :pinned
:pinned-by "Steve"
Expand Down
57 changes: 17 additions & 40 deletions src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
(ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
(:require [clojure.string :as string]
[quo2.components.navigation.bottom-nav-tab.view :as quo2]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Type"
:key :icon
[{:key :icon
:type :select
:options [{:key :i/communities
:value "Communities"}
Expand All @@ -19,33 +16,15 @@
:value "Wallet"}
{:key :i/browser
:value "Browser"}]}
{:label "Selected?"
:key :selected?
:type :boolean}
{:label "Pass through?"
:key :pass-through?
:type :boolean}
{:label "New Notifications?"
:key :new-notifications?
:type :boolean}
{:label "Notification Indicator"
:key :notification-indicator
{:key :selected? :type :boolean}
{:key :pass-through? :type :boolean}
{:key :new-notifications? :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 "Customization color"
:key :customization-color
:type :select
:options (map (fn [[k _]]
{:key k
:value (string/capitalize (name k))})
colors/customization)}])
:options [{:key :counter}
{:key :unread-dot}]}
{:key :counter-label :type :text}
(preview/customization-color-option)])

(defn get-icon-color
[selected? pass-through?]
Expand All @@ -60,11 +39,11 @@
(reanimated/set-shared-value
icon-color-anim
(get-icon-color selected? pass-through?))
[quo2/bottom-nav-tab
[quo/bottom-nav-tab
(merge state {:icon-color-anim icon-color-anim})
(:value state)]))

(defn preview-bottom-nav-tab
(defn view
[]
(let [state (reagent/atom {:icon :i/communities
:new-notifications? true
Expand All @@ -76,10 +55,8 @@
pass-through? (reagent/cursor state [:pass-through?])]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:align-items :center}
[:f> f-bottom-tab @state @selected? @pass-through?]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60
:align-items :center}}
[:f> f-bottom-tab @state @selected? @pass-through?]])))
Loading

0 comments on commit 3d24ac5

Please sign in to comment.