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/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]]])))
[quo2/channel-avatar @state]]]])))
(defn preview-channel-avatar []
[rn/view {:background-color (colors/theme-colors colors/white

View File

@ -29,14 +29,14 @@
:color :purple
:size :small})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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]]])))
[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}
[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]]])))
[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/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]]])))
[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}
[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]]])))
[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,8 +59,8 @@
above (reagent/cursor state [:above])
icon (reagent/cursor state [:icon])]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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
@ -75,7 +75,7 @@
{:before :main-icons2/placeholder})
(when @after
{:after :main-icons2/placeholder}))
(if @icon :main-icons2/placeholder @label)]]])))
(if @icon :main-icons2/placeholder @label)]]]])))
(defn preview-button []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -36,7 +36,8 @@
(defn cool-preview []
(let [state (reagent/atom {:view-style :card-view})]
(fn []
[rn/view {:margin-bottom 50}
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1
:padding 16}
[preview/customizer state descriptor]]
@ -44,7 +45,7 @@
: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])]])))
[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}
[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)]]])))
[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}
[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]]])))
[divider-label/divider-label @state]]]])))
(defn preview-divider-label []
[rn/view {:background-color (colors/theme-colors

View File

@ -39,11 +39,11 @@
(let [state (reagent/atom {:label "New messages"
:color :primary})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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]]])))
[new-messages/new-messages @state]]]])))
(defn preview-new-messages []
[rn/view {:background-color (colors/theme-colors

View File

@ -31,12 +31,12 @@
:icon :main-icons2/placeholder
:message "This is a message"})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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)]]])))
[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}
[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)]]])))
[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/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]]])))
[quo2/lowest-price @state]]]])))
(defn preview-lowest-price []
[rn/view {:background-color (colors/theme-colors colors/white

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}
[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})]]])))
:items items})]]]])))
(defn preview-dropdown []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -48,15 +48,15 @@
:list-size 10})
type (reagent/cursor state [:type])]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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)]]])))
: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}
[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."]]])))
"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}
[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]]])))
[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}
[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)]]])))
[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}
[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]]])))
[quo2/account-selector @state]]]])))
(defn preview-this []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -16,8 +16,8 @@
(defn cool-preview []
(let [state (reagent/atom {:size 32})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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}
@ -33,7 +33,7 @@
{:default-active 1
:data [{:id 1 :label "Tab 1"}
{:id 2 :label "Tab 2"}]
:on-change #(println "Active tab" %)})]]])))
:on-change #(println "Active tab" %)})]]]])))
(defn preview-segmented []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -16,8 +16,8 @@
(defn cool-preview []
(let [state (reagent/atom {:size 32})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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
@ -29,7 +29,7 @@
{:id 2 :label "Tab 2"}
{:id 3 :label "Tab 3"}
{:id 4 :label "Tab 4"}]
:on-change #(println "Active tab" %)})]]])))
:on-change #(println "Active tab" %)})]]]])))
(defn preview-tabs []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)

View File

@ -58,8 +58,8 @@
:key :contact
:type :select
:options contacts-public-keys})))]
[rn/view {:margin-bottom 50
:padding 16}
[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
@ -71,7 +71,7 @@
:public-key
[quo2/public-key-tag {} example-pk]
:avatar
[quo2/user-avatar-tag {} current-username (:photo @state)])]]))))
[quo2/user-avatar-tag {} current-username (:photo @state)])]]]))))
(defn preview-context-tags []
[rn/view {:background-color (colors/theme-colors colors/white

View File

@ -38,9 +38,9 @@
:labelled true
:type :emoji})]
(fn []
[rn/view {:margin-bottom 50
:padding 16
:padding-vertical 60}
[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
@ -74,7 +74,7 @@
{: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)}]})]]]])))
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]])))
(defn preview-filter-tags []
[rn/view {:flex 1
:background-color (colors/theme-colors

View File

@ -140,8 +140,8 @@
(defn cool-preview []
(let [state (reagent/atom {:size 32})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[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
@ -155,7 +155,7 @@
{:tokens tokens
:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)})]]))]])))
colors/neutral-80)})]]))]]])))
(defn preview-permission-tag []
[rn/view {:background-color (colors/theme-colors

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/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]]]))))
[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}
[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)})]]])))
[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)

View File

@ -36,7 +36,8 @@
(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}
[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
@ -44,7 +45,7 @@
[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))]]])))
[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)