Fix resplit context examples and type (#26)

KenanYusuf · Mar 10, 2024 · c16b09f · c16b09f
1 parent e7684b8
commit c16b09f
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -131,14 +131,14 @@ A pane is a container that can be resized.
 
 A splitter is a draggable element that can be used to resize panes.
 
-| Name        | Type            | Default  | Description                                  |
-| ----------- | --------------- | -------- | -------------------------------------------- |
+| Name        | Type            | Default  | Description                                                            |
+| ----------- | --------------- | -------- | ---------------------------------------------------------------------- |
 | `order`     | `number`        |          | Specifies the order of the resplit child (pane or splitter) in the DOM |
-| `size`      | `${number}px`   | `"10px"` | Set the size of the splitter as a pixel unit |
-| `asChild`   | `boolean`       | `false`  | Merges props onto the immediate child        |
-| `children`  | `ReactNode`     |          | Child elements                               |
-| `className` | `string`        |          | Class name                                   |
-| `style`     | `CSSProperties` |          | Style object                                 |
+| `size`      | `${number}px`   | `"10px"` | Set the size of the splitter as a pixel unit                           |
+| `asChild`   | `boolean`       | `false`  | Merges props onto the immediate child                                  |
+| `children`  | `ReactNode`     |          | Child elements                                                         |
+| `className` | `string`        |          | Class name                                                             |
+| `style`     | `CSSProperties` |          | Style object                                                           |
 
 ### useResplitContext `() => ResplitContextValue`
 
@@ -163,28 +163,34 @@ Get the collapsed state of a pane.
 **Note**: The returned value will not update on every render and should be used in a callback e.g. used in combination with a pane's `onResize` callback.
 
 ```tsx
-import { Resplit, useResplitContext } from 'react-resplit';
+import { Resplit, useResplitContext, ResplitPaneProps, FrValue } from 'react-resplit';
 
-function App() {
-  const { isPaneCollapsed } = useResplitContext({
-    direction: 'horizontal',
-  });
+function CustomPane(props: ResplitPaneProps) {
+  const { isPaneCollapsed } = useResplitContext();
 
-  const handleResize = () => {
-    if (isPaneCollapsed(2)) {
+  const handleResize = (size: FrValue) => {
+    if (isPaneCollapsed(props.order)) {
       // Do something
     }
   };
 
+  return (
+    <Resplit.Pane
+      {...props}
+      initialSize="0.5fr"
+      collapsedSize="0.2fr"
+      collapsible
+      onResize={handleResize}
+    />
+  );
+}
+
+function App() {
   return (
     <Resplit.Root>
-      <Resplit.Pane order={0} initialSize="0.5fr">
-        Pane 1
-      </Resplit.Pane>
-      <Resplit.Splitter order={1} size="10px" />
-      <Resplit.Pane order={2} initialSize="0.5fr" onResize={handleResize}>
-        Pane 2
-      </Resplit.Pane>
+      <CustomPane order={0} />
+      <Resplit.Splitter order={1} />
+      <CustomPane order={2} />
     </Resplit.Root>
   );
 }
@@ -197,28 +203,26 @@ Get the min size state of a pane.
 **Note**: The returned value will not update on every render and should be used in a callback e.g. used in combination with a pane's `onResize` callback.
 
 ```tsx
-import { Resplit, useResplitContext } from 'react-resplit';
+import { Resplit, useResplitContext, ResplitPaneProps, FrValue } from 'react-resplit';
 
-function App() {
-  const { isPaneMinSize } = useResplitContext({
-    direction: 'horizontal',
-  });
+function CustomPane(props: ResplitPaneProps) {
+  const { isPaneMinSize } = useResplitContext();
 
-  const handleResize = () => {
-    if (isPaneMinSize(2)) {
+  const handleResize = (size: FrValue) => {
+    if (isPaneMinSize(props.order)) {
       // Do something
     }
   };
 
+  return <Resplit.Pane {...props} initialSize="0.5fr" minSize="0.2fr" onResize={handleResize} />;
+}
+
+function App() {
   return (
     <Resplit.Root>
-      <Resplit.Pane order={0} initialSize="0.5fr">
-        Pane 1
-      </Resplit.Pane>
-      <Resplit.Splitter order={1} size="10px" />
-      <Resplit.Pane order={2} initialSize="0.5fr" onResize={handleResize}>
-        Pane 2
-      </Resplit.Pane>
+      <CustomPane order={0} />
+      <Resplit.Splitter order={1} />
+      <CustomPane order={2} />
     </Resplit.Root>
   );
 }

diff --git a/lib/Pane.tsx b/lib/Pane.tsx
@@ -58,7 +58,10 @@ export type ResplitPaneOptions = {
   onResize?: (size: FrValue) => void;
 };
 
-export type ResplitPaneProps = HTMLAttributes<HTMLDivElement> &
+export type ResplitPaneProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onResize' | 'onResizeEnd' | 'onResizeStart'
+> &
   ResplitPaneOptions & {
     /**
      * The order of the pane in the layout. {@link Order}

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { CodeEditorExample } from './examples/CodeEditor';
 import { ImageCompareExample } from './examples/ImageCompare';
+import { ContextExample } from './examples/Context';
 
 const examples = [
   {
@@ -11,6 +12,10 @@ const examples = [
     name: 'Image Compare',
     component: ImageCompareExample,
   },
+  {
+    name: 'Context',
+    component: ContextExample,
+  },
 ];
 
 function App() {

diff --git a/src/examples/Context.tsx b/src/examples/Context.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { FrValue, Resplit, ResplitPaneProps, useResplitContext } from 'resplit';
+
+export const SizeAwarePane = (props: ResplitPaneProps) => {
+  const { isPaneCollapsed, isPaneMinSize } = useResplitContext();
+  const [size, setSize] = useState('0.5fr');
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMinSize, setIsMinSize] = useState(false);
+
+  const handleResize = (size: FrValue) => {
+    setSize(size);
+    setIsCollapsed(isPaneCollapsed(props.order));
+    setIsMinSize(isPaneMinSize(props.order));
+  };
+
+  return (
+    <Resplit.Pane
+      {...props}
+      className="p-6"
+      initialSize="0.5fr"
+      minSize="0.3fr"
+      collapsedSize="0.2fr"
+      collapsible
+      onResize={handleResize}
+    >
+      <ul>
+        <li>size: {size}</li>
+        <li>isMinSize: {isMinSize.toString()}</li>
+        <li>isCollapsed: {isCollapsed.toString()}</li>
+      </ul>
+    </Resplit.Pane>
+  );
+};
+
+export const ContextExample = () => {
+  return (
+    <Resplit.Root className="h-full">
+      <SizeAwarePane order={0} />
+      <Resplit.Splitter order={1} size="5px" className="bg-white" />
+      <SizeAwarePane order={2} />
+    </Resplit.Root>
+  );
+};