Floating spaces

[bartzy]

Thanks for publishing this project!

It could be nice to have an option to configure some spaces as floating above their siblings, so they don't take any space from them.
Could be an easy way to implement something like a left/right drawer menu.

[aeagle]

@bartzy I've had a thought about this and the best way to implement this. The most obvious way would be to introduce a floated property on an anchored space.

However a more flexible way I believe would be to introduce a layering concept. Therefore within one space you could introduce layers in which spaces would affect the spaces in the same layer (as they do now) but not spaces in different layers. Something like:

<ViewPort>

  <Layer zindex={10}>

    <Left size={xxx}>
       ... floating sidebar
    </Left>

  <Layer>

  <Fill>
      ... this takes up the full page 
  </Fill>

</ViewPort>

Despite being in different layers, the Fill and the Left are still constrained by their common parent ViewPort but being in different layers do not affect each other.

[thekapadia]

@aeagle - when do you plan to release this? I'm eagerly waiting to use this feature in my project.

[aeagle]

I've just released version 0.1.15 with the layers functionality. Here is an example of usage https://codesandbox.io/s/react-spaces-layers-dsj19?fontsize=14

[Nantris]

@aeagle thanks for continuing to maintain and improve this fantastic project!

It looks like that CodeSandbox link no longer works, but I assume this is the right example.

It might be best to redirect https://allaneagle.com/projects/react-spaces/examples to https://allaneagle.com/react-spaces/docs/?path=/story/basic-examples, since the first link now contains way less than what this great library is actually capable of!

---

I also had a question about the positioned spaces. I wonder if there's any plans for the following:

• Dragging one edge of a positioned space to expand the opposite edge too - preferably on a per-edge basis. So for example:
• Dragging the left border would expand or shrink left/right both
• Dragging the top handle would expand or shrink top/bottom both
• Dragging the bottom handle wouldn't move the top
• Optional resize handles for the corners of a space
  • I'm trying to upgrade a bunch of legacy implementations in our app and one of the things we've relied on since before react-spaces came onto the scene is this repo.

I think that adding corner handles alone would bring react-space to full feature parity with that library - and opposite-side resizing would be just wonderful!

Any plans for either or both?

[aeagle]

Hi @slapbox

Thanks for the suggestion. I'll sort out a redirect shortly for the old demos to the storybook versions.

In terms of your other requests it would be good to setup a feature request for each of the following:

• Optional corner resize handles - something I thought about adding myself already
• Positioned space combined left/right or top/bottom resizing - it would be interesting to know the use case for this but we can continue the discussion on a separate issue

Could you add these with details and I can look to getting this functionality added?