Skip to content

Commit

Permalink
[#17288] refactor: migrate previews to new api (#17420)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohsen-ghafouri
mohsen-ghafouri authored Sep 28, 2023
1 parent 0522120 commit ba57ab9
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 104 deletions.
10 changes: 4 additions & 6 deletions src/status_im2/contexts/quo_preview/main.cljs
View file
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
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
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
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
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]])))

0 comments on commit ba57ab9

Please sign in to comment.