This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-02-22
Channels
- # architecture (9)
- # beginners (90)
- # cider (98)
- # cljs-dev (23)
- # cljsrn (4)
- # clojure (101)
- # clojure-brasil (3)
- # clojure-dev (48)
- # clojure-italy (15)
- # clojure-losangeles (3)
- # clojure-russia (12)
- # clojure-uk (17)
- # clojured (1)
- # clojurescript (141)
- # community-development (15)
- # core-async (1)
- # datascript (12)
- # datomic (18)
- # docker (3)
- # emacs (1)
- # events (1)
- # figwheel (1)
- # fulcro (57)
- # graphql (4)
- # javascript (9)
- # jobs (1)
- # lein-figwheel (1)
- # leiningen (1)
- # lumo (1)
- # off-topic (68)
- # om (9)
- # om-next (3)
- # onyx (4)
- # parinfer (6)
- # pedestal (14)
- # portkey (2)
- # proton (1)
- # protorepl (19)
- # re-frame (57)
- # reagent (46)
- # ring-swagger (12)
- # shadow-cljs (167)
- # slack-help (5)
- # specter (18)
- # sql (1)
- # uncomplicate (3)
- # unrepl (1)
I’ve been able to replicate this dx-react-grid code (https://github.com/oliversturm/demo-dx-react-grid-clojurescript/blob/master/src/demo-dx-react-grid-clojurescript/core.cljs) and trying to extend to track row selection with <Table rowComponent={TableRow}/>
from the example at the bottom here: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/fundamentals/. New to React - and not sure how to translate this code
const TableRow = ({ row, ...restProps }) => (
<Table.Row
{...restProps}
// eslint-disable-next-line no-alert
onClick={() => alert(JSON.stringify(row))}
style={{
cursor: 'pointer',
...styles[row.sector.toLowerCase()],
}}
/>
);
to reagent. Thoughts?@donmullen I’ve got a draft on how to do interop. https://gist.github.com/jmlsf/17c588deb326e538dcea6847bc66db9b#interop-with-react
that should translate pretty well. i think you can just define TableRow as a defn which returns [:> js/dxobject.Table.Row {props here}]
if you include it via a script tag or using :foreign-libs, there will be a global object somewhere that has all the goodies hooked on it. i don’t know what that library uses.
@lee.justin.m - I’m using shadow-cljs — and have pulled in the npm libraries - and can access Table via ["@devexpress/dx-react-grid-bootstrap3" :refer [Grid Table TableHeaderRow TableSelection]]
when you import Table, it is a javascript object. the clojurescript language allows you to stick dots in the middle of symbols and it just works (basically the dotted code just gets passed directly into javascript).
And Table.Row is also a class? I’m converting Table via
(defn factory-apply
"A function for wrapping a js React class in a factory."
[class]
(fn [props & children]
(apply js/React.createElement
class
props
children)))
Thanks - trying that… And yeah - I am using fulcro - but the original sample was in reageant 🙂.
@lee.justin.m I'm just follow up from yesterdays conversation in #clojurescript , moving in here
I'm trying to understand why when I mutate the object I'm storing in my atom there, it's doesn't render the updated value in the UI component. If I "touch" the atom by also inserting some random data in it, it works
I'm assuming that since the object is preserved, it's just mutated, it's seen as equivalent - is there a pattern for dealing with something like this?
yea that what i would expect but i’m trying to think about what the “right” way to fix it is. the set!
doesn’t change the actual atom
right. so the set!
alters something deep inside the data
object, but react will do a shallow compare on data
, which of course looks like it hasn’t changed
here is what I would do: I would just store the frequency as a clojurescript inside the reagent/atom directly. then I would consider doing an add-watch
on the atom and doing the set!
there so that they are always in sync. you’ll need to remove-watch
when the component unmounts too. now, when you update the frequency, your component will update and so will the javascript library
i suspect you can use a reaction
or maybe the track
function. but that stuff is sadly undocumented and I do not know how to use it practically. i feel like this is a perfect case for some of that functionality
you can also just do it the easy way: instead of storing a random number, store the frequency in the atom and then do the set! code right next to it
I will play around with that! If I find something that works that's undocumented, I'll try to help document it 😉
take a look at what I have so far https://gist.github.com/jmlsf/17c588deb326e538dcea6847bc66db9b#reactions
Ah yeah I thought about doing that, but something about that made me think, I'm doing this wrong ™️
storing it twice is a code smell yea because what if they get out of sync. on the other hand, sometimes quick and dirty works for simple code.
@hello721 another way to keep things in sync is to use a form-3 component and use :component-did-update and :component-will-mount. Basically, your outer component is the viewable UI and has frequency as a cljs structure in an atom. then you render the form-3 component and pass frequency as a prop. the form-3 component will own the sound generating stuff and will update it when new props come in
@lee.justin.m interesting! I'll have to do some research into form-3 components, but that does sound very promising!