DropDown Component

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

Props

Property	Type	Description
className	string	The CSS class name(s) applied to the dropdown
id	any	The unique identifier for the dropdown
label	string	The label for the dropdown
name	string	The name of the dropdown
disabled	boolean	Whether the dropdown is disabled or not
onChange	(event: ChangeEvent`<HTMLInputElement>`) => void	The event handler for when the value of the dropdown changes
dataSource	any []	The data source for the dropdown options
fields	object	The fields to display in the dropdown options
sortOrder	any	The sort order for the dropdown options
placeholder	string	The placeholder text displayed in the dropdown
allowFiltering	boolean	Whether filtering is allowed in the dropdown
popupHeight	string	The height of the popup displaying the dropdown options
autofill	boolean	Whether autofill is enabled for the dropdown

Usage

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

Functional Component

App.tsx

import { useState } from 'react';
import './App.css';
import { DropDown } from 'gbs-building-block';
 
function App() {
  let data = [
    { 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 fields = { text: 'name', value: 'name' };
 
  // State to store selected data
  const [selectedData, setSelectedData] = useState();
 
  console.log(selectedData);
 
  const handleComboChange = (args: any) => {
    setSelectedData(args.itemData);
  };
 
  return (
    <div className="App">
      <div style={{ width: '12rem' }}>
        <DropDown
          allowFiltering={true}
          dataSource={data}
          fields={fields}
          placeholder="Choose the choosen one"
          id="custom_data"
          name="data_custom"
          autofill={true}
          onChange={handleComboChange}
        />
      </div>
    </div>
  );
}
 
export default App;

Class Component

App.tsx

import React from 'react';
import './App.css';
import { DropDown } from 'gbs-building-block';
 
class App extends React.Component {
  data = [
    { 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' },
  ];
 
  fields = { text: 'name', value: 'name' };
 
  state = {
    selectedData: undefined,
  };
 
  handleComboChange = (args) => {
    this.setState({ selectedData: args.itemData });
  };
 
  render() {
    console.log(this.state.selectedData);
 
    return (
      <div className="App">
        <div style={{ width: '12rem' }}>
          <DropDown
            allowFiltering={true}
            dataSource={this.data}
            fields={this.fields}
            placeholder="Choose the choosen one"
            id="custom_data"
            name="data_custom"
            autofill={true}
            onChange={this.handleComboChange}
          />
        </div>
      </div>
    );
  }
}
 
export default App;

Dialog Box Dropdown Tree