Hello all, I´m using soda-ash and I want to know what is the as={Segment} in <Sidebar.Pushable as={Segment}> mean? How to convert to reagent stuff?

as is props https://facebook.github.io/react-native/docs/props.html

from reagent you can use it like

[:> (.-Pushable Sidebar) {:as Segment} "here you put yout children components" ]

Do I have to use [:> ... if I already using soda-ash wrapper?

i never use soda wraper:/

like [SidebarPushable {:as <something>}]

https://github.com/gadfly361/soda-ash/blob/master/src/soda_ash/macros.clj#L166

@fabrao no, you dont use :>

i think its done for you:D

@gadfly361 so how do I convert to clojurescript Sidebar.Pushable as=...?

what is the converting for [SidebarPushable {:as <something>}], what do I use in <something> ?

did you try [sa/SidebarPushable {:as sa/Segment}]?

I tried {:as (reagent/as-element [sa/Segment])}

but i think you need import Segment from cljsjs.semantic-ui-react and use it.

not from soda-ash

I think not using as will be ok

is not a type convertion?

https://react.semantic-ui.com/modules/sidebar#sidebar-example-left-overlay

@fabrao {:as "Segment"}

ok, gadfly it´s something I couldn´t imagime

@fabrao nvm, think i am mistaken .. one moment

there is probably a better way to do this, but think it is actually {:as (aget js/semanticUIReact "Segment")}

Using "Segment" will make the html tag literally be a segment... whereas doing the aget thing will create a div will the proper classes (i.e. "ui segment")

@gadfly361 is any way to pass reagent compoent here?

somethink like

(defn foo [props]  ........ ))

I would have tried the same as what @fabrao has already tried, so seems like you need to use the react version of the component .. so if as-element and reactify-component dont work, i am at a loss.

mby reagent/as-component?

@mateusz.probachta, i don't think the :as is a free-form component .. i think it parses it and adds appropriate classes depending on which specific semantic ui component it is .. this is just a specific thing about semantic ui react i think (but been a long time since ive thought about semantic so could be wrong)

@mateusz.probachta i believe as-component and as-element are the same, one is just a legacy name

i never use react.sementic-ui

https://github.com/reagent-project/reagent/blob/35908d142d9695293f553a8634378a051c41fac5/src/reagent/core.cljs#L86

My brain freezed, high level conversation 🙂

oooo, thank you:D

@fabrao I apologize for not having an elegant answer, but i would try {:as (aget js/semanticUIReact "Segment")} and see if that works for you

thank's for your time

a previous convo found here: https://clojurians-log.clojureverse.org/clojurescript/2017-05-14.html (search for soda-ash)

the same question: "I am currently using soda-ash ( a reagent adaptation of semantic-ui react). While dealing with sidebar there is 'as' prop that needs a string/function ( a react component). here's what i am doing [sa/SidebarPushable {:as (r/reactify-component [sa/Segment])} [sa/Sidebar {:as (r/reactify-component [sa/Menu]) :vertical true :inverted true :animation "overlay"} [sa/MenuItem {:name "Strategies"} [sa/Icon {:name "puzzle"}]]]]"

Side question about gadfly361 [3:23 AM] @fabrao I apologize for not having an elegant answer, but i would try {:as (aget js/semanticUIReact "Segment")}` and see if that works for you` I recently dove into React Native and have read a bunch of existing projects. and keep seeing folks use aget on ClojureScript objects. I had understood that this was discouraged, since it is fragile in advanced compilation. Has something changed? Or, when is it ok to use? (I've been using oops.core\oget and ocall instead. Am I being correct, or just overly cautious?

@deg aget should only be used on arrays, as simple as that :)

There’s a warning you can add to your builds to detect bad use of aget.

for objects you should us: (.-bar foo) => foo bar or (.. foo -bar -baz) => foo.bar.baz

but in clojurescript aget sould be ok because it is translated to (aget foo "bar" "baz") => foo["bar"]["baz"]

How to figure out which one of your components does not have a unique key?

I got error messages Warning: Each child in an array or iterator should have a unique "key" prop. from time to time, but can't figure out where does it come from.

check your fors and maps are you providing a key for each element?

The issue is that I have pretty complicated form with lots of fields, which is generated, so I can't check each of them by hand. I'm looking for a more general solution which ideally would print out the element in question.

@deg @mateusz.probachta Instead of aget use goog.object functions for field access. It’s explained here https://clojurescript.org/news/2017-07-14-checked-array-access

I’ll also mention the cljs-oops library which makes goof.object access much easier

@deg i did not noticed oops lib in your comment. Its rly nice way to deal with js interop (I reading cljs-oops docs now)

Is there a framework that works well with core.async?

how would I convert this to reagent: https://github.com/STRML/react-grid-layout/blob/master/test/examples/1-basic.jsx

@theasp i’m not sure what you are asking exactly (?)

@faxa the hardest part is usually just importing the library and using it. once you have a handle to RGL and widthProvider, you could translate that code pretty straightforwardly i think

the only magic will be when you use ReactGridLayout, which will look something like :`[(reagent/adapt-react-class ReactGridLayout) {props} children]`