Comments (11)
@slapbox It's not weird. Actually I had the use case myself. The viewport space actually has top, right, bottom and left properties to allow you to offset from the edge of the viewport. I just forgot to document it! In your case adding top={20} to the viewport space will do what you want without having to resort to using CSS.
from react-spaces.
@slapbox ViewPort is the way to go if you actually want it to fill the browser. I've actually only used Fixed spaces with a pixel height so there could be an issue that manifests itself when a percentage height is used. I'll try to repro.
from react-spaces.
Glad that helped. It did highlight that I was not validating properties on the components for JS only consumers (non Typescript). I had typed the height property on the Fixed space as number with the intention that only pixel heights could be passed there. I've added issue #34 to add PropTypes for each component to avoid confusion in the future.
from react-spaces.
Getting this as well ^^
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
from react-spaces.
Whilst not ideal I haven't noticed any side effects apart from the warning message itself in dev.
from react-spaces.
This warning has been resolved with the refactor to React Hooks in #22
from react-spaces.
@aeagle this is possibly still occurring as a new error:
react-dom.development.js:546 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in SpaceInternal (created by Fill)
in Fill (created by SpacesRoot)
in div (created by SpaceInternal)
in div (created by SpaceInternal)
in SpaceInternal (created by Fill)
in Fill (created by Fixed)
in div (created by Fixed)
in Fixed (created by SpacesRoot)
in SpacesRoot (created by ConnectFunction)
in ConnectFunction (created by Connect(SpacesRoot))
in Connect(SpacesRoot) (created by MainSection)
in div (created by ForwardRef(Box))
in ForwardRef(Box)
in ForwardRef(Box) (created by MainSection)
in ErrorBoundary (created by MainSection)
in div (created by ForwardRef(Box))
in ForwardRef(Box)
in ForwardRef(Box) (created by MainSection)
in MainSection (created by ConnectFunction)
in ConnectFunction (created by Root)
in ErrorBoundary (created by Root)
in div (created by HotKeysWrapper)
in HotKeysWrapper (created by HotKeysEnabled)
in HotKeysEnabled (created by Root)
in div (created by Root)
in ThemeProvider (created by Root)
in Root (created by ConnectFunction)
in ConnectFunction
in Router (created by HashRouter)
in HashRouter (created by SuperRoot)
in Provider (created by SuperRoot)
in SuperRoot (created by HotExportedSuperRoot)
in AppContainer (created by HotExportedSuperRoot)
in HotExportedSuperRoot
in AppContainer
Only seems to happen with Space.Fixed
, not with Space.ViewPort
.
from react-spaces.
Hi @slapbox. Thanks for reporting. Could you post the JSX you are using to produce this warning? Does the error happen straight away after first render or after a state or props change? It looks like you are using Redux at the root so any info on any props/state changes that are happening in your case would be appreciated so that I can try to repro.
from react-spaces.
Hey @aeagle thanks for your reply. It's really weird, I had it working for several fresh starts of my project, but as I kept tweaking the CSS eventually it stopped working. Reverting the CSS didn't work. I eventually swapped out my intended children for simple span
s, but the issue persisted.
The code is just:
<Spaces.Fixed height="100%">
<Spaces.LeftResizable size="25%">
<span>Hello</span>
</Spaces.LeftResizable>
<Spaces.Fill>
<span>Goodbye</span>
</Spaces.Fill>
</Spaces.Fixed>
I've updated the above post with the complete call stack.
We're using React Hot Loader (and gaeron's patched react-dom
that's compatible with hooks) and not doing anything to trigger hot loading when this occurs. It's (weirdly) hard to be 100% certain hot loading is disabled when used with Webpack. It seems like a few places need to be updated. I haven't tried it in an environment where I'm completely certain hot loading is disabled, but as I mentioned it shouldn't be causing any issues because it shouldn't be patching anything.
As far as props/state changes nothing unusual going on and no loops that carry on for more than say 10-15 render cycles when starting up as we wait for data and try initializing again after a brief delay until we have it.,
Trying to reproduce the issue today, I've not been able to so far except by leaving the height
prop off of <Fixed />
. I wonder if using percentage based height perhaps isn't consistently safe? I'm not quite sure what's going on behind the scenes.
I've modified my approach to use <ViewPort />
for now so I'm hopeful I won't be seeing the issue again, but if I do I'll update the issue with any new information I uncover.
Thanks for this awesome project!
from react-spaces.
My situation is a bit weird, where we want to fill all but the top 20px. Adding a css rule to modify <ViewPort />
top: 20px
seems to work without any negative effects (so far.)
from react-spaces.
That works great!
from react-spaces.
Related Issues (20)
- Dynamic minimum and maximum size when resizing does not work HOT 3
- <Fill/> width can exceed <ViewPort/> width HOT 3
- dynamic calc miscalculation HOT 12
- add sourcecode to lorem-ipsum demo HOT 1
- Trying to resize panel throws `getBoundingClientRect` error HOT 4
- bug: resizeType always is "resize-right" HOT 1
- bug: how to judge "LeftResizable" drag's direction? HOT 1
- Corner resize handles HOT 3
- Opposite edge resizing (left/right or top/bottom)
- Attempted import error: 'unstable_useOpaqueIdentifier' is not exported from 'react' HOT 2
- Auto scroll not working while dragging using react-beautiful-dnd HOT 1
- Styles not working as expected HOT 2
- handleSize seems to be ignored on Custom spaces, always 5px HOT 3
- SSR on 0.2.0: ReferenceError: document is not defined HOT 8
- `onResizeEnd` doesn't respect `maximumSize` if `size` === `maximumSize` HOT 1
- Is it possible to have a minimum size fill HOT 1
- Allow 'as' property to be Polymorphic (to play with libraries like Framer Motion) HOT 8
- Update peer dependencies for react to include v17 HOT 4
- Allow grid/snap points to be specified on a resizable space to constrain resizes
- Customize Handles HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spaces.