Tab Locking

Lock tabs or toggle whether they can be closed and dragged.

Tab locking is for tabs that represent protected resources or app-owned surfaces. Try closing and dragging the locked tabs, then use the runtime controls to change behavior without remounting tab content.

locked: true maps to non-closable and non-draggable; tab.setBehavior() applies the same behavior after the workspace is already running.

const initialLocksLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'pinned',
      size: 34,
      tabs: [
        {
          id: 'navigator-tab',
          data: {
            title: 'Navigator',
            note: 'locked: true',
          },
          locked: true,
        },
      ],
    },
    {
      type: 'panel',
      id: 'work',
      size: 66,
      tabs: [
        {
          id: 'draft-tab',
          data: {
            title: 'Draft',
            note: 'default behavior',
          },
        },
        {
          id: 'preview-tab',
          data: {
            title: 'Preview',
            note: 'draggable: false',
          },
          draggable: false,
        },
        {
          id: 'terminal-tab',
          data: {
            title: 'Terminal',
            note: 'closable: false',
          },
          closable: false,
        },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={initialLocksLayout}
  renderTabHeader={renderHeader}
  renderTabContent={renderStatusContent}
/>
const runtimeLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'editor',
      size: 55,
      tabs: [
        {
          id: 'editor-tab',
          data: {
            title: 'Editor',
          },
        },
      ],
    },
    {
      type: 'panel',
      id: 'preview',
      size: 45,
      tabs: [
        {
          id: 'preview-tab',
          data: {
            title: 'Preview',
          },
        },
      ],
    },
  ],
};

function isTabLocked(tab: TileryTab<TabData>) {
  return !tab.closable && !tab.draggable;
}

function toggleTabLock(tab: TileryTab<TabData>) {
  tab.setBehavior(
    isTabLocked(tab) ? { closable: true, draggable: true } : { locked: true },
  );
}

function toggleTabClosable(tab: TileryTab<TabData>) {
  tab.setBehavior({ closable: !tab.closable });
}

function toggleTabDraggable(tab: TileryTab<TabData>) {
  tab.setBehavior({ draggable: !tab.draggable });
}

<Tilery<TabData>
  initialLayout={runtimeLayout}
  renderTabHeader={renderHeader}
  renderTabContent={(tab) => (
    <TabContent>
      <TabBehaviorControls tab={tab} />
    </TabContent>
  )}
/>

Related