nosco / hx

A simple, easy to use library for React development in ClojureScript.
MIT License
246 stars 16 forks source link

Passing down original js props in render props does not work with js->clj #66

Open Sudakatux opened 4 years ago

Sudakatux commented 4 years ago

In attempt to translate material-ui autocomplete. passing props from render-prop function down will break with a Error: Doesn't support namespace: ref error Consider translating the following component to hx

<Autocomplete
  options={top100Films}
  getOptionLabel={option => option.title}
  style={{ width: 300 }}
  renderInput={params => (
    <TextField {...params} label="Combo box" variant="outlined" fullWidth />
  )}
/>
(defnc HeaderAutocomplete [__]
       (let [renderInput (fn [params]
                           (hx/f [TextField (js->clj params)]))]
       [Autocomplete {:id "autocomplete"
                      :options (clj->js options)
                      :renderInput renderInput
                      :getOptionLabel (fn [elem]
                                        (:title elem))
                      }]))

That will throw Error: Doesn't support namespace: ref . The workaround was using clj-bean as so :

(defnc HeaderAutocomplete [__]
       (let [renderInput (fn [params]
                           (hx/f [TextField (merge {:fullWidth true
                                                    :variant "outlined"} (bean params) )]))]
       [Autocomplete {:id "autocomplete"
                      :options (->js options)
                      :renderInput renderInput
                      :getOptionLabel (fn [elem]
                                        (:title (bean elem) ))
                      }]))

note Im using bean and not ->clj since it seems that if you recursively convert the whole object it wont work. in fact i was only able to change inputProps prop, by merging with js directly using Object.assign like this :


:inputProps (.assign js/Object inputProps-clj (->js { :onChange #(updateVal (-> % .-target .-value))
                                                                                                                        :value selected-value}))

where inputProps-clj is :

(let [params-clj (bean params)
                                 inputProps-clj (:inputProps params-clj)