From 4892cb01d78720ddb7af936804e6b7450b60b447 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Tue, 26 Sep 2023 16:39:59 +0300 Subject: [PATCH] [#17288] refactor: migrate previews to new api --- src/status_im2/contexts/quo_preview/main.cljs | 10 ++-- .../numbered_keyboard/keyboard_key.cljs | 39 +++++---------- .../numbered_keyboard/numbered_keyboard.cljs | 49 ++++++------------- .../onboarding/small_option_card.cljs | 37 +++++--------- .../contexts/quo_preview/password/tips.cljs | 21 +++----- 5 files changed, 52 insertions(+), 104 deletions(-) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index f8817325c0b..334512a837f 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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} @@ -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 diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs index ad77ab24edb..8b4e5533729 100644 --- a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs +++ b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs @@ -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" %) @@ -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]])))) diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs index 4197dbade4b..71dc064891d 100644 --- a/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs +++ b/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs @@ -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]]))) diff --git a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs index 9865831db1b..a99f2fff8af 100644 --- a/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs +++ b/src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs @@ -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) @@ -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]]))) diff --git a/src/status_im2/contexts/quo_preview/password/tips.cljs b/src/status_im2/contexts/quo_preview/password/tips.cljs index 0088a690fa4..2eeff88ea77 100644 --- a/src/status_im2/contexts/quo_preview/password/tips.cljs +++ b/src/status_im2/contexts/quo_preview/password/tips.cljs @@ -1,19 +1,14 @@ (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}) @@ -21,8 +16,8 @@ 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]])))