React Tree Select Component

The React Tree Select component is a flexible and customizable tree select component built with React. It allows you to
create a hierarchical select input with checkboxes.

To use the React Tree Select component in your project, you need to import it from its location in your project:

```
import { ReactTreeSelect } from './react-tree-select.tsx';
``

Base view:

!img_1.png

With custom icons:

!img.png

Hide checkbox and selected child count:

!img_2.png

Search mode:

!img_3.png

_______________
Props

The React Tree Select component accepts the following props:

1. tree: An array of objects that represent the hierarchical data that you want to display. Each object should have the
following properties:

* id: A unique identifier for the item.
* label: The display text for the item.
* children: An array of objects that represent the child items of the current item.
* expanded: A boolean that determines whether the child items of the current item are visible or not.

1. onChange: A function that is called when the selected items change. It receives the selected items as its argument.
2. selectedIds: (optional) An array of the id values of the items that should be selected by default.
3. renderIconBefore: (optional) A React element that will be rendered before the item label.
4. renderIconAfter: (optional) A React element that will be rendered after the item label.
5. targetNodeId: (optional) The id of the DOM element where the component will be rendered.
6. hideCheckbox: (optional) A boolean that determines whether the checkboxes should be hidden or not.
7. hideSelectedChildCount: (optional) A boolean that determines whether the count of selected child items should be
hidden or not.
8. loading: (optional) boolean - loading tree state
9. asyncSearchCallback: (optional) is a function that is used for asynchronous search operations in the ReactTreeSelect
component. This function is expected to return a Promise that resolves to an array of TreeSelectItems:

`typescript
const mockApiCall = async (): Promise => await new Promise((resolve) => {
setTimeout(() => {
resolve(mockTree);
}, 1500);
});

const asyncSearchCallback = async (e: string) => await mockApiCall()

`

10. asyncLoading: is an optional property. It is of type AsyncLoadingCallback, which is a function that takes a
parentNode of type TreeSelectItems as an argument and returns a Promise that resolves with an array of
TreeSelectItems.

This property is used for asynchronously loading child elements of a tree.
When a node in the tree is expanded, if this property is provided, it will be called with the node as an argument. The
function should return a Promise that resolves with the child elements to be added to the tree. This allows for dynamic
loading of tree nodes, which can be useful in scenarios where the full tree data is not available upfront or is too
large to load all at once.
Example:

`typescript
const asyncLoadingCallback = async (node: TreeSelectItems): Promise => {
// do something with node
console.log(node);

return await new Promise((resolve) => {
setTimeout(() => {
resolve([
{
id: 'async1',
label: 'Province: Ontario',
children: null
},
]);
}, 1500);
});
}
`

______________

Usage

Here is an example of how to use the React Tree Select component:

`typescript jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {ReactTreeSelect} from './react-tree-select.tsx';
import {TreeSelectItems, TreeSelectProps} from './types';

const mockTree: TreeSelectItems[] = [{
id: 'world',
label: 'World',
children: [
{
id: 'continent-1',
label: 'Continent: Asia',
expanded: true,
children: null
}]
}]
const mockProps = {
tree: mockTree,
onChange: (el) => {
console.log(el);
},
selectedIds: [],
renderIconBefore:

Icon Before

,
renderIconAfter:

Icon After

}

ReactDOM.render(

// dom element where component will be rendered

< ReactTreeSelect {...mockProps}
targetNodeId={'TreeSelect'}
selectedIds={['city-2-1-1']}
/>
< /React.StrictMode>,
document.getElementById('root')
)
;
`

I'm not designer sorry :) but you can reassign colors using CSS variables like these:

`
--tree-label-hover-color: rgba(0, 0, 0, 0.1);
--tree-label-blue-color: #747bff;
--tree-borders-color: #E0E0E0;
--tree-input-hover: #9FA8DA;
--tree-active-label-color: rgba(76, 175, 80, 0.1);
--tree-default-label-color: #212121;
--tree-empty-background: rgba(63, 61, 61, 0.6);
``

In this example, mockTree is the hierarchical data that you want to display, and mockProps are the props that you pass
to the React Tree Select component. The onChange prop is a function that logs the selected items when they change. The
renderIconBefore and renderIconAfter props are React elements that are rendered before and after the item label,
respectively. Please adjust the documentation according to your needs.