作者: [蒋璇](github.com/Jiang-Xuan
blog 授权: creativecommons.org/licenses/by…
DataFilter 是一个 [React](reactjs.org/ 组件, 汇聚多种表单组件, 参考多家的交互, 致力于成为最全面, 最好用的筛选项组件🎖. 目前组件处于 alpha 状态🎰.
动机
最初的动机是为了解决复杂的筛选项太占用空间, 而且低效的键盘支持, 冗余的视觉干扰, 贴一张图片, 我相信大多数的管理后台, 甚至是数据库产品的前台都会见过.
图上的痛点有这几个:
-
筛选项的填写过程中, 需要不断的鼠标和键盘的切换, 无法用键盘完成筛选项, 如果键盘可以快速完成筛选, 可以一定的提升筛选效率
-
对于空间的占用, 可能只需要一个筛选, 但是却需要占用这么多的空间
-
需要控制每一个筛选项的宽度, 无法自适应宽度
-
筛选项无法复制, 想要将当前的筛选项复制给同事? 不好意思, 口口相传吧
如何解决
一种比较落后的解决办法是:
这种解决办法没有从根本上解决问题, 只是解决了空间占用的问题, 而且解决的还不完美. 并且引入了需要鼠标 折叠/展开 的多余操作.
在大厂的对于复杂筛选项中, 几乎每家解决方案都类似, 采用一个输入框, 然后用一种特殊的搜索语法来解决筛选项过于复杂的问题, 例如:
个人非常喜欢这种简洁的筛选方式, 视觉干扰很低, 但是还是存在一些问题, linode 的控制台代码是开源的, 但是支持的筛选项有限, github 的筛选组件不支持选择, 全字符输入对于普通用户有一定的难度, 并且不开源😉, 目前负责的项目用到的筛选项类型有:
-
number 类型
-
select 类型
-
string 类型
-
Autocomplete 类型
-
DateRange 类型
-
TreeSelect 类型
-
... 还有一些不太通用的类型
可以看到, 几乎是用到了所有的通用表单组件. 目前的想法是将这些组件全部放到一个输入框下, 希望拥有最简洁的操作, 最健壮的代码, 所以一定是高代码覆盖率, 充分的的测试.
原型
上面都是扯淡, 给出想法不够, 还需要给出原型, 说明一定的可实现性.
string 类型
这是目前已经在业务线管理后台上线的效果, 还有很多功能点没有开发完成, 作为了 future.
整个交互流程为:
-
用户点击输入框, 首先进入筛选项的 选择态
-
ArrowUp(上箭头按键), ArrowDown(下箭头按键) 移动筛选项, Enter(回车键) 确定筛选项, 进入筛选项的 输入态
-
键入一些筛选项的值, 按下 Space(空格键) 来提交输入, 进入下一个筛选项的 选择态
-
当输入了一部分筛选项时想要触发搜索, 按下 ArrowUp(上箭头按键) 直到退出筛选项的 选择态, 进入 等待搜索态
-
按下 Enter(回车键) 确认搜索, 发起搜索请求
优点:
-
全键盘支持, 你可以不借助鼠标完成所有的筛选项并触发搜索
-
聚焦你所关注的筛选项, 多余的筛选项不再造成干扰
-
节省空间
number 类型
该类型处在开发状态下, 可以呈现出来给大家看下:
这里我使用的是鼠标进行操作, 键盘部分还没有开发完成. 由于优先级问题, 目前转而在开发 select 类型的筛选.
select 类型
这是一个常用的筛选项, 目前在负责的项目中大范围使用, 但是还没有一个好的办法来处理, 还处于构思中
其他类型
尚没有想法
结尾
这是一个我非常重视的一个组件, 这个组件的复杂度在开发的过程中也远超过了我的想象, 所以这将是一个长期的工作, 我需要更多的想法来充实大脑, 或许还能遇到大佬指点一番🤗.
组件的开发过程中, 我尽量采用了 TDD 的开发模式, 确实受益匪浅, 但也踩到了不少的坑, 不过还是收益更大., 所以后续的开发模式也尽量向 TDD 靠, 因为这不是一个需要快速迭代的项目, 而是注重稳定性.
代码目前没有开源, 如果有人感兴趣, 可以评论, 我会视情况是否将其开源🆙.
Thanks for your reading. 请 follow 我😎: github.com/Jiang-Xuan
