yyllff / split-pane-react Goto Github PK

Feature request:

Current behavior:
Dragging the divider outside of the split pane selects text.

Expected behavior:
Dragging the divider of the split pane doesn't select text.

Proposed changes:
Modify the default CSS to disable user-select on the divider:

.react-split__sash {
   user-select: none;
}

Nice work on the component. When I move my mouse a quickly, the splitter stays behind and no resize happens.

Btw, I'm using an element on the left panel with both width and height set to full. Not sure if it can be related.

In our company we would want to use this package but it's only outputted as ESM, is there a way to output in commonjs as well?

I've found that MarqueeSelection is causing an issue and the split pane does not resize.

As a workaround I've had to delete the MarqueeSelection component: see my commit below

giuliohome-org/todo-csharp-sql@4287805

Do you know what is going on?

example can be found here: https://62a261c8d8fc7c6bcee1856c.clutch.host/

left and right panels have maxs and mins but don't seem to react to that:

                      <Pane
                       variants={b.getVariants(undefined)}
                       sx={{
                         height: '100%',
                       }}
                       minSize={230}
                       maxSize={'50%'}
                       key={getKey(report, '20_275', 'pane-3')}
                       data-d={getKey(report, '20_275', 'pane-3')}
                     >

could be that i'm rewrapping the component using Styled from mui to accomplish this? but would be somewhat suprising as all other behaviors work

Nice work on the component, I like the flexibility it offers.

I facing one issue though. Because of this piece of code, SplitPane is always expecting <Pane> as a direct child, meaning that I can't do something like this:

const MyPane = ({children}) => (<Pane minSize={200} maxSize={500}>{children}</Pane>);

const MyPage = () => (
  <SplitPane>
    <MyPane>Foo</MyPane>
    <MyPane>Bar</MyPane>
  </SplitPane>
);

This is just a simplified example, <MyPane> can be very complex with a lot of customization.

In layout system, de facto standard naming rule of "horizontal" and "vertical" is related by the affected Elements placement.

Which is

A-B-C : This is horizontal

A
|
B
|
C : This is Vertical

But this library uses inversed naming rule of horizontal and vertical.

If you are considered about the version compatiability, I think it'd be better to create new prop (named orientation or direction)

By the way, I like this library. Well maded. Thanks.

Hi there,

Just trying to get your simple example up and running - no dice:

https://codesandbox.io/s/epic-lake-30cfen?file=/src/proto.tsx

Cheers

Property 'sashRender' is missing in type '{ children: Element[]; sizes: (string | number)[]; onChange: Dispatch<SetStateAction<(string | number)[]>>; }' but required in type 'ISplitProps'.ts(2741)

I suppose you should accept undefined for sashRender.
Had to add sashRender={() => null} to make TS accept it.

Thanks for the good job! Nice lib handling the border cases nicely!

first comment,
hope you can make it better

I'm trying to get this to work in my vite project, I keep on getting this error:

node_modules/split-pane-react/src/SplitPane.tsx:122:46 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IAxis'.
  No index signature with a parameter of type 'string' was found on type 'IAxis'.

122         let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
                                                 ~~~~~~~~~~~~~~~~~~~~~~~

I am trying to test my component with [email protected] with Jest in a Next.js project with typescript.

I am receiving the error as :
Cannot find module 'split-pane-react' from 'my component path'
on running the test case.

I have tried adding the path in moduleNameMapper in jest.config.js as
'split-pane-react': '<rootDir>/node_modules/split-pane-react/esm/index.js'
but it is giving an error of export like this

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './SplitPane';
                                                                                      ^^^^^^
SyntaxError: Unexpected token 'export'

Package versions:
"react": "18.2.0",
"next": "12.3.4",
"jest": "29.7.0",
"ts-jest": "29.1.1",
"ts-node": "10.9.1",

I'm trying to use this in a Next w/Typescript project:

<SashContent className={styles.sashWrapLineActive}>
  <span className={styles.sashWrapLine}></span>
</SashContent>

Typescript complains about the span element:

types.d.ts(60, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & ISashContentProps'

Do I need to add anything to allow the element or is this a bug in split-pane-react?
On the interface, I see children is defined as JSX.Element[]

<div style={{ height: 500 }}> <SplitPane

Is there no way to have this node module work with passing in height: 100%? ... having to set a fixed height limits the use.

I can't resize the panels on a mobile device.
It can be simulated in chrome developer tools.

Maybe due to the width of the divider: can it be made thicker and more visible?

thanks very much for your project

i hope if the currentSelectedTask === undefine , do not render the second <Pane>

but i got a ts error:
TS2322: Type 'Element | undefined' is not assignable to type 'Element'.   Type 'undefined' is not assignable to type 'ReactElement<any, any>