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

This commit is contained in:
Mohsen 2023-09-28 15:26:15 +03:00 committed by GitHub
parent 0522120c66
commit ba57ab9ae4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 104 deletions

View File

@ -256,11 +256,9 @@
{:name :title-input {:name :title-input
:component title-input/view}] :component title-input/view}]
:numbered-keyboard [{:name :keyboard-key :numbered-keyboard [{:name :keyboard-key
:options {:insets {:top? true}} :component keyboard-key/view}
:component keyboard-key/preview-keyboard-key}
{:name :numbered-keyboard {:name :numbered-keyboard
:options {:insets {:top? true}} :component numbered-keyboard/view}]
:component numbered-keyboard/preview-numbered-keyboard}]
:links [{:name :url-preview :links [{:name :url-preview
:options {:insets {:top? true}} :options {:insets {:top? true}}
:component url-preview/view} :component url-preview/view}
@ -316,9 +314,9 @@
{:name :notification {:name :notification
:component notification/view}] :component notification/view}]
:onboarding [{:name :small-option-card :onboarding [{:name :small-option-card
:component small-option-card/preview-small-option-card}] :component small-option-card/view}]
:password [{:name :tips :password [{:name :tips
:component tips/preview-tips}] :component tips/view}]
:profile [{:name :profile-card :profile [{:name :profile-card
:component profile-card/preview-profile-card} :component profile-card/preview-profile-card}
{:name :collectible {:name :collectible

View File

@ -1,27 +1,18 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key (ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[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 "Blur:" [{:key :blur? :type :boolean}
:key :blur? {:key :disabled? :type :boolean}
:type :boolean} {:type :select
{:label "Disable:"
:key :disabled?
:type :boolean}
{:label "Type"
:type :select
:key :type :key :type
:options [{:key :digit :options [{:key :digit}
:value "Digit"} {:key :key}
{:key :key {:key :derivation-path}]}])
:value "Key"}
{:key :derivation-path
:value "Derivation Path"}]}])
(defn preview-keyboard-key (defn view
[] []
(let [state (reagent/atom {:disabled? false (let [state (reagent/atom {:disabled? false
:on-press #(js/alert "pressed" %) :on-press #(js/alert "pressed" %)
@ -34,14 +25,8 @@
:digit 1 :digit 1
nil)] nil)]
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[preview/blur-view :blur? (:blur? @state)
{:style {:flex 1 :show-blur-background? (:blur? @state)}
:align-self :center [quo/keyboard-key @state value]]))))
: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]]]))))

View File

@ -1,49 +1,30 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard (ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]))
[react-native.blur :as blur]))
(def descriptor (def descriptor
[{:label "Blur:" [{:key :blur? :type :boolean}
:key :blur? {:key :disabled? :type :boolean}
:type :boolean} {:key :delete-key? :type :boolean}
{:label "Disable:" {:type :select
:key :disabled?
:type :boolean}
{:label "Delete Key:"
:key :delete-key?
:type :boolean}
{:label "Left Action:"
:type :select
:key :left-action :key :left-action
:options [{:key :dot :options [{:key :dot}
:value "Dot"} {:key :face-id}
{:key :face-id {:key :none}]}])
:value "Face ID"}
{:key :none
:value "None"}]}])
(defn preview-numbered-keyboard (defn view
[] []
(let [state (reagent/atom {:disabled? false (let [state (reagent/atom {:disabled? false
:on-press (fn [item] (js/alert (str item " pressed"))) :on-press (fn [item] (js/alert (str item " pressed")))
:blur? false :blur? false
:delete-key? true :delete-key? true
:left-action :dot}) :left-action :dot})]
blur? (reagent/cursor state [:blur?])]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
(when @blur? :blur? (:blur? @state)
[blur/view :show-blur-background? (:blur? @state)
{:style {:position :absolute :blur-height 300}
:left 0
:right 0
:bottom 0
:height 220
:background-color colors/neutral-80-opa-70}
:overlay-color :transparent}])
[quo/numbered-keyboard @state]]))) [quo/numbered-keyboard @state]])))

View File

@ -1,35 +1,26 @@
(ns status-im2.contexts.quo-preview.onboarding.small-option-card (ns status-im2.contexts.quo-preview.onboarding.small-option-card
(:require (:require
[quo.react-native :as rn] [quo2.core :as quo]
[quo2.components.onboarding.small-option-card.view :as quo2]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Variant" [{:key :variant
:key :variant
:type :select :type :select
:options [{:key :main :options [{:key :main}
:value "Main"} {:key :icon}]}
{:key :icon {:key :image
:value "Icon"}]}
{:label "Image"
:key :image
:type :select :type :select
:options [{:key (resources/get-mock-image :small-opt-card-main) :options [{:key (resources/get-mock-image :small-opt-card-main)
:value "Image 1"} :value "Image 1"}
{:key (resources/get-mock-image :small-opt-card-icon) {:key (resources/get-mock-image :small-opt-card-icon)
:value "Image 2"}]} :value "Image 2"}]}
{:label "Title" {:key :title :type :text}
:key :title {:key :subtitle :type :text}])
:type :text}
{:label "Subtitle"
:key :subtitle
:type :text}])
(defn preview-small-option-card (defn view
[] []
(let [state (reagent/atom {:variant :main (let [state (reagent/atom {:variant :main
:image (-> descriptor second :options first :key) :image (-> descriptor second :options first :key)
@ -38,10 +29,8 @@
:on-press #(js/alert "Small option card pressed!")})] :on-press #(js/alert "Small option card pressed!")})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view {:style {:padding-bottom 150}} :component-container-style {:padding 20
[rn/view :background-color colors/neutral-80}}
{:style {:background-color colors/neutral-80 [quo/small-option-card @state]])))
:padding 20}}
[quo2/small-option-card @state]]]])))

View File

@ -1,19 +1,14 @@
(ns status-im2.contexts.quo-preview.password.tips (ns status-im2.contexts.quo-preview.password.tips
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [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 "Text" [{:key :text :type :text}
:key :text {:key :completed? :type :boolean}])
:type :text}
{:label "Completed"
:key :completed?
:type :boolean}])
(defn preview-tips (defn view
[] []
(let [state (reagent/atom {:text "Lower case" (let [state (reagent/atom {:text "Lower case"
:completed? false}) :completed? false})
@ -21,8 +16,8 @@
completed? (reagent/cursor state [:completed?])] completed? (reagent/cursor state [:completed?])]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
[rn/view {:padding-bottom 150} :component-container-style {:padding 20
[rn/view {:padding 60 :background-color colors/neutral-95} :background-color colors/neutral-95}}
[quo/tips {:completed? @completed?} @text]]]]))) [quo/tips {:completed? @completed?} @text]])))