Skip to content

Commit

Permalink
functional-compiler fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@flexsurfer
flexsurfer committed Feb 25, 2024
1 parent ac7c6fd commit 623545c
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 172 deletions.
18 changes: 11 additions & 7 deletions src/quo/components/buttons/button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,20 @@
:theme theme
:pressed? (if pressed? pressed? pressed-state?)
:icon-only? icon-only?})
icon-size (when (= 24 size) 12)]
icon-size (when (= 24 size) 12)
on-press-in-cb (rn/use-callback
(fn []
(set-pressed-state true)
(when on-press-in (on-press-in))))
on-press-out-cb (rn/use-callback
(fn []
(set-pressed-state nil)
(when on-press-out (on-press-out))))]
[rn/touchable-without-feedback
{:disabled disabled?
:accessibility-label accessibility-label
:on-press-in (fn []
(set-pressed-state true)
(when on-press-in (on-press-in)))
:on-press-out (fn []
(set-pressed-state nil)
(when on-press-out (on-press-out)))
:on-press-in on-press-in-cb
:on-press-out on-press-out-cb
:on-press on-press
:allow-multiple-presses? allow-multiple-presses?
:on-long-press on-long-press}
Expand Down
32 changes: 15 additions & 17 deletions src/quo/components/buttons/logout_button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,22 @@
[utils.i18n :as i18n]))

(defn view
[_]
[{:keys [on-press on-long-press disabled? container-style]}]
(let [theme (quo.theme/use-theme-value)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed nil))]
(fn
[{:keys [on-press on-long-press disabled? container-style]}]
[rn/pressable
{:accessibility-label :log-out-button
:on-press on-press
:on-press-in on-press-in
:on-press-out on-press-out
:on-long-press on-long-press
:disabled disabled?
:style (merge (style/main {:pressed? pressed?
:theme theme
:disabled? disabled?})
container-style)}
[icon/icon :i/log-out {:color (if pressed? colors/white-opa-40 colors/white-opa-70)}]
[text/text {:weight :medium :size :paragraph-1}
(i18n/label :t/logout)]])))
[rn/pressable
{:accessibility-label :log-out-button
:on-press on-press
:on-press-in on-press-in
:on-press-out on-press-out
:on-long-press on-long-press
:disabled disabled?
:style (merge (style/main {:pressed? pressed?
:theme theme
:disabled? disabled?})
container-style)}
[icon/icon :i/log-out {:color (if pressed? colors/white-opa-40 colors/white-opa-70)}]
[text/text {:weight :medium :size :paragraph-1}
(i18n/label :t/logout)]]))
34 changes: 1 addition & 33 deletions src/quo/components/buttons/slide_button/animations.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
(ns quo.components.buttons.slide-button.animations
(:require
[oops.core :as oops]
[quo.components.buttons.slide-button.utils :as utils]
[react-native.gesture :as gesture]
[react-native.reanimated :as reanimated]))
(:require [react-native.reanimated :as reanimated]))

(def ^:private extrapolation
{:extrapolateLeft "clamp"
Expand Down Expand Up @@ -69,31 +65,3 @@
(defn reset-track-position
[x-pos]
(animate-spring x-pos 0))

;; Gestures
(defn drag-gesture
[x-pos
gestures-disabled?
set-gestures-disabled
disabled?
track-width
sliding-complete?
set-sliding-complete]
(let [gestures-enabled? (not (or disabled? gestures-disabled?))]
(-> (gesture/gesture-pan)
(gesture/with-test-ID :slide-button-gestures)
(gesture/enabled gestures-enabled?)
(gesture/min-distance 0)
(gesture/on-update (fn [event]
(let [x-translation (oops/oget event "translationX")
clamped-x (utils/clamp-value x-translation 0 track-width)
reached-end? (>= clamped-x track-width)]
(reanimated/set-shared-value x-pos clamped-x)
(when (and reached-end? (not sliding-complete?))
(set-gestures-disabled true)
(set-sliding-complete true)))))
(gesture/on-end (fn [event]
(let [x-translation (oops/oget event "translationX")
reached-end? (>= x-translation track-width)]
(when (not reached-end?)
(reset-track-position x-pos))))))))
91 changes: 62 additions & 29 deletions src/quo/components/buttons/slide_button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,35 @@
[react-native.gesture :as gesture]
[react-native.reanimated :as reanimated]))

(defn drag-gesture
[x-pos
gestures-disabled?
set-gestures-disabled
disabled?
track-width
sliding-complete?
set-sliding-complete
on-complete]
(let [gestures-enabled? (not (or disabled? gestures-disabled?))]
(-> (gesture/gesture-pan)
(gesture/with-test-ID :slide-button-gestures)
(gesture/enabled gestures-enabled?)
(gesture/min-distance 0)
(gesture/on-update (fn [event]
(let [x-translation (oops/oget event "translationX")
clamped-x (utils/clamp-value x-translation 0 track-width)
reached-end? (>= clamped-x track-width)]
(reanimated/set-shared-value x-pos clamped-x)
(when (and reached-end? (not sliding-complete?))
(set-gestures-disabled true)
(set-sliding-complete true)
(when on-complete (on-complete))))))
(gesture/on-end (fn [event]
(let [x-translation (oops/oget event "translationX")
reached-end? (>= x-translation track-width)]
(when (not reached-end?)
(animations/reset-track-position x-pos))))))))

(defn view
"Options
- `on-complete` Callback called when the sliding is complete
Expand All @@ -27,37 +56,41 @@
"
[{:keys [on-reset on-complete track-text track-icon disabled? customization-color size
container-style type blur?]}]
(let [theme (quo.theme/use-theme-value)
[track-width set-track-width] (rn/use-state nil)
[sliding-complete? set-sliding-complete] (rn/use-state false)
[gestures-disabled? set-gestures-disabled] (rn/use-state disabled?)
on-track-layout (rn/use-callback
(fn [evt]
(when-not (some? track-width)
(let [width (oops/oget
evt
"nativeEvent.layout.width")]
(set-track-width width))))
[track-width])
x-pos (reanimated/use-shared-value 0)
dimensions (partial utils/get-dimensions
(or track-width constants/default-width)
size)
interpolate-track (partial animations/interpolate-track
x-pos
(dimensions :usable-track)
(dimensions :thumb))
custom-color (if (= type :danger) :danger customization-color)
gesture (animations/drag-gesture x-pos
gestures-disabled?
set-gestures-disabled
disabled?
(dimensions :usable-track)
sliding-complete?
set-sliding-complete)]
(rn/use-effect #(when sliding-complete? (on-complete)) [sliding-complete?])
(let [theme (quo.theme/use-theme-value)
[track-width set-track-width] (rn/use-state nil)
[sliding-complete?
set-sliding-complete] (rn/use-state false)
[gestures-disabled?
set-gestures-disabled] (rn/use-state disabled?)
on-track-layout (rn/use-callback
(fn [evt]
(when-not (some? track-width)
(let [width (oops/oget
evt
"nativeEvent.layout.width")]
(set-track-width width))))
[track-width])
x-pos (reanimated/use-shared-value 0)
dimensions (partial utils/get-dimensions
(or track-width constants/default-width)
size)
interpolate-track (partial animations/interpolate-track
x-pos
(dimensions :usable-track)
(dimensions :thumb))
custom-color (if (= type :danger) :danger customization-color)
gesture (drag-gesture x-pos
gestures-disabled?
set-gestures-disabled
disabled?
(dimensions :usable-track)
sliding-complete?
set-sliding-complete
on-complete)]
(rn/use-effect (fn []
(println "ON RESET")
(when on-reset
(println "ON RESET 2")
(set-sliding-complete false)
(set-gestures-disabled false)
(animations/reset-track-position x-pos)
Expand Down
153 changes: 73 additions & 80 deletions src/status_im/common/bottom_sheet/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
[react-native.gesture :as gesture]
[react-native.hooks :as hooks]
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[status-im.common.bottom-sheet.style :as style]
[utils.re-frame :as rf]))

Expand Down Expand Up @@ -57,83 +56,77 @@
(show translate-y bg-opacity)
(hide translate-y bg-opacity window-height on-close))))))

(defn- f-view
[_ _]
(let [sheet-height (reagent/atom 0)
item-height (reagent/atom 0)]
(fn [{:keys [hide? insets theme]}
{:keys [content selected-item padding-bottom-override border-radius on-close shell?
gradient-cover? customization-color hide-handle? blur-radius]
:or {border-radius 12}}]
(let [{window-height :height} (rn/get-window)
bg-opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value window-height)
sheet-gesture (get-sheet-gesture translate-y
bg-opacity
window-height
on-close)
selected-item-smaller-than-sheet? (< @item-height
(- window-height
@sheet-height
(:top insets)
(:bottom insets)
bottom-margin))
top (- window-height (:top insets) @sheet-height)
bottom (if selected-item-smaller-than-sheet?
(+ @sheet-height bottom-margin)
(:bottom insets))]
(rn/use-effect
#(if hide?
(hide translate-y bg-opacity window-height on-close)
(show translate-y bg-opacity))
[hide?])
(hooks/use-back-handler (fn []
(when (fn? on-close)
(on-close))
(rf/dispatch [:hide-bottom-sheet])
true))
[rn/view {:style {:flex 1}}
;; backdrop
[rn/pressable
{:on-press #(rf/dispatch [:hide-bottom-sheet])
:style {:flex 1}}
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity bg-opacity}
{:flex 1 :background-color colors/neutral-100-opa-70})}]]
;; sheet
[gesture/gesture-detector {:gesture sheet-gesture}
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:transform [{:translateY translate-y}]}
(style/sheet insets window-height selected-item))}
(when shell?
[blur/ios-view
{:style style/shell-bg
:blur-radius (or blur-radius 20)
:blur-type :transparent
:overlay-color :transparent}])
(when selected-item
[rn/view
{:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %))
:style
(style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
[selected-item]])
(defn view
[{:keys [hide? insets]}
{:keys [content selected-item padding-bottom-override border-radius on-close shell?
gradient-cover? customization-color hide-handle? blur-radius]
:or {border-radius 12}}]
(let [theme (quo.theme/use-theme-value)
sheet-height (rn/use-ref-atom 0)
item-height (rn/use-ref-atom 0)
{window-height :height} (rn/get-window)
bg-opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value window-height)
sheet-gesture (get-sheet-gesture translate-y
bg-opacity
window-height
on-close)
selected-item-smaller-than-sheet? (< @item-height
(- window-height
@sheet-height
(:top insets)
(:bottom insets)
bottom-margin))
top (- window-height (:top insets) @sheet-height)
bottom (if selected-item-smaller-than-sheet?
(+ @sheet-height bottom-margin)
(:bottom insets))]
(rn/use-effect
#(if hide?
(hide translate-y bg-opacity window-height on-close)
(show translate-y bg-opacity))
[hide?])
(hooks/use-back-handler (fn []
(when (fn? on-close)
(on-close))
(rf/dispatch [:hide-bottom-sheet])
true))
[rn/view {:style {:flex 1}}
;; backdrop
[rn/pressable
{:on-press #(rf/dispatch [:hide-bottom-sheet])
:style {:flex 1}}
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity bg-opacity}
{:flex 1 :background-color colors/neutral-100-opa-70})}]]
;; sheet
[gesture/gesture-detector {:gesture sheet-gesture}
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:transform [{:translateY translate-y}]}
(style/sheet insets window-height selected-item))}
(when shell?
[blur/ios-view
{:style style/shell-bg
:blur-radius (or blur-radius 20)
:blur-type :transparent
:overlay-color :transparent}])
(when selected-item
[rn/view
{:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %))
:style
(style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
[selected-item]])

[rn/view
{:style (style/sheet-content theme padding-bottom-override insets shell? bottom-margin)
:on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))}
(when (and gradient-cover? customization-color)
[rn/view {:style style/gradient-bg}
[quo/gradient-cover
{:customization-color customization-color
:opacity 0.4}]])
(when-not hide-handle?
[quo/drawer-bar])
[content]]]]]))))

(defn- internal-view
[args sheet]
[:f> f-view args sheet])

(def view (quo.theme/with-theme internal-view))
[rn/view
{:style (style/sheet-content theme padding-bottom-override insets shell? bottom-margin)
:on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))}
(when (and gradient-cover? customization-color)
[rn/view {:style style/gradient-bg}
[quo/gradient-cover
{:customization-color customization-color
:opacity 0.4}]])
(when-not hide-handle?
[quo/drawer-bar])
[content]]]]]))
Loading

0 comments on commit 623545c

Please sign in to comment.