react-mosaic

react-mosaic 是一个功能丰富的 React 平铺窗口管理器，旨在为用户提供对工作区的完全控制。它提供简单灵活的 API，可以在用户视图中平铺任意复杂的 React 组件。react-mosaic 使用 TypeScript 编写，并提供类型定义，但也可以在 JavaScript 中使用。

MosaicNode

react-mosaic 的核心操作围绕着由 MosaicNode<T> 指定的简单二叉树展开。其中 T 是树的叶子节点类型，可以是字符串或数字，并可以解析为 JSX.Element 进行显示。

Mosaic 组件

Mosaic 是 react-mosaic 的核心组件。它的主要 props 包括:

• renderTile: 将 T 类型转换为可显示的 JSX.Element 的查找函数。
• initialValue: 初始的平铺窗口树结构,类型为 MosaicNode<T>。
• onChange: 当用户对树结构进行任何更改（如删除、添加、移动、调整大小等）时的回调函数。
• className: 附加到根元素的额外 CSS 类名。
• resize: 控制调整窗口大小的选项。
• zeroStateView: 当当前 value 为 null 时显示的视图。
• value: (受控组件) 要渲染的窗口树。

MosaicWindow 组件

MosaicWindow 是一个在 Mosaic 平铺中为单个窗口提供工具栏、拖放等高级功能的组件。它的主要 props 包括:

• title: 窗口标题。
• path: 此窗口在树中的路径，由 renderTile 提供。
• toolbarControls: 工具栏右上角的控件。
• additionalControls: 隐藏在工具栏下方抽屉中的额外控件。
• draggable: 用户是否可以拖动窗口。
• createNode: 需要新建窗口节点时的回调函数。

受控 vs 非受控

与 React 表单组件类似，Mosaic 有两种使用模式:

• 受控模式:通过 value 和 onChange prop 让父组件管理 Mosaic 的状态。
• 非受控模式:通过 initialValue prop 提供初始状态，之后完全由 Mosaic 在内部管理状态。

Context API

除了基础的 props API，Mosaic 还在其子组件的 context 中提供了用于操作窗口树的 API，主要包括:

• expand: 扩大指定路径的窗口。
• remove: 删除指定路径的窗口。
• hide: 隐藏指定路径的窗口,但保留在 DOM 中。
• replaceWith: 将指定路径的窗口替换为新节点。
• updateTree: 对当前树执行一系列更新操作。

主题

默认情况下,Mosaic 仅加载功能所需的最少样式。要使用内置主题，需要安装 Blueprint 依赖,并在渲染 Mosaic 时提供 mosaic-blueprint-theme CSS class。Mosaic 支持 light 和 dark 两种主题。

本文作者：Maeiee

本文链接：react-mosaic

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！