Dropdown without jQuery

[levithomason]

Hey...

This is an interim PR. There are todos, comments, missing features, and ugly things. There shouldn't be any bugs or cruft, though.

The rewrite thus far is >600 lines in the Dropdown and >700 lines in Dropdown tests. I want to get some eyes and feedback on the functionality and approach thus far before cleaning up and abstracting things.

The multiple feature will be added in the next Dropdown PR.

Areas of concern

These are the areas to watch and comment on. These are some known ugly parts. They've been added as TODOs to the main PR #206.

Events

We have two event systems at play, React synthetic events and real DOM events. You'll see lots of document.add/removeEventListener calls. This is necessary for keyboard and mouse events that are dispatched on the document. Example, clicking outside the dropdown or pressing escape to close an open dropdown. Ideally, we'll write a clean abstraction for handling these. Considering that we need to:

• prevent duplicate handlers
• cleanup all events on unmount
• provide once() functionality
• add/remove events at any time (not just lifecycle methods)

Debug / Logging

Currently, nearly every method has a console.debug() when called and a console.log() for any relevant debugging data. This would be pulled into an actual debug util. Consider:

• debug module
• removal in production code
• runtime flag to enable/disable by module

Spreading Consumer Props

Stardust components should spread the consumer's props. We've experimented with a couple patterns for doing this effectively, though they each beak down. Consider:

• every prop not defined in propTypes (public interface) is a consumer prop
• propTypes may be stripped from production code in the future
• using ...props in render() isn't sufficient when breaking down many render methods

If it weren't for stripping propTypes in production we may be able to naively:

const getConsumerProps = (self) => _.omit(self.props, _.keys(self.constructor.propTypes))

[levithomason]

The docs are getting an overhaul to better demonstrate the v1.0 component APIs. Take this example with a grain of salt. It is here only to show that the Dropdown works as expected.

[ghost]

Just confirming we want this TODO in here.

[levithomason]

aye, thanks. this is a reminder to handle the search in menu dropdown.

[ghost]

Lots of code in here, but I passed over and nothing other than the required options attribute stood out at me. Sweet looking tests! 🍶