Allow for children to be passed to the resizer (icons, text)

[goudarziha]

Thanks for contributing to react-split-pane!

Before submitting a pull request, please complete the following checklist:

• [x] The existing test suites (yarn run test) all pass
• [x] For any new features, documentation has been added
• [x] For any documentation changes, the text has been proofread and is clear to both experienced users and beginners.
• [x] Format your code with prettier (yarn run prettier).

Here is a short checklist of additional things to keep in mind before submitting:

• Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :)
• Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.)

[coveralls]

Coverage remained the same at 91.525% when pulling af22ee4fd429d76d08d481824cfebf72af593c76 on goudarziha:master into 1f0363f8b5399fa1e76ac8f2ee0825278e4eeb09 on tomkp:master.

[goudarziha]

@tomkp any chance to review this pr?

[damassi]

Looking for just this functionality now 👍

[sretundijr]

@wuweiweiwu any chance of this making it in?

[chrisregner]

For those who need a workaround, you can always use Pseudo CSS content. Here's what I came up with:

.Resizer.horizontal:not(.disabled) {
  position: relative;
  z-index: 1;
  margin: -5px 0;
  height: 12px;
  background: #D3CEC4;
  border-top: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);

  cursor: row-resize;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer.horizontal:not(.disabled)::after {
  content: '•••••••';
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 8px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  background-color: #FAF9F7;
  color: #B8B2A7;
  border: 1px solid #B8B2A7;
  line-height: 12px;
  font-size: 12px;
  letter-spacing: 1px;
  display: inline-block;
}

.Resizer.disabled {
  cursor: not-allowed;
}