dismiss keyboard inside quo2 screen on pressing outside (#14055)

also, fixes New component preview area isn't using the full width available (#13913)
This commit is contained in:
Parvesh Monu 2022-09-22 18:25:01 +05:30 committed by GitHub
parent e582ba4169
commit d707230b17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 275 additions and 272 deletions

View File

@ -146,7 +146,8 @@
[quo/text "↓"]]]]]))))
(defn customizer [state descriptors]
[rn/view {:style {:flex 1}}
[rn/view {:style {:flex 1}
:padding-horizontal 16}
(doall
(for [{:keys [key type]
:as desc} descriptors

View File

@ -28,14 +28,14 @@
:emoji "🍑"
:emoji-background-color :gray})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/channel-avatar @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/channel-avatar @state]]]])))
(defn preview-channel-avatar []
[rn/view {:background-color (colors/theme-colors colors/white
@ -44,4 +44,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -29,14 +29,14 @@
:color :purple
:size :small})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/group-avatar @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/group-avatar @state]]]])))
(defn preview-group-avatar []
[rn/view {:background-color (colors/theme-colors colors/white

View File

@ -37,12 +37,12 @@
:icon :main-icons/placeholder20
:color :primary})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/icon-avatar @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/icon-avatar @state]]]])))
(defn preview-icon-avatar []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -43,14 +43,14 @@
:size :medium
:ring? true})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/user-avatar @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/user-avatar @state]]]])))
(defn preview-user-avatar []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -37,11 +37,11 @@
:size :x-large
:color :indigo})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[quo2/wallet-user-avatar @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[quo2/wallet-user-avatar @state]]]])))
(defn preview-wallet-user-avatar []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -59,23 +59,23 @@
above (reagent/cursor state [:above])
icon (reagent/cursor state [:icon])]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/button (merge (dissoc @state
:theme :before :after)
{:on-press #(println "Hello world!")}
(when @above
{:above :main-icons2/placeholder})
(when @before
{:before :main-icons2/placeholder})
(when @after
{:after :main-icons2/placeholder}))
(if @icon :main-icons2/placeholder @label)]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/button (merge (dissoc @state
:theme :before :after)
{:on-press #(println "Hello world!")}
(when @above
{:above :main-icons2/placeholder})
(when @before
{:before :main-icons2/placeholder})
(when @after
{:after :main-icons2/placeholder}))
(if @icon :main-icons2/placeholder @label)]]]])))
(defn preview-button []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -36,15 +36,16 @@
(defn cool-preview []
(let [state (reagent/atom {:view-style :card-view})]
(fn []
[rn/view {:margin-bottom 50}
[rn/view {:flex 1
:padding 16}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:justify-content :center}
(if (= :card-view (:view-style @state))
[community-card-view/community-card-view-item community-data]
[community-list-view/communities-list-view-item community-data])]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1
:padding 16}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:justify-content :center}
(if (= :card-view (:view-style @state))
[community-card-view/community-card-view-item community-data]
[community-list-view/communities-list-view-item community-data])]]])))
(defn preview-community-card []
[rn/view {:background-color (colors/theme-colors colors/neutral-5
colors/neutral-95)

View File

@ -24,12 +24,12 @@
(defn cool-preview []
(let [state (reagent/atom {:value 5 :type :default})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/counter @state (:value @state)]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/counter @state (:value @state)]]]])))
(defn preview-counter []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -32,11 +32,11 @@
:increase-padding-top? true
:blur? false})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[divider-label/divider-label @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[divider-label/divider-label @state]]]])))
(defn preview-divider-label []
[rn/view {:background-color (colors/theme-colors
@ -46,4 +46,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -39,11 +39,11 @@
(let [state (reagent/atom {:label "New messages"
:color :primary})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[new-messages/new-messages @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[new-messages/new-messages @state]]]])))
(defn preview-new-messages []
[rn/view {:background-color (colors/theme-colors
@ -53,4 +53,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -31,12 +31,12 @@
:icon :main-icons2/placeholder
:message "This is a message"})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/info-message @state (:message @state)]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/info-message @state (:message @state)]]]])))
(defn preview-info-message []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -35,12 +35,12 @@
closed? (reagent/cursor state [:closed?])
on-close #(reset! closed? true)]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]]])))
(defn preview-information-box []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -35,14 +35,14 @@
:bottom-value-bg-color colors/black
:bottom-value-text-color colors/white})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/lowest-price @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/lowest-price @state]]]])))
(defn preview-lowest-price []
[rn/view {:background-color (colors/theme-colors colors/white
@ -51,4 +51,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -59,14 +59,14 @@
selected-item (reagent/cursor state [:default-item])
on-select #(reset! selected-item %)]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[text/text {:color :main} (str "Selected item: " @selected-item)]
[quo2/dropdown (merge @state {:on-select on-select
:items items})]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[text/text {:color :main} (str "Selected item: " @selected-item)]
[quo2/dropdown (merge @state {:on-select on-select
:items items})]]]])))
(defn preview-dropdown []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
@ -76,4 +76,4 @@
:nestedScrollEnabled true
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -48,15 +48,15 @@
:list-size 10})
type (reagent/cursor state [:type])]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/preview-list @state
(case @type
:user user-list
:photo photos-list)]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/preview-list @state
(case @type
:user user-list
:photo photos-list)]]]])))
(defn preview-preview-lists []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -33,12 +33,12 @@
(defn cool-preview []
(let [state (reagent/atom {})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[quo2/text @state
"The quick brown fox jumped over the lazy dog."]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[quo2/text @state
"The quick brown fox jumped over the lazy dog."]]]])))
(defn preview-text []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -28,13 +28,13 @@
(defn cool-preview []
(let [state (reagent/atom {:emoji :main-icons/love16})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2.reaction/reaction @state]
[quo2.reaction/open-reactions-menu @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2.reaction/reaction @state]
[quo2.reaction/open-reactions-menu @state]]]])))
(defn preview-react []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -131,12 +131,12 @@
:content-type :text
:last-message "This is fantastic! Ethereum"})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[switcher-cards/card (:type @state) (get-mock-data @state)]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[switcher-cards/card (:type @state) (get-mock-data @state)]]]])))
(defn preview-switcher-cards []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-100)

View File

@ -53,12 +53,12 @@
:account-emoji "🍑"
:label-text "Label"})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/account-selector @state]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/account-selector @state]]]])))
(defn preview-this []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -16,24 +16,24 @@
(defn cool-preview []
(let [state (reagent/atom {:size 32})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60}
[quo2/segmented-control (merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]]
[rn/view {:padding-vertical 60}
[quo2/segmented-control (merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}]
:on-change #(println "Active tab" %)})]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60}
[quo2/segmented-control (merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]]
[rn/view {:padding-vertical 60}
[quo2/segmented-control (merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}]
:on-change #(println "Active tab" %)})]]]])))
(defn preview-segmented []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
@ -41,4 +41,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -16,20 +16,20 @@
(defn cool-preview []
(let [state (reagent/atom {:size 32})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/tabs (merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/tabs (merge @state
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]]]])))
(defn preview-tabs []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
@ -37,4 +37,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -58,20 +58,20 @@
:key :contact
:type :select
:options contacts-public-keys})))]
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
(case (:type @state)
:group-avatar
[quo2/group-avatar-tag (:label @state) group-avatar-default-params]
:public-key
[quo2/public-key-tag {} example-pk]
:avatar
[quo2/user-avatar-tag {} current-username (:photo @state)])]]))))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
(case (:type @state)
:group-avatar
[quo2/group-avatar-tag (:label @state) group-avatar-default-params]
:public-key
[quo2/public-key-tag {} example-pk]
:avatar
[quo2/user-avatar-tag {} current-username (:photo @state)])]]]))))
(defn preview-context-tags []
[rn/view {:background-color (colors/theme-colors colors/white

View File

@ -38,43 +38,43 @@
:labelled true
:type :emoji})]
(fn []
[rn/view {:margin-bottom 50
:padding 16
:padding-vertical 60}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:flex 1
:justify-content :center
:top 60}
(when (:blurred @state)
[rn/view {:flex 1}
[react/view {:flex-direction :row
:height 100}
[react/image {:source (resources/get-image :community-cover)
:style {:flex 1
:height 100
:border-radius 16}}]]
[react/view {:flex-direction :row
:height 100
:position :absolute
:left 0
:right 0}
[react/blur-view {:flex 1
:style {:border-radius 16
:height 100}
:blur-amount 40
:overlay-color (colors/theme-colors
colors/white-opa-70
colors/neutral-80-opa-80)}]]])
[rn/scroll-view {:justify-content :center
:align-items :center
:position :absolute
:padding-horizontal 10}
[quo2.tags/tags (merge @state
{:default-active 1
:data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
{:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)}
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150
:padding-top 60}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:flex 1
:justify-content :center
:top 60}
(when (:blurred @state)
[rn/view {:flex 1}
[react/view {:flex-direction :row
:height 100}
[react/image {:source (resources/get-image :community-cover)
:style {:flex 1
:height 100
:border-radius 16}}]]
[react/view {:flex-direction :row
:height 100
:position :absolute
:left 0
:right 0}
[react/blur-view {:flex 1
:style {:border-radius 16
:height 100}
:blur-amount 40
:overlay-color (colors/theme-colors
colors/white-opa-70
colors/neutral-80-opa-80)}]]])
[rn/scroll-view {:justify-content :center
:align-items :center
:position :absolute
:padding-horizontal 10}
[quo2.tags/tags (merge @state
{:default-active 1
:data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
{:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)}
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]])))
(defn preview-filter-tags []
[rn/view {:flex 1
:background-color (colors/theme-colors
@ -83,4 +83,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -140,22 +140,22 @@
(defn cool-preview []
(let [state (reagent/atom {:size 32})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:justify-content :center}
(when @state
(for [{:keys [tokens]} community-tokens]
^{:key tokens}
[rn/view {:margin-top 20
:align-self :flex-end}
[permission-tag/tag (merge @state
{:tokens tokens
:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)})]]))]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:justify-content :center}
(when @state
(for [{:keys [tokens]} community-tokens]
^{:key tokens}
[rn/view {:margin-top 20
:align-self :flex-end}
[permission-tag/tag (merge @state
{:tokens tokens
:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)})]]))]]])))
(defn preview-permission-tag []
[rn/view {:background-color (colors/theme-colors
@ -165,4 +165,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -33,14 +33,14 @@
(= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive})
(= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative})
(= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))]
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/status-tag props]]]))))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/status-tag props]]]]))))
(defn preview-status-tags []
[rn/view {:background-color (colors/theme-colors colors/white

View File

@ -53,12 +53,12 @@
(defn cool-preview []
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]])))
(defn preview-token-tag []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
@ -66,4 +66,4 @@
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])
:key-fn str}]])

View File

@ -36,15 +36,16 @@
(defn cool-preview []
(let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})]
(fn []
[rn/view {:margin-bottom 50 :padding 16}
[preview/customizer state descriptor]
[rn/view {:border :black
:border-width 1
:align-items :center}
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
[rn/view {:padding-vertical 25
:align-items :center}]
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]])))
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:border :black
:border-width 1
:align-items :center}
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
[rn/view {:padding-vertical 25
:align-items :center}]
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]]])))
(defn preview-token-overview []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)