@devteks/react-split-view v0.0.3

React SplitView

A React component that imitates VS Code SplitView. As far as I know, the SplitView function is available, if not, please submit an Issue.

Demo

✨ Characteristic

• 🌈 VSCode similar SplitView function
• 📦 Support priority, when the parent container changes size or drags Sash, the one with higher priority will be resized first
• 🛡 Support minimum size and maximum size constraints
• ⚙️ Support docking
• 🌍 Support fixed Pane
• 🎨 Support for chain reactions
• ⛪ Support Hover Delay
• 🎷 Support for layout storage
• 📚 Nested layouts are supported

🖥 Environment

• Modern browsers and Internet Explorer 11 (with polyfills)
• Server-side Rendering
• Electron

📦 Install

npm install @devteks/react-split-view

yarn add @devteks/react-split-view

🔨 Use

import { useState, useEffect } from 'react';
import {
  SplitView,
  SplitViewPane,
  SplitViewPaneInfo,
} from '@devteks/react-split-view';

const STORE_KEY = 'LAYOUT';

const save = (data: SplitViewPaneInfo[]) => localStorage.setItem(STORE_KEY, JSON.stringify(data));

const load = (): SplitViewPaneInfo[] | undefined => {
  const text = localStorage.getItem(STORE_KEY);
  return !text ? undefined : JSON.parse(text);
};

const initialData: SplitViewPaneInfo[] = [
  {
    paneKey: 'Pane1',
    minSize: 44,
    maxSize: 44,
  },
  {
    paneKey: 'Pane2',
    minSize: 120,
    maxSize: 240,
    size: 180,
    snapable: true,
  },
  {
    paneKey: 'Pane3',
    minSize: 160,
  },
  {
    paneKey: 'Pane4',
    minSize: 120,
    maxSize: 240,
  },
];

const Example = () => {
  const [paneData, setPaneData] = useState<SplitViewPaneInfo[]>(() => load() ?? initialData);

  useEffect(() => {
    save(paneData);
  }, [paneData]);

  return (
    <div style={{ height: 800, width: '100%' }}>
      <SplitView
        paneData={paneData}
        onChange={changes => setPaneData([ ...changes ])}
      >
        <SplitViewPane paneKey="Pane1">fixed</SplitViewPane>
        <SplitViewPane paneKey="Pane2">Snapable</SplitViewPane>
        <SplitViewPane paneKey="Pane3">Content</SplitViewPane>
        <SplitViewPane paneKey="Pane4">Property</SplitViewPane>
      </SplitView>
    </div>
  );
};

API

SplitView

SplitViewPane

SplitViewPaneInfo

Global Method

It is used to support the movement of Pane in the same SplitView or between different SplitViews. If you need to implement operations such as Pane's moving, dragging and dropping, layout configuration, etc., these methods can help you.

paneMoveTo

Move the Pane corresponding to paneKey to the specified position. | Parameter | Description | Type | Default Value | | ------------------ | ------------------------------------- | --------------------- | ------------- | | paneData | Pane data. | SplitViewPaneInfo[] | - | | sourcePaneKey | The paneKey of the Pane to move. | string | - | | destinationPaneKey | The paneKey to move to. | string | - | | behand | Whether it is behind the target Pane. | boolean | false |

paneMoveToLast

Move the Pane corresponding to paneKey to the last position. | Parameter | Description | Type | Default Value | | ------------- | -------------------------------- | --------------------- | ------------- | | paneData | Pane data. | SplitViewPaneInfo[] | - | | sourcePaneKey | The paneKey of the Pane to move. | string | - |

paneMoveToFirst

Move the Pane corresponding to paneKey to the front position. | Parameter | Description | Type | Default Value | | ------------- | -------------------------------- | --------------------- | ------------- | | paneData | Pane data. | SplitViewPaneInfo[] | - | | sourcePaneKey | The paneKey of the Pane to move. | string | - |

paneCut

Cut the Pane corresponding to paneKey. Remove the Pane with the specified paneKay from paneData and return this Pane. | Parameter | Description | Type | Default Value | | ------------- | ------------------------------- | --------------------- | ------------- | | paneData | Pane data. | SplitViewPaneInfo[] | - | | sourcePaneKey | The paneKey of the Pane to cut. | string | - |

Return value: Pane data corresponding to sourcePaneKey.

panePaste

Paste the Pane corresponding to the paneKey to the specified position, and support cutting and pasting between paneData of different SplitViews. | Parameter | Description | Type | Default Value | | ------------ | ----------------------------------------------------------------------- | --------------------- | ------------- | | srcPane | The Pane data to paste. It can be derived from the return value of cutPane, or it can be a new Pane data. | SplitViewPaneInfo | - | | destPaneData | paneData to paste into | SplitViewPaneInfo[] | - | | paneKey | Destination paneKey to paste into. | string | - | | behand | Whether it is behind the target Pane. | boolean | false |

If you want to move the Pane across the SplitView, remember that the SplitView should contain the SplitViewPane component corresponding to the paneKey.