quantalytix / react-dropdownbox

A lightweight react select box that allows for searching and displaying of nested and grouped results.

react-dropdownbox

Install

npm i @quantalytix/react-dropdownbox

Demo Screenshot

Usage

import React, { Component } from 'react'

import ReactDropdown from '@quantalytix/react-dropdownbox'
import '@quantalytix/react-dropdownbox/dist/index.es.css'

class Example extends Component {
  render () {
    const sampleList = [
      {
        key: 1, text: 'Fictional Characters', value: 'Fictional Characters', children: [
          { key: 1, text:'Joker', value: 'Joker' },
          { key: 2, text:'Batman', value: 'Batman' },
          { key: 3, text:'Robin', value: 'Robin' },
          { key: 4, text:'Two-Face', value: 'Two-Face' },
          {
            key: 5, text:'Not a Superhero', value: 'Not a Superhero', children: [
              { key: 1, text:'Koolaid Man', value: 'Koolaid Man' },
              { key: 1, text:'Koolaid Woman', value: 'Koolaid Woman' },
              { key: 1, text:'Koolaid Woman Twin', value: 'Koolaid Woman Twin' },
              { key: 2, text:'Joe Dirt', value: 'Joe Dirt' },
            ]
          },
        ]
      },
      {
        key: 2, text:'Real People', value: 'Real People', children: [
          { key: 2, text:'Jenn', value: 'Jenn' },
          { key: 3, text:'Will', value: 'Will' },
          { key: 3, text:'Chris', value: 'Chris' },
          { key: 3, text:'Bradley', value: 'Bradley' },
          { key: 3, text:'Ben', value: 'Ben' },
          { key: 3, text:'Min', value: 'Min' },
          { key: 3, text:'Luke', value: 'Luke' }          
        ]
      }
    ]

    return (
      <ReactDropdown data={sampleList} placeholder='search or select' initialValue='Fictional Characters' onSelect={()=>{}}/>
    )
  }
}

License

MIT © quantalytix

react-dropdownbox's Issues

Investigate and replace the document.click event logic

@jennianelson When the component loses focus through a tab or other element focus event there is a routine that is run on our documentClick event. My concern is that if there are more than one dropdown boxes and a second one is selected that the first dropdown box will remain open based on the logic below.

handleClick = (e) => {   
    // if there are multiple dropdowns rendered on a single page
    // will this logic create a problem?
    let found = e.path.find(el => el.className === "react-dropdown")
    if (!!!found) {
      this.closeDropdown();
      this.resetSelection();
    }
  }

I started hacking together a different process but I still think it might have the same problem (and at the moment this does not work):

handleClick = (e) => {
    // we can use a forwardRef to potentially solve this...
    console.log(ReactDOM.findDOMNode(this.refs.dropdownbox)); // <div class="react-dropdown">...</div>
    console.log(document.activeElement); // <input class="input-box" placeholder="" ...>
    if (document.activeElement !== ReactDOM.findDOMNode(this.refs.dropdownbox)) {
      this.closeDropdown();
      this.resetSelection();
    }
}

Thoughts?

Rename & add properties of data prop

data = [
{
key: '',
text: '',
value: {} // could be anything?
},
...
]

Searching returns duplicate entries in filtered window after item selected

There appears to be bug that whenever an item is selected that it continually duplicates itself in the search/filter results box. I am working on the steps to reproduce this issue.

Add dynamic styling

Developer should be able to change the size and colors of the dropdown

Add ability to filter/search

Dropdown renderer function needs to be exposed for overriding

The drop-down box needs to have the drop-down render / component exposed so it can be overridden to allow for custom styling.

Add npm library scaffolding to register as a node library

We need to set this project up to work with npm package manager. I'd like to have the proper scaffolding included along with a "testing" application.

Unit tests need to be created

The library should have a unit tests created to make sure that the library renders and functions correctly.

Current stylesheet is different in published version

The version of the stylesheet in the master branch is correct; however the stylesheet being loaded in the npm package seems to be an older version. Do I just need to republish?

Remove selected item halo from dropdown arrows

When the user clicks the dropdown box arrows they show as being "in focus" with the selected borderline box drawn around the objects. We need to remove this by altering the css.

Library documentation needs to be written

We need to start documenting the library and how it works within the GitHub wiki pages.

Create custom dropdown renderer to showcase nested levels

Currently, we are only rendering a stacked list without showing how to dynamically display data in grouped levels. The demo code should be listed in the wiki and a link provided on the README.md.

Default styles need to be cleaned up

The default style of the drop down box needs to be cleaned up and made more easy to update. The SASS file should be provided in the distribution files.