This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-01-11
Channels
- # admin-announcements (3)
- # beginners (51)
- # boot (14)
- # cider (55)
- # cljsrn (5)
- # clojure (105)
- # clojure-austin (2)
- # clojure-brasil (3)
- # clojure-dusseldorf (2)
- # clojure-greece (5)
- # clojure-italy (1)
- # clojure-mexico (1)
- # clojure-russia (74)
- # clojure-spec (66)
- # clojure-uk (22)
- # clojurescript (124)
- # cursive (10)
- # datomic (79)
- # events (2)
- # immutant (3)
- # jobs (4)
- # klipse (38)
- # leiningen (2)
- # luminus (1)
- # off-topic (25)
- # om (48)
- # om-next (36)
- # on (1)
- # onyx (19)
- # overtone (3)
- # pedestal (2)
- # proton (3)
- # re-frame (178)
- # reagent (49)
- # ring-swagger (1)
- # spacemacs (10)
- # specter (29)
- # testing (5)
- # untangled (6)
- # yada (65)
@ejelome we use that kind of thing extensively with react-native
I think you can also specify multiple styles as a vector
hmm no I'm wrong, at least on react-web that doesn't work
merge is your best bet then
in react-native you only have inline styles anyway
check this out: https://github.com/Project-J/lookbook
lookbook uses macros to merge styles at compile time
thanks @pesterhazy, great addition to my perspective how to do/solve styles đ
I'd love to see more discussion about Inline Styles in Reagent
also reusable styles
for reusable components
including an additional css file is a hassle (plus global namespace)
@pesterhazy sort of related: I've been using reagent to mount style nodes in the head. Works wonders if you need reactive css, like layouts based on a window size ratom.
so what am I doing wrong?
Warning: Unknown prop `tranform` on <g> tag. Remove this prop from the element. For details, see
in g (created by rest_resources_viz.core.viz)
in svg (created by rest_resources_viz.core.viz)
in div (created by rest_resources_viz.core.viz)
in rest_resources_viz.core.viz (created by rest_resources_viz.core.landing)
in h2 (created by rest_resources_viz.core.landing)
in rest_resources_viz.core.landing
looks like I cannot specify the transform
attribute
I am a bit rusty sooo đ
[:svg {:width width
:height height}
[:g {:tranform (str "translate(" (:left margin) "," (:top margin) ")")}]]
lol there is a typo there đ
I asked this over in #clojurescript, but this might be a better place: Any tips for debugging âUncaught TypeError: Cannot read property 'getHostNode' of nullâ in a reagent app?
Reading the React issues, it seems like this is due to React getting into a funky state when previous errors are swallowed using e.g. promises, but I donât have anything like that, unless reagent uses them internally.
[:input {:type :checkbox
:id :reseller?
:name :reseller?
:checked (boolean (:reseller? @app-state false))
:on-change #(swap! app-state update :reseller? not)}]
:value
is unnecessary for checkbox, but I don't think that should cause the problem
No, Iâve updated the snippet to my latest version - not sure whatâs going on there.
@gadfly361 Iâm not sure what that means, sorry - do you mean using the value of (:reseller? @app-state)
?
I ask, because i do not think the checkbox component itself is the problem. However, when it changes :reseller?
in your app-state, then something, somewhere else is going wrong
I use that value to hide/show another component with (when (:reseller? @app-state) âŚ)
, but that component doesnât directly use the value.
Interestingly, clicking the checkbox doesnât cause the checked state to change, so I suspect something is funky there.
(defn reseller-field []
[:div
[:label
[:input {:type :checkbox
:id :reseller?
:name :reseller?
:checked (:reseller? @app-state false)
:on-change #(swap! app-state update :reseller? not)
:key :reseller-id}]
[:span.label-body "Are you a reseller?"]]
(when (:reseller? @app-state false)
[:div
[:label {:for "reseller-id"} "Enter your reseller ID"]
[:input {:name "reseller-id"
:id "reseller-id"
:type "text"
:class (str "u-full-width"
(when (get-in @app-state [:errors :reseller-id]) " has-error"))
:value (:reseller-id-field @app-state "")
:on-change #(swap! app-state assoc :reseller-id-field (-> % .-target .-value))
:on-blur validate-reseller-id-field
:on-focus #(clear-error! :reseller-id)}]
(when-let [error (get-in @app-state [:errors :reseller-id])]
[:p.error-label error])
[:p.note "If you do not have a reseller ID, please "
[:a {:href ""} "contact us"] "."]])])