This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-02-16
Channels
- # announcements (2)
- # aws (2)
- # babashka (29)
- # beginners (69)
- # calva (6)
- # chlorine-clover (2)
- # cider (1)
- # cljs-dev (4)
- # clojure (44)
- # clojure-israel (1)
- # clojure-spec (3)
- # clojure-uk (31)
- # clojured (2)
- # clojurescript (6)
- # code-reviews (22)
- # core-typed (133)
- # cryogen (6)
- # cursive (7)
- # datomic (25)
- # emacs (19)
- # fulcro (69)
- # graalvm (1)
- # graphql (7)
- # lumo (1)
- # off-topic (92)
- # parinfer (2)
- # pedestal (6)
- # reagent (5)
- # remote-jobs (1)
- # shadow-cljs (11)
- # tools-deps (20)
- # tree-sitter (1)
- # vim (4)
- # vscode (6)
What am I doing wrong on below code? I'm getting this error
Uncaught Error: No protocol method IDeref.-deref defined for type cljs.core/PersistentArrayMap: {:on-seek #object[handle_on_seek], :duration 570.98449, :current-time 0}
It seems like I'm missing something out when deferencing atom in inner func (reagent Form-2 component). Not sure what's the proper fix
CODE:
(defn seek-bar [{:keys [on-seek duration current-time :as props]}]
(let [state (r/atom {:percentage 0
:width 0})
handle-mouse-move (fn [e]
(let [rect (.getBoundingClientRect (.-currentTarget e))
x (js/Math.floor (.-pageX e))
curr (- x (js/Math.floor (.-x rect)))
percentage (as-> (/ (* 100 curr) (js/Math.floor (- (.-right rect) (.-left rect)))) percent
(if (neg? percent) 0 percent))]
(swap! state assoc :percentage percentage)
(js/console.log (:percentage @state))))]
(fn [state current-time]
[:div {:class "flex flex-1 h-2 w-full cursor-pointer"
:on-mouse-move handle-mouse-move
:on-click (fn [_] (on-seek (compute-current-time (:percentage @state) duration)))}
[:div {:class "flex flex-1 h-2 items-center bg-gray-400 relative w-full"}
; [:div {:class "absolute h-0 z-10 m-0 p-2 border border-purple-800 bg-purple-800 rounded-full"
; :style {:left (str (- (:current-position @state) (or (some-> @marker (.-offsetWidth) (/ 2)) 0)) "px")}
; :ref (fn [el] (reset! marker el))}]
[:div {:class "absolute h-2 bg-purple-800"
:style {:width (str (percentage current-time duration) "%")}}]]])))
(fn [state current-time]
state from the inner fn shadows the state from let binding
In the inner func, Is there a way to always get the updated state
that was being set in the handle-mouse-move
of the outer func?