Fork me on GitHub
#reagent
<
2021-09-02
>
Franklin09:09:11

Hello 👋, what does this error means?

react_devtools_backend.js:2850 Warning: Invalid attribute name: `cljs$lang$protocol_mask$partition0$`
    at div
    at eval ()
    at exports.CustomGallery ()
    at f ()
    at div
    at div
    at cmp ()
    at div
    at div
    at div
    at div
    at cmp ()

Franklin09:09:27

the code

(ns quagga.components.dataview.photos.view
  (:require
   [reagent.core :as reagent]
   ["react-photoswipe-gallery" :refer (Gallery Item)]))

(defn photos-component
  []
  [:div.tab-page.photos-page {:style {:display "block", :overflow-x "scroll"}}
   [:div#tab-contentphotos.tab-content
    [:f> Gallery
    ;;  {:id "simple-gallery"}
     [:div
      {:style
       {:display "grid"
        :gridTemplateColumns "240px 171px 171px"
        :gridTemplateRows "114px 114px"
        :gridGap 12}}
      [:f> Item
       {:id "so-first"
        :title "Author: Folkert Gorter"
        :height "1600"
        :width "1600"
        :thumbnail
        ""
        :original
        ""}
       (fn [ref open]
         (reagent/as-element
          [:img
           {:src ""
            :ref ref
            :on-click open
            :style {:cursor "pointer"
                    :objectFit "cover"
                    :width "100%"
                    :maxHeight "100%"}}]))]]]]])

p-himik09:09:41

Why did you use :f> instead of :>?

Franklin09:09:31

actually removing the :f> helped

Franklin09:09:17

but now I get this warning

react_devtools_backend.js:2850 Warning: Unexpected ref object provided for img. Use either a ref-setter function or React.createRef().
    at img
    at exports.Item ()
    at div
    at exports.CustomGallery ()
    at exports.Gallery ()
    at div
    at div
    at cmp ()
    at div
    at div
    at div
    at div
    at cmp ()

p-himik09:09:46

This is the signature in the documentation, in JS: ({ ref, open }) Your signature: [ref open] Do you notice the problem?

Franklin09:09:55

yep... 😄

Franklin09:09:56

thanks

👍 2
oskarkv16:09:16

Hi! I'm trying to create a component (for use with Re-frame) of a Google Maps map, more or less like this https://gist.github.com/jhchabran/e09883c3bc1b703a224d#file-2_google_map-cljs and I have a few questions about it. In the example, gmap-component is given the @pos argument, but the gmap-component function does not take any arguments. How does that work? In the example, they use (reagent/props comp) but for me that returns nil. But it looks like they are getting the position by doing that. Maybe that worked in an earlier version? When I add an argument to the definition of gmap-component, and re-frame/subscribe has detected a change, the component's update function will run, but if I refer to the argument (of gmap-component) in the update function it is always the same as the first time. What I want to achieve is a way to update the component (with the update function) but receive a new value from re-frame/subscribe somehow, as with regular, simple re-frame views. Any ideas?

p-himik16:09:20

> but the gmap-component function does not take any arguments It doesn't matter because it's JavaScript - you can have functions with no arguments receiving many and functions with many arguments receiving none. > but for me that returns `nil` With the exact same code?

oskarkv16:09:49

As you can see, I'm playing around with stuff. Anyway, do you know of a way to pass in the new, updated value from the re-frame db to the component's update function? It seems ugly to keep a reference to the atom in the component, since re-frame/subscribe is what triggers the updates.

p-himik16:09:00

I use reagent.core/props function on the first argument to the :component-did-update and :component-did-mount just fine with Reagent 1.1.0. > do you know of a way to pass in the new, updated value from the re-frame db to the component's update function? Pretty much what you're doing already. Make complex components by decoupling re-frame and Reagent - create a plain Reagent component, without any ratoms, that does all the job and updates all the necessary things in its lifecycle functions. And then wrap it in a re-frame component that feeds the Reagent one all the necessary values from subscriptions.

oskarkv17:09:56

But it seems that the component is already created when I change the re-frame db, and the gmap-component function is just called once. So when update refers to the argument it's always the same as the first time. So, what I'm doing is not right. 😛

p-himik17:09:36

That function is supposed to be called once. And the first argument to the lifecycle functions is the relevant instance of that component, so of course it will be the same as well. Everything is correct here.

oskarkv17:09:55

OK but then how do I pass the value from subscribe in the view function to update?

p-himik17:09:15

Just the way you do, and then use reagent.core/props.

p-himik17:09:27

Actually, try reagent.core/argv instead of props.

p-himik17:09:53

From the documentation: > the arguments to your render function are actually passed as children (not props) to the underlying React component, unless the first argument is a map

oskarkv17:09:28

Ah, that seems to work. Thanks a lot!

👍 2
Ryan20:09:37

Hey all, how do I pass a component as a prop? Trying to use https://primefaces.org/primereact/showcase/#/dataview and stuck on supplying the itemTemplate

p-himik20:09:40

Sounds like you need reagent.core/as-element around your hiccup. Reagent repo has examples.

👍 2
Ryan20:09:42

Thank you as usual! 😄