Multi Select Dropdown Component

Check Box component that can be used to render a custom check box 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 Text Box component:

Functional Component

App.tsx

import { useState, useEffect } from "react";
import { MultiSelectDropdown } from "gbs-fwk-buildingblock";
import "./app.css";
 
interface multiSelectProps {
  data: any[];
}
 
const App = (props: multiSelectProps) => {
  const [data, setData] = useState<any[]>([]);
  const [selectedValues, setSelectedValues] = useState<any[]>([]);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch("https://api.npoint.io/baab7e29aec56b6d27d9");
        const data = await res.json();
        setData(data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
 
  const fields: any = { text: "Name", value: "Code" };
 
  const onChange = (args: any) => {
    setSelectedValues(args.value);
  };
 
  return (
    <div style={{ margin: "10rem" }}>
      <MultiSelectDropdown
        dataSource={data}
        fields={fields}
        change={onChange}
        value={selectedValues}
      />
    </div>
  );
};
 
export default App;

Class Component

App.tsx

import { Component } from 'react';
import { MultiSelectDropdown } from 'gbs-fwk-buildingblock';
import './app.css';
 
interface multiSelectState {
  data: any[];
  selectedValues: any[];
}
 
export default class app extends Component<{}, multiSelectState> {
  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      selectedValues: [],
    };
  }
 
  componentDidMount(): void {
    const fetchData = async () => {
      try {
        const res = await fetch('https://api.npoint.io/baab7e29aec56b6d27d9');
        const data = await res.json();
        this.setState({ data: data });
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }
 
  fields: any = { text: 'Name', value: 'Code' };
 
  onChange = (args: any) => {
    this.setState({ selectedValues: args.value });
  };
 
  render() {
    const { data, selectedValues } = this.state;
    console.log(selectedValues);
 
    return (
      <div style={{ margin: '10rem' }}>
        <MultiSelectDropdown
          dataSource={data}
          fields={this.fields}
          onChange={this.onChange}
          value={selectedValues}
        />
      </div>
    );
  }
}

Modal Pdfviewer