Passing down original js props in render props does not work with js->clj
Sudakatux opened this issue · comments
James Stuart Milne commented
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)