Fork me on GitHub
#reagent
<
2015-11-20
>
tim.mccarthy00:11:33

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

mpdairy00:11:23

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?

mikethompson00:11:44

@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 .

mikethompson00:11:58

Let me get you a link

tim.mccarthy00:11:11

@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?

mikethompson00:11:31

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

mikethompson00:11:07

The component should NOT access the text via an ratom.

mikethompson00:11:33

Because when that triggers an update ... component-did-update does not get called

mikethompson00:11:37

Is that enough info ?

tim.mccarthy00:11:38

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.

tim.mccarthy00:11:52

But I think it’s enough that I can look up the rest by myself, thanks!

mpdairy01:11:31

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

mpdairy01:11:57

Oh! also, I need to add keys to my components. that's why they were getting mixed up

mpdairy01:11:18

that fixed it

mikethompson01:11:31

@mpdairy: excellent. @tim.mccarthy: here's a brief description in response to skapoor: http://clojurians-log.mantike.pro/re-frame/2015-07-17.html

mikethompson01:11:26

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 prop

mikethompson01:11:07

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!

mikethompson01:11:33

Hope that makes sense

mpdairy01:11:55

@mikethompson did you write all that documentation for re-frame? It's been amazingly helpful for understanding reagent

mikethompson01:11:23

yes, parts really should be across in reagent Wiki

mpdairy01:11:16

well thank you. the part explaining r/atoms and reactions was very valuable for my project

mikethompson01:11:42

Kind of you to say, thanks.

tim.mccarthy01:11:25

@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?

tim.mccarthy02:11:12

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. Thanks!

tim.mccarthy02:11:41

(where cm-atom is an atom I use to store the codemirror instance)

luposlip09:11:06

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.

mikethompson10:11:25

It looks like you missed the re-com demo/docs for input which shows how to do it.

mikethompson10:11:48

Just supply a :validation-regex

ulsa10:11:49

@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

luposlip10:11:14

@mikethompson: does it also show the right keyboard on mobile devices?

mikethompson10:11:09

No idea. Hopefully the readme makes our agenda clear.

mikethompson10:11:57

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?

mikethompson10:11:37

It may or may not work, dunno

luposlip10:11:51

Yup, that’s why I emphasized it in my original question 😉 I’ll try it out.

mccraigmccraig10:11:18

@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

mccraigmccraig10:11:41

(i haven't looked at android yet @luposlip )

luposlip10:11:35

It must be somewhat similar. I’ll investigate.

frankiesardo16:11:50

Hi all, I'm getting crazy getting facebook fixed-data-table to work with Reagent simple_smile

frankiesardo16:11:43

I'm having problem passing components as parameter

frankiesardo16:11:12

I write something like this

frankiesardo16:11:37

Everything is wired up correctly, a part from that [Cell "X"] form that React doesn't like

frankiesardo16:11:14

So how would you pass that component around following the javascript example?

frankiesardo17:11:24

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

mikethompson22:11:40

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

mikethompson22:11:14

@frankie: see also https://www.refheap.com/102477 (although I can't vouch for the correctness of the code)