status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: toast component based on review (#14593)

This commit is contained in:
yqrashawn 2022-12-21 14:46:57 +08:00 committed by GitHub
parent 0a8993bbf1
commit 388e5fae22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/components/notifications/toast.cljs
View File

@ -45,7 +45,7 @@
[count-down-circle/circle-timer {:duration duration}]]
[text/text
{:size :paragraph-2 :weight :medium :style (merge-theme-style :text {})}
[i18n/label :undo]]])
[i18n/label :t/undo]]])
(defn- toast-container
[{:keys [left middle right]}]

52
src/status_im2/common/toasts/events.cljs
View File

@ -1,22 +1,17 @@
(ns status-im2.common.toasts.events
(:require [taoensso.encore :as enc]
[utils.re-frame :as rf]))
(def ^:private next-toast-id (atom 0))
(:require [utils.re-frame :as rf]))
(rf/defn upsert
{:events [:toasts/upsert]}
[{:keys [db]} id opts]
(let [{:toasts/keys [index toasts]} db
update? (some #{id} index)
index (enc/conj-when index (and (not update?) id))
toasts (assoc toasts id opts)
db (-> db
(assoc
:toasts/index index
:toasts/toasts toasts)
(dissoc :toasts/hide-toasts-timer-set))]
(if (and (not update?) (= (count index) 1))
(let [{:keys [ordered toasts]} (:toasts db)
update? (some #(= % id) ordered)
ordered (if (not update?) (conj ordered id) ordered)
toasts (assoc toasts id opts)
db (-> db
(update :toasts assoc :ordered ordered :toasts toasts)
(update :toasts dissoc :hide-toasts-timer-set))]
(if (and (not update?) (= (count ordered) 1))
{:show-toasts []
:db db}
{:db db})))
@ -24,24 +19,29 @@
(rf/defn create
{:events [:toasts/create]}
[{:keys [db]} opts]
{:dispatch [:toasts/upsert (str "toast-" (swap! next-toast-id inc)) opts]})
(let [next-toast-id (or (get-in [:toasts :next-toast-id] db) 1)]
{:db (assoc-in db [:toasts :next-toast-id] (inc next-toast-id))
:dispatch [:toasts/upsert (str "toast-" next-toast-id) opts]}))
(rf/defn hide-toasts-with-check
{:events [:toasts/hide-with-check]}
[{:keys [db]}]
(when (:toasts/hide-toasts-timer-set db)
{:db (dissoc db :toasts/hide-toasts-timer-set)
(when (get-in db [:toasts :hide-toasts-timer-set])
{:db (update db :toasts dissoc :hide-toasts-timer-set)
:hide-toasts nil}))
(rf/defn close
{:events [:toasts/close]}
[{:keys [db]} id]
(when (get-in db [:toasts/toasts id])
(let [{:toasts/keys [toasts index]} db
toasts (dissoc toasts id)
index (remove #{id} index)
empty-index? (not (seq index))
db (assoc db :toasts/index index :toasts/toasts toasts)]
(cond-> {:db db}
empty-index? (update :db assoc :toasts/hide-toasts-timer-set true)
empty-index? (assoc :dispatch-later [{:ms 500 :dispatch [:toasts/hide-with-check]}])))))
(when (get-in db [:toasts :toasts id])
(let [{:keys [toasts ordered]} (:toasts db)
toasts (dissoc toasts id)
ordered (remove #(= % id) ordered)
empty-ordered? (not (seq ordered))
db (update db :toasts assoc :ordered ordered :toasts toasts)
effect {:db db}]
(if empty-ordered?
(-> effect
(update-in [:db :toasts] assoc :hide-toasts-timer-set true)
(assoc :dispatch-later [{:ms 500 :dispatch [:toasts/hide-with-check]}]))
effect))))

14
src/status_im2/common/toasts/style.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im2.common.toasts.style)
(def outmost-transparent-container
{:elevation 2
:pointer-events :box-none
:padding-top 52
:flex-direction :column
:justify-content :center
:align-items :center
:background-color :transparent})
(def each-toast-container
{:width "100%"
:margin-bottom 5})

28
src/status_im2/common/toasts/view.cljs
View File

@ -1,26 +1,27 @@
(ns status-im2.common.toasts.view
(:require [quo2.core :as quo2]
(:require [quo2.core :as quo]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[status-im.utils.utils :as utils.utils]
[status-im2.common.toasts.style :as style]
[utils.re-frame :as rf]))
(def ^:private slide-out-up-animation
(-> reanimated/slide-out-up-animation
(-> ^js reanimated/slide-out-up-animation
.springify
(.damping 20)
(.stiffness 300)))
(def ^:private slide-in-up-animation
(-> reanimated/slide-in-up-animation
(-> ^js reanimated/slide-in-up-animation
.springify
(.damping 20)
(.stiffness 300)))
(def ^:private linear-transition
(-> reanimated/linear-transition
(-> ^js reanimated/linear-transition
.springify
(.damping 20)
(.stiffness 300)))
@ -47,7 +48,7 @@
;; remove timer on pan start
(gesture/on-start clear-timer)
(gesture/on-update
(fn [evt]
(fn [^js evt]
(let [evt-translation-y (.-translationY evt)]
(cond
;; reset translate y on pan down
@ -82,22 +83,15 @@
:layout reanimated/linear-transition
:style (reanimated/apply-animations-to-style
{:transform [{:translateY translate-y}]}
{:width "100%"
:margin-bottom 5})}
[quo2/toast toast-opts]]]))])))
style/each-toast-container)}
[quo/toast toast-opts]]]))])))
(defn toasts
[]
(let [toasts-index (rf/sub [:toasts/index])]
(let [toasts-ordered (:ordered (rf/sub [:toasts]))]
[into
[rn/view
{:style {:elevation 2
:pointer-events :box-none
:padding-top 52
:flex-direction :column
:justify-content :center
:align-items :center
:background-color :transparent}}]
(->> toasts-index
{:style style/outmost-transparent-container}]
(->> toasts-ordered
reverse
(map (fn [id] ^{:key id} [container id])))]))

3
src/status_im2/subs/root.cljs
View File

@ -198,8 +198,7 @@
;;intro-wizard
(reg-root-key-sub :intro-wizard-state :intro-wizard)
(reg-root-key-sub :toasts/toasts :toasts/toasts)
(reg-root-key-sub :toasts/index :toasts/index)
(reg-root-key-sub :toasts :toasts)
(reg-root-key-sub :popover/popover :popover/popover)
(reg-root-key-sub :visibility-status-popover/popover :visibility-status-popover/popover)
(reg-root-key-sub :add-account :add-account)

4
src/status_im2/subs/toasts.cljs
View File

@ -3,6 +3,6 @@
(re-frame/reg-sub
:toasts/toast
:<- [:toasts/toasts]
:<- [:toasts]
(fn [toasts [_ toast-id]]
(get toasts toast-id)))
(get-in toasts [:toasts toast-id])))