reagent 2020-06-11 | Slack Archive

pmooser08:06:44

Is it possible to use react-transition-group directly, or do we need to use this stuff via React.addons.CSSTransitionGroup ?

pmooser08:06:11

To answer my own question, yes, it is possible. You just have to adapt to the newer API.

e18:06:57

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...

p-himik18:06:53

Try replacing :utils (reagent with :utils #(reagent.

p-himik18:06:39

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.

e19:06:48

Hmm, neither work. The latter gives me the same error, and the former gives me Uncaught TypeError: utils.date is not a function.

e19:06:03

Really bizarre this works compiled under a browser target ... maybe it's a shadowcljs issue

2020-06-11

Channels