作者: [蒋璇](https://github.com/Jiang-Xuan

blog 授权: https://creativecommons.org/licenses/by/4.0/deed.zh

DataFilter 是一个 [React](https://reactjs.org/ 组件, 汇聚多种表单组件, 参考多家的交互, 致力于成为最全面, 最好用的筛选项组件🎖. 目前组件处于 alpha 状态🎰.

最初的动机是为了解决复杂的筛选项太占用空间, 而且低效的键盘支持, 冗余的视觉干扰, 贴一张图片, 我相信大多数的管理后台, 甚至是数据库产品的前台都会见过.

图上的痛点有这几个:

一种比较落后的解决办法是:

这种解决办法没有从根本上解决问题, 只是解决了空间占用的问题, 而且解决的还不完美. 并且引入了需要鼠标折叠/展开的多余操作.

在大厂的对于复杂筛选项中, 几乎每家解决方案都类似, 采用一个输入框, 然后用一种特殊的搜索语法来解决筛选项过于复杂的问题, 例如:

linode 管理后台

github 的 issue 搜索语法

个人非常喜欢这种简洁的筛选方式, 视觉干扰很低, 但是还是存在一些问题, linode 的控制台代码是开源的, 但是支持的筛选项有限, github 的筛选组件不支持选择, 全字符输入对于普通用户有一定的难度, 并且不开源😉, 目前负责的项目用到的筛选项类型有:

可以看到, 几乎是用到了所有的通用表单组件. 目前的想法是将这些组件全部放到一个输入框下, 希望拥有最简洁的操作, 最健壮的代码, 所以一定是高代码覆盖率, 充分的的测试.

上面都是扯淡, 给出想法不够, 还需要给出原型, 说明一定的可实现性.

这是目前已经在业务线管理后台上线的效果, 还有很多功能点没有开发完成, 作为了 future.

整个交互流程为:

优点:

number 类型

该类型处在开发状态下, 可以呈现出来给大家看下:

这里我使用的是鼠标进行操作, 键盘部分还没有开发完成. 由于优先级问题, 目前转而在开发 select 类型的筛选.

这是一个常用的筛选项, 目前在负责的项目中大范围使用, 但是还没有一个好的办法来处理, 还处于构思中

尚没有想法

这是一个我非常重视的一个组件, 这个组件的复杂度在开发的过程中也远超过了我的想象, 所以这将是一个长期的工作, 我需要更多的想法来充实大脑, 或许还能遇到大佬指点一番🤗.

组件的开发过程中, 我尽量采用了 TDD 的开发模式, 确实受益匪浅, 但也踩到了不少的坑, 不过还是收益更大., 所以后续的开发模式也尽量向 TDD 靠, 因为这不是一个需要快速迭代的项目, 而是注重稳定性.

代码目前没有开源, 如果有人感兴趣, 可以评论, 我会视情况是否将其开源🆙.

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