reagent 2020-11-24 | Slack Archive

Jason23:11:10

Hello. I'm using Material UI widgets in my app and I notice that in the <https://material-ui.com/components/popover/#mouse-over-interaction%7CJS sample code (click '<>' to open code window)> , some widget properties are camelCase as expected, so I'm positive reagent will translate them to and from kebab-case for cljs use. However, some are kebab-case in the JS code. From the sample code:

<Typography
        aria-owns={open ? 'mouse-over-popover' : undefined}
        aria-haspopup="true"
        onMouseEnter={handlePopoverOpen}
        onMouseLeave={handlePopoverClose}
      >

Is reagent clever enough to notice this and not rewrite my cljs kebab-case keywords? If not, is there a workaround?

p-himik23:11:46

It's not that clever because it cannot possibly look into the JS code. But you can do that by using string keys instead of keyword keys.

p-himik23:11:21

This is how Reagent does it:

(def dont-camel-case #{"aria" "data"})

(defn capitalize [s]
  (if (< (count s) 2)
    (string/upper-case s)
    (str (string/upper-case (subs s 0 1)) (subs s 1))))

(defn dash-to-prop-name [dashed]
  (if (string? dashed)
    dashed
    (let [name-str (name dashed)
          [start & parts] (string/split name-str #"-")]
      (if (dont-camel-case start)
        name-str
        (apply str start (map capitalize parts))))))

p-himik23:11:56

Oh, hold on - if your question touches only aria-* and data-* properties, then you're golden since Reagent treats them and only them specially.

Jason23:11:04

My concerns are indeed limited to aria-*so that is great news. Thanks very much for responding.

2020-11-24

Channels