This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-11-20
Channels
- # beginners (17)
- # boot (19)
- # chestnut (1)
- # cider (25)
- # clara (1)
- # cljs-dev (15)
- # cljsrn (10)
- # clojars (9)
- # clojure (182)
- # clojure-brasil (27)
- # clojure-dusseldorf (2)
- # clojure-gamedev (5)
- # clojure-germany (1)
- # clojure-greece (2)
- # clojure-italy (18)
- # clojure-poland (5)
- # clojure-romania (3)
- # clojure-russia (29)
- # clojure-serbia (6)
- # clojure-spec (9)
- # clojure-uk (77)
- # clojure-ukraine (1)
- # clojurescript (61)
- # cursive (5)
- # datomic (20)
- # defnpodcast (1)
- # emacs (10)
- # fulcro (2)
- # graphql (2)
- # hoplon (11)
- # lumo (4)
- # off-topic (50)
- # om (3)
- # onyx (26)
- # other-languages (39)
- # parinfer (2)
- # pedestal (5)
- # re-frame (32)
- # reagent (48)
- # rum (7)
- # shadow-cljs (10)
- # spacemacs (29)
- # sql (10)
- # unrepl (58)
- # vim (3)
@gonewest818 it isn’t clear to me why the default wouldn’t do what you expect
If the sa/Select
doesn’t work, but :select
does though, you may wan tto look at the generated html
See what sa/Select
is producing. I’m not the most qualified to answer this though since I haven’t used these semantic-ui components myself yet
Most of the time the pattern seems to be all controlled input, no default behavior for form submission due to typically wanting something like an async request
Not sure all your specifics. However, I’d think the simple and default behavior would work if you aren’t somehow controlling certain components in a way that is preventing the default DOM state from happening
I did look at the html. I think it’s because a “sa/Form” isn’t a “<form>“, neither is a “sa/Select” a “<select>“. They’re divs with CSS and some custom javascript doing whatever it is they do. I haven’t looked at the react bootstrap components but I wouldn’t be surprised if the situation is similar.
Anyway, answering my own question, I guess my handler will end up something like (set! js/window.location.href (format "/?foo=%&bar=%" a b))
And I’m really not doing anything all that tricky in the components (because I’m new at this).
Yeah, if they are making <div>
etc, I’d think you’d have to take control of the submission
yes, that seems to be the case. Alright, I’ll take control of the submission for now. Later, I may choose to rip this out and not navigate away, but I might as well complete this journey before taking the next. thanks
The author of the soda-ash
project is on this channel though I believe from time to time
All good, problem solved.
I switched everything back to the soda-ash variants like so:
[sa/Form
[sa/Input ...]
[sa/Select ...]
[sa/Button {:on-click #(set! js/window.location.href ...)]]
where the on-click handler is formatting the url parameters the way I need.@gonewest818 happy you were able to figure it out!
Thanks
What's people's go-to for enter/exit transitions these days? Every time I try to mix in react-motion
the mix of js/cljs props makes things super painful
@minikomi we ended up using react-flip-move
but I haven't looked at this space in a year, so there might be shiny new things available
how it can be made to work with reagent shown here: http://upgradingdave.com/blog/posts/2016-12-17-permutation.html
I have used react-flip-move based on a previous recommendation from @mikethompson and i can say it works great!
Does anyone have any experience using https://github.com/atlassian/react-beautiful-dnd via reagent? They use a redux-style connect
strategy to co-ordinate dragging & dropping and I’m having trouble translating their basic example into clojurescript & reagent code
I’m using a combination of (as-element ...)
and (get-props (current-component)
to try and switch between reagent and react as needed
But one of my current-component
calls is returning nil
so I’ve no idea how to get the current component instance or the react equivalent
For info, a self-contained version of my code would be:
(defn dnd
[]
[:> Dnd.DragDropContext {:onDragStart on-drag-start :onDragEnd on-drag-end}
[:div
[:> Dnd.Droppable {:droppableId "library" :isDropDisabled true}
(fn [provided snapshot]
(r/as-element
[:div {:ref (.-innerRef provided)}
(for [{:keys [id content] :as item} [{ :id 1 :content "First" } { :id 2 :content "Second" } { :id 3 :content "Third" }] ]
(r/as-element
[:> Dnd.Draggable {:key id :draggableId id}
(fn [provided snapshot]
(.log js/console provided snapshot)
(r/as-element
[:div
(do
(.log js/console (r/current-component)) ;; FIXME can't get current component as in react land, not reagent land. Crashes at this point
(let [handle-props (r/props (r/current-component))] ;; FIXME: probably need to log this stuff to see what it looks like
(.log js/console handle-props);
(r/as-element
[:div (merge handle-props {:ref (.-innerRef provided)})
(r/as-element
[lib-fragment id content])
])))
(.-placeholder provided)]))]))]))]]])
(following the example on the react-beautiful-dnd homepage, I’d normally have much shorter fns…)
Hello, how can I change the value of :active in my nav items? just altering the ratom does not seam to work... Sorry for the beginner question