パネルの開閉

コンテナを命令型イベントで折りたたみ、展開します。

containerOpenCloseSubjectMapを使用

各コンテナは ContainerOpenCloseProviderによって内部subjectが準備されます。外部ボタンでは containerOpenCloseSubjectMap[containerName].next(...)でopen/close/toggleコマンドを送信します。

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  containerOpenCloseSubjectMap,
} from "@byeolnaerim/flex-layout";
import { useState } from "react";

function OpenCloseSample() {
  const [state, setState] = useState("open");

  const sendPanelCommand = (mode: "open" | "close" | "toggle") => {
    containerOpenCloseSubjectMap["workspace-left"]?.next({
      mode,
      initOpenState: true,
      openOption: { isPrevSizeOpen: true },
      onOpen: () => setState("open"),
      onClose: () => setState("closed"),
    });
  };

  return (
    <>
      <button type="button" onClick={() => sendPanelCommand("open")}>
        Open
      </button>
      <button type="button" onClick={() => sendPanelCommand("close")}>
        Close
      </button>
      <button type="button" onClick={() => sendPanelCommand("toggle")}>
        Toggle
      </button>

      <span>workspace-left: {state}</span>

      <FlexLayout
        layoutName="open-close-workspace"
        direction="row"
        panelMovementMode="divorce"
      >
        <FlexLayoutContainer
          containerName="workspace-left"
          isResizePanel
        >
          <div>Left Panel</div>
        </FlexLayoutContainer>

        <FlexLayoutContainer containerName="workspace-main">
          <div>Main Panel</div>
        </FlexLayoutContainer>
      </FlexLayout>
    </>
  );
}

ContainerStateRequestの主要オプション

mode

open, close, toggle 중 하나입니다.

initOpenState

초기 open 상태를 함께 전달할 때 사용합니다.

openOption

열릴 때 전달되는 옵션입니다. 이전 크기로 열고 싶다면 isPrevSizeOpen을 사용합니다.

closeOption

닫힐 때 전달되는 옵션입니다. 닫을 때 grow를 어떻게 계산할지 조정합니다.

onOpen / onClose

열림/닫힘 처리가 끝난 뒤 호출되는 콜백입니다.

ダブルクリック切り替え

useDoubleClickToggle

useDoubleClickToggle(containerName, option)は、該当コンテナのresize panelクリックイベントを検知し、ダブルクリック時にopen/closeコマンドを発生させます。

tsx

import {
  FlexLayout,
  FlexLayoutContainer,
  useDoubleClickToggle,
} from "@byeolnaerim/flex-layout";

function DoubleClickToggleSample() {
  const { isOpen } = useDoubleClickToggle("double-click-left", {
    mode: "toggle",
    initOpenState: true,
    openOption: { isPrevSizeOpen: true },
  });

  return (
    <>
      <span>
        resize panel을 더블클릭하십시오. 현재 상태:{" "}
        {isOpen === false ? "closed" : "open"}
      </span>

      <FlexLayout
        layoutName="double-click-workspace"
        direction="row"
        panelMovementMode="divorce"
      >
        <FlexLayoutContainer
          containerName="double-click-left"
          isResizePanel
        >
          <div>Double Click Target</div>
        </FlexLayoutContainer>

        <FlexLayoutContainer containerName="double-click-main">
          <div>Main Panel</div>
        </FlexLayoutContainer>
      </FlexLayout>
    </>
  );
}