fix: Support iframe while dragging

[nvh95]

Fix #30 #241 #361 If a pane contains an iframe, it behaves very weirdly while dragging the resizer. There are some workarounds like https://github.com/tomkp/react-split-pane/issues/30#issuecomment-169309414 https://github.com/tomkp/react-split-pane/issues/30#issuecomment-278774489 https://github.com/tomkp/react-split-pane/issues/241#issuecomment-451708777 but I think it's better if the library handles this issue itself.

I did give a comment here: https://github.com/tomkp/react-split-pane/issues/241#issuecomment-677091968

Let me know if this fix is good. Thank you. cc: @tomkp @wuweiweiwu

[Spiderpig86]

Anyone planning to approve this change?

[shakiba]

I tested this, it doesn't solve the issue when iframe is not an immediate child. This PR helped me find another solution however.

I made this change in the library:

const pane1Classes = ['Pane1', paneClassName, pane1ClassName, active ? 'split-pane-active' : ''].join(' ');
const pane2Classes = ['Pane2', paneClassName, pane2ClassName, active ? 'split-pane-active' : ''].join(' ');

And then in my own app:

.split-pane-active iframe {
  pointer-events: none;
}

Adding a class name can be helpful for other use-cases as well.

@wuweiweiwu @tomkp

[sytolk]

I think this is better fix for this issue: https://github.com/tomkp/react-split-pane/pull/761