Author: jiang Xuan (github.com/Jiang-Xuan)

The authorization of the blog: creativecommons.org/licenses/by…

DataFilter is a [React](reactjs.org/ component that combines multiple form components, references multiple interactions, and aims to be the most comprehensive, user-friendly filter component 🎖. The component is currently in alpha state 🎰.

motivation

The initial motivation was to solve the problem of complex filtering items taking up too much space, and inefficient keyboard support, redundant visual interference, and pasting a picture, which I believe most management backends and even database product front end have seen.

Here are the pain points:

  • In the process of filling in the screening items, it is necessary to constantly switch between mouse and keyboard, so the keyboard cannot be used to complete the screening items. If the keyboard can be used to complete the screening quickly, the screening efficiency can be improved to a certain extent

  • For space usage, you might only need one filter, but it takes up so much space

  • You need to control the width of each filter; you cannot adapt the width

  • Filters cannot be copied. Do you want to copy the current filter to a colleague? I’m sorry, word of mouth

How to solve

A relatively backward solution is:

This solution does not fundamentally solve the problem, but only the problem of space occupancy, and the solution is not perfect. It also introduces redundant actions that require mouse folding/expansion.

In DACHang for complex filters, almost every solution is similar, taking an input box and using a special search syntax to solve the problem of overly complex filters, such as:

Linode’s console code is open source, but it supports limited filters. Github’s filter component does not support selection. Full-character input is difficult for ordinary users, and it is not open source 😉. The types of screening items used in the current project are as follows:

  1. The number type

  2. Select the type

  3. Type string

  4. Autocomplete type

  5. DateRange type

  6. TreeSelect type

  7. . There are also less generic types

As you can see, almost all of the common form components are used. The current idea is to put all of these components into one input box, and hopefully have the simplest operation, the most robust code, so definitely high code coverage, full testing.

The prototype

It’s all bullshit, it’s not enough to give an idea, it’s also necessary to give a prototype that shows some realizability.

Type string

This is the effect that has been put online in the background of business line management at present. There are still many function points that have not been developed, which are regarded as future.

The whole interaction process is as follows:

  1. The user clicks the input box to enter the selection state of the filter item

  2. ArrowUp(up arrow key), ArrowDown(down arrow key) moves the filter, Enter(Enter key) determines the filter, and enters the input state of the filter

  3. Type the values of some filters and press Space to submit the input to enter the selection of the next filter

  4. To trigger a search when a portion of the filter is entered, press ArrowUp(the up arrow key) until the filter is removed from the selection state to enter the wait search state

  5. Press Enter to confirm the search and initiate a search request

Advantages:

  1. Full keyboard support, you can do all the filters and trigger the search without using the mouse

  2. Focus on the filters you care about, so that extra filters don’t interfere

  3. Save a space

The number type

This type is under development and can be presented for you to see:

Here I use the mouse to operate, the keyboard part has not been developed. Due to priority issues, filters of select type are being developed instead.

Select the type

This is a commonly used filter, currently widely used in responsible projects, but there is no good way to deal with, is still in the idea

Other types of

No idea yet

At the end

This is a component that I attach great importance to, and the complexity of this component is far beyond my imagination in the process of development, so it will be a long-term work, I need more ideas to enrich my brain, and maybe I can meet the big guy to give some advice 🤗.

In the process of component development, I tried my best to adopt TDD development mode, which benefited a lot, but also stepped on a lot of pits, but still gained more benefits. Therefore, the subsequent development mode also tried to rely on TDD, because this is not a project requiring rapid iteration, but focusing on stability.

The code is not open source at present, if anyone is interested, please feel free to comment and I will make it open source 🆙 depending on the situation.

Thanks for your reading. 请 follow 我😎: github.com/Jiang-Xuan