From 8d05aa887a013d63a8864ac8cae72294f9a3d5b8 Mon Sep 17 00:00:00 2001 From: Palm Civet Date: Sat, 19 Nov 2022 16:11:23 +0800 Subject: [PATCH] :construction: refactor file structure --- src/Scrollbar/index.ts | 165 +-------------- src/TreeView/treemodel.ts | 191 ------------------ src/{EventBus => event-bus}/index.ts | 0 src/index.ts | 18 +- src/{ListView => list-view}/index.test.ts | 0 src/list-view/index.ts | 2 + .../index.ts => list-view/list-view.ts} | 47 +---- src/list-view/type.ts | 37 ++++ src/scrollbar/index.less | 35 ++++ src/{TreeView => scrollbar}/index.test.ts | 0 src/scrollbar/index.ts | 6 + src/scrollbar/scrollbar.ts | 137 +++++++++++++ src/scrollbar/type.ts | 16 ++ src/{SplitView => split-view}/index.less | 0 src/split-view/index.ts | 4 + src/{SplitView/Sash.ts => split-view/sash.ts} | 2 +- .../index.ts => split-view/split-view.ts} | 9 +- .../interface.ts => split-view/type.ts} | 0 src/{SplitView/View.ts => split-view/view.ts} | 2 +- src/{TreeView => tree-view}/index.less | 0 src/tree-view/index.test.ts | 0 src/tree-view/index.ts | 2 + .../inputbox.ts => tree-view/input-box.ts} | 0 .../TreeModel.ts => tree-view/tree-model.ts} | 52 +---- .../index.ts => tree-view/tree-view.ts} | 36 +--- src/tree-view/type.ts | 65 ++++++ 26 files changed, 335 insertions(+), 491 deletions(-) delete mode 100644 src/TreeView/treemodel.ts rename src/{EventBus => event-bus}/index.ts (100%) rename src/{ListView => list-view}/index.test.ts (100%) create mode 100644 src/list-view/index.ts rename src/{ListView/index.ts => list-view/list-view.ts} (91%) create mode 100644 src/list-view/type.ts create mode 100644 src/scrollbar/index.less rename src/{TreeView => scrollbar}/index.test.ts (100%) create mode 100644 src/scrollbar/index.ts create mode 100644 src/scrollbar/scrollbar.ts create mode 100644 src/scrollbar/type.ts rename src/{SplitView => split-view}/index.less (100%) create mode 100644 src/split-view/index.ts rename src/{SplitView/Sash.ts => split-view/sash.ts} (97%) rename src/{SplitView/index.ts => split-view/split-view.ts} (97%) rename src/{SplitView/interface.ts => split-view/type.ts} (100%) rename src/{SplitView/View.ts => split-view/view.ts} (96%) rename src/{TreeView => tree-view}/index.less (100%) create mode 100644 src/tree-view/index.test.ts create mode 100644 src/tree-view/index.ts rename src/{TreeView/inputbox.ts => tree-view/input-box.ts} (100%) rename src/{TreeView/TreeModel.ts => tree-view/tree-model.ts} (78%) rename src/{TreeView/index.ts => tree-view/tree-view.ts} (93%) create mode 100644 src/tree-view/type.ts diff --git a/src/Scrollbar/index.ts b/src/Scrollbar/index.ts index 00cc0f5..59c161f 100644 --- a/src/Scrollbar/index.ts +++ b/src/Scrollbar/index.ts @@ -1,167 +1,6 @@ -// @ts-nocheck - /** * - 检测挂载节点宽度和滚动条宽度，将容器宽度放大，隐藏原生滚动条 * - 监听滚动事件，替代滚动行为 */ - -type Direction = "vertical" | "horizontal"; - -export interface IScrollbarOptions { - /** - * @member 是否悬浮 - */ - isLevitative: boolean; - /** - * @member 是否可隐藏 - */ - suppressible: boolean; - /** - * @member 滚动行为 - */ - scrollBehavior: "beisaier" | "smooth"; -} - -export class Scrollbar { - /** - * @description 滚动方向 - */ - public direction!: Direction; - - /** - * @description 是否为垂直方向 - */ - private get isVertical() { - return this.direction === "vertical"; - } - - /** - * @description 挂载的容器 - */ - private readonly root!: HTMLElement; - - /** - * @description 滚动条轨道 - */ - private readonly scrollbarThumb!: HTMLDivElement; - - /** - * @description 滚动条 - */ - private readonly scrollbarTrack!: HTMLDivElement; - - /** - * @description 保存挂载节点的样式 - */ - private readonly rootStyleMap: { [k: string]: string } = {}; - - /** - * @description 水平方向是否溢出 - */ - private isOverflowX!: boolean; - - /** - * @description 垂直方向是否溢出 - */ - private get isOverflowY() { - return false; - } - - /** - * @description 配置项 - */ - private options!: IScrollbarOptions; - - constructor( - root: HTMLElement, - direction?: Direction, - options?: Partial - ) { - this.options = { - suppressible: true, - isLevitative: true, - scrollBehavior: "smooth", - ...options, - }; - - this.root = root; - this.rootStyleMap = { - position: this.root.style.position, - }; - this.root.style.position = "relative"; - - this.scrollbarTrack = document.createElement("div"); - this.scrollbarTrack.className = `unitext-scrollbar scrollbar-track ${direction}`; - - this.scrollbarThumb = document.createElement("div"); - this.scrollbarThumb.className = "scrollbar-thumb"; - this.scrollbarTrack.appendChild(this.scrollbarThumb); - } - - public invoke(): void { - this.root.appendChild(this.scrollbarTrack); - this.root.addEventListener("mouseenter", this.onShowScrollbar.bind(this)); - this.root.addEventListener("mouseleave", this.onHideScrollbar.bind(this)); - } - - public dispose(): void { - this.root.removeEventListener("mouseenter", this.onShowScrollbar); - this.root.removeEventListener("mouseleave", this.onHideScrollbar); - - Object.keys(this.rootStyleMap).forEach((styleName) => { - this.root.style[styleName as any] = this.rootStyleMap[styleName]; - }); - - this.scrollbarTrack.removeChild(this.scrollbarThumb); - this.root.removeChild(this.scrollbarTrack); - } - - public updateOptions(options: Partial): void {} - - public setVisibility(status: boolean): void { - if (this.options.suppressible) { - this.scrollbarTrack.style.display = "none"; - } - } - - public setThumbSize(size: number): void { - const attribute: keyof HTMLDivElement = `client${ - this.isVertical ? "Height" : "Width" - }`; - if (size >= this.scrollbarTrack[attribute] || size <= 0) { - return; - } - - this.scrollbarThumb.style[this.isVertical ? "height" : "width"] = `${size}px`; - } - - public scrollTo(position: number): void { - const attribute: keyof HTMLDivElement = `client${ - this.isVertical ? "Height" : "Width" - }`; - - if (position <= 0) { - this.scrollbarThumb.style[this.isVertical ? "top" : "left"] = "0px"; - } else if (position >= this.scrollbarTrack[attribute]) { - this.scrollbarThumb.style[this.isVertical ? "bottom" : "right"] = "0px"; - } - - this.scrollbarThumb.style[this.isVertical ? "top" : "left"] = `${position}px`; - } - - private onScroll() {} - - private onClick(event: MouseEvent) { - this.scrollTo(event.clientX); - } - - /** - * @description 显示滚动条 - */ - private onShowScrollbar(): void {} - - /** - * @description 隐藏滚动条 - */ - private onHideScrollbar(): void {} -} +export * from "./scrollbar"; +export * from "./type"; diff --git a/src/TreeView/treemodel.ts b/src/TreeView/treemodel.ts deleted file mode 100644 index 7412c56..0000000 --- a/src/TreeView/treemodel.ts +++ /dev/null @@ -1,191 +0,0 @@ -import { EventBus } from "../EventBus"; - -/** - * @interface 节点基本信息 - */ -interface ITreeNodeBase { - /** - * @field 节点名称 - */ - label: string; - /** - * @field 图标 - */ - icon?: string; - /** - * @field 手动指定的顺序 - */ - order?: number; - /** - * @field 是否可折叠 - */ - collapsible: boolean; -} - -/** - * @interface 文件节点 - */ -export interface ITreeNodeFile extends ITreeNodeBase {} - -/** - * @interface 文件夹节点 - */ -export interface ITreeNodeFolder extends ITreeNodeBase { - /** - * @field 是否已折叠 - */ - collapsed: boolean; - /** - * @field 是否已加载 - */ - loaded: boolean; - /** - * @field 文件节点 - */ - files: Array; - /** - * @field 文件夹节点 - */ - folders: Array; -} - -/** - * @description 实现文件节点 - */ -export class TreeNodeFile implements ITreeNodeFile { - label!: string; - - collapsible!: boolean; - - parentNode!: TreeNodeFolder | null; - - constructor(data: ITreeNodeFile, parent: TreeNodeFolder | null) { - this.label = data.label; - this.collapsible = data.collapsible; - this.parentNode = parent; - } - - /** - * @description 递归获取祖先节点 - */ - getAncestorNode(): TreeNodeFolder | null { - if (this.parentNode !== null && this.parentNode.parentNode !== null) { - return this.parentNode.getAncestorNode(); - } else { - return this.parentNode; - } - } - - /** - * @description 递归获取节点路径 - */ - getNodePath(): Array { - if (this.parentNode) { - return this.parentNode.getNodePath().concat(this.label); - } else { - return [this.label]; - } - } - - /** - * @description 获取层级 - * @param level 父级缩进层级 - */ - getNodeIndent(level: number): number { - if (this.parentNode !== null) { - return this.parentNode.getNodeIndent(level + 1); - } else { - return level; - } - } - - /** - * @description 修改节点标签 - * @param label 新的标签 - */ - setNodeLabel(label: string): void { - this.label = label; - } - - /** - * @description 查找节点 - */ - revealNode(): void {} -} - -/** - * @description 实现文件树节点 - */ -export class TreeNodeFolder extends TreeNodeFile implements ITreeNodeFolder { - loaded!: boolean; - - collapsed!: boolean; - - readonly folders: Array = []; - - readonly files: Array = []; - - constructor(data: ITreeNodeFolder, parent: TreeNodeFolder | null) { - super(data, parent); - this.loaded = data.loaded; - this.collapsed = data.collapsed; - this._initModel(data); - } - - /** - * @description 初始化文件夹 - * @param data 传入的文件夹数据 - */ - private _initModel(data: ITreeNodeFolder): void { - data.folders.forEach((item) => { - this.folders.push(new TreeNodeFolder(item, this)); - }); - - data.files.forEach((item) => { - this.files.push(new TreeNodeFile(item, this)); - }); - } - - /** - * @description 获取文件夹下的子文件 - */ - getFiles(): Array { - return this.files; - } - - /** - * @returns - */ - getLoadStatus(): boolean { - return this.loaded; - } - - /** - * @description 获取文件夹下的子文件夹 - */ - getFolders(): Array { - return this.folders; - } - - /** - * @description 异步加载数据 - * @param model 传入的数据 - */ - loadModel(model: ITreeNodeFolder): void { - this._initModel(model); - this.loaded = true; - } - - /** - * @param status 折叠状态。`true` 折叠；`false` 展开 - */ - setCollapsible(status: boolean): void { - this.collapsed = status; - } -} - -export class TreeModel extends EventBus { - constructor() { - super(); - } -} diff --git a/src/EventBus/index.ts b/src/event-bus/index.ts similarity index 100% rename from src/EventBus/index.ts rename to src/event-bus/index.ts diff --git a/src/index.ts b/src/index.ts index fc2c927..95f977e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,5 @@ -export { EventBus } from "./EventBus"; - -export { Scrollbar } from "./Scrollbar"; -export type { IScrollbarOptions } from "./Scrollbar"; - -export { ListView } from "./ListView"; -export type { IListViewOptions } from "./ListView"; - -export { TreeView } from "./TreeView"; -export type { ITreeViewOptions } from "./TreeView"; -export type { ITreeNodeFile, ITreeNodeFolder } from "./TreeView/treemodel"; - -export { SplitView } from "./SplitView"; +export * from "./event-bus"; +export * from "./scrollbar"; +export * from "./list-view"; +export * from "./tree-view"; +export * from "./split-view"; diff --git a/src/ListView/index.test.ts b/src/list-view/index.test.ts similarity index 100% rename from src/ListView/index.test.ts rename to src/list-view/index.test.ts diff --git a/src/list-view/index.ts b/src/list-view/index.ts new file mode 100644 index 0000000..f0336db --- /dev/null +++ b/src/list-view/index.ts @@ -0,0 +1,2 @@ +export * from "./list-view"; +export * from "./type"; diff --git a/src/ListView/index.ts b/src/list-view/list-view.ts similarity index 91% rename from src/ListView/index.ts rename to src/list-view/list-view.ts index 5795e8b..267b79f 100644 --- a/src/ListView/index.ts +++ b/src/list-view/list-view.ts @@ -1,6 +1,9 @@ -import { EventBus } from "../EventBus"; -import { Scrollbar } from "../Scrollbar"; +import { EventBus } from "../event-bus"; +import { Scrollbar } from "../scrollbar"; import { prefix } from "../config"; +import { IListViewOptions } from "./type"; + +type EventType = "click" | "dbclick" | "contextmenu"; /** * @var 为实现平滑滚动而补足的数据项数量 @@ -21,46 +24,6 @@ const CLASS_NAME = { Container: `${prefix}-listview`, }; -export type EventType = "click" | "dbclick" | "contextmenu"; - -export interface IListViewOptions { - /** - * @member 容器的标签 - */ - tagName: keyof HTMLElementTagNameMap; - /** - * @member 自定义容器的类名 - */ - className: string; - /** - * @member 是否可拖拽 - */ - draggable: boolean; - /** - * @member 滚动条是否可隐藏 - */ - suppressible: boolean; - /** - * @member 数据项高度 - */ - itemHeight: number; - /** - * @member 容器宽度是否固定 - */ - fixedSize: boolean; - /** - * @member 节点创建函数 - */ - createHandler(): HTMLElement; - /** - * @member 节点渲染函数 - * @param element DOM 元素节点 - * @param data 数据 - * @param index 数据的逻辑索引 - */ - renderHandler(element: HTMLElement, data: T, index: number, ...args: any[]): void; -} - export class ListView extends EventBus { /** * @description 挂载的节点 diff --git a/src/list-view/type.ts b/src/list-view/type.ts new file mode 100644 index 0000000..7c62595 --- /dev/null +++ b/src/list-view/type.ts @@ -0,0 +1,37 @@ +export interface IListViewOptions { + /** + * @member 容器的标签 + */ + tagName: keyof HTMLElementTagNameMap; + /** + * @member 自定义容器的类名 + */ + className: string; + /** + * @member 是否可拖拽 + */ + draggable: boolean; + /** + * @member 滚动条是否可隐藏 + */ + suppressible: boolean; + /** + * @member 数据项高度 + */ + itemHeight: number; + /** + * @member 容器宽度是否固定 + */ + fixedSize: boolean; + /** + * @member 节点创建函数 + */ + createHandler(): HTMLElement; + /** + * @member 节点渲染函数 + * @param element DOM 元素节点 + * @param data 数据 + * @param index 数据的逻辑索引 + */ + renderHandler(element: HTMLElement, data: T, index: number, ...args: any[]): void; +} diff --git a/src/scrollbar/index.less b/src/scrollbar/index.less new file mode 100644 index 0000000..d32fac3 --- /dev/null +++ b/src/scrollbar/index.less @@ -0,0 +1,35 @@ +.unitext-scrollbar { + @scrollbar-width: 8px; + + &.scrollbar-track { + background-color: rgba(197, 197, 197, 0.01); // DEV + position: absolute; + z-index: 99; + } + + .scrollbar-thumb { + background-color: rgba(184, 184, 184, 0.7); // DEV + } + + &.vertical { + top: 0; + right: 0; + width: @scrollbar-width; + height: 100%; + + .scrollbar-thumb { + width: @scrollbar-width; + } + } + + &.horizontal { + left: 0; + bottom: 0; + height: @scrollbar-width; + width: 100%; + + .scrollbar-thumb { + height: @scrollbar-width; + } + } +} diff --git a/src/TreeView/index.test.ts b/src/scrollbar/index.test.ts similarity index 100% rename from src/TreeView/index.test.ts rename to src/scrollbar/index.test.ts diff --git a/src/scrollbar/index.ts b/src/scrollbar/index.ts new file mode 100644 index 0000000..59c161f --- /dev/null +++ b/src/scrollbar/index.ts @@ -0,0 +1,6 @@ +/** + * - 检测挂载节点宽度和滚动条宽度，将容器宽度放大，隐藏原生滚动条 + * - 监听滚动事件，替代滚动行为 + */ +export * from "./scrollbar"; +export * from "./type"; diff --git a/src/scrollbar/scrollbar.ts b/src/scrollbar/scrollbar.ts new file mode 100644 index 0000000..d0e0e28 --- /dev/null +++ b/src/scrollbar/scrollbar.ts @@ -0,0 +1,137 @@ +import { Direction, IScrollbarOptions } from "./type"; + +export class Scrollbar { + /** + * @description 滚动方向 + */ + public direction!: Direction; + + /** + * @description 是否为垂直方向 + */ + private get isVertical() { + return this.direction === "vertical"; + } + + /** + * @description 挂载的容器 + */ + private readonly root!: HTMLElement; + + /** + * @description 滚动条轨道 + */ + private readonly scrollbarThumb!: HTMLDivElement; + + /** + * @description 滚动条 + */ + private readonly scrollbarTrack!: HTMLDivElement; + + /** + * @description 保存挂载节点的样式 + */ + private readonly rootStyleMap: { [k: string]: string } = {}; + + /** + * @description 水平方向是否溢出 + */ + private isOverflowX!: boolean; + + /** + * @description 垂直方向是否溢出 + */ + private get isOverflowY() { + return false; + } + + /** + * @description 配置项 + */ + private options!: IScrollbarOptions; + + constructor(root: HTMLElement, direction?: Direction, options?: Partial) { + this.options = { + suppressible: true, + isLevitative: true, + scrollBehavior: "smooth", + ...options, + }; + + this.root = root; + this.rootStyleMap = { + position: this.root.style.position, + }; + this.root.style.position = "relative"; + + this.scrollbarTrack = document.createElement("div"); + this.scrollbarTrack.className = `unitext-scrollbar scrollbar-track ${direction}`; + + this.scrollbarThumb = document.createElement("div"); + this.scrollbarThumb.className = "scrollbar-thumb"; + this.scrollbarTrack.appendChild(this.scrollbarThumb); + } + + public invoke(): void { + this.root.appendChild(this.scrollbarTrack); + this.root.addEventListener("mouseenter", this.onShowScrollbar.bind(this)); + this.root.addEventListener("mouseleave", this.onHideScrollbar.bind(this)); + } + + public dispose(): void { + this.root.removeEventListener("mouseenter", this.onShowScrollbar); + this.root.removeEventListener("mouseleave", this.onHideScrollbar); + + Object.keys(this.rootStyleMap).forEach((styleName) => { + this.root.style[styleName as any] = this.rootStyleMap[styleName]; + }); + + this.scrollbarTrack.removeChild(this.scrollbarThumb); + this.root.removeChild(this.scrollbarTrack); + } + + public updateOptions(options: Partial): void {} + + public setVisibility(status: boolean): void { + if (this.options.suppressible) { + this.scrollbarTrack.style.display = "none"; + } + } + + public setThumbSize(size: number): void { + const attribute: keyof HTMLDivElement = `client${this.isVertical ? "Height" : "Width"}`; + if (size >= this.scrollbarTrack[attribute] || size <= 0) { + return; + } + + this.scrollbarThumb.style[this.isVertical ? "height" : "width"] = `${size}px`; + } + + public scrollTo(position: number): void { + const attribute: keyof HTMLDivElement = `client${this.isVertical ? "Height" : "Width"}`; + + if (position <= 0) { + this.scrollbarThumb.style[this.isVertical ? "top" : "left"] = "0px"; + } else if (position >= this.scrollbarTrack[attribute]) { + this.scrollbarThumb.style[this.isVertical ? "bottom" : "right"] = "0px"; + } + + this.scrollbarThumb.style[this.isVertical ? "top" : "left"] = `${position}px`; + } + + private onScroll() {} + + private onClick(event: MouseEvent) { + this.scrollTo(event.clientX); + } + + /** + * @description 显示滚动条 + */ + private onShowScrollbar(): void {} + + /** + * @description 隐藏滚动条 + */ + private onHideScrollbar(): void {} +} diff --git a/src/scrollbar/type.ts b/src/scrollbar/type.ts new file mode 100644 index 0000000..2fc5045 --- /dev/null +++ b/src/scrollbar/type.ts @@ -0,0 +1,16 @@ +export type Direction = "vertical" | "horizontal"; + +export interface IScrollbarOptions { + /** + * @member 是否悬浮 + */ + isLevitative: boolean; + /** + * @member 是否可隐藏 + */ + suppressible: boolean; + /** + * @member 滚动行为 + */ + scrollBehavior: "beisaier" | "smooth"; +} diff --git a/src/SplitView/index.less b/src/split-view/index.less similarity index 100% rename from src/SplitView/index.less rename to src/split-view/index.less diff --git a/src/split-view/index.ts b/src/split-view/index.ts new file mode 100644 index 0000000..6408714 --- /dev/null +++ b/src/split-view/index.ts @@ -0,0 +1,4 @@ +export * from "./split-view"; +export * from "./type"; + +import "./index.less"; diff --git a/src/SplitView/Sash.ts b/src/split-view/sash.ts similarity index 97% rename from src/SplitView/Sash.ts rename to src/split-view/sash.ts index c6e5cfe..173f52c 100644 --- a/src/SplitView/Sash.ts +++ b/src/split-view/sash.ts @@ -1,5 +1,5 @@ import { prefix } from "../config"; -import { EOrientation } from "./interface"; +import { EOrientation } from "./type"; const CLASS_NAME = { Sash: `${prefix}-sash`, diff --git a/src/SplitView/index.ts b/src/split-view/split-view.ts similarity index 97% rename from src/SplitView/index.ts rename to src/split-view/split-view.ts index 390a3a2..ba95fb6 100644 --- a/src/SplitView/index.ts +++ b/src/split-view/split-view.ts @@ -1,9 +1,8 @@ -import { Sash } from "./Sash"; -import { View } from "./View"; -import { EOrientation, EPriority, IViewOptions } from "./interface"; -import { EventBus } from "../EventBus"; +import { Sash } from "./sash"; +import { View } from "./view"; +import { EOrientation, EPriority, IViewOptions } from "./type"; +import { EventBus } from "../event-bus"; import { prefix } from "../config"; -import "./index.less"; const CLASS_NAME = { Container: `${prefix}-splitview`, diff --git a/src/SplitView/interface.ts b/src/split-view/type.ts similarity index 100% rename from src/SplitView/interface.ts rename to src/split-view/type.ts diff --git a/src/SplitView/View.ts b/src/split-view/view.ts similarity index 96% rename from src/SplitView/View.ts rename to src/split-view/view.ts index 22c310d..1bed484 100644 --- a/src/SplitView/View.ts +++ b/src/split-view/view.ts @@ -1,5 +1,5 @@ import { prefix } from "../config"; -import { EOrientation, EPriority, IView } from "./interface"; +import { EOrientation, EPriority, IView } from "./type"; const CLASS_NAME = { View: `${prefix}-view`, diff --git a/src/TreeView/index.less b/src/tree-view/index.less similarity index 100% rename from src/TreeView/index.less rename to src/tree-view/index.less diff --git a/src/tree-view/index.test.ts b/src/tree-view/index.test.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/tree-view/index.ts b/src/tree-view/index.ts new file mode 100644 index 0000000..0f94e83 --- /dev/null +++ b/src/tree-view/index.ts @@ -0,0 +1,2 @@ +export * from "./tree-view"; +export * from "./type"; diff --git a/src/TreeView/inputbox.ts b/src/tree-view/input-box.ts similarity index 100% rename from src/TreeView/inputbox.ts rename to src/tree-view/input-box.ts diff --git a/src/TreeView/TreeModel.ts b/src/tree-view/tree-model.ts similarity index 78% rename from src/TreeView/TreeModel.ts rename to src/tree-view/tree-model.ts index 7412c56..b36f49e 100644 --- a/src/TreeView/TreeModel.ts +++ b/src/tree-view/tree-model.ts @@ -1,53 +1,5 @@ -import { EventBus } from "../EventBus"; - -/** - * @interface 节点基本信息 - */ -interface ITreeNodeBase { - /** - * @field 节点名称 - */ - label: string; - /** - * @field 图标 - */ - icon?: string; - /** - * @field 手动指定的顺序 - */ - order?: number; - /** - * @field 是否可折叠 - */ - collapsible: boolean; -} - -/** - * @interface 文件节点 - */ -export interface ITreeNodeFile extends ITreeNodeBase {} - -/** - * @interface 文件夹节点 - */ -export interface ITreeNodeFolder extends ITreeNodeBase { - /** - * @field 是否已折叠 - */ - collapsed: boolean; - /** - * @field 是否已加载 - */ - loaded: boolean; - /** - * @field 文件节点 - */ - files: Array; - /** - * @field 文件夹节点 - */ - folders: Array; -} +import { EventBus } from "../event-bus"; +import { ITreeNodeFile, ITreeNodeFolder } from "./type"; /** * @description 实现文件节点 diff --git a/src/TreeView/index.ts b/src/tree-view/tree-view.ts similarity index 93% rename from src/TreeView/index.ts rename to src/tree-view/tree-view.ts index e47315c..9c837a8 100644 --- a/src/TreeView/index.ts +++ b/src/tree-view/tree-view.ts @@ -1,10 +1,13 @@ -import { ListView, IListViewOptions } from "../ListView"; -import { TreeNodeFile, TreeNodeFolder, ITreeNodeFolder } from "./treemodel"; -import { InputBox } from "./inputbox"; -import { EventBus } from "../EventBus"; +import { ListView } from "../list-view"; +import { EventBus } from "../event-bus"; import { prefix } from "../config"; +import { InputBox } from "./input-box"; +import { TreeNodeFile, TreeNodeFolder } from "./tree-model"; +import { ITreeNodeFolder, ITreeViewOptions } from "./type"; import "./index.less"; +type EventType = "click" | "contextmenu" | "u-create" | "u-open" | "u-rename" | "u-delete" | "u-move"; + type TreeNode = TreeNodeFile | TreeNodeFolder; const DEFAULT_MODEL = { @@ -24,23 +27,6 @@ const CLASS_NAME = { DragTarget: `${prefix}-tree__drag-target`, }; -export type EventType = "click" | "contextmenu" | "u-create" | "u-open" | "u-rename" | "u-delete" | "u-move"; - -export interface ITreeViewOptions { - /** - * @description 展示缩进线 - */ - showIndent: boolean; - /** - * @description 透传 ListView 的配置项 - */ - listView: Partial>; - /** - * @description 获取文件 - */ - fetchHandler(...event: Array): Promise; -} - export class TreeView extends EventBus { /** * @field 根节点 @@ -289,10 +275,10 @@ export class TreeView extends EventBus { private onCreateTreeNodeElement(): HTMLElement { const element = document.createElement("li"); element.innerHTML = ` -
- - -
`; +
+ + +
`; return element; } diff --git a/src/tree-view/type.ts b/src/tree-view/type.ts new file mode 100644 index 0000000..008904d --- /dev/null +++ b/src/tree-view/type.ts @@ -0,0 +1,65 @@ +import { IListViewOptions } from "../list-view"; + +/** + * @interface 节点基本信息 + */ +interface ITreeNodeBase { + /** + * @field 节点名称 + */ + label: string; + /** + * @field 图标 + */ + icon?: string; + /** + * @field 手动指定的顺序 + */ + order?: number; + /** + * @field 是否可折叠 + */ + collapsible: boolean; +} + +/** + * @interface 文件节点 + */ +export interface ITreeNodeFile extends ITreeNodeBase {} + +/** + * @interface 文件夹节点 + */ +export interface ITreeNodeFolder extends ITreeNodeBase { + /** + * @field 是否已折叠 + */ + collapsed: boolean; + /** + * @field 是否已加载 + */ + loaded: boolean; + /** + * @field 文件节点 + */ + files: Array; + /** + * @field 文件夹节点 + */ + folders: Array; +} + +export interface ITreeViewOptions { + /** + * @description 展示缩进线 + */ + showIndent: boolean; + /** + * @description 透传 ListView 的配置项 + */ + listView: Partial>; + /** + * @description 获取文件 + */ + fetchHandler(...event: Array): Promise; +}