This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-10-27
Channels
- # aws (3)
- # aws-lambda (8)
- # bangalore-clj (1)
- # beginners (155)
- # boot (13)
- # cider (88)
- # cljs-dev (3)
- # cljsrn (9)
- # clojure (120)
- # clojure-india (1)
- # clojure-italy (2)
- # clojure-norway (1)
- # clojure-romania (2)
- # clojure-russia (41)
- # clojure-spec (4)
- # clojure-uk (34)
- # clojurescript (68)
- # core-logic (16)
- # cursive (11)
- # data-science (9)
- # datomic (19)
- # dirac (6)
- # duct (20)
- # emacs (7)
- # events (2)
- # figwheel (4)
- # fulcro (12)
- # graphql (1)
- # hoplon (68)
- # klipse (1)
- # leiningen (7)
- # lumo (11)
- # off-topic (9)
- # onyx (114)
- # pedestal (4)
- # protorepl (15)
- # re-frame (60)
- # reagent (3)
- # ring (18)
- # shadow-cljs (15)
- # spacemacs (82)
yesterday we talked about the how I should render modal in the parent component of the component I want to render: line 369 of section N15's source parallel query of the modal and the data to render.
you can totally pull the data out and put it in the header without changing the query
Today I remembered another reason why I have to render modal in the component itself and I can't use parallel query
I need to reset form when someone clicks modal close button, and I can only do that if I call b/ui-modal
in actual form component render
(b/ui-modal (om/computed modal {:onClose #(f/reset-from-entity! this form)})
can only be done in PersonEdit
render (which is the form), but not in the parent PersonEditModal
, which would be the component with {:modal b/Modal} {:person PersonEdit}
query.
though I guess that, again, if I'm clever with the maps, I can do it
Ok, now I've done exactly as in N15 and it doesn't work for second modal:
(defui ^:once DummyModal
static om/IQuery
(query [this] [{:ui/modal (om/get-query b/Modal)}])
static fc/InitialAppState
(initial-state [this props] {:ui/modal (fc/get-initial-state b/Modal {:id :dummy-modal})})
Object
(render [this] nil))
(defsc PersonEditModal
[this {:keys [ui/modal modal-item]} _ _]
{:query [{:ui/modal (om/get-query b/Modal)} {:modal-item (om/get-query PersonEdit)}]
:css-include [PersonEdit]
:protocols (static fc/InitialAppState
(initial-state [this props] {:ui/modal (fc/get-initial-state b/Modal {:id :person-edit})}))}
render elided
(route/defrouter ModalRouter :modal-router
(ident [this props] [(-> props :ui/modal :db/id) :singleton])
:dummy-modal comp/DummyModal
:person-edit PersonEditModal)
This results in the following state on page load (that is before trying to display any popup)
{:fulcro.ui.boostrap3.modal/by-id
{:dummy-modal
{:db/id :dummy-modal,
:modal/active false,
:modal/visible false,
:modal/keyboard true,
:modal/size nil,
:modal/backdrop true}},
:person-edit
{:singleton
{:ui/modal [:fulcro.ui.boostrap3.modal/by-id :person-edit]}},
:dummy-modal
{:singleton
{:ui/modal [:fulcro.ui.boostrap3.modal/by-id :dummy-modal]}}
As you can see :person-edit :singleton
links to [:fulcro.ui.boostrap3.modal/by-id :person-edit]
, but that is missing from the :fulcro.ui.boostrap3.modal/by-id
table, and for the life of me I don't understand why.Modals work if I force initial state into :fulcro.ui.boostrap3.modal/by-id
table by hand
Seems to me defsc lacks support for root queries:
Syntax error in defsc. One or more destructured parameters do not appear in your query! {:offending-symbols [ui/me-id]}` and I have query [[:ui/me-id '_] :person/id]
.
@roklenarcic had you though about using a simpler component for your modal? does it really needs data?
you could use a parent component data to decide if the modal is show/hidden, and the contents of the modal can be the stateful component
I usually do stateless modals