gistfile1.txt

;; We are given the 'inputProps' (see the main function below) as our    
;; props argument here. The argument is the return value from ->input-props.    
;;    
;; The returned component should be the Input component for the    
;; TextField component.  We can simply return a div that uses the    
;; 'inputRef' from the props (again, see ->input-props).                                     
;;                                                                                           
;; We will return a div here - but the important part is the :children    
;; key in the props, which should contain the placeholder, and the input    
;; element.    
(defn- input-component [props]    
  (let [props (js->clj props)    
        input-ref (:inputRef props)    
        props (dissoc props :inputRef)    
        input-props (merge props {:ref input-ref})]    
                                     
    (r/as-element    
      [:div (s/use-style styles input-props)])))    
                                       
;; Create the input props that will be passed to the Input element    
;; within this text field.    
;; I don't (yet) understand the details of the innerRef stuff...    
;; https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js#L121    
;; Note that we need to merge the inner props and the inputRef and children    
;;    
;; These props are passed to the Input element within our TextField. We are    
;; setting the 'inputRef' to be a function    
(defn- ->input-props [props]    
  (let [inner-props (js->clj (oget props "?innerProps"))    
        children    (oget props "?children")    
        inner-ref   (oget props "innerRef")]    
                                      
    (merge inner-props {:inputRef inner-ref    
                        :children children})))    
                                       
;; If there were :textFieldProps created in the core namespace in    
;; the main props map, pull them out and return them here.    
(defn- ->textfield-props [props]    
  (let [tf-props (oget props "selectProps.?textFieldProps")]    
    (js->clj tf-props)))    
                                       
;; https://react-select.com/props#replacing-components    
;; The props passed to us here should contain an:    
;; - innerRef - This should be the property that facilitates internall    
;;              managed behavior. This should be assigned to the 'ref'    
;;              property of the relevant dom element. Here, FIXME: WTF is it?    
;; - innerProps - All functional properties that the inner component needs are    
;;                provided in innerProps. You must pass them to the inner    
;;                component - you can see us pull them out in ->input-props    
;; - selectProps.textFieldProps - A JS object that contains information for    
;;                                the text field. We are passing it directly    
;;                                to the TextField component.    
;;    
;; This component is basically a TextField to which we are passing the inner    
;; props/ref to the Input within it.    
(defn el [props]    
  (let [input-props (->input-props props)    
        tf-props    (->textfield-props props)    
        all-props   (merge tf-props    
                           {:full-width true    
                            :InputProps    
                            {:inputComponent input-component    
                             :inputProps     input-props}})]    
                                      
    (r/as-element    
      [:> TextField all-props])))