Dropdown Tree Component

Drop Down Tree component that can be used to render a custom Drop Down Tree and receive input from the user.

Props

Property	Type
className	string
id	any
label	string
name	string
onChange	(event: ChangeEvent`<HTMLInputElement>`) => void
dataSource	any []
fields	object
placeholder	string

Usage

Here's an example of how to use the Drop Down Tree component:

Functional Component

App.tsx

import './App.css';
import { DropDownTree } from 'gbs-fwk-buildingblock';
import { useState } from 'react';
 
function App() {
  const [selectedValue, setSelectedValue] = useState();
  console.log(selectedValue);
 
  let data1 = [
    { id: 1, name: 'Discover Music' },
    { id: 2, pid: 1, name: 'Hot Singles' },
    { id: 3, pid: 1, name: 'Rising Artists' },
    { id: 4, pid: 1, name: 'Live Music' },
    { id: 6, pid: 1, name: 'Best of 2017 So Far' },
    { id: 7, name: 'Sales and Events' },
    { id: 8, pid: 7, name: '100 Albums' },
    { id: 9, pid: 7, name: 'Hip-Hop and R&B Sale' },
    { id: 10, pid: 7, name: 'CD Deals' },
  ];
  let fields1: Object = { dataSource: data1, value: 'name', text: 'name' };
 
  const handleOnChange = (args: any) => {
    setSelectedValue(args.value);
  };
 
  return (
    <div className="App">
      <DropDownTree
        id="tree1"
        fields={fields1}
        allowFiltering={true}
        change={handleOnChange}
      />
    </div>
  );
}
 
export default App;

Class Component

App.tsx

import React from 'react';
import { DropDownTree } from 'gbs-fwk-buildingblock';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: null,
    };
  }
 
  handleOnChange = (args: any) => {
    this.setState({ selectedValue: args.value });
  };
 
  render() {
    let data1 = [
      { id: 1, name: 'Discover Music' },
      { id: 2, pid: 1, name: 'Hot Singles' },
      { id: 3, pid: 1, name: 'Rising Artists' },
      { id: 4, pid: 1, name: 'Live Music' },
      { id: 6, pid: 1, name: 'Best of 2017 So Far' },
      { id: 7, name: 'Sales and Events' },
      { id: 8, pid: 7, name: '100 Albums' },
      { id: 9, pid: 7, name: 'Hip-Hop and R&B Sale' },
      { id: 10, pid: 7, name: 'CD Deals' },
    ];
    let fields1 = { dataSource: data1, value: 'name', text: 'name' };
 
    return (
      <div className="App">
        <DropDownTree
          id="tree1"
          fields={fields1}
          allowFiltering={true}
          change={this.handleOnChange}
        />
      </div>
    );
  }
}
 
export default App;

Dropdown Grid