React Split Pane ライブラリで画面分割を試してみた

"use client";

import { Sidebar } from "@/components/Sidebar";
import { SplitPane, Pane } from "react-split-pane";

export const SplitPaneTest = () => {
  return (
    <SplitPane direction="horizontal">
      <Pane minSize="200px" defaultSize={"300px"} className="bg-gray-400">
        <Sidebar />
      </Pane>
      <Pane>
        <SplitPane direction="vertical" resizable>
          <Pane className="bg-blue-400">上のコンテンツ</Pane>
          <Pane className="bg-red-400" defaultSize="200px">
            下のコンテンツ
          </Pane>
        </SplitPane>
      </Pane>
    </SplitPane>
  );
};

"use client";

import { useState } from "react";
import { SplitPane, Pane } from "react-split-pane";

export default function SplitPaneControlledPage() {
  const [sizes, setSizes] = useState([300, 500]);

  return (
    <div className="w-full h-screen">
      <SplitPane direction="horizontal" onResize={setSizes}>
        <Pane className="bg-blue-200 p-4" size={sizes[0]}>
          <p>Controlledモード: useStateでサイズ管理</p>
          <p className="text-sm text-gray-600">
            サイズ: {Math.round(sizes[0])}px
          </p>
          <button
            className="mt-2 px-3 py-1 bg-blue-500 text-white rounded"
            onClick={() => setSizes([300, 500])}
          >
            リセット
          </button>
        </Pane>
        <Pane className="bg-green-200 p-4" size={sizes[1]}>
          <p className="text-sm text-gray-600">
            サイズ: {Math.round(sizes[1])}px
          </p>
        </Pane>
      </SplitPane>
    </div>
  );
}

"use client";

import dynamic from "next/dynamic";
import { SplitPane, Pane } from "react-split-pane";
import { usePersistence } from "react-split-pane/persistence";

const NoSSRContent = dynamic(
  () =>
    Promise.resolve(function Content() {
      const [sizes, setSizes] = usePersistence({ key: "my-layout" });

      return (
        <div className="w-full h-screen">
          <SplitPane direction="horizontal" onResize={setSizes}>
            <Pane className="bg-blue-200" size={sizes[0] || 300}>
              <div className="p-4">
                <h3 className="font-bold">サイズの永続化</h3>
                <p className="text-sm">usePersistenceフックを使用</p>
              </div>
            </Pane>
            <Pane className="bg-green-200" size={sizes[1]}>
              <div className="p-4">
                <p className="text-sm">リロードしてもサイズ維持</p>
              </div>
            </Pane>
          </SplitPane>
        </div>
      );
    }),
  { ssr: false }
);

export default function SplitPanePersistencePage() {
  return <NoSSRContent />;
}

"use client";

import { SplitPane, Pane } from "react-split-pane";

export default function SplitPaneSnapPointsPage() {
  const snapPoints = [200, 400, 600]; // スナップポイント: これらの値に近づくと吸着する

  return (
    <div className="w-full h-screen">
      <SplitPane
        direction="horizontal"
        snapPoints={snapPoints}
        snapTolerance={20}
      >
        <Pane className="bg-purple-200" defaultSize="300px" minSize="100px">
          <div className="p-4">
            <h3 className="font-bold mb-2">スナップポイント</h3>
            <p className="text-sm">200px, 400px, 600px にサイズが吸着する</p>
          </div>
        </Pane>
        <Pane className="bg-orange-200">
          <div className="p-4">
            <p className="text-sm">ドラッグしてスナップ動作を確認</p>
            <div className="mt-4 text-xs text-gray-600">
              <p>snapTolerance: 20pxにより</p>
              <p>（20px以内に近づくと吸着）</p>
            </div>
          </div>
        </Pane>
      </SplitPane>
    </div>
  );
}

"use client";

import { SplitPane, Pane } from "react-split-pane";
import type { DividerProps } from "react-split-pane";
import { GripVertical } from "lucide-react"; // アイコンライブラリ

// カスタムDivider: アイコンなど dividerClassName では不可能な表現
const CustomDivider = ({
  isDragging,
  direction,
  currentSize,
  minSize,
  maxSize,
  index,
  disabled,
  ...domProps
}: DividerProps) => (
  <div
    {...domProps}
    className={`w-3 h-full cursor-col-resize flex items-center justify-center
      ${isDragging ? "bg-blue-400" : "bg-gray-100 hover:bg-gray-200"}`}
  >
    <GripVertical
      size={12}
      className={isDragging ? "text-white" : "text-gray-400"}
    />
  </div>
);

export default function SplitPaneCustomDividerPage() {
  return (
    <div className="w-full h-screen">
      <SplitPane direction="horizontal" divider={CustomDivider}>
        <Pane className="bg-slate-50 p-4" defaultSize="300px">
          <p className="text-m text-gray-600">縦線: カスタムDivider</p>
          <p className="text-sm text-gray-400">
            アイコン表示 / ドラッグ中は青+白アイコン
          </p>
        </Pane>
        <Pane>
          <SplitPane
            direction="vertical"
            dividerClassName="!h-3 !w-full cursor-ns-resize bg-gray-100 hover:bg-gray-500"
          >
            <Pane className="bg-slate-100 p-4" defaultSize="50%">
              <p className="text-m text-gray-600">横線: dividerClassName</p>
              <p className="text-sm text-gray-400">
                Tailwindのみ / ホバーで色変化
              </p>
            </Pane>
            <Pane className="bg-slate-200 p-4">
              <p className="text-m text-gray-600">下部</p>
            </Pane>
          </SplitPane>
        </Pane>
      </SplitPane>
    </div>
  );
}