This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-25
Channels
- # adventofcode (3)
- # aleph (24)
- # architecture (8)
- # beginners (53)
- # boot (34)
- # cider (7)
- # clara (68)
- # cljs-dev (6)
- # cljsrn (3)
- # clojars (10)
- # clojure (71)
- # clojure-germany (2)
- # clojure-italy (10)
- # clojure-nl (25)
- # clojure-serbia (4)
- # clojure-spec (13)
- # clojure-uk (48)
- # clojurescript (31)
- # core-async (62)
- # cursive (13)
- # datomic (4)
- # duct (76)
- # editors (4)
- # fulcro (2)
- # immutant (1)
- # instaparse (1)
- # jobs (1)
- # lein-figwheel (1)
- # mount (1)
- # off-topic (12)
- # onyx (8)
- # re-frame (10)
- # reagent (84)
- # reitit (2)
- # ring (2)
- # shadow-cljs (159)
- # spacemacs (2)
- # specter (17)
- # sql (14)
- # tools-deps (10)
- # yada (15)
Is there a way to provide a context like mechanism so that you can do something like
(defn nested-component
^{:context [:state]}
[v state]
[:div
[:span v]
[:span (:a @state)]])
(defn child-component
[]
[nested-component 1])
(defn main-with-context
^{:state (r/atom {:a 1 :b 2})}
[]
[child-component])
even a way to hook in a function that gets called whenever a component's children are rendered that aren't html elements
Is context not supported in latest reagent?
Should have looked, but there are plugins. I like my syntax but I guess this is probably easier to do. https://github.com/Lokeh/reagent-context
it has a pretty nasty gotcha I think, requiring more compensation to "get at" the re-rendering..
@theeternalpulse did you see this? https://github.com/reagent-project/reagent/issues/330
I have not, looks simple and easy to wrap for the time being.
Did anyone has issue with soda-ash inputs, that cursor jumps to the end of input while editing? As I google, it seems it’s common pain-point. I got why it’s like this 🙁
Did anyone integrate reagent’s cursor reposition into their own components? I’d want to see examples 🙂
I’m pretty sure it shouldn’t detect it. But maybe it will after full re-mount of component. nvm 😅 , imo it should just break
I've tried it and it works when you change from form 1 to form 2, but not the other way around.
So, I render a view which shows some data from subscription, but the data is not in app-db at that moment, so the subscription returns nil
. In that case I don't want to render my view, because it captures data in an atom in closure, so I render some dumb div instead. But when data finally arrives to app-db - I render the view as a proper form 2 component.
I already know that in this case reagent is able to switch from from 1 to form 2. My question is how reliable is that?
@deadghost did you have any luck with rc-slider?
@achikin totally reliable. the render function checks the return type each time: if it’s a vector, then its a form-1. if it’s another function, then its a form-2
right interesting. i think you are right that once you’ve rendered a form-2 component, you’re not going to get back to the form-1 component
but based on my review of the source code, I think that the outer conditional won’t be reevaluated on subsequent renders once you’ve installed the inner render function
I had an issue this week that was probably related to switching between Form-2 and Form-1. It took me a few hours to fix
My assumption was that you can freely switch but apparently that’s not the case
the whole point of form-2 is that it only evals the outer form once. all subsequent evals are only of the inner function
The symptom was that the component didn’t rerender reliably
right. so with this code:
(defn swapper
[inner]
(spy inner)
(if inner (fn [inner] [:div "SOMETHING"])
[:div "NOTHING"]))
(defn test-component []
(let [outer (reagent/atom false)]
(fn []
[:div {:on-click (fn [] (spy outer) (swap! outer not))}
[swapper @outer]])))
it renders “NOTHING” first, then when you click on it, it renders “SOMETHING” forever
The console shows that the outer value is changing and that the outer form in swapper is never reevaluated once the render func is installed:
seekeasy.core:96: inner: false
seekeasy.core:103: outer: #<Atom: false>
seekeasy.core:96: inner: true
seekeasy.core:103: outer: #<Atom: true>
seekeasy.core:103: outer: #<Atom: false>
seekeasy.core:103: outer: #<Atom: true>
Great repro @lee.justin.m
It makes sense the way you describe it
But it wasn’t clear to me before
This is a real gotcha
Another “rookie mistake” to add to the docs?
As opposed to Form-3?
right. the only real gotcha with form-3 (other than all of the normal react gotchas) is getting the render function named correctly and remembering to repeat parameters
i like reagent but i have this nagging feeling like there is too much magic and not enough assistance
i really dislike libraries where the only way to use them is to understand the implementation
I'm trying to use react-select (https://github.com/JedWatson/react-select) in a react-bootstrap-table. I've got this:
(reagent/as-element
(let [state (reagent/atom ["val"])]
[:> Select {:multi true
:value @state
:onChange (fn [new-vals]
(js/console.log new-vals)
(reset! state new-vals)
(js/console.log @state))
:options [{:label "whatever"
:value "val"}
{:label "whatever - 2"
:value "someval"} ]}]))
But if I update the state in the onChange
function, the state doesn't seem to be updated and the component not rerendered... What am I missing?@kurt-o-sys Just looking at the code snippet (and not the context of react-select or react-bootstrap-table), I'd have written it like this:
(defn foobar []
(let [state (reagent/atom ["val"])]
(fn []
[:> Select
{:multi true
:value @state
:onChange (fn [new-vals]
(js/console.log new-vals)
(reset! state new-vals)
(js/console.log @state))
:options [{:label "whatever"
:value "val"}
{:label "whatever - 2"
:value "someval"} ]}])))
Also, where is Select
coming from? Did you create a var above that grabbed it from the js/
namespace?
Right... that's what I thought, but I can't seem to add this as a 'component' to react-bootstrap table. - Oh, I got that Select
from "react-select" :default Select]
(shadow-cljs syntax). That works.
So, if I turn it into that function you show, than I get an error, sec...
to say it another way, the code as you wrote it above, won't persist the state reagent atom between rerenders
@kurt-o-sys the way you’ve written it, the atom will be reinitialized on every render. that’s why @gadfly361 wrapped in in a form-2
OK, makes sense... so that's why I need that function, right? But in that case, when I add it to another React component that expects a child component:
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
(that's why I added that reagent/as-element
)
oh, ok... let me try 🙂
foobar
is indeed just a function, which is okay when using it with reagent. but if you pass it to a react function you’ve got to manually call as-element
to turn it into a react element
@gadfly361 do you happen to have an example of how to use it? I’ve added the required dependencies, but still nothing shows up unfortunately
@bravilogy out for a bit, but I can get back to you with a snippet
IOW [:> popup {:trigger ???}]
@doubleagent I think [:> popup {:trigger (reagent/as-element [:> Button {:icon "add"}])}]
@doubleagent see example in this readme: https://github.com/gadfly361/soda-ash/blob/master/README.md
@lee.justin.m beat me to it, what he said :)
🙂 thanks guys!
As such, you need to import react-dates/initialize to set up class names on our components. This import should go at the top of your application as you won't be able to import any react-dates components without it.
I’ve imported the library, but components are not accessible or something. basically I can’t use them without that bit of code
@bravilogy with shadow-cljs you can just do a (:require ["react-dates/initialize" :as init])
with the normal compiler I suspect you have to create an alias using foreign-libs
or something
ah damn it 😄 using lein
here. is it too difficult to convert to shadow-cljs
? just looking at the docs now
well if you’ve already imported the main library then just do whatever you with that to import the submodule
@bravilogy answering your earlier question for an example with react-dates (note, this is untested and based on leiningen instead of shadow-cljs).
1. lein new reagent-figwheel rd
2. Add [cljsjs/react-dates "12.2.4-1"]
to :dependencies vector in project.clj
3. Open src/rd/core.cljs and add the following to the namespace :require
[cljsjs.react-dates]
[goog.object :as gobj]
4. Replace the Page section with the following:
(def date-range-picker
(reagent/adapt-react-class
(gobj/get js/ReactDates "DateRangePicker")))
(defn page [ratom]
[:div
[date-range-picker
{
;; Add date range options here
}]
])
5. In a terminal run, lein figwheel dev
and navigate to http://localhost:3449@gadfly361 thanks, I tried it that way before, but without using reagent/adapt-react-class. I used
[:> js/ReactDates.SingleDatePicker ..]
and it was firing events, but wasn’t showing anything. now I’ve tried it with adapt-react-class
and I’m getting errors like Failed prop type: The prop `onDateChange` is marked as required in `SingleDatePicker`, but its value is undefined.
And I’m using it like so
[:div.form-group.row
[single-date-picker (clj->js {:on-focus-change #(js/console.log "hello")
:on-date-change #(js/console.log "hey")})]
and it’s the same without clj->js
too. let me just do lein clean
and reload. maybe there’s something caching
ok now it’s the same thing - events are being fired and there’s nothing showing up. I’m pretty sure it’s because of css
@bravilogy yeah, there is a css file you'd need to include in your index.html file
@bravilogy try adding this ☝️