Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Sudakatux opened this issue Nov 10, 2019 · 0 comments

Comments

@Sudakatux
Copy link

Sudakatux commented Nov 10, 2019

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant