UniText Tree View [WIP]

• UniText Tree View [WIP]
  • Roadmap
  • 使用
    • Tree View
    • List View
    • Scrollbar
    • EventBus
  • 开发

本项目是 UniText 的衍生项目，旨在实现类似 Visual Studio Code 的文件树。

• 零依赖
• 使用 TypeScript 开发
• 衍生子组件可按需使用

Roadmap

• [ ] 文件夹及文件渲染
  • [ ] 指示线
    • [x] 根据缩进层级显示指示线
    • [ ] 默认只展示最低一级的指示线，鼠标移入时展示所有层级
  • [ ] 图标
    • [ ] 基于文件夹名称
    • [ ] 基于文件扩展名
    • [ ] 自定义
• [ ] 重命名
• [ ] 按路径打开
• [ ] 异步加载文件
• [x] 折叠
  • [x] 收起第一层
  • [x] 递归收起全部
• [ ] 排序
  • [ ] 时间顺序
  • [ ] 时间倒序
  • [ ] 字母顺序
  • [ ] 字母倒序
  • [ ] 自定义
• [ ] 事件机制
  • [x] 点击
  • [x] 右击
  • [ ] 键盘事件
    • [ ] 上下移动
    • [ ] 左右移动
    • [ ] 回车：重命名
    • [ ] 任意字符：搜索
    • [ ] 空格
  • [ ] 拖拽事件
    • [ ] 文件移动
    • [ ] 文件复制
    • [ ] 文件夹移动
    • [ ] 文件夹复制
    • [ ] 拖拽到文件夹

使用

$ yarn add @palmcivet/unitext-tree-view # yarn
$ npm i @palmcivet/unitext-tree-view    # npm

Tree View

List View

ListView 在 TreeView 的应用场景下，ListItem 有以下鼠标事件：

• 单击
• 右击
• 滚动

有以下键盘事件：

• 上/下：active 项向上滚动
• 左/右：关闭/打开文件夹，active 移出/移入
• 空格：选中（同单击）
• 回车：重命名

打开文件夹，则该文件夹后面的内容将重新渲染，涉及到以下部分：

• 文件夹/文件图标切换
• 指示图标切换
• 缩进线
• 文件夹/文件标题

ListView 在通用的应用场景下，ListItem 提供以下方法：

• insertData(data, index)：增量添加数据，适合懒加载
• deleteData(index, count)：删除数据，返回被删除内容
• updateData(data)：全量更新数据，但只渲染视口内数据，成本较低
• doResize()：手动更新容器尺寸

Scrollbar

EventBus

参考 mitt，本项目将其改写成 TS 的形式

开发

$ yarn && yarn dev      # yarn
$ npm i && npm run dev  # npm