This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-03-22
Channels
- # announcements (2)
- # babashka (18)
- # beginners (87)
- # calva (22)
- # chlorine-clover (5)
- # cider (11)
- # clj-kondo (10)
- # clojure (71)
- # clojure-austin (1)
- # clojure-norway (6)
- # clojure-uk (13)
- # clojurescript (3)
- # core-async (10)
- # data-science (17)
- # datascript (1)
- # datomic (22)
- # emacs (10)
- # fulcro (32)
- # hoplon (8)
- # jobs-discuss (2)
- # malli (5)
- # meander (5)
- # nrepl (35)
- # off-topic (8)
- # pathom (38)
- # planck (21)
- # re-frame (10)
- # reagent (17)
- # reitit (7)
- # shadow-cljs (26)
- # tools-deps (3)
- # xtdb (7)
Hi, is this the recommended way of rendering a minutes since component?
(defn mins-since [start-time]
(let [mins (r/atom (mins start-time))]
(fn [start-time]
(js/setTimeout #(swap! mins inc) 60000)
[:span @mins])))
IIRC the render function may potentially be called multiple times, so I wouldn't do it like that. Reagent has a very similar example right on its landing page: https://reagent-project.github.io/
Thought so, is with-let
a better use here?
If you really want to avoid having a global counter, then I think you need to create a proper class component, use setInterval
, and dispose of that interval once the component is unmounted.
Instead of yourself counting the minutes, trigger update every x seconds, and calculate difference between start and end timestamps.
https://github.com/metosin/komponentit/blob/master/src/cljs/komponentit/timeago.cljs#L49 this is maybe unnecessarily too complex, but might give some idea. with-let
is probably good way to create and destry interval.
(It uses timeout instead of interval to optimize how often it is called, based on the previous difference.)
I agree, that's a better approach. Thanks
I got test coverage reports working with Cljs tests: https://github.com/reagent-project/reagent/pull/484 đ
How should I translate startAdornment in the following React code into Reagent?
<TextField
className={classes.margin}
id="input-with-icon-textfield"
label="TextField"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
I was trying to have to have something like
[:> TextField {:input-props {:startAdornment (r/create-element InputAdornment #js {:position "start"} "Test")}}]
But I am not getting anything rendered.inputProps
!= InputProps
. Stupid naming IMO, given that inputProps
are actually attributes.
:input-props
is translated into inputProps
. And you need :InputProps
.
Ya, thx.
I was confused since read-only property was working with both inputProps and InputProps, so I didn't consider that there is a problem with this.
Also the following does not work
(r/as-element [:> InputAdornment {:position "start"} "Test"])
From API documentation, startAdornment should be a node: https://material-ui.com/api/input/