Fork me on GitHub
#reagent
<
2020-07-14
>
mudphone04:07:40

Anyone know how to get a react-bootstrap/Popover to work, with the overlay attribute? I’ve seen popovers which work and are always visible (https://react-bootstrap.github.io/components/overlays/#popovers), but no examples of using the overlay attr with react-bootstrap/OverlayTrigger .

mudphone04:07:06

I guess my question is how do you pass the popover component to the overlay attribute?

mudphone05:07:41

Hmmm, looks like I had to pass a plain old React element (via r/create-element) to the overlay attribute.

pmooser14:07:43

Does anyone have any insight into debugging event delivery and propagation in reagent? I'm trying to implement copy/paste on a div, and I just can't get the event handler to work on my particular div- weirdly, it worked when my div had some other random absolutely-positioned div as a child, but when I made that child user-select: none the copy-events stopped as well.

Lone Ranger15:07:49

The way I handle this is probably not helpful to your specific use-case but perhaps something to think about -- I have a rule that everything that occurs is tied back to data, so that the page does not care if the event comes from a user click, the server, or a REPL command. All events go to a centralized queue and are processed sequentially. Then I monitor the event queue and ensure that the data is correct. This way I can separate the concerns of the event listener, the data, and the event handler

Lone Ranger15:07:39

Again I realize it may not help your specific situation but it is the frustration you are experiencing that led me to write cljs apps the way I described above

pmooser13:07:39

Thank you - that's more or less what I ended up doing, with a document-level copy/paste listener. It has its own challenges, but it seems more manageable since it's in my control.

pmooser14:07:36

I've tried to use monitorEvents which lets me see that events are being fired (I guess this probably just works in Chrome), but I can't really see why they're being fired on the body of the document, instead of on my component.

pmooser14:07:19

It appears (uhhhhhh) if I include like a blank text node, like " " in the body of my div, the copy event fires.

pmooser14:07:31

But ... that only works on the first component of this type. Just as well not to have a hack like that actually fix anything.

pmooser14:07:06

Other event handlers on the same component (like on-blur ) seem totally reliable.

David Pham15:07:37

Is it possible to write react component with ClojureScript and expose them such that other JavaScript project use them?

p-himik15:07:57

Yes, you should be able to use exported symbols just fine.

David Pham16:07:27

Would that work? XD

p-himik16:07:03

I don't see any reason for it to not work. React components are not magic.

David Pham16:07:04

Okay, seems I can work with other JS dev.

p-himik16:07:39

But note that you will have to create React components, not Reagent components.

benny18:07:14

how do i access a static member of a product of adapt-react-class?

benny18:07:24

i.e. https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableNativeFeedback.js

class TouchableNativeFeedback extends React.Component<Props, State> {
...
  static Ripple: (_) => ..

lilactown18:07:04

access the underlying component

lilactown18:07:48

(def touchable-native-feedback (r/adapt-react-class TouchableNativeFeedback))

(def ripple (.-Ripple TouchableNativeFeedback))

benny18:07:38

that’s what i assumed and tried before i posted, but somehow am getting nothing back

lilactown18:07:29

try logging TouchableNativeFeedback and see if it is in fact the class, or something else

benny18:07:11

it’s #object[reagent.impl.template.NativeWrapper]

benny18:07:27

(def feedback (reagent/adapt-react-class react/TouchableNativeFeedback))
(def ripple (.-Ripple feedback))
(prn ripple)
results in nil 😕

lilactown18:07:44

You have to access the class, not the wrapper

lilactown18:07:58

Re read my example, yours is not identical

benny18:07:46

that does it! thanks @lilactown!

rberger19:07:52

Ok, what does [:f> mean?

noisesmith20:07:22

I know that :> is used to create a react class inside the reagent vector/hash-map DSL

rberger20:07:35

I suspect its something really good

noisesmith20:07:36

I assume :f> is similar

rberger20:07:21

Its hard to lookup /google the meaning of these symbol style things.

juhoteperi20:07:06

changelog mentions them also

noisesmith20:07:16

all matches in master:

est/reagent/impl/util_test.cljs:139:  (is (= 1 (util/react-key-from-vec [:f> "div" {:key 1} "bar"])))
test/reagenttest/testreagent.cljs:607:                                      [:f> f {:key 1} "a"]
test/reagenttest/testreagent.cljs:608:                                      [:f> f {:key 2} "b"])]
test/reagenttest/testreagent.cljs:1564:        (testing ":f>"
test/reagenttest/testreagent.cljs:1565:          (with-mounted-component [:f> c "foo"]
CHANGELOG.md:8:- Added `:f>` shortcut to create Function component from ClojureScript
examples/functional-components-and-hooks/src/example/core.cljs:38:     ;; Or with the default options you can create function components using :f> shortcut:
examples/functional-components-and-hooks/src/example/core.cljs:41:     [:f> clock time-color]
examples/functional-components-and-hooks/src/example/core.cljs:42:     [:f> color-input time-color update-time-color]
examples/functional-components-and-hooks/src/example/core.cljs:51:  (rdom/render [:f> simple-example] (js/document.getElementById "app"))
src/reagent/impl/template.cljs:275:      :f> (function-element (nth v 1 nil) v 2 compiler)
src/reagent/impl/util.cljs:228:        (:> :f>) (get-react-key (nth v 2 nil))

(1 of 12): (is (= 1 (util/react-key-from-vec [:f> "div" {:key 1} "bar"])))

rberger20:07:41

@U051SS2EU Thanks for digging into it! This looks like part of an exciting new features for making it easier to work with react. Which will be really helpful! Hopefully enhanced docs will be forthcoming soon.

noisesmith20:07:45

that search works with ag locally, but not in the github search functionality

noisesmith20:07:36

this looks informative

(testing ":f>"
          (with-mounted-component [:f> c "foo"]
            (fn [c div]
              (is (nil? c) "Render returns nil for stateless components")
              (is (= "Hello foo" (.-innerText div))))))

noisesmith20:07:38

and this from an example ns

(defn simple-example []
  (let [[time-color update-time-color] (react/useState "#f34")]
    [:div
     [greeting "Hello world, it is now"]
     [clock time-color]
     [color-input time-color update-time-color]

     ;; Or with the default options you can create function components using :f> shortcut:
     #_#_#_
     [greeting "Hello world, it is now"]
     [:f> clock time-color]
     [:f> color-input time-color update-time-color]
     ]))

noisesmith20:07:01

finally, the :f> tag translates to this in reagent/impl/template.cljs

(defn function-element [tag v first-arg compiler]
  (let [jsprops #js {}]
    (set! (.-reagentRender jsprops) tag)
    (set! (.-argv jsprops) (subvec v first-arg))
    ; (set! (.-opts jsprops) opts)
    (when-some [key (util/react-key-from-vec v)]
      (set! (.-key jsprops) key))
    (react/createElement (comp/functional-render-fn compiler tag) jsprops)))

selfsame20:07:01

hi friends, noticing that my reagent components will re render when the r/atom value has not changed, with something like repeated (swap! state assoc :foo [1]) calls, where a repeated (swap! state assoc :foo 1) does not. Is there any explanation or literature on why this causes re-renders?

juhoteperi20:07:39

user=> (identical? [1] [1])
false
user=> (= [1] [1])
true

noisesmith20:07:43

doesn't reagent use identity checks to speed up its check for dirty nodes?

noisesmith20:07:58

@selfsame I've tried, for style reasons, to group nearby changes into a single call for that reason - for example I can use assoc with N k/v pairs, or use a single swap function with multiple steps, instead of multiple steps calling swap

noisesmith20:07:45

of course this kind of refactor isn't always simple, but when it is, it's like free protection from pointless re-renders

juhoteperi20:07:09

Updating multiple atoms etc. with separate calls from same function probably doesn't trigger multiple render calls, as rendering is batched using requestAnimationFrame, but anyway, one shouldn't presume how many times render is called etc.

noisesmith20:07:34

good point, thanks

noisesmith20:07:18

also coming from clojure I've learned not to treat swap! as if it were free (though it's likely cheaper in cljs)

juhoteperi20:07:31

In React Strict mode, React in fact calls render multiple times and ensures it always returns the same value to ensure it is pure

selfsame20:07:46

ah great, thanks for the clarification!