React-Dropdown-Checklist-Component

Demo react-Dropdown-checklist-demo

Basic Usage

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { DropdownCheckList } from '@la-components/react-dropdown-tree-select';
import '@la-components/react-dropdown-tree-select/dist/dropdown-checklist.css';
import '@la-components/react-dropdown-tree-select/dist/dropdown-checklist.custom.css';

export default class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectedMobileIds: ''
        };
    }

    onCheckFilterItemsChanged(checkedItems){
        const checkedMobileIds = checkedItems.selectedItems.map(r => r.data.mobileId);
        this.setState({selectedMobileIds: checkedMobileIds.join(',')})
    }

    render() {
        return (
            <div>
                <DropdownCheckList
                        dropdownName="mobile-filter"
                        dataSource={data}
                        idName="MobileId"
                        parentIdName="ParentId"
                        displayName="MobileName"
                        height={370}
                        width={200}
                        expandAll={true}
                        selectAll={true}
                        selectAllText="All mobiles"
                        multipleSelectedText="{0} selected mobile(s)"
                        onCheckItemsChanged={onCheckFilterItemsChanged} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("app"));

Dropdown Checklist with CheckBox (1 level)

render() {
	return (
		<DropdownCheckList
			dropdownName="brand-option"
			dataSource={[{ "Code": "A", "Name": "Apple" }, { "Code": "S", "Name": "SamSung" }, { "Code": "N", "Name": "Nokia" }, { "Code": "O", "Name": "Oppo" }, { "Code": "H", "Name": "Huawei" }]}
			selectAll={true}
			selectAllText="All brands"
			multipleSelectedText="{0} selected product(s)"
			displayName="Name"
			showFilter={true}
			width={300} 
			onCheckItemsChanged={this.onCheckItemsChanged} />
	);
}

Dropdown Checklist with CheckBox (2 level)

render() {
	const data = [{"MobileId":1,"MobileName":"Apple","ParentId":0},{"MobileId":9,"MobileName":"SamSung","ParentId":0},{"MobileId":11,"MobileName":"Nokia","ParentId":0},{"MobileId":98,"MobileName":"Oppo","ParentId":0},{"MobileId":999,"MobileName":"Huawei","ParentId":0},{"MobileId":14,"MobileName":"Iphone5","ParentId":1},{"MobileId":15,"MobileName":"Iphone6s","ParentId":1},{"MobileId":17,"MobileName":"Iphone6s plus","ParentId":1},{"MobileId":19,"MobileName":"Iphone 7","ParentId":1},{"MobileId":20,"MobileName":"Iphone 8","ParentId":1},{"MobileId":23,"MobileName":"Iphone x","ParentId":1},{"MobileId":24,"MobileName":"Sam sung s9","ParentId":9},{"MobileId":31,"MobileName":"Sam sung j7 pro","ParentId":9},{"MobileId":34,"MobileName":"Nokia 1280","ParentId":11},{"MobileId":35,"MobileName":"Nokia 3310","ParentId":11},{"MobileId":36,"MobileName":"Nokia 7 plus","ParentId":11},{"MobileId":16,"MobileName":"Oppo f3","ParentId":98},{"MobileId":22,"MobileName":"Oppo f5","ParentId":98},{"MobileId":26,"MobileName":"Oppo f7","ParentId":98},{"MobileId":25,"MobileName":"Huawei nova 3e","ParentId":999},{"MobileId":30,"MobileName":"Huawei nova 2i","ParentId":999}];

	return(
		<DropdownCheckList
			dropdownName="mobile-control-select"
			dataSource={data}
			idName = "MobileId"
			parentIdName = "ParentId"
			displayName = "MobileName"
			height = {370}
			width = {350}
			expandAll = {true}
			selectAll = {false}
			selectAllText = "All mobiles"
			multipleSelectedText = "{0} selected mobile(s)"
			onCheckItemsChanged={this.onCheckItemsChanged} />
	);
}

Dropdown Checklist with CheckBox (2 level) support copy/paste

usage: type item's name into filter. If there are matched exactly (do not count uppercase letter) each other, item will be chosen. You can type multiple item separate by comma (","). If item is parent, children will be chosen and contrary.

render() {
	const data = [{"MobileId":1,"MobileName":"Apple","ParentId":0},{"MobileId":9,"MobileName":"SamSung","ParentId":0},{"MobileId":11,"MobileName":"Nokia","ParentId":0},{"MobileId":98,"MobileName":"Oppo","ParentId":0},{"MobileId":999,"MobileName":"Huawei","ParentId":0},{"MobileId":14,"MobileName":"Iphone5","ParentId":1},{"MobileId":15,"MobileName":"Iphone6s","ParentId":1},{"MobileId":17,"MobileName":"Iphone6s plus","ParentId":1},{"MobileId":19,"MobileName":"Iphone 7","ParentId":1},{"MobileId":20,"MobileName":"Iphone 8","ParentId":1},{"MobileId":23,"MobileName":"Iphone x","ParentId":1},{"MobileId":24,"MobileName":"Sam sung s9","ParentId":9},{"MobileId":31,"MobileName":"Sam sung j7 pro","ParentId":9},{"MobileId":34,"MobileName":"Nokia 1280","ParentId":11},{"MobileId":35,"MobileName":"Nokia 3310","ParentId":11},{"MobileId":36,"MobileName":"Nokia 7 plus","ParentId":11},{"MobileId":16,"MobileName":"Oppo f3","ParentId":98},{"MobileId":22,"MobileName":"Oppo f5","ParentId":98},{"MobileId":26,"MobileName":"Oppo f7","ParentId":98},{"MobileId":25,"MobileName":"Huawei nova 3e","ParentId":999},{"MobileId":30,"MobileName":"Huawei nova 2i","ParentId":999}];

	return(
		<DropdownCheckList
			dropdownName="mobile-control-select"
			dataSource={data}
			idName = "MobileId"
			parentIdName = "ParentId"
			displayName = "MobileName"
			height = {370}
			width = {350}
			expandAll = {true}
			selectAll = {false}
			selectAllText = "All mobiles"
			multipleSelectedText = "{0} selected mobile(s)"
			onCheckItemsChanged={this.onCheckItemsChanged}
			isAbleToCopyPaste={true}
		/>
	);
}

Dropdown Checklist with Radio by Group

render() {
	const data = [{"MobileId":1,"MobileName":"Apple","ParentId":0},{"MobileId":9,"MobileName":"SamSung","ParentId":0},{"MobileId":11,"MobileName":"Nokia","ParentId":0},{"MobileId":98,"MobileName":"Oppo","ParentId":0},{"MobileId":999,"MobileName":"Huawei","ParentId":0},{"MobileId":14,"MobileName":"Iphone5","ParentId":1},{"MobileId":15,"MobileName":"Iphone6s","ParentId":1},{"MobileId":17,"MobileName":"Iphone6s plus","ParentId":1},{"MobileId":19,"MobileName":"Iphone 7","ParentId":1},{"MobileId":20,"MobileName":"Iphone 8","ParentId":1},{"MobileId":23,"MobileName":"Iphone x","ParentId":1},{"MobileId":24,"MobileName":"Sam sung s9","ParentId":9},{"MobileId":31,"MobileName":"Sam sung j7 pro","ParentId":9},{"MobileId":34,"MobileName":"Nokia 1280","ParentId":11},{"MobileId":35,"MobileName":"Nokia 3310","ParentId":11},{"MobileId":36,"MobileName":"Nokia 7 plus","ParentId":11},{"MobileId":16,"MobileName":"Oppo f3","ParentId":98},{"MobileId":22,"MobileName":"Oppo f5","ParentId":98},{"MobileId":26,"MobileName":"Oppo f7","ParentId":98},{"MobileId":25,"MobileName":"Huawei nova 3e","ParentId":999},{"MobileId":30,"MobileName":"Huawei nova 2i","ParentId":999}];
	
	return (
		<div>
			<h4>Radio by Group</h4>
			<DropdownCheckList
				dropdownName="mobile-filter"
				dataSource={data}
				height = {400}
				width = {210}
				selectAll = {false}
				expandAll = {true}
				parentIdName = "ParentId"
				idName = "MobileId"
				displayName = "MobileName"
				singleSelect = {2}
				cssClass = "highlight-mobile"
				showRoot = {false}
				onCheckItemsChanged={this.onCheckItemsChanged} />
		</div> 
	);
}

Dropdown Checklist with Radio have multiple Checkboxes

render() {
	const data = [{"BrandTypeId":1,"BrandTypeName":"Iphone","BrandTypeInfos":[{"BrandTypeId":0,"BrandTypeName":"Iphone 5"},{"BrandTypeId":0,"BrandTypeName":"Iphone 6"},{"BrandTypeId":0,"BrandTypeName":"Iphone 6 plus"},{"BrandTypeId":0,"BrandTypeName":"Iphone 7"}]},{"BrandTypeId":3,"BrandTypeName":"SamSung","BrandTypeInfos":[]},{"BrandTypeId":4,"BrandTypeName":"Nokia","BrandTypeInfos":[]},{"BrandTypeId":5,"BrandTypeName":"Oppo","BrandTypeInfos":[{"BrandTypeId":0,"BrandTypeName":"Oppo f3"}]},{"BrandTypeId":6,"BrandTypeName":"Huawei","BrandTypeInfos":[]}];
	
	return (
		<div>
			<h4>Radio have multiple checkbox</h4>
			<DropdownCheckList
				dropdownName="ddl-brands-type"
				dataSource={data}
				selectAll = {false}
				expandAll = {true}
				childName = 'BrandTypeInfos'
				displayName = 'BrandTypeName'
				noSelectedText = 'Please Select One'
				showFilter = {false}
				showRoot = {false}
				singleSelect = {1}
				onCheckItemsChanged={this.onCheckItemsChanged} />
		</div> 
	);
}

Dropdown Checklist with Radio have multiple Checkboxes with support copy/paste

Usage: Type the item's name into filter area. The item will be chosen if they are matched exactly each other (case insensitive).

If there are multiple item separated by comma (",") the first item will be chosen.

render() {
	const data = [{"BrandTypeId":1,"BrandTypeName":"Iphone","BrandTypeInfos":[{"BrandTypeId":0,"BrandTypeName":"Iphone 5"},{"BrandTypeId":0,"BrandTypeName":"Iphone 6"},{"BrandTypeId":0,"BrandTypeName":"Iphone 6 plus"},{"BrandTypeId":0,"BrandTypeName":"Iphone 7"}]},{"BrandTypeId":3,"BrandTypeName":"SamSung","BrandTypeInfos":[]},{"BrandTypeId":4,"BrandTypeName":"Nokia","BrandTypeInfos":[]},{"BrandTypeId":5,"BrandTypeName":"Oppo","BrandTypeInfos":[{"BrandTypeId":0,"BrandTypeName":"Oppo f3"}]},{"BrandTypeId":6,"BrandTypeName":"Huawei","BrandTypeInfos":[]}];
	
	return (
		<div>
			<h4>Radio have multiple checkbox</h4>
			<DropdownCheckList
				dropdownName="ddl-brands-type"
				dataSource={data}
				selectAll = {false}
				expandAll = {true}
				childName = 'BrandTypeInfos'
				displayName = 'BrandTypeName'
				noSelectedText = 'Please Select One'
				showRoot = {false}
				singleSelect = {1}
				onCheckItemsChanged={this.onCheckItemsChanged} 
				isAbleToCopyPaste={true}
				/>
		</div> 
	);
}

Props

DropdownCheckListPropTypes = {
    dropdownName: PropTypes.string.isRequired,
    dataSource: PropTypes.arrayOf(PropTypes.object).isRequired,
    isActive: PropTypes.bool,
    selectAll: PropTypes.bool,
    selectAllText: PropTypes.string,
    expandAll: PropTypes.bool,
    noSelectedText: PropTypes.string,
    rootText: PropTypes.string,
    filterText: PropTypes.string,
    multipleSelectedText: PropTypes.string,
    displayName: PropTypes.string,
    childName: PropTypes.string,
    checkedName: PropTypes.string,
    expandedName: PropTypes.string,
    showRoot: PropTypes.bool,
    showFilter: PropTypes.bool,
    height: PropTypes.number,
    width: PropTypes.number,
    filterDelay: PropTypes.number,
    parentIdName: PropTypes.any,
    idName: PropTypes.any,
    singleSelect: PropTypes.any,
    selectableLevel: PropTypes.number,
    cssClass: PropTypes.string,
    mode: PropTypes.string,
    autoCheck: PropTypes.bool,
    countLevel: PropTypes.number,
    onCheckItemsChanged: PropTypes.func.isRequired,
	isAbleToCopyPaste: PropTypes.bool
 }