m-treeselect v0.2.1

en 中文 Update Log

This is a tree selector completely based on mui component encapsulation without using third-party libraries

Has the following characteristics

1.Fully compatible with MUI theme configuration

2 Height Customization Usage

3 Easy to get started 0 Learning costs

4 fully controlled components (state must be manually controlled, but believe me, this has been optimized very easily) (And this is just a basic component that you can encapsulate as you please)

Let's take a look at what it looks like first

The two sides look a bit different because the one on the left is included in the MUI theme and custom folder icons

First of all, I believe everyone will be more concerned about data format because it involves practical usage experience I have designed Three data schemes. One is the default format, like this

The ID determines the key value of your actual control state The final form of the component is determined by fixed data and controlled checklists in the state The label determines the content displayed on the page Whether children have a value determines whether they belong to the directory or a selection item

This is the default format. You don't need to configure anything, just pass in the data that meets the format to use it But I believe that formatting is a headache in actual business, so I also added a custom format for us to take a look at the following data

Adapting components to different formats is the best way to improve efficiency. By specifying the corresponding key, development can proceed happily like this

The third method is to provide a tool called flatDataFormatter to convert flat data into a data format that components can use Like below

This utility function comes with the component and is believed to assist in data processing

These data are just the foundation for the initial rendering of the component, and the most challenging aspect is obtaining the data We can set the default selected items for the component and pass in a checkedDataids array The data type is the corresponding 'id' value, so there is nothing else to note. It is completely controlled. You need to obtain the latest status update of the component through onChange. The checked Dataids component can work successfully. Let's take a look at the demonstration effect

For the convenience of the demonstration, I added something that looks more intuitive, which is the actual value of the state we maintain

As demonstrated, we only care about who the selected project is The status of the folder will be maintained by the component itself OnChange will pass in the results of the operation and update the status directly without any processing

Nothing else is needed. It's that simple. Don't doubt it If I have to say one more thing That is you can not only customize fields You can also customize rendering using labelRender like this

OnChange doesn't just give you a Array of selected IDs, it's just the simplest way to get started quickly At the same time, we will also make some changes to the specific data list code you have selected, such as this

Now let's take a look at what was printed

The data will be accompanied by your ID and label. If you customize it, the result will be your customized ID or label content

But WTF what is it?

This is an additional custom field that may be useful to some people. When onChange occurs, the corresponding content can be obtained, and you can place any content here

It is optional

You can also customize the icons used for expanding and collapsing Selected Icons Select Partial Icons If you use TS development, you can check for specific types I believe this won't disappoint you, but I still choose to take a screenshot of a regular type

If you do not want an option or folder to be selected, you can pass in disabled Perhaps you don't want users to randomly select all items and have them carefully select each one. You just need to disabled the upper directory. If you need to disabled all items, you need to add specific ones to each item

These are the content that you can customize to pass in, all of which are optional

You can pass in autoExpand and the selected items like this will automatically expand

You can also pass in defaultExpandAll so that the entire component will be expanded by default

Of course, just like all mui components, you can also use sx to change the overall style of the components. If you encounter any problems, please come to Github to submit Issues github