Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#17288] refactor: migrate previews to new api #17420

Merged
merged 1 commit into from
Sep 28, 2023
Merged

[#17288] refactor: migrate previews to new api #17420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions src/status_im2/contexts/quo_preview/main.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,11 +256,9 @@
{:name :title-input
:component title-input/view}]
:numbered-keyboard [{:name :keyboard-key
:options {:insets {:top? true}}
:component keyboard-key/preview-keyboard-key}
:component keyboard-key/view}
{:name :numbered-keyboard
:options {:insets {:top? true}}
:component numbered-keyboard/preview-numbered-keyboard}]
:component numbered-keyboard/view}]
:links [{:name :url-preview
:options {:insets {:top? true}}
:component url-preview/view}
Expand Down Expand Up @@ -316,9 +314,9 @@
{:name :notification
:component notification/view}]
:onboarding [{:name :small-option-card
:component small-option-card/preview-small-option-card}]
:component small-option-card/view}]
:password [{:name :tips
:component tips/preview-tips}]
:component tips/view}]
:profile [{:name :profile-card
:component profile-card/preview-profile-card}
{:name :collectible
Expand Down
39 changes: 12 additions & 27 deletions src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,18 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Blur:"
:key :blur?
:type :boolean}
{:label "Disable:"
:key :disabled?
:type :boolean}
{:label "Type"
:type :select
[{:key :blur? :type :boolean}
{:key :disabled? :type :boolean}
{:type :select
:key :type
:options [{:key :digit
:value "Digit"}
{:key :key
:value "Key"}
{:key :derivation-path
:value "Derivation Path"}]}])
:options [{:key :digit}
{:key :key}
{:key :derivation-path}]}])

(defn preview-keyboard-key
(defn view
[]
(let [state (reagent/atom {:disabled? false
:on-press #(js/alert "pressed" %)
Expand All @@ -34,14 +25,8 @@
:digit 1
nil)]
[preview/preview-container
{:state state
:descriptor descriptor}
[preview/blur-view
{:style {:flex 1
:align-self :center
:justify-self :center
:margin-horizontal 20}
:show-blur-background? (:blur? @state)
:blur-view-props (when (:blur? @state)
{:overlay-color colors/neutral-80-opa-80})}
[quo/keyboard-key @state value]]]))))
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? (:blur? @state)}
[quo/keyboard-key @state value]]))))
49 changes: 15 additions & 34 deletions src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,30 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[react-native.blur :as blur]))
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Blur:"
:key :blur?
:type :boolean}
{:label "Disable:"
:key :disabled?
:type :boolean}
{:label "Delete Key:"
:key :delete-key?
:type :boolean}
{:label "Left Action:"
:type :select
[{:key :blur? :type :boolean}
{:key :disabled? :type :boolean}
{:key :delete-key? :type :boolean}
{:type :select
:key :left-action
:options [{:key :dot
:value "Dot"}
{:key :face-id
:value "Face ID"}
{:key :none
:value "None"}]}])
:options [{:key :dot}
{:key :face-id}
{:key :none}]}])

(defn preview-numbered-keyboard
(defn view
[]
(let [state (reagent/atom {:disabled? false
:on-press (fn [item] (js/alert (str item " pressed")))
:blur? false
:delete-key? true
:left-action :dot})
blur? (reagent/cursor state [:blur?])]
:left-action :dot})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
(when @blur?
[blur/view
{:style {:position :absolute
:left 0
:right 0
:bottom 0
:height 220
:background-color colors/neutral-80-opa-70}
:overlay-color :transparent}])
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? (:blur? @state)
:blur-height 300}
[quo/numbered-keyboard @state]])))
37 changes: 13 additions & 24 deletions src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,26 @@
(ns status-im2.contexts.quo-preview.onboarding.small-option-card
(:require
[quo.react-native :as rn]
[quo2.components.onboarding.small-option-card.view :as quo2]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Variant"
:key :variant
[{:key :variant
:type :select
:options [{:key :main
:value "Main"}
{:key :icon
:value "Icon"}]}
{:label "Image"
:key :image
:options [{:key :main}
{:key :icon}]}
{:key :image
:type :select
:options [{:key (resources/get-mock-image :small-opt-card-main)
:value "Image 1"}
{:key (resources/get-mock-image :small-opt-card-icon)
:value "Image 2"}]}
{:label "Title"
:key :title
:type :text}
{:label "Subtitle"
:key :subtitle
:type :text}])
{:key :title :type :text}
{:key :subtitle :type :text}])

(defn preview-small-option-card
(defn view
[]
(let [state (reagent/atom {:variant :main
:image (-> descriptor second :options first :key)
Expand All @@ -38,10 +29,8 @@
:on-press #(js/alert "Small option card pressed!")})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-bottom 150}}
[rn/view
{:style {:background-color colors/neutral-80
:padding 20}}
[quo2/small-option-card @state]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding 20
:background-color colors/neutral-80}}
[quo/small-option-card @state]])))
21 changes: 8 additions & 13 deletions src/status_im2/contexts/quo_preview/password/tips.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,23 @@
(ns status-im2.contexts.quo-preview.password.tips
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Text"
:key :text
:type :text}
{:label "Completed"
:key :completed?
:type :boolean}])
[{:key :text :type :text}
{:key :completed? :type :boolean}])

(defn preview-tips
(defn view
[]
(let [state (reagent/atom {:text "Lower case"
:completed? false})
text (reagent/cursor state [:text])
completed? (reagent/cursor state [:completed?])]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:padding 60 :background-color colors/neutral-95}
[quo/tips {:completed? @completed?} @text]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding 20
:background-color colors/neutral-95}}
[quo/tips {:completed? @completed?} @text]])))