Fork me on GitHub
#reagent
<
2022-04-04
>
restenb14:04:18

a react class i'm using want kind of input <TheReactClass value={50}>. I wrapped it with (def the-react-class (r/adapt-react-class ...)), so I can write hiccup.

restenb14:04:06

but using it as [the-react-class {:value 50}]ends up borked. do I need to do something else to mimic the value={50}input?

p-himik14:04:37

This should work. What exactly is going on? Any errors/warnings in the JS console?

restenb15:04:54

no errors. it's a circular progress bar component that should be able to tackle any value 1-100, but when I just use e.g. :value 50it behaves very weird - shows 75%. different for different values but almost never correct. assumed my input was somehow wrong.

p-himik15:04:24

Are you 100% certain it works in JSX with value={50}?

restenb15:04:17

not really, but it's not some fringe component either - it's v4 material ui circular progress https://v4.mui.com/components/progress/

restenb15:04:31

though I suppose my specific version could still be borked

restenb15:04:11

the "brother" linear progress component works as expected, though

restenb14:04:37

I also need reminding how reagent translates prop names. if react expects e.g. alignItems="center", can I use either/or :alignItems "center" / :align-items "center"

restenb15:04:44

^ that does seem to be correct - couldn't remember exactly

p-himik15:04:46

It is correct indeed.

snoe17:04:19

Hi, I've managed to get a couple of react classes (AutoSizer & react-window) "working" in reagent. I've been working in pure cljs and avoiding react, so I'm wondering if there's a better way to to do this. 1. Is there anything obviously wrong? Are there helpers that make any of this more idiomatic reagent? 2. I'm not really sure where to break this up into components (maybe item + autosized list), I could see how to do this with a macro, but is there a place for more familiar reagent components? 3. the js->clj conversion was difficult to track, autosizer's function isn't converted because of as-element but reactify-component does convert but not the nested style Maybe there's some easier way to handle splatting react props in as they do in their docs?

(defn testlist []
  (r/with-let [list-ref (atom nil)]
    (let [things (range 1000)]
      ;; 
      [:> AutoSizer
       {}
       (fn [props]
         (let [{:strs [width height]} (js->clj props)]
           (r/as-element
             ;; 
             [:> rw/FixedSizeList
              {:width width
               :height height
               :item-count (count things)
               :item-size 64
               :ref #(reset! list-ref %)}
              (r/reactify-component
                (fn [{:keys [index style] :as props}]
                  [:div
                   {:style (js->clj style)
                    :on-click #(.scrollToItem @list-ref index "center")}
                   (str "Item #" index)]))])))])))

p-himik17:04:28

Instead of {:strs [width height]} (js->clj props), just use JS interop: (.-width props) and (.-height props). What happens when you remove the call to js->clj around style? Are the styles not applied anymore? I'd expect the result to be correct to be honest. Also, be wary about using js->clj in such cases - as soon as some props pass a ref that's expected down below, your code will break. It's not the case hear, but I tend to use a hand-written shallow-js->clj for that.

🙏 1
pesterhazy18:04:41

• Instead of reactify-component, I'd just use a functional component and return a react element

pesterhazy18:04:09

• If it's easier you could just call createElement for the inner function, rather than use Reagent for that part

pesterhazy18:04:41

@U2FRKM4TW’s tips are good as well