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

This commit is contained in:
Mohsen 2023-10-16 11:52:58 +03:00 committed by GitHub
parent dd20d8896f
commit ea8b8d142b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 79 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/quo2/components/settings/settings_list/style.cljs
View File

@ -1,56 +0,0 @@
(ns quo2.components.settings.settings-list.style
(:require [quo2.foundations.colors :as colors]))
(def title-container
{:flex 1})
(defn title
[override-theme]
{:color (colors/theme-colors
colors/neutral-100
colors/white
override-theme)})
(def icon
{:margin-right 12
:align-self :flex-start})
(def item-container
{:justify-content :space-between
:align-items :center
:padding-horizontal 12
:padding-vertical 13})
(def inner-container
{:flex-direction :row
:align-items :center})
(defn dot
[override-theme]
{:width 15
:height 15
:border-radius 8
:margin-right 14.5
:background-color (colors/theme-colors (colors/custom-color :blue 50)
(colors/custom-color :blue 60)
override-theme)})
(defn community-icon
[index override-theme]
{:width 24
:height 24
:border-width 1
:border-color (colors/theme-colors colors/white colors/black override-theme)
:border-radius 12
:position :absolute
:right (* 20 index)})
(def communities-container
{:flex 1
:justify-content :center
:align-content :center
:margin-right 12})
(def tag-container
{:margin-top 8
:margin-left -1})

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

@ -385,23 +385,23 @@
{:name :react {:name :react
:component react/preview-react}] :component react/preview-react}]
:settings [{:name :privacy-option :settings [{:name :privacy-option
:component privacy-option/preview-options} :component privacy-option/view}
{:name :accounts {:name :accounts
:component accounts/preview-accounts} :component accounts/view}
{:name :settings-item {:name :settings-item
:component settings-item/preview} :component settings-item/view}
{:name :reorder-item {:name :reorder-item
:component reorder-item/preview-reorder-item} :component reorder-item/view}
{:name :category {:name :category
:component category/preview} :component category/view}
{:name :data-item {:name :data-item
:component data-item/preview-data-item} :component data-item/view}
{:name :section-label {:name :section-label
:component section-label/preview}] :component section-label/view}]
:share [{:name :qr-code :share [{:name :qr-code
:component qr-code/preview} :component qr-code/view}
{:name :share-qr-code {:name :share-qr-code
:component share-qr-code/preview-share-qr-code}] :component share-qr-code/view}]
:switchers [{:name :group-messaging-card :switchers [{:name :group-messaging-card
:component group-messaging-card/view} :component group-messaging-card/view}
{:name :switcher-cards {:name :switcher-cards

36
src/status_im2/contexts/quo_preview/settings/accounts.cljs
View File

@ -1,26 +1,14 @@
(ns status-im2.contexts.quo-preview.settings.accounts (ns status-im2.contexts.quo-preview.settings.accounts
(:require [clojure.string :as string] (:require [quo2.core :as quo]
[quo2.components.settings.accounts.view :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Custom color" [(preview/customization-color-option)
:key :customization-color {:key :account-name :type :text}
:type :select {:key :account-address :type :text}])
:options (map (fn [[k _]]
{:key k :value (string/capitalize (name k))})
colors/customization)}
{:label "Account name"
:key :account-name
:type :text}
{:label "Account address"
:key :account-address
:type :text}])
(defn preview-accounts (defn view
[] []
(let [state (reagent/atom {:customization-color :blue (let [state (reagent/atom {:customization-color :blue
:account-name "Booze for Dubai" :account-name "Booze for Dubai"
@ -30,12 +18,8 @@
(js/alert "Menu button pressed"))})] (js/alert "Menu button pressed"))})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view :component-container-style {:padding-vertical 100
{:padding-vertical 100 :align-items :center}}
:align-items :center [quo/account @state]])))
:background-color (colors/theme-colors
colors/neutral-30
colors/neutral-95)}
[quo/account @state]]])))

57
src/status_im2/contexts/quo_preview/settings/category.cljs
View File

@ -6,60 +6,33 @@
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(defn create-item-array (defn create-item-array
[n {:keys [right-icon? image? subtitle? list-type]}] [n]
(vec (vec
(for [i (range n)] (for [i (range n)]
{:title (str "Item " i) {:title (str "Item " i)
:subtitle (when subtitle? "subtitle") :subtitle "subtitle"
:action :arrow :action :arrow
:right-icon (when right-icon? :i/globe) :right-icon :i/globe
:image (if (= list-type :settings) :icon (when image? (resources/get-mock-image :diamond))) :image (resources/get-mock-image :diamond)
:image-props :i/browser :image-props :i/browser
:image-size (if image? 32 0)}))) :image-size 32})))
(def reorder-descriptor (def descriptor
[{:label "Right icon:" [{:key :blur? :type :boolean}
:key :right-icon? {:key :list-type
:type :boolean}
{:label "Image:"
:key :image?
:type :boolean}
{:label "Subtitle:"
:key :subtitle?
:type :boolean}
{:label "Blur:"
:key :blur?
:type :boolean}
{:label "List type:"
:key :list-type
:type :select :type :select
:options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}]) :options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}])
(def settings-descriptor (defn view
[{:label "Blur:"
:key :blur?
:type :boolean}
{:label "List type:"
:key :list-type
:type :select
:options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}])
(defn preview
[] []
(let [state (reagent/atom {:label "Label" (let [state (reagent/atom {:label "Label"
:size "5" :blur? false
:blur? false :list-type :settings})]
:right-icon? true
:image? true
:subtitle? true
:list-type :settings})]
(fn [] (fn []
(let [data (reagent/atom (create-item-array (max (js/parseInt (:size @state)) 1) @state))] (let [data (create-item-array 5)]
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor (if (= (:list-type @state) :settings) :descriptor descriptor
settings-descriptor
reorder-descriptor)
:blur? (:blur? @state) :blur? (:blur? @state)
:show-blur-background? true :show-blur-background? true
:blur-dark-only? true :blur-dark-only? true
@ -67,5 +40,5 @@
[quo/category [quo/category
{:list-type (:list-type @state) {:list-type (:list-type @state)
:label (:label @state) :label (:label @state)
:data @data :data data
:blur? (:blur? @state)}]])))) :blur? (:blur? @state)}]]))))

59
src/status_im2/contexts/quo_preview/settings/data_item.cljs
View File

@ -5,56 +5,35 @@
[status-im2.common.resources :as resources])) [status-im2.common.resources :as resources]))
(def descriptor (def descriptor
[{:label "Blur:" [{:key :blur? :type :boolean}
:key :blur? {:key :card? :type :boolean}
:type :boolean} {:key :icon-right? :type :boolean}
{:label "Card:" {:type :select
:key :card?
:type :boolean}
{:label "Icon Right:"
:key :icon-right?
:type :boolean}
{:label "Label:"
:type :select
:key :label :key :label
:options [{:key :none :options [{:key :none}
:value "None"} {:key :graph}
{:key :graph {:key :preview}]}
:value "Graph"} {:type :select
{:key :preview
:value "Preview"}]}
{:label "Description:"
:type :select
:key :description :key :description
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :icon}
{:key :icon {:key :network}
:value "Icon"} {:key :account}]}
{:key :network {:type :select
:value "Network"}
{:key :account
:value "Account"}]}
{:label "Status:"
:type :select
:key :status :key :status
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :loading}]}
{:key :loading {:type :select
:value "Loading"}]}
{:label "Size:"
:type :select
:key :size :key :size
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :small}]}])
{:key :small
:value "Small"}]}])
(def communities-list (def communities-list
[{:source (resources/get-mock-image :coinbase)} [{:source (resources/get-mock-image :coinbase)}
{:source (resources/get-mock-image :decentraland)} {:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}]) {:source (resources/get-mock-image :rarible)}])
(defn preview-data-item (defn view
[] []
(let [state (reagent/atom {:on-press #(js/alert (str "pressed")) (let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
:blur? false :blur? false

10
src/status_im2/contexts/quo_preview/settings/privacy_option.cljs
View File

@ -5,12 +5,8 @@
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Header:" [{:key :header :type :text}
:key :header {:key :footer :type :text}
:type :text}
{:label "Footer:"
:key :footer
:type :text}
{:label "Line 1:" {:label "Line 1:"
:key :li1 :key :li1
:type :text} :type :text}
@ -21,7 +17,7 @@
:key :li3 :key :li3
:type :text}]) :type :text}])
(defn preview-options (defn view
[] []
(let [state (reagent/atom {:selected :contacts (let [state (reagent/atom {:selected :contacts
:header "header" :header "header"

23
src/status_im2/contexts/quo_preview/settings/reorder_item.cljs
View File

@ -1,10 +1,9 @@
(ns status-im2.contexts.quo-preview.settings.reorder-item (ns status-im2.contexts.quo-preview.settings.reorder-item
(:require (:require
[quo2.core :as quo] [quo2.core :as quo]
[react-native.core :as rn]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[quo2.foundations.resources :as quo2.resources] [quo2.foundations.resources :as quo2.resources]
[quo2.foundations.colors :as colors] [status-im2.contexts.quo-preview.preview :as preview]
[quo2.components.settings.reorder-item.types :as types])) [quo2.components.settings.reorder-item.types :as types]))
(def mock-data (def mock-data
@ -77,19 +76,9 @@
:on-change (fn [tab-id] (println tab-id)) :on-change (fn [tab-id] (println tab-id))
:default-active 1}}]) :default-active 1}}])
(defn view
(defn container
[] []
{:padding-horizontal 38 (fn []
:padding-vertical 20 [preview/preview-container {}
:background-color (colors/theme-colors (for [item mock-data]
colors/neutral-10 [quo/reorder-item (item :data) (item :type)])]))
colors/neutral-100)
:flex 1})
(defn preview-reorder-item
[]
[rn/scroll-view
{:style (container)}
(for [item mock-data]
[quo/reorder-item (item :data) (item :type)])])

2
src/status_im2/contexts/quo_preview/settings/section_label.cljs
View File

@ -12,7 +12,7 @@
{:key :blur? {:key :blur?
:type :boolean}]) :type :boolean}])
(defn preview (defn view
[] []
(let [state (reagent/atom {:section "Section label" (let [state (reagent/atom {:section "Section label"
:description "" :description ""

6
src/status_im2/contexts/quo_preview/settings/settings_item.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.settings.settings-item (ns status-im2.contexts.quo-preview.settings.settings-item
(:require (:require
[quo2.core :as quo] [quo2.core :as quo]
[react-native.core :as rn]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
@ -100,7 +99,7 @@
:context "Context"} :context "Context"}
nil)})) nil)}))
(defn preview (defn view
[] []
(let [state (reagent/atom {:title "Account" (let [state (reagent/atom {:title "Account"
:accessibility-label :settings-item :accessibility-label :settings-item
@ -115,5 +114,4 @@
:blur? (:blur? @state) :blur? (:blur? @state)
:show-blur-background? true :show-blur-background? true
:blur-dark-only? true} :blur-dark-only? true}
[rn/view {:style {:flex 1}} [quo/settings-item (get-props @state)]])))
[quo/settings-item (get-props @state)]]])))

69
src/status_im2/contexts/quo_preview/settings/settings_list.cljs
View File

@ -1,69 +0,0 @@
(ns status-im2.contexts.quo-preview.settings.settings-list
(:require [quo2.components.settings.settings-list.view :as quo]
[react-native.core :as rn]
[status-im2.common.resources :as resources]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Account name:"
:key :title
:type :text}
{:label "Chevron:"
:key :chevron?
:type :boolean}
{:label "Badge:"
:key :badge?
:type :boolean}
{:label "Toggle:"
:key :toggle-props
:type :boolean}
{:label "Communities"
:key :communities-props
:type :boolean}
{:label "Button"
:key :button-props
:type :boolean}
{:label "Status Tag"
:key :status-tag-props
:type :boolean}])
(defn get-props
[data]
(when (:toggle-props data) (js/console.warn data))
(merge
data
{:toggle-props (when (:toggle-props data)
{:checked? true
:on-change (fn [new-value] (js/alert new-value))})
:button-props (when (:button-props data)
{:title "Button" :on-press (fn [] (js/alert "Button pressed"))})
:communities-props
(when (:communities-props data)
{:data
[{:source (resources/mock-images :rarible)}
{:source (resources/mock-images :decentraland)}
{:source (resources/mock-images :coinbase)}]})
:status-tag-props (when (:status-tag-props data)
{:size :small
:status {:type :positive}
:no-icon? true
:label "example"
:override-theme :dark})}))
(defn preview-settings-list
[]
(let [state (reagent/atom {:title "Account"
:accessibility-label :settings-list-item
:left-icon :browser-context
:chevron? true
:on-press (fn [] (js/alert "Settings list item pressed"))})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 100
:padding-horizontal 20
:align-items :center}
[quo/settings-list (get-props @state)]]])))

2
src/status_im2/contexts/quo_preview/share/qr_code.cljs
View File

@ -57,7 +57,7 @@
:type :text} :type :text}
(preview/customization-color-option)]) (preview/customization-color-option)])
(defn preview (defn view
[] []
(let [media-server-port (rf/sub [:mediaserver/port]) (let [media-server-port (rf/sub [:mediaserver/port])
state (reagent/atom state (reagent/atom

40
src/status_im2/contexts/quo_preview/share/share_qr_code.cljs
View File

@ -1,20 +1,15 @@
(ns status-im2.contexts.quo-preview.share.share-qr-code (ns status-im2.contexts.quo-preview.share.share-qr-code
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]
[utils.image-server :as image-server] [utils.image-server :as image-server]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(def descriptor (def descriptor
[{:label "URL" [{:key :url :type :text}
:key :url {:key :link-title :type :text}])
:type :text}
{:label "Link title"
:key :link-title
:type :text}])
(defn preview-share-qr-code (defn view
[] []
(let [state (reagent/atom {:info-button? true (let [state (reagent/atom {:info-button? true
:link-title "Link to profile" :link-title "Link to profile"
@ -26,22 +21,13 @@
:qr-size 300 :qr-size 300
:error-level :highest})] :error-level :highest})]
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view {:style {:padding-bottom 150}} :component-container-style {:padding-vertical 20}}
[rn/view {:style {:flex 1}}] [quo/share-qr-code
[rn/view {:qr-image-uri qr-media-server-uri
{:style {:padding-vertical 60 :link-title (:link-title @state)
:justify-content :center}} :url-on-press #(js/alert "url pressed")
[preview/blur-view :url-on-long-press #(js/alert "url long pressed")
{:show-blur-background? true :share-on-press #(js/alert "share pressed")
:height 600 :qr-url (:url @state)}]]))))
:blur-view-props {:padding-top 20
:padding-horizontal 20}}
[quo/share-qr-code
{:qr-image-uri qr-media-server-uri
:link-title (:link-title @state)
:url-on-press #(js/alert "url pressed")
:url-on-long-press #(js/alert "url long pressed")
:share-on-press #(js/alert "share pressed")
:qr-url (:url @state)}]]]]]))))