clojurescript 2022-06-13

Ben Hammond19:06:27

I am trying to render the material-ui Vertical Tabs snippet into clojurescript https://mui.com/material-ui/react-tabs/#vertical-tabs and I am wondering about the correct way to do the prop-types

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired,
};

Is it a with-meta thing sort of like

(ns verticaltabs
  (:require
   [prop-types :as PropTypes]
...
(def TabPanel
  (with-meta
   (fn [{:keys [value index] :as props} & children]
     (let [displayed (= value index)]
       [:div {:role "tabpanel"
              :hidden (not displayed)
              :id (str "vertical-tabpanel-" index)
              :aria-labelledby (str "vertical-tab-" index)}]
       (when displayed
         [:> Box {:sx #js{:p 3}}
          [:> Typography children]])))
   {:propTypes #js {:index (. (. PropTypes -node) -isRequired)
                    :value (. (. PropTypes -node) -isRequired)
                    :children (. PropTypes -node)}}))

is there a better way?

p-himik19:06:38

You don't need propTypes at all, as far I understand.

Ben Hammond19:06:16

I understand its a nice-to-have rather than a must

lilactown19:06:11

propTypes is just a property you can assign to a component

lilactown19:06:12

however, it looks like you're using reagent. reagent has a special way of storing it's arguments in React props.

Ben Hammond19:06:23

and how would you do that when your component is a function?

Ben Hammond19:06:39

using UIx, but very similiar I think

lilactown20:06:03

simply

(defn foo [,,,] ,,,)

(set! (.-propTypes foo) #js {,,,})

lilactown20:06:12

not sure how UIx stores props

lilactown20:06:44

if you inspect your component using react devtools, you can see how props get passed to your component

👍 1

Ben Hammond20:06:04

oh I hadn't thought of that

lilactown20:06:22

e.g. for reagent it stores all the arguments in [my-component foo bar baz] in a single argv prop

lilactown20:06:35

and wraps your function in a special wrapper component that will pull out the argv prop and then call your function with it

lilactown20:06:46

this makes propTypes basically useless

Ben Hammond21:06:30

so what I would like to think of as props will always be found in the cljs map at index 1 of the vector (.-argv props) and since react/js PropType does not support an XPath type syntax to point at the specfic keys its a non-starter

Ben Hammond21:06:47

and perhaps its not so very useful anywa

Ben Hammond21:06:52

that makes sense

Ben Hammond21:06:53

thanks

Kent Bull21:07:06

@U793EL04V thank you! this helped me today.

👍 2

2022-06-13

Channels