v2.0.0

2.0.0 (2019-06-10)

Bug Fixes

• Add TypeScript definitions (#223) (528b38f), closes #209
• Prevent dropdown close on expand in Firefox (#231) (7439328), closes #198 /ellinge.github.io/react-dropdown-tree-select-test/#v117
• Typing error for children (#232) (05be38c), closes #223
• Updated onAction to bubble up custom props (#230) (764a002)

Code Refactoring

• Consolidate showDropdown props (#253) 🔨️ (655c45a)
• Update mode to include hierarchical (#251) (637fe66)

Features

• Added support for single select in tree dropdown (#217) (85b07ea), closes #119
• Group logically related props together (#242) ⚡️ (007602b)

BREAKING CHANGES

Property changes

simpleSelect, placeHolderText, noMatchesText

Description	Usage before	Usage after
Added a new mode prop	<DropdownTreeSelect simpleSelect ... />	<DropdownTreeSelect mode="simpleSelect" ... />
Bundled text props into a single object	<DropdownTreeSelect placeholderText="My text" noMatchesText="No matches" ... />	<DropdownTreeSelect texts={{ placeholder: 'My text', noMatches: 'No matches' }} ... />

hierarchical prop

hierarchical prop is now moved under mode prop.

// before
<DropdownTreeSelect data={data} hierarchical={true} />

// after
<DropdownTreeSelect data={data} mode="hierarchical" />

Action Changes

• The option to pass a local onAction handler on a node is now removed. Use the global onAction event instead.

  <DropdownTreeSelect onAction={onAction} ... />

• onAction signature is now consistent with signature for other event handlers such onChange and onNodeToggle

  // before
  onAction = ({ action, id }) => {
    console.log(action, id)
  }
  
  // after
  onAction = (node, action) => {
    console.log(action, node.id)
  }

• Any custom props passed to node or action is accessible in the event properties. This will make it easier to add generic custom logic based on your custom data/properties which can be used instead of separate handlers.

  For example:

  // node with action and custom props
  {
    id: 'mynode',
    propA: 'hello',
    propB: true,
    actions: [
      {
        id: 'myaction',
        propX: {...},
        propY: 12
      }
    ]
  }
  
  onAction = (node, action) => {
    console.log(node.propA, node.propB, action.propX, action.propY)
    // prints hello true {...} 12
  }