This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-06-11
Channels
- # announcements (4)
- # aws (6)
- # babashka (40)
- # beginners (318)
- # biff (4)
- # bootstrapped-cljs (9)
- # calva (19)
- # chlorine-clover (1)
- # cider (3)
- # clj-on-windows (25)
- # cljdoc (8)
- # cljfx (1)
- # cljs-dev (30)
- # cljss (2)
- # clojure (62)
- # clojure-chile (9)
- # clojure-europe (11)
- # clojure-finland (17)
- # clojure-italy (1)
- # clojure-kc (1)
- # clojure-nl (3)
- # clojure-spec (27)
- # clojure-uk (40)
- # clojuremn (1)
- # clojurescript (51)
- # conjure (6)
- # cursive (8)
- # data-science (9)
- # datahike (4)
- # datascript (1)
- # datomic (31)
- # emacs (10)
- # emotion-cljs (1)
- # events (1)
- # figwheel-main (16)
- # find-my-lib (1)
- # fulcro (30)
- # graalvm (3)
- # graphql (12)
- # helix (16)
- # honeysql (5)
- # jobs (1)
- # jobs-discuss (10)
- # juxt (3)
- # kaocha (26)
- # lambdaisland (3)
- # leiningen (15)
- # malli (7)
- # off-topic (100)
- # pathom (8)
- # pedestal (15)
- # protojure (24)
- # re-frame (2)
- # reagent (7)
- # reitit (22)
- # remote-jobs (1)
- # shadow-cljs (140)
- # spacemacs (17)
- # spire (2)
- # tools-deps (23)
- # uix (11)
- # vim (5)
- # xtdb (3)
- # yada (3)
Is it possible to use react-transition-group
directly, or do we need to use this stuff via React.addons.CSSTransitionGroup
?
To answer my own question, yes, it is possible. You just have to adapt to the newer API.
I have the following bit of code to create a datepicker:
(ns ui.components.picker.core
(:require ["@material-ui/pickers" :refer [TimePicker DatePicker MuiPickersUtilsProvider]]
["@date-io/moment" :as MomentUtils]
[ui.utils.core :as utils]
[reagent.core :as reagent]))
(def component-styles {})
(def component-props {:inputVariant "outlined" :fullWidth true})
(defn date-picker-real [props & children]
(let [all-props (-> component-props (merge props))]
(utils/->component DatePicker all-props
:styles component-styles
:children children)))
;; Call this datepicker from the UI; really it's just wrapping the actual DatePicker component with the MuiPickersUtilsProvider, which is necessary to get this all to work.
(defn date-picker [props & children]
[:> MuiPickersUtilsProvider {:utils (reagent/as-element MomentUtils)} [date-picker-real props children]])
However, after compiling this to a npm module, I get error messages like the following:
VM53713 react_devtools_backend.js:6 Warning: Failed prop type: Invalid prop `utils` of type `object` supplied to `MuiPickersUtilsProvider`, expected `function`.
[. . .]
Uncaught TypeError: Utils is not a constructor
at eval (useUtils-cfb96ac9.js?2ccd:11)
at mountMemo (react-dom.development.js?61bb:15442)
at Object.useMemo (react-dom.development.js?61bb:15738)
at useMemo (react.development.js?72d0:1521)
at MuiPickersUtilsProvider (useUtils-cfb96ac9.js?2ccd:10)
at renderWithHooks (react-dom.development.js?61bb:14803)
at mountIndeterminateComponent (react-dom.development.js?61bb:17482)
at beginWork (react-dom.development.js?61bb:18596)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
Is there some other way I'm supposed to pass in this MomentUtils object? I think the equivalent JS would be something like:
<MuiPickersUtilsProvider utils={MomentUtils}>
It's worth noting that this works just fine if I compile as a browser target, but it doesn't if I compile as an npm module...Oh, wait. If you can just pass MomentUtils
in JS, then just do the same thing in Reagnet - just pass MomentUtils
as is, without wrapping it.