This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
- # admin-announcements (28)
- # aws (16)
- # beginners (70)
- # boot (54)
- # cider (86)
- # cljsrn (8)
- # clojure (14)
- # clojure-art (12)
- # clojure-conj (2)
- # clojure-hk (45)
- # clojure-nl (2)
- # clojure-poland (2)
- # clojure-russia (32)
- # clojurescript (60)
- # cursive (27)
- # datomic (12)
- # devcards (46)
- # editors (2)
- # emacs (37)
- # immutant (72)
- # jobs (6)
- # ldnclj (7)
- # leiningen (1)
- # off-topic (1)
- # om (205)
- # onyx (16)
- # re-frame (21)
- # reagent (52)
- # slack-help (2)
- # spacemacs (11)
Has anybody successfully found/implemented a codemirror component that works with reagent? I’ve tried two different libraries that profess to offer react components for codemirror, but ran into problems with both. The second library (https://github.com/ForbesLindesay/react-code-mirror) kinda works, but whenever the state atom changes the cursor loses its place and goes back to the start of the document. This doesn’t happen in the pure-JS example provided with the library, so my suspicion is that I’m using Reagent wrong, but I’m not sure how exactly. Sample code here: https://www.refheap.com/111875
has anyone else run into the problem where they make a form-2 component, set up some state in the outer form, then re-shuffle the components in a parent component, and suddenly the outer state no longer matches the inner component?
@tim.mccarthy: have a look here: http://yogthos.net/posts/2015-11-12-ClojureScript-Eval.html
@mpdairy: yes that can be a problem. Solved by either dynamic subscriptions (very little docs, sorry) or completely blowing away the component and starting again .
@mikethompson Thanks! That’ll probably suffice for now. What do I do when I want to force the codemirror to re-render based on a change in state from elsewhere?
You have to make sure your component takes the text as a
prop. Then in the component-did-update you can shove in new value
Because when that triggers an update ... component-did-update does not get called
I’m not quite sure how to not access the text via an ratom, as the component still needs some output destination to write it to.
Ok thanks @mikethompson I think I figured out a way to do it. My thing in the outer form was a fn that returns a dynamically created reaction. I just basically memoized that function and then moved it to the inside and make the component a form-1
@mpdairy: excellent. @tim.mccarthy: here's a brief description in response to skapoor: http://clojurians-log.mantike.pro/re-frame/2015-07-17.html
In the parent, get the text via a ratom or subscription or whatever ... then pass it into the child component (which has codemirror) as a
That way the text is arriving as a prop. When props change, a component get rerendered AND the lifecycle methods get called. You want those lifecycle methods getting called!
@mikethompson did you write all that documentation for re-frame? It's been amazingly helpful for understanding reagent
well thank you. the part explaining r/atoms and reactions was very valuable for my project
@mikethompson: Using the example you linked earlier as a base, I made a version (https://www.refheap.com/111879) of editor that accepts an input string as the text value, and an output atom as a destination for output. I made two editors that in theory should be outputting to each other’s inputs, but this isn’t being reflected when I do any editing. The ratoms are being updated, but no re-render is triggered unless I edit the source and figwheel re-runs render-component. Is this because the editors are Form-3 components with unimplemented lifecycle functions (e.g. :component-did-update) or am I misunderstanding something more fundamental?
Got it working with one-way output by implementing
:component-will-receive-props (fn [this new-props] (.setValue (.getDoc @cm-atom) (nth new-props 1))). If I hook it up in both directions, I’m back to square 1 with the cursor resetting after each keystroke, but I think this is good enough for now.
Anyone knows about a reagent input component that only accepts numbers as input, both integers and floats, and both with imperial and metric decimal separator (i.e. one point one as both 1.1 and 1,1 based on the locale)? Preferably it shows numbers-only keyboards on mobile devices. As far as I can see, the input component in re-com doesn’t do this, but I may have missed something.
It looks like you missed the re-com demo/docs for input which shows how to do it.
@grav: yes, I agree it's consistent; I just wanted to point out that depending on how you cause the re-render, you get different event sequences
From: https://github.com/Day8/re-com#warning-re-com-might-not-be-for-you-just-yet > We can also confirm that none of the components have been designed with mobile in mind, and that there's no attempt to handle media queries. We said we had a desktop app focus, right?
@luposlip your ability to control the keyboard on mobile devices is limited. in web views you can control the keyboard that is shown with the type attribute of input tags... see https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html for iOS details
Hi all, I'm getting crazy getting facebook fixed-data-table to work with Reagent
Everything is wired up correctly, a part from that
[Cell "X"] form that React doesn't like
I think I need the equivalent of
(sablono/html [:cell "hi"]) that expands the vector into a React component, but I don't know where to find it
I'm not sure it will help your specific question, in fact, you may already be more advanced than what's given here, but there is a gist on this component: https://gist.github.com/ducky427/10551a3346695db6a5f0 Other than that, perhaps you are after this? https://github.com/reagent-project/reagent/blob/master/src/reagent/core.cljs#L44-L47