块编辑器开发文档

💡 云策文档标注

概述

ToolsPanelItem 是一个实验性组件,用于包装和控制 ToolsPanel 内项目的显示。项目是否显示取决于其是否为默认控件或通过上下文提供的面板菜单项是否被切换开启。

关键要点

  • 组件处于实验阶段,可能发生重大变更。
  • 作为包装器,管理 ToolsPanel 内项目的可见性。
  • 显示条件:标记为默认控件或面板菜单项被开启。
  • 提供多个 Props 来配置行为,如 hasValue、isShownByDefault、label、onDeselect、onSelect、panelId 和 resetAllFilter。

注意事项

  • label 必须唯一,用于菜单标签和上下文键值。
  • panelId 用于确保项目注册到正确的面板。
  • resetAllFilter 用于在面板重置时执行额外任务。

📄 原文内容
This feature is still experimental. “Experimental” means this is an early
implementation subject to drastic and breaking changes.

This component acts as a wrapper and controls the display of items to be contained
within a ToolsPanel. An item is displayed if it is flagged as a default control
or the corresponding panel menu item, provided via context, is toggled on for
this item.

Usage

See tools-panel/README.md#usage
for how to use ToolsPanelItem.

Props

hasValue: () => boolean

This is called when building the ToolsPanel menu to determine the item’s
initial checked state.

  • Required: Yes

isShownByDefault: boolean

This prop identifies the current item as being displayed by default. This means
it will show regardless of whether it has a value set or is toggled on in the
panel’s menu.

  • Required: No
  • Default: false

label: string

The supplied label is dual purpose.
It is used as:
1. the human-readable label for the panel’s dropdown menu
2. a key to locate the corresponding item in the panel’s menu context to
determine if the panel item should be displayed.

A panel item’s label should be unique among all items within a single panel.

  • Required: Yes

onDeselect: () => void

Called when this item is deselected in the ToolsPanel menu. This is normally
used to reset the panel item control’s value.

  • Required: No

onSelect: () => void

A callback to take action when this item is selected in the ToolsPanel menu.

  • Required: No

panelId: string | null

Panel items will ensure they are only registering with their intended panel by
comparing the panelId props set on both the item and the panel itself, or if the panelId is explicitly null. This
allows items to be injected from a shared source.

  • Required: No

resetAllFilter: ( attributes?: any ) => any

A ToolsPanel will collect each item’s resetAllFilter and pass an array of
these functions through to the panel’s resetAll callback. They can then be
iterated over to perform additional tasks.

  • Required: No
  • Default: () => {}