Skip to content

getunitext/unitext-tree-view

Repository files navigation

UniText Tree View [WIP]

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

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

Roadmap

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

使用

$ 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