split-pane-react - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

esm/index.d.ts

 export * from './SplitPane';
 export * from './pane';
+export * from './SashContent';
 export { default } from './SplitPane';
 export { default as Pane } from './pane';
+export { default as SashContent } from './SashContent';

esm/index.js

 export * from './SplitPane';
 export * from './pane';
+export * from './SashContent';
 export { default } from './SplitPane';
 export { default as Pane } from './pane';
+export { default as SashContent } from './SashContent';

esm/sash.d.ts

 import { ISashProps } from './types';
-export default function Sash({ className, onDragStart, onDragging, onDragEnd, ...others }: ISashProps): JSX.Element;
+export default function Sash({ className, render, onDragStart, onDragging, onDragEnd, ...others }: ISashProps): JSX.Element;

esm/sash.js

@@ -13,5 +13,5 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useRef, useState } from 'react';
-import { classNames, sashHoverClassName, sashClassName } from './base';
+import { classNames, sashClassName } from './base';
 export default function Sash(_a) {
-    var { className, onDragStart, onDragging, onDragEnd } = _a, others = __rest(_a, ["className", "onDragStart", "onDragging", "onDragEnd"]);
+    var { className, render, onDragStart, onDragging, onDragEnd } = _a, others = __rest(_a, ["className", "render", "onDragStart", "onDragging", "onDragEnd"]);
     const timeout = useRef(null);
@@ -29,3 +29,3 @@ const [active, setActive] = useState(false);
     };
-    return (React.createElement("div", Object.assign({ role: "Resizer", className: classNames(sashClassName, (draging || active) && sashHoverClassName, className), onMouseEnter: () => {
+    return (React.createElement("div", Object.assign({ role: "Resizer", className: classNames(sashClassName, className), onMouseEnter: () => {
             timeout.current = setTimeout(() => {
@@ -44,3 +44,3 @@ setActive(true);
             window.addEventListener('mouseup', handleMouseUp);
-        } }, others)));
+        } }, others), render(draging || active)));
 }

esm/SplitPane.d.ts

 import { ISplitProps } from './types';
-declare const SplitPane: ({ children, sizes: propSizes, allowResize, split, className: wrapClassName, sashClassName, resizerSize, performanceMode, onChange, onDragStart, onDragEnd, ...others }: ISplitProps) => JSX.Element;
+declare const SplitPane: ({ children, sizes: propSizes, allowResize, split, className: wrapClassName, sashRender, resizerSize, performanceMode, onChange, onDragStart, onDragEnd, ...others }: ISplitProps) => JSX.Element;
 export default SplitPane;

esm/SplitPane.js

@@ -15,6 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import Sash from './sash';
+import SashContent from './SashContent';
 import { classNames, bodyDisableUserSelect, paneClassName, splitClassName, splitDragClassName, splitVerticalClassName, splitHorizontalClassName, sashDisabledClassName, sashHorizontalClassName, sashVerticalClassName, assertsSize } from './base';
 const SplitPane = (_a) => {
     var _b;
-    var { children, sizes: propSizes, allowResize = true, split = 'vertical', className: wrapClassName, sashClassName, resizerSize = 4, performanceMode = false, onChange = () => null, onDragStart = () => null, onDragEnd = () => null } = _a, others = __rest(_a, ["children", "sizes", "allowResize", "split", "className", "sashClassName", "resizerSize", "performanceMode", "onChange", "onDragStart", "onDragEnd"]);
+    var { children, sizes: propSizes, allowResize = true, split = 'vertical', className: wrapClassName, sashRender = (_, active) => React.createElement(SashContent, { active: active, type: 'vscode' }), resizerSize = 4, performanceMode = false, onChange = () => null, onDragStart = () => null, onDragEnd = () => null } = _a, others = __rest(_a, ["children", "sizes", "allowResize", "split", "className", "sashRender", "resizerSize", "performanceMode", "onChange", "onDragStart", "onDragEnd"]);
     const axis = useRef({ x: 0, y: 0 });
@@ -118,7 +119,7 @@ const wrapper = useRef(null);
                 ? sashVerticalClassName
-                : sashHorizontalClassName, sashClassName), style: {
+                : sashHorizontalClassName), style: {
                 [sizeName]: resizerSize,
                 [splitPos]: posSize - resizerSize / 2
-            }, onDragStart: dragStart, onDragging: e => onDragging(e, index), onDragEnd: dragEnd })))));
+            }, render: sashRender.bind(null, index), onDragStart: dragStart, onDragging: e => onDragging(e, index), onDragEnd: dragEnd })))));
 };
 export default SplitPane;

esm/types.d.ts

@@ -34,2 +34,3 @@ import React from 'react';
     sizes: (string | number)[];
+    sashRender: (index: number, active: boolean) => React.ReactNode;
     onChange: (sizes: number[]) => void;
@@ -51,2 +52,3 @@ onDragStart?: (e: MouseEvent) => void;
     style: React.CSSProperties;
+    render: (active: boolean) => void;
     onDragStart: React.MouseEventHandler<HTMLDivElement>;
@@ -56,2 +58,8 @@ onDragging: React.MouseEventHandler<HTMLDivElement>;
 }
+export interface ISashContentProps {
+    className?: string;
+    type?: string;
+    active?: boolean;
+    children?: JSX.Element[];
+}
 export interface IPaneConfigs {
@@ -58,0 +66,0 @@ maxSize?: number | string;

package.json

 {
   "name": "split-pane-react",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Resizable split panes for React.js.",
@@ -5,0 +5,0 @@ "module": "./esm/index.js",

No alert changes

Improved metrics

Total package byte prevSize

38955

increased by1.16%

Worsened metrics

Lines of code

861

decreased by-3.8%

No dependency changes