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
:component react/preview-react}]
:settings [{:name :privacy-option
:component privacy-option/preview-options}
:component privacy-option/view}
{:name :accounts
:component accounts/preview-accounts}
:component accounts/view}
{:name :settings-item
:component settings-item/preview}
:component settings-item/view}
{:name :reorder-item
:component reorder-item/preview-reorder-item}
:component reorder-item/view}
{:name :category
:component category/preview}
:component category/view}
{:name :data-item
:component data-item/preview-data-item}
:component data-item/view}
{:name :section-label
:component section-label/preview}]
:component section-label/view}]
:share [{:name :qr-code
:component qr-code/preview}
:component qr-code/view}
{:name :share-qr-code
:component share-qr-code/preview-share-qr-code}]
:component share-qr-code/view}]
:switchers [{:name :group-messaging-card
:component group-messaging-card/view}
{: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
(:require [clojure.string :as string]
[quo2.components.settings.accounts.view :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Custom color"
:key :customization-color
:type :select
: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}])
[(preview/customization-color-option)
{:key :account-name :type :text}
{:key :account-address :type :text}])
(defn preview-accounts
(defn view
[]
(let [state (reagent/atom {:customization-color :blue
:account-name "Booze for Dubai"
@ -30,12 +18,8 @@
(js/alert "Menu button pressed"))})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 100
:align-items :center
:background-color (colors/theme-colors
colors/neutral-30
colors/neutral-95)}
[quo/account @state]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 100
:align-items :center}}
[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]))
(defn create-item-array
[n {:keys [right-icon? image? subtitle? list-type]}]
[n]
(vec
(for [i (range n)]
{:title (str "Item " i)
:subtitle (when subtitle? "subtitle")
:subtitle "subtitle"
:action :arrow
:right-icon (when right-icon? :i/globe)
:image (if (= list-type :settings) :icon (when image? (resources/get-mock-image :diamond)))
:right-icon :i/globe
:image (resources/get-mock-image :diamond)
:image-props :i/browser
:image-size (if image? 32 0)})))
:image-size 32})))
(def reorder-descriptor
[{:label "Right icon:"
:key :right-icon?
: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
(def descriptor
[{:key :blur? :type :boolean}
{:key :list-type
:type :select
:options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}])
(def settings-descriptor
[{: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
(defn view
[]
(let [state (reagent/atom {:label "Label"
:size "5"
:blur? false
:right-icon? true
:image? true
:subtitle? true
:list-type :settings})]
(let [state (reagent/atom {:label "Label"
:blur? false
:list-type :settings})]
(fn []
(let [data (reagent/atom (create-item-array (max (js/parseInt (:size @state)) 1) @state))]
(let [data (create-item-array 5)]
[preview/preview-container
{:state state
:descriptor (if (= (:list-type @state) :settings)
settings-descriptor
reorder-descriptor)
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true
@ -67,5 +40,5 @@
[quo/category
{:list-type (:list-type @state)
:label (:label @state)
:data @data
:data data
: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]))
(def descriptor
[{:label "Blur:"
:key :blur?
:type :boolean}
{:label "Card:"
:key :card?
:type :boolean}
{:label "Icon Right:"
:key :icon-right?
:type :boolean}
{:label "Label:"
:type :select
[{:key :blur? :type :boolean}
{:key :card? :type :boolean}
{:key :icon-right? :type :boolean}
{:type :select
:key :label
:options [{:key :none
:value "None"}
{:key :graph
:value "Graph"}
{:key :preview
:value "Preview"}]}
{:label "Description:"
:type :select
:options [{:key :none}
{:key :graph}
{:key :preview}]}
{:type :select
:key :description
:options [{:key :default
:value "Default"}
{:key :icon
:value "Icon"}
{:key :network
:value "Network"}
{:key :account
:value "Account"}]}
{:label "Status:"
:type :select
:options [{:key :default}
{:key :icon}
{:key :network}
{:key :account}]}
{:type :select
:key :status
:options [{:key :default
:value "Default"}
{:key :loading
:value "Loading"}]}
{:label "Size:"
:type :select
:options [{:key :default}
{:key :loading}]}
{:type :select
:key :size
:options [{:key :default
:value "Default"}
{:key :small
:value "Small"}]}])
:options [{:key :default}
{:key :small}]}])
(def communities-list
[{:source (resources/get-mock-image :coinbase)}
{:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}])
(defn preview-data-item
(defn view
[]
(let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
: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]))
(def descriptor
[{:label "Header:"
:key :header
:type :text}
{:label "Footer:"
:key :footer
:type :text}
[{:key :header :type :text}
{:key :footer :type :text}
{:label "Line 1:"
:key :li1
:type :text}
@ -21,7 +17,7 @@
:key :li3
:type :text}])
(defn preview-options
(defn view
[]
(let [state (reagent/atom {:selected :contacts
: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
(:require
[quo2.core :as quo]
[react-native.core :as rn]
[status-im2.common.resources :as 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]))
(def mock-data
@ -77,19 +76,9 @@
:on-change (fn [tab-id] (println tab-id))
:default-active 1}}])
(defn container
(defn view
[]
{:padding-horizontal 38
:padding-vertical 20
:background-color (colors/theme-colors
colors/neutral-10
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)])])
(fn []
[preview/preview-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?
:type :boolean}])
(defn preview
(defn view
[]
(let [state (reagent/atom {:section "Section label"
: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
(:require
[quo2.core :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]))
@ -100,7 +99,7 @@
:context "Context"}
nil)}))
(defn preview
(defn view
[]
(let [state (reagent/atom {:title "Account"
:accessibility-label :settings-item
@ -115,5 +114,4 @@
:blur? (:blur? @state)
:show-blur-background? 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}
(preview/customization-color-option)])
(defn preview
(defn view
[]
(let [media-server-port (rf/sub [:mediaserver/port])
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
(:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[utils.image-server :as image-server]
[utils.re-frame :as rf]))
(def descriptor
[{:label "URL"
:key :url
:type :text}
{:label "Link title"
:key :link-title
:type :text}])
[{:key :url :type :text}
{:key :link-title :type :text}])
(defn preview-share-qr-code
(defn view
[]
(let [state (reagent/atom {:info-button? true
:link-title "Link to profile"
@ -26,22 +21,13 @@
:qr-size 300
:error-level :highest})]
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}]
[rn/view
{:style {:padding-vertical 60
:justify-content :center}}
[preview/blur-view
{:show-blur-background? true
:height 600
: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)}]]]]]))))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 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)}]]))))