Fork me on GitHub
#reagent
<
2017-01-10
>
emccue01:01:16

(once you get that working remember to add [..ENTER-char 13] to that let block)

rovanion08:01:24

Yeah, else I'm going to come back to the code and wonder WTH 13 is about. Still stuck in the ugly atom conflict though 😕

pez14:01:27

In our app we have a couple of input fields where the user is supposed to enter quite large numbers (money). User testing makes it clear that it would be easier for our users if could format the numbers separated in groups of thousands. We have tried a couple of naïve ways to do it, but it has resulted in input fields that behave strangely. We have started to use reagent-forms and it would be nice to solve it in a way that works well together with that.

pez14:01:20

So, anyone has any suggestions how to go about this? It would be a good first step to have the input field format in groups of thousands on blur.

claudiu14:01:15

Is there any way to do reagent server-side rendering with clojure ?

mitchelkuijpers14:01:19

@pez We are using a formatter from google closure to do that:

(def formatter (NumberFormat. (.. NumberFormat -Format -CURRENCY)))

(defn number->formatted
  [number]
  (.format formatter number))

(defn string->number
  "Tries to transform a string to a number, if it cannot parse the number it returns NaN"
  [string]
  (.parse formatter string))
And you'll need to add the import for NumberFormat
(:import [goog.i18n NumberFormat])

pez15:01:35

@mitchelkuijpers: thanks! Seems like a robust way to get the formatting right.

emccue15:01:38

@mitchelkuijpers That is a great snippet (if it works; which I assume it does)

emccue16:01:57

While we are on Google closure; is there an accepted strategy to use goog.ui components, or is that bad practice in react-ville

mitchelkuijpers16:01:01

@emccue You can just wrap them in reagent components probably by using the componentDidMount lifecycle calls and stuff

mitchelkuijpers16:01:30

Btw this formatting is for money but I think you can switch the format

ejelome21:01:20

hi, how do you implement the StyleSheet component in reagent? e.g.:

const styles = StyleSheet.create({
  kw: {
    k: 'v'
  }
});

<Text style={styles.kw}>Hello World!</Text>

ejelome21:01:20

I mean, the style is in a single object holding the stylesheet names that will just be called later on by desired components

gadfly36121:01:48

@ejelome

(def styles
  {:foo
   {:color "red"}})

(defn my-comp []
  [:div {:style (get styles :foo)}
   "Hello, World!"])

gadfly36121:01:23

np 🙂

ejelome22:01:11

^ it's for re-natal, I'm going through the tutorial and finding out what's the equivalent syntax

ejelome22:01:54

the example is a separate const that holds the styles then are just referred to by different components

notanon22:01:20

i see. thx. havent heard of re-natal

ejelome22:01:39

np 😄

ejelome22:01:41

hi, an extended question if it's ok, so calling a single hashmap is ok, but how about if I want to call multiple hashmaps? e.g.

;; The target:
<Text style={[styles.name1, styles.name2]}>Hello World!</Text>

;; I tried this but didn't worked:
[text {:style (get styles [:name1 :name2])} "Hello World!"]

gadfly36122:01:27

@ejelome

(def styles
  {:foo
   {:color "red"}
   :bar
   {:background-color "green"}})

(defn my-comp []
  [:div {:style (merge
                 (get styles :foo)
                 (get styles :bar))}
   "Hello, World!"])

ejelome22:01:47

ahhh, so you treat them separately

gadfly36122:01:08

yeah, and then merge them in to one

gadfly36122:01:53

as an aside, i dont generally do something like that, but that is how to replicate the tutorial you are following

ejelome22:01:56

I saw something similar to Luno that's why I thought it will work {:style (get-in s/styles [:app])}

gadfly36122:01:34

@ejelome if you haven't seen this yet, you may find it interesting: https://github.com/noprompt/garden

ejelome22:01:57

the merge one is probably enough, hopefully I can find a more sensible way of injecting styles XD

ejelome22:01:10

thanks again @gadfly361! genius 😄

gadfly36122:01:22

no problem, happy to help

ejelome22:01:31

you sure did! :thumbsup: