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 (#17366)

This commit is contained in:
Mohsen Ghafouri 2023-09-25 13:19:50 +03:00 committed by GitHub
parent 848cac31ba
commit 6fd5a97b59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 194 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo2/components/list_items/token_value/view.cljs
View File

@ -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
@ -42,7 +42,7 @@
[text/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(str crypto-value " " (string/upper-case (clj->js token)))]]]
(str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
[rn/view
{:style {:align-items :flex-end
:justify-content :space-between}}

2
src/quo2/components/navigation/bottom_nav_tab/view.cljs
View File

@ -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
src/quo2/core.cljs
View File

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

49
src/status_im2/contexts/quo_preview/browser/browser_input.cljs
View File

@ -1,55 +1,28 @@
(ns status-im2.contexts.quo-preview.browser.browser-input
(:require [quo2.core :as quo]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[utils.re-frame :as rf]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Show Favicon"
:key :favicon?
:type :boolean}
{:label "Locked"
:key :locked?
:type :boolean}
{:label "Disabled"
:key :disabled?
:type :boolean}])
[{:key :favicon? :type :boolean}
{:key :locked? :type :boolean}
{:key :blur? :type :boolean}
{:key :placeholder :type :text}
{:key :disabled? :type :boolean}
(preview/customization-color-option)])
(defn preview-browser-input
(defn view
[]
(reagent/with-let [keyboard-shown? (reagent/atom false)
keyboard-show-listener (.addListener rn/keyboard
"keyboardWillShow"
#(reset! keyboard-shown? true))
keyboard-hide-listener (.addListener rn/keyboard
"keyboardWillHide"
#(reset! keyboard-shown? false))
{:keys [bottom]} (safe-area/get-insets)
state (reagent/atom {:blur? false
(let [state (reagent/atom {:blur? false
:disabled? false
:favicon? false
:placeholder "Search or enter dapp domain"
:locked? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[quo/page-nav
{:type :no-title
:icon-name :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])}]
[rn/flat-list
{:key-fn str
:keyboard-should-persist-taps :always
:style {:flex 1}}]
[rn/view
[quo/browser-input
(assoc @state
:customization-color :blue
:favicon (when (:favicon? @state) :i/verified))]
[rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]
(finally
(.remove keyboard-show-listener)
(.remove keyboard-hide-listener))))
:favicon
(when (:favicon? @state) :i/verified))]])))

45
src/status_im2/contexts/quo_preview/list_items/token_value.cljs
View File

@ -1,42 +1,23 @@
(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 :status
:type :select
:options [{:key :default
:value "Default"}
{:key :pressed
:value "Pressed"}
{:key :active
:value "Active"}]}
{:label "Status:"
: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
@ -50,10 +31,8 @@
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
[rn/view
{:style {:align-items :center
:descriptor descriptor
:component-container-style {:align-items :center
:margin-top 50}}
[quo/token-value @state]]]])))
[quo/token-value @state]])))

47
src/status_im2/contexts/quo_preview/list_items/user_list.cljs
View File

@ -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"}
@ -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
@ -51,10 +35,7 @@
(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]]]])))
:descriptor descriptor
:component-container-style {:padding-vertical 30
:padding-horizontal 15}}
[quo/user-list @state]])))

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

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

2
src/status_im2/contexts/quo_preview/messages/gap.cljs
View File

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

2
src/status_im2/contexts/quo_preview/messages/system_message.cljs
View File

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

55
src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs
View File

@ -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"}
@ -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?]
@ -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
@ -77,9 +56,7 @@
(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?]]]])))
:descriptor descriptor
:component-container-style {:padding-vertical 60
:align-items :center}}
[:f> f-bottom-tab @state @selected? @pass-through?]])))

37
src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs
View File

@ -1,29 +1,18 @@
(ns status-im2.contexts.quo-preview.navigation.floating-shell-button
(:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[utils.i18n :as i18n]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Show jump to?"
:key :show-jump-to?
:type :boolean}
{:label "Show search?"
:key :show-search?
:type :boolean}
{:label "Show mention?"
:key :show-mention?
:type :boolean}
{:label "Scroll Type"
:key :scroll-type
[{:key :show-jump-to? :type :boolean}
{:key :show-search? :type :boolean}
{:key :show-mention? :type :boolean}
{:key :scroll-type
:type :select
:options [{:key :notification-up
:value "Notification Up"}
{:key :notification-down
:value "Notification Down"}
{:key :scroll-to-bottom
:value "Scroll To Bottom"}]}])
:options [{:key :notification-up}
{:key :notification-down}
{:key :scroll-to-bottom}]}])
(defn mock-data
[{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
@ -41,16 +30,14 @@
(= scroll-type :scroll-to-bottom)
(assoc :scroll-to-bottom {:on-press #()})))
(defn preview-floating-shell-button
(defn view
[]
(let [state (reagent/atom {:show-jump-to? true
:scroll-type :notification-down})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:align-items :center}
[quo/floating-shell-button (mock-data @state) nil]]]])))
:descriptor descriptor
:component-container-style {:padding-vertical 60
:align-items :center}}
[quo/floating-shell-button (mock-data @state) nil]])))

165
src/status_im2/contexts/quo_preview/navigation/page_nav.cljs
View File

@ -2,43 +2,31 @@
(:require [clojure.string :as string]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.blur :as blur]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))
(def ^:private descriptor
[{:label "Type"
:key :type
[{:key :type
:type :select
:options [{:key :no-title
:value "No Title"}
{:key :title
:value "Title"}
{:key :dropdown
:value "Dropdown"}
{:key :token
:value "Token"}
{:key :channel
:value "Channel"}
:options [{:key :no-title}
{:key :title}
{:key :dropdown}
{:key :token}
{:key :channel}
{:key :title-description
:value "Title + Description"}
{:key :wallet-networks
:value "Wallet Networks"}
{:key :community
:value "Community"}
{:key :network
:value "Network"}]}
{:label "Background"
:key :background
{:key :wallet-networks}
{:key :community}
{:key :network}]}
{:key :background
:type :select
:options (map (fn [bg-type]
{:key bg-type
:value (string/capitalize (name bg-type))})
[:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])}
{:label "Icon"
:key :icon-name
{:key :icon-name
:type :select
:options [{:key :i/placeholder
:value "Placeholder"}
@ -60,79 +48,55 @@
:value "3 actions"}]))
(def account-switcher
{:key :account-switcher
:value "Account-switcher"})
{:key :account-switcher})
(def no-title-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options (conj right-side-options account-switcher)}])
(def title-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options (conj right-side-options account-switcher)}
{:label "Title"
:key :title
:type :text}
{:label "Text Align"
:key :text-align
{:key :title :type :text}
{:key :text-align
:type :select
:options [{:key :left
:value "Left"}
{:key :center
:value "Center"}]}])
:options [{:key :left}
{:key :center}]}])
(def dropdown-descriptor
[{:label "Dropdown Selected?"
:key :dropdown-selected?
:type :boolean}
{:label "Dropdown Text"
:key :dropdown-text
:type :text}])
[{:key :dropdown-selected? :type :boolean}
{:key :dropdown-text :type :text}])
(def token-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options (conj right-side-options account-switcher)}
{:label "Token Logo"
:key :token-logo
{:key :token-logo
:type :select
:options [{:key (resources/get-mock-image :status-logo)
:value "Status logo"}
{:key (resources/get-mock-image :rarible)
:value "Rarible"}]}
{:label "Token Name"
:key :token-name
{:key :token-name
:type :text}
{:label "Token Abbreviation"
:key :token-abbreviation
{:key :token-abbreviation
:type :text}])
(def channel-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options right-side-options}
{:label "Channel Emoji"
:key :channel-emoji
{:key :channel-emoji
:type :select
:options [{:key "🍇"
:value "🍇"}
{:key "🍑"
:value "🍑"}]}
{:label "Channel Name"
:key :channel-name
:type :text}
{:label "Channel Icon"
:key :channel-icon
{:key :channel-name :type :text}
{:key :channel-icon
:type :select
:options [{:key :i/locked
:value "Locked"}
@ -140,18 +104,12 @@
:value "Unlocked"}]}])
(def title-description-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options (butlast right-side-options)}
{:label "title"
:key :title
:type :text}
{:label "description"
:key :description
:type :text}
{:label "Picture"
:key :picture
{:key :title :type :text}
{:key :description :type :text}
{:key :picture
:type :select
:options [{:key nil
:value "No picture"}
@ -161,74 +119,49 @@
:value "Photo 2"}]}])
(def wallet-networks-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options (conj (take 2 right-side-options) account-switcher)}])
(def community-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options right-side-options}
{:label "Community Logo"
:key :community-logo
{:key :community-logo
:type :select
:options [{:key (resources/get-mock-image :diamond)
:value "Diamond"}
{:key (resources/get-mock-image :coinbase)
:value "Coinbase"}]}
{:label "Community name"
:key :community-name
:type :text}])
{:key :community-name :type :text}])
(def network-descriptor
[{:label "Right Side"
:key :right-side
[{:key :right-side
:type :select
:options right-side-options}
{:label "Network Logo"
:key :network-logo
{:key :network-logo
:type :select
:options [{:key (resources/get-mock-image :diamond)
:value "Diamond"}
{:key (resources/get-mock-image :coinbase)
:value "Coinbase"}]}
{:label "Network name"
:key :network-name
{:key :network-name
:type :text}])
(defn- photo-bg
[background]
(when (#{:photo :blur} background)
(when (#{:photo} background)
[rn/image
{:style {:position :absolute
:top 0
:bottom 0
:left 0
:left 20
:right 0
:width "100%"
:height 200}
:source (resources/get-mock-image :photo2)}]))
(defn- blur-bg
[background]
(when (= :blur background)
[rn/view
{:style {:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:width "100%"
:height 200}}
[blur/view
{:style {:width "100%"
:height 20}
:blur-type :light
:blur-amount 20}]]))
(defn preview-page-nav
(defn view
[{:keys [theme]}]
(let [state (reagent/atom
{:type :title-description
@ -269,18 +202,18 @@
:wallet-networks wallet-networks-descriptor
:community community-descriptor
:network network-descriptor
nil))}
[rn/view
{:style {:background-color (case (:background @state)
nil))
:blur? (= :blur (:background @state))
:show-blur-background? (= :blur (:background @state))
:component-container-style {:background-color (case (:background @state)
:white colors/white
:neutral-5 colors/neutral-5
:neutral-90 colors/neutral-90
:neutral-95 colors/neutral-95
:neutral-100 colors/neutral-100
nil)
:padding-vertical 40
:height 200
:margin-vertical 40
:width "100%"}}
[photo-bg (:background @state)]
[blur-bg (:background @state)]
[quo/page-nav @state]]])))
[quo/page-nav @state]])))

39
src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
View File

@ -1,11 +1,8 @@
(ns status-im2.contexts.quo-preview.navigation.top-nav
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[quo2.core :as quo]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]
[quo2.theme :as quo.theme]))
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :notification
@ -21,9 +18,9 @@
:type :number}
(preview/customization-color-option)])
(defn preview
(defn view
[]
(let [state (reagent/atom {:noticication-count 0
(let [state (reagent/atom {:notification-count 0
:customization-color :blue})]
(fn []
(let [blur? (:blur? @state)
@ -33,30 +30,12 @@
notification-count (:notification-count @state)]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:descriptor descriptor
:blur? (and blur? (not jump-to?))
:show-blur-background? (and blur? (not jump-to?))
:component-container-style {:padding-vertical 60
:padding-horizontal 20
:flex-direction :row
:align-items :center}
(when blur?
[rn/image
{:source (resources/get-mock-image (quo.theme/theme-value :light-blur-background
:dark-blur-background))
:style {:position :absolute
:top 0
:left 0
:right 0
:bottom 0}}])
(when jump-to?
[rn/image
{:background-color colors/neutral-100
:style {:position :absolute
:top 0
:left 0
:right 0
:bottom 0}}])
:background-color (when jump-to? colors/neutral-100)}}
[quo/top-nav
{:container-style {:flex 1 :z-index 2}
:max-unread-notifications 99
@ -70,5 +49,5 @@
:avatar-on-press #(js/alert "avatar pressed")
:scan-on-press #(js/alert "scan pressed")
:activity-center-on-press #(js/alert "activity-center pressed")
:qr-code-on-press #(js/alert "qr pressed")}]]]]))))
:qr-code-on-press #(js/alert "qr pressed")}]]))))

4
src/status_im2/contexts/shell/jump_to/components/bottom_tabs/view.cljs
View File

@ -4,11 +4,11 @@
[react-native.gesture :as gesture]
[react-native.platform :as platform]
[react-native.reanimated :as reanimated]
[quo2.core :as quo]
[status-im2.contexts.shell.jump-to.utils :as utils]
[status-im2.contexts.shell.jump-to.state :as state]
[status-im2.contexts.shell.jump-to.animation :as animation]
[status-im2.contexts.shell.jump-to.constants :as shell.constants]
[quo2.components.navigation.bottom-nav-tab.view :as bottom-nav-tab]
[status-im2.contexts.shell.jump-to.components.bottom-tabs.style :as style]))
(defn blur-overlay-params
@ -25,7 +25,7 @@
icon-color (->> stack-id
(get shell.constants/tabs-icon-color-keywords)
(get shared-values))]
[bottom-nav-tab/bottom-nav-tab
[quo/bottom-nav-tab
(-> notifications-data
(get stack-id)
(assoc :test-ID stack-id