Fork me on GitHub
#fulcro
<
2018-05-18
>
dvingo00:05:54

I'm trying to merge in styles conditionally using component props in a garden css rule using fulcro-css, but it looks like they're not visible to :css given how the defsc macro expands. Does anyone know the idiomatic way to conditionally construct css rules based on props?

dvingo00:05:31

something like this:

:css [[:.my-class (merge {:background "grey"} (if my-prop1 {:background "red"} {:background "green"}))]]

wilkerlucio00:05:07

@danvingo the css is generated statically from the classes, you can't use props for their definition

wilkerlucio00:05:19

to have dynamic styles, use the :style property directly on your render

dvingo00:05:43

thanks, I was just coming to that realization

wilkerlucio00:05:51

no problem 🙂

dvingo00:05:37

will take a dive into attempting to integrate https://www.styled-components.com/

dvingo00:05:35

hmm, not sure using template strings is going to work from cljs

tony.kay03:05:02

@danvingo why not use atoms? The rules are running logic, it just isn’t from props.

dvingo04:05:46

@tony.kay I don't follow, I just want styles to change based on values from props.

fatihict06:05:19

You can also set different classes on your components based on your props

claudiu06:05:17

For theming if in the css you add logic using values from an atom, the you can update the atom and regenerate the css and update it in the page (css/get-css component).

claudiu06:05:00

for different styles based on props, I just add another class. In js there is npm class-names, the equivalent for clojure(script) is something like https://github.com/YurySolovyov/class-names-cljs

fatihict07:05:51

Localized dom supports the :classes key which accepts a vector of classes

claudiu09:05:04

Nice :) missed the :classes option

fatihict12:05:31

I have noticed that calls to trf from the action thunk of a defmutation do not correctly interpolate arguments in Fulcro 2.5.4. Does anybody else have this issue? For example: (trf "Hello {name}" :name "Fulcro") returns Hello {name} instead of Hello Fulcro inside a defmutation.

wilkerlucio13:05:26

@fatihict I'm not sure, but I believe it should have something to do with the dynamic vars, I guess fulcro has to access something from the dynamic vars that are defined during the render, and those are not available at mutation time

wilkerlucio13:05:59

have to check the sources, maybe there is a way to bypass and send some of this directly, I can't look now, but hope this can be a direction for you to check

fatihict13:05:52

^ I think that is the right direction. I did look in the source, but I am not sure how to fix this properly

donmullen14:05:40

Getting ready to dive into adding HTML5 routing — taking a look at fulcro-template : https://github.com/fulcrologic/fulcro-template/blob/master/src/main/fulcro_template/ui/html5_routing.cljc and http://book.fulcrologic.com/#_html5_routing. Any other pointers / sample code available? I’m actually relatively new to bidi/pushy so have some ramp up to do.

tony.kay15:05:41

@fatihict i18n isn’t meant to be used from outside of the UI

tony.kay15:05:27

@danvingo so two possible options: What @fatihict is suggesting: define multiple classes, and use props to switch among them. My suggestion was to put things that vary in atoms (e.g. like a theme) and base your CSS on those. Then you have global theming. Either works.

wilkerlucio15:05:38

I think what @danvingo whats is much simpler than a theme change, it's just about a style derived from a state, atom seems overkill IMO

wilkerlucio15:05:28

so I recommend different classes for the each state, or inline style override

fatihict15:05:45

@tony.kay I have a notification component which displays a title and a description which I set with a transaction. I have wrapped the title and description in a trf. This used to work before Fulcro 2.5, how should I rewrite my code to support this case now?

tony.kay16:05:29

@fatihict In older versions the locale was a global, but this limited you to one app per web page. It is now part of state, and to get it to work we dynamically bind things for tr/trf to use to figure out locale and translation. Any messages in state (e.g. set via a mutation) should always be in the “default” language. Then render them with tr/trf in the UI

tony.kay16:05:40

why do you want to translate it in the mutation?

tony.kay16:05:27

app state should not have the translation or message? it should be state. tr/trf work on fixed lists of pre-known strings, so there should never be a reason to “compute” them like this.

fatihict18:05:28

@tony.kay I put notifications in the app state in order to display them one by one by a notifications component rendered by Root. When an events occurs in my app such as the creation of a new company I call a mutation which adds a notification with a title (trf "The company '{company-name}' has been created" :company-name some-name) and some description.

tony.kay18:05:33

@fatihict why not put company name in state, and the formatting in UI?

tony.kay18:05:35

what happens when you switch locales? The mutations are not all going to re-run..the tr MUST run in UI, or it simply won’t work right

tony.kay18:05:01

say you get three notifications, and the user switches locale in the middle…the “old” ones will be in the wrong locale

tony.kay18:05:18

tr is a UI concern, never a state concern

tony.kay18:05:15

the message novelty can be a state concern, but format it via calls in the UI..e.g. give them message types and novelty in state, but do the formatting in UI code

fatihict18:05:04

Ah oke, that makes sense. Thank you for the explanation!