open-index/open-npm huggingface dataset:
npm package: @palmcivet/unitext-tree-view
Description: a tree-view component that imitate VSCode
Author: Palm Civet
Latest version: 0.2.5

# UniText Tree View [WIP]

- [UniText Tree View [WIP]](#unitext-tree-view-wip)
    - [Roadmap](#roadmap)
    - [使用](#使用)
        - [Tree View](#tree-view)
        - [List View](#list-view)
        - [Scrollbar](#scrollbar)
        - [EventBus](#eventbus)
    - [开发](#开发)

本项目是 [UniText](https://github.com/palmcivet/UniText.git 'UniText - GitHub') 的衍生项目，旨在实现类似 [Visual Studio Code](https://github.com/microsoft/vscode.git 'VSCode - GitHub') 的文件树。

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

## Roadmap

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

## 使用

```bash
$ 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](https://github.com/developit/mitt "mitt - GitHub")，本项目将其改写成 TS 的形式

## 开发

```bash
$ yarn && yarn dev      # yarn
$ npm i && npm run dev  # npm
```
npm package: @palmetto/dialog
Description: Accessible React Modal Dialog.
Author: React Training
Latest version: 0.16.4

# @reach/dialog

[![Stable release](https://img.shields.io/npm/v/@reach/dialog.svg)](https://npm.im/@reach/dialog) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/dialog) | [Source](https://github.com/reach/reach-ui/tree/main/packages/dialog) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal)

An accessible dialog or modal window.

```jsx
import { Dialog } from "@reach/dialog";
import "@reach/dialog/styles.css";

function Example(props) {
  const [showDialog, setShowDialog] = React.useState(false);
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  );
}
```