New API proposal

[edygar]

I've just read your complain on twitter, and inspired by react-radio-group, I've come up with the following API:

<AutoComplete
  onSelect={doSomething}
  onSearchTermChange={(query, next)=> queryOptions(query).then(next) }
  children={(state, controls)=>
    /*
      `controls` provides callbacks to control AutoComplete, such as setQuery,
      unfocusOption, focusNextOption and focusPrevOption. Also, it can provide the
      `navigateByKeyboad`, which will handle the up and down keys and enter.

      unfocusOption, will unfocus the current focused option.
    */
    <input
      type="search"
      name="query"
      value={state.query}
      onChange={controls.setQuery}
      onKeyPress={controls.navigateByKeyboard}
    />
    { state.async && state.isLoading? <LoadingIcon />:

      {/* `Popup` is a dumb vendor component */}
      <Popup>
        {state.options?
          state.options.map(({option, state, controls})=>
            <div
              key={option.id}
              {/*
                `controls` here could have the AutoComplete `controls` bound to
                current option, such as focusOption, focusNextOption, focusPrevOption,
                selectOption, all with no arguments, so it can be event callbacks
              */}
              onClick={controls.select}
              onMouseEnter={controls.focus}
              onMouseLeave={controls.unfocus}

              className={(state.isFocused? "focused ":"")+(state.isSelected? "selected": "")}

              {/* `option`  could be of any type */}
              children={option.value} 
            />
          )
        :`No valid options for ${query}.`}
      </Popup>
    }
}/>

What do you think?

[ryanflorence]

that puts a lot more than just rendering in the hands of the consumer. I think its on the right track, though. I've got some ideas, just no time right now :\ I should add some pseudo code like this

[edygar]

I would love to know what are these ideas, share it when you have time, maybe I can help to implement them…

[cainlevy]

What if the API was based on partial application? Suppose there was an inputComponent prop where we must supply a component that exposes onChange and onBlur props for react-component to hook into.

[CMTegner]

@cainlevy is this to allow supplying a replacement for the <input> element? If so, you may be interest in #247.