leefsmp / re-flex Goto Github PK
View Code? Open in Web Editor NEWResizable Flex layout container components for advanced React web applications
Home Page: https://leefsmp.github.io/Re-Flex/index.html
License: MIT License
Resizable Flex layout container components for advanced React web applications
Home Page: https://leefsmp.github.io/Re-Flex/index.html
License: MIT License
Updating ReflexElement's size does not recalculate the flex of the element
As seen in this demo: https://codesandbox.io/s/zqn73pl40x
Would it be possible to expose the current state of the ReflexContainer and/or the ReflexElements?
I'd like to assign my currently hardcoded flex={0.33}
sizes to the component's state and retrieve them on componentWillUnmount()
so when the user navigates back I can reload their last layout sizes from redux in my component's constructor.
I am researching an issue where computeFlexDataRec
results in an infinite loop. Unfortunately I haven't been able to reproduce it, but here's the output from my error tracker:
RangeError Uncaught RangeError: Maximum call stack size exceeded
webpack:///~/react-reflex/dist/es/ReflexContainer.js:717 computeFreeElements
webpack:///~/react-reflex/dist/es/ReflexContainer.js:745 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
webpack:///~/react-reflex/dist/es/ReflexContainer.js:769 computeFlexDataRec
Based on that it looks like hasContrain
never gets a truthy value which results in computeFlexDataRec
being called infinitely.
It appears to only occur on Windows in Chrome (also according to the error tracker).
Any ideas as to what might be causing this?
I need to blend ReflexElements according to what the user chooses.
So my render funktion looks somewhat like this:
return (
<Container>
<ReflexContainer orientation="vertical">
{treeIsVisible &&
<ReflexElement><TreeContainer tree={store.tree} /></ReflexElement>}
{treeIsVisible &&
(datenIsVisible || tree2IsVisible || daten2IsVisible) &&
<ReflexSplitter />}
{datenIsVisible &&
<ReflexElement><Daten tree={store.tree} /></ReflexElement>}
{datenIsVisible &&
(tree2IsVisible || daten2IsVisible) &&
<ReflexSplitter />}
{tree2IsVisible &&
<ReflexElement><TreeContainer tree={store.tree2} /></ReflexElement>}
{tree2IsVisible && daten2IsVisible &&
<ReflexSplitter />}
{daten2IsVisible &&
<ReflexElement><Daten tree={store.tree2} /></ReflexElement>}
</ReflexContainer>
</Container>
)
With this structure this error occurs:
index.min.js:1 Uncaught TypeError: Cannot read property 'flex' of undefined
Without the conditions render looks like this:
return (
<Container>
<ReflexContainer orientation="vertical">
<ReflexElement><TreeContainer tree={store.tree} /></ReflexElement>
<ReflexSplitter />
<ReflexElement><Daten tree={store.tree} /></ReflexElement>
<ReflexSplitter />
<ReflexElement><TreeContainer tree={store.tree2} /></ReflexElement>
<ReflexSplitter />
<ReflexElement><Daten tree={store.tree2} /></ReflexElement>
</ReflexContainer>
</Container>
)
...and works without error.
How could I get this working when using Re-Flex?
Similar to minSize
& maxSize
(width) attributes for a horizontal <ReflexElement>
.
Hi!
On window resize, the minSize and maxSize restrictions do not seem to be functioning properly. This seems to be due to the fact that the "flex" style properties are not being readjusted as the window changes size.
Here's a gif of a div breaking both a min and max size property.
A subtle hack is to add a min-width, min-height, max-width, or max-height property to the div which should be bounded. However, this causes the reflex splitters to lag behind the actual size of the div if the window is resized.
React-reflex has been very helpful for our project, so thank you very much for the work so far. I'd love to give a hand fixing this issue / testing it as soon as possible.
Having problem loading styles.css through webpack.
[0] Module parse failed: /Users/yensheng/Project/react-redux-universal-hot-example/node_modules/react-reflex/styles.css Unexpected token (1:0)
[0] You may need an appropriate loader to handle this file type.
[0] | .reflex-layout.reflex-container {
[0] | justify-content: flex-start;
[0] | align-items: stretch;
[0] @ ./src/containers/AddMedia/AddMedia.js 94:0-34
[0] @ ./src/routes.js
[0] @ ./src/client.js
[0] @ multi webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr react-hot-loader/patch bootstrap-loader font-awesome-webpack!./src/theme/font-awesome.config.js ./src/client.js
It is working fine for my other css file though. Snippet of my webpack code, which is almost the same as per the demo code.
module: {
rules: [
... {
test: /\.css$/,
loader: [ 'style-loader','css-loader','sass-loader' ],
include: [path.resolve(__dirname, '../src')]
},
...
]
}
There's a difference between Chrome/Firefox and Safari you can also test on the live demo page: https://leefsmp.github.io/Re-Flex/index.html#demo2 (example 2).
Looking at the generated HTML in the browser inspector I see this:
<div class="reflex-element left-pane" style="-moz-box-flex: 0.48329; flex: 0.48329 1 0%;">
<div style="height: 100%; width: 100%;">
<div class="pane-content">...
</div>
</div>
</div>
On Safari:
<div class="reflex-element left-pane" style="-webkit-box-flex: 0.5545325779036824; flex: 0.5545325875282288 1 0%;">
<div style="height: 250px; width: 783px;">
<div class="pane-content">...
</div>
</div>
</div>
So, on Safari we have an inline style with pixels.
This is leading to issues in my environment: if I continue to drag the splitter the height
continue to raise. Maybe I need to fix more the vertical height of my element, but I'm wondering why there's this difference.
I'm receiving the following warning in the console within the library:
Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
It's related to changes in React v15.5.0 (https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html)
Using React 15.5.0 and Electron 1.6.2 on Mac OSX 10.12.4.
Hi, this looks like a great component that would be perfect for what I need, but I can't really get it to work, not even the simplest demo.
Here's my codesandbox: https://codesandbox.io/s/1qjo7q8mll
Hi,
Thanks for this great tool! However, I got an issue when I try to do something like http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent
<div class='reflex-element'>
<div style='height: 100%; width: 100%;'>
<MyComponent>
</div>
</div>
My question is, how can I make MyCompoent overlap the reflex-element
?
Thanks!
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex'
error Unable to resolve path to module 'react-reflex' import/no-unresolved
P.S. version 2.0.9 working well
like:
<ReflexElement defaultSize={150} minSize={100} maxSize={300}>
content
I wanted to ask from logical perspective of how this component works, why when there's one handle inside ReflexElement
trying to drag it throws error but if it's added one more it works!
Like these two examples below:
Doesn't work
<ReflexElement {...this.resizeProps}>
<ReflexContainer orientation="horizontal">
<ReflexElement {...this.resizeProps}>
<ReflexHandle className="handle">Something here</ReflexHandle>
<div className="pane-content">
<div style={{ height: '30%' }} />
<label style={{ height: '0%' }}>
Left Pane <br /> Middle
<br />
(splitter propagation)
</label>
</div>
</ReflexElement>
</ReflexContainer>
</ReflexElement>
Works
<ReflexElement {...this.resizeProps}>
<ReflexContainer orientation="horizontal">
<ReflexElement {...this.resizeProps}>
<div className="pane-content">
<div style={{ height: '30%' }} />
<label style={{ height: '0%' }}>
Left Pane <br /> Top
<br />
(splitter propagation)
</label>
</div>
</ReflexElement>
<ReflexSplitter
propagate={true}
{...this.resizeProps}
/>
<ReflexElement {...this.resizeProps}>
<ReflexHandle className="handle">Something here</ReflexHandle>
<div className="pane-content">
<div style={{ height: '30%' }} />
<label style={{ height: '0%' }}>
Left Pane <br /> Middle
<br />
(splitter propagation)
</label>
</div>
</ReflexElement>
</ReflexContainer>
</ReflexElement>
I use Array.map and I drag ReflexSplitter,but get this.
<ReflexContainer orientation="horizontal">
{
detail.map((detailItem, index) => {
return (
<React.Fragment key={index}>
<ReflexElement minSize={90} className={styles.reflexWrapper} style={{marginBottom: '10px'}}>
{/* {this.renderDetailHeader(detailItem, index)} */}
<div className={classNames('pane-content', styles.tableWrapper)}>
<Table rowKey={detailItem.rowKey} locale={{emptyText: '暂无数据'}} bordered={false} rowSelection = {detailItem.rowSelection} pagination={false} size="middle" columns={detailItem.columns} dataSource={detailItem.list} />
</div>
</ReflexElement>
<ReflexSplitter/>
</React.Fragment>
);
})
}
</ReflexContainer>
On Ubuntu 16.04, Firefox 57.0, the computeFlexDataRec function in the ReflexContainer goes into an infinite loop. There is no problem on Chrome on the same computer, and there is also no problem on the same Firefox version on a Mac.
I've found that when refreshing the page, my splitter can't be dragged in a horizontal container (vertical doesn't have this problem). When routing away and then to the page, it works again.
Also, the splitter seems to be a bit thinner for some reason when it doesn't work.
I can't give much more information than this sadly, there are no errors or warnings whatsoever. (I've tested this with the examples as well, same results).
Edit:
Some other thing I've noticed is that the ReflexElements do not get an inline style on them in the HTML when it's broken.
Hi,
first of all, thanks for the Re-Flex. It's really great.
I want to make the panes hide-able and for this reason I tried with a wrapper around Reflex component.
Idea is to have a wrapper around "ReflexElement", "ReflexSplitter" like:
Main component
<div className="demo-basic-splitter">
<ReflexContainer orientation="vertical">
<Search/>
<Splitter/>
<Details/>
</ReflexContainer>
</div>
Search component
<ReflexElement className="left-pane">
<div className="pane-content">
Search component
</div>
</ReflexElement>
Spliiter component
return (
<ReflexSplitter/>
)
and then to have a onClick event which will show or hide a specific component (e.g. Search, Splitter, Details). Because you are using flex, layout should work. Maybe, also ReflexSplitter can be inside the wrapper component (not in a separate wrapper component).
Problem is, when I use the wrappers Splitter doesn't work.
Is there a way to achieve this? From your point of view, can this be done?
Thanks!
Giving the .reflex-container
a min-height: 0
resolves https://bugs.chromium.org/p/chromium/issues/detail?id=927066 for me.
I really need to use a ref on ReflexElement, but it seems it doesn't work properly.
this might have something to do with it.
Hey there @leefsmp,
I think it would be nice if the had a disabled prop that could prevent the splitter from being interacted with.
Thanks!
I really needed something like this to work within the Atom editor which uses etch. I hope you don't mind, but I have used your flex calculation code from the 'container' and created a etch
compatible components.
However, there is no license attached to your project. I can provide a link to your project and give you credit, but I'm a bit dubious about publishing copied code. Regard this as a formal request for permission and a suggestion to add a license file.
No typescript typings for the library. This means to import the library one must use:
const {ReflexContainer, ReflexSplitter, ReflexElement} = require('react-reflex');
Instead of
import {
ReflexContainer,
ReflexSplitter,
ReflexElement
} from 'react-reflex';
The latter import gives the typescript error:
ERROR in [at-loader] ./src/js/application.tsx:9:8
TS7016: Could not find a declaration file for module 'react-reflex'.
No typings currently exist for the library.
Using React 15.5.0 and Electron 1.6.2 on Mac OSX 10.12.4, typescript 2.2.2.
Using "flex=0.2" as a property on ReflexElement generates the warning:
Warning: a
div
tag (owner:e
) was passed a numeric string value for CSS propertyFlexElement
(value:0.2
) which will be treated as a unitless number in a future version of React.
Using React 15.5.0 and Electron 1.6.2 on Mac OSX 10.12.4.
Nice library but it seems that its not working with the official 'react-create-app' repo
Using the minified bundle as entry point of the package results in a bunch of duplication in the bundle of my application. It would be better to transpile the code with babel and use that as the package main
. You can still keep the minified ofcourse if people want to use it directly.
For example: https://github.com/souporserious/react-measure/blob/28e1a3647a6a5d51d55b4592979b020884801ece/package.json#L11
Hello there, thanks for the great lib !
I've just started using React but I'm getting the following error:
/Users/leonardo2204/Moobie/backoffice-web/node_modules/react-reflex/dist/commonjs/ReflexSplitter.js:270
document: document };
^
ReferenceError: document is not defined
at Object.<anonymous> (/Users/leonardo2204/Moobie/backoffice-web/node_modules/react-reflex/dist/commonjs/ReflexSplitter.js:270:13)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/leonardo2204/Moobie/backoffice-web/node_modules/react-reflex/dist/commonjs/ReflexContainer.js:43:23)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
I guess this may be related to server side rendering, but I'm not sure how to achieve that.
Thanks
import React from 'react';
import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
class View extends React.Component {
componentDidMount() {
console.log('View componentDidMount');
}
render() {
return <div>{this.props.children}</div>;
}
}
class Button extends React.Component {
componentDidMount() {
console.log('Button componentDidMount');
}
render() {
return <div>{this.props.children}</div>;
}
}
export default class Examining extends React.Component {
componentDidMount() {
console.log('examining componentDidMount');
}
render() {
return (
<div>
<ReflexContainer orientation="vertical">
<ReflexElement>
<View>
<Btn />
</View>
</ReflexElement>
<ReflexSplitter />
</ReflexContainer>
</div>
);
}
}
Result
// examining componentDidMount
// Button componentDidMount
// View componentDidMount
expectation
// Button componentDidMount
// View componentDidMount
// examining componentDidMount
It's not really working on touch screens (my notebook has both, a mouse and a touch screen). Sometimes I'm able to grab the handle, and move it a little. But most often not.
For a mouse user, awesome library! Thanks.
Not sure why it's there, but you probably want to remove this line.
It would be nice if you could resize an element with a 'handle' in addition to a splitter.
In the example above, the handle would resize the element it is within in the same way as the splitter before it.
A suggestion of how it could be written:
<ReflexContainer>
<ReflexElement>
…
</ReflexElement>
<ReflexSplitter />
<ReflexElement>
<ReflexHandle>
<div className="handle" />
</ReflexHandle>
…
</ReflexElement>
</ReflexContainer>
I don't believe this is possible currently, but please correct me if I am wrong!
PS, thanks for the great component library
I think you need to set displayName
on your components for this to work.
http://babeljs.io/docs/plugins/transform-react-display-name/
https://github.com/facebook/react-devtools
Hi !
And thank you for this great components!
I have notice the following warning into Chrome dev tools console when resizing the ReflexSplitter component:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
onMouseMove @ ReflexSplitter.js:116
The same warning also occurs @ ReflexSplitter.js:156
Maybe these lines can be simply removed?
Keeping react and react-dom in dependencies section of package.json throws following error:
Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render
method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
at invariant (eval at (main.js:720), :44:15)
at Object.addComponentAsRefTo (eval at (main.js:1068), :68:36)
at attachRef (eval at (main.js:1062), :23:16)
at Object.ReactRef.attachRefs (eval at (main.js:1062), :42:5)
at ReactCompositeComponentWrapper.attachRefs (eval at (main.js:1056), :23:12)
at CallbackQueue.notifyAll (eval at (main.js:1044), :76:22)
at ReactReconcileTransaction.close (eval at (main.js:1572), :80:26)
at ReactReconcileTransaction.closeAll (eval at (main.js:1110), :206:25)
at ReactReconcileTransaction.perform (eval at (main.js:1110), :153:16)
at ReactUpdatesFlushTransaction.perform (eval at (main.js:1110), :140:20)
Please move the packages to peerDependencies. Reference: http://stackoverflow.com/a/33448574
npm --version => 3.3.12
nodejs --version => v4.2.6
node --version => v5.1.1
I've got a maybe specific use case where I am trying to render sometimes inactive elements that cannot be unmounted due to some connected dom nodes. If I do so I am going to loose state information (handled outside of react).
Therefore, I would like to know how it would be possible to avoid using hidden elements (or with a special flag) in the calculation of the element width. Is this possible at the moment? If not, could maybe give me some pointers how I could achieve this?
Thanks in advance.
Please accept children
on ReflexSplitter
. In my case; I wan't to add an icon when the user hovers the splitter. When accepting children, this can easily be done with:
<ReflexSplitter>
<MyIcon className="icon" />
</ReflexSplitter>
.reflex-splitter .icon {
opacity: 0;
}
.reflex-splitter:hover .icon {
opacity: 1;
}
Hey there @leefsmp ,
The demo's you provide are great for first time use, but I think a list of the options for each element would be a great addition to the readme.
Thanks!
I assume ReflexSplitter
's wrapped in a conditional do not get all props.
When showPreview === true
onMousedown to resize I get an error of this.props.events is undefined
for the ReflexSplitter
that is wrapped in the conditional. The other ReflexSplitter
works correctly.
<Fragment>
<Helmet title={`${blockNameTitle}`} />
<ReflexContainer orientation='vertical'>
<ReflexElement flex={1}>
<SidePanel
className='full-height'
description={description}
guideUrl={guideUrl}
title={blockNameTitle}
/>
</ReflexElement>
<ReflexSplitter />
<ReflexElement flex={1}>
<Editor
challengeType={challengeType}
className='full-height'
/>
</ReflexElement>
{
showPreview && (
<Fragment>
<ReflexSplitter />
<ReflexElement flex={0.3} maxSize={325}>
<Preview className='full-height' />
</ReflexElement>
</Fragment>
)
}
</ReflexContainer>
</Fragment>
OK, this should not be done, but by mistake I used the wrong var and passed an unknow value to orientation
. I spent a lot of time trying to figure out the issue.
Maybe this can be prevented with just a prop-type warning?
Hi there, thanks for this cool lib!
I noticed in ReflexContainer
you use element type comparison to ReflexSplitter
so that the initial flex calculation is correct when there are 1 or more splitter.
This is not working correctly when I use react-hot-loader in development, because the elements are proxified (the rendered ReflexSplitter
element type is now ProxyComponent
). See gaearon/react-hot-loader#304.
One common solution is to use comparison like this:
isSplitterElement (element) {
return element.type === (<ReflexSplitter/>).type
}
I don't know what the implications though by using it like that, but currently that's the only reasonable way in dealing with react-hot-loader. Hope you can fix this!
I've noticed this behavior appearing on FF 60 (Ubuntu 18.04) and FF 61 on (Mac OS Sierra).
Using Chromium on either system (latest stable) this behavior isn't visible.
The following code does not pass the "id" to the underlying div:
<ReflexSplitter id="left-split" propagate />
I have a "left-split" and "right-split" unique id, but they are not passed to the underlying element.
Hi,
I try to change the style of the splitter by doing it bigger(easy to move) and change the color of it.
Anyone know which property that I can use and also if you have any example.
Thanks
Hey there @leefsmp
First off thanks for the awesome library. It is definitely the best one I've found :)
I wanted to ask for help to achieve the following sort of functionality using Reflex:
As you can see, the little sidebar "snaps" closed. I have already forked your repo, I just wanted to see if you had any input as to a good way to implement this. Thanks in advance!
Take '3 - Re-Flex example' as an example. If the screen width is 3000px, the default width of middle pane would be 1000px, which exceeds the maxSize. That would cause splitter jump when mouse move.
In v1.1.14 my ReflexContainer gets this css:
.reflex-layout.reflex-container.vertical {
flex-direction: row;
}
.reflex-layout.reflex-container {
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
height: 100%;
width: 100%;
}
When I update to v2 this (and probably more on child divs) is missing. So all divs are collapsed.
I'm seeing the following error thrown:
Uncaught TypeError: Cannot read property 'ref' of undefined
at ReflexContainer.getSize (eval at ./node_modules/react-reflex/dist/es/ReflexContainer.js (bundle.js:13336), <anonymous>:198:34)
at ReflexContainer.dispatchShrink (eval at ./node_modules/react-reflex/dist/es/ReflexContainer.js (bundle.js:13336), <anonymous>:629:23)
at ReflexContainer.dispatchShrink (eval at ./node_modules/react-reflex/dist/es/ReflexContainer.js (bundle.js:13336), <anonymous>:643:116)
at ReflexContainer.dispatchOffset (eval at ./node_modules/react-reflex/dist/es/ReflexContainer.js (bundle.js:13336), <anonymous>:658:225)
at ReflexContainer.onSplitterResize (eval at ./node_modules/react-reflex/dist/es/ReflexContainer.js (bundle.js:13336), <anonymous>:298:30)
at ReflexEvents.emit (eval at ./node_modules/react-reflex/dist/es/ReflexEvents.js (bundle.js:13352), <anonymous>:93:34)
at ReflexSplitter.onMouseMove (eval at ./node_modules/react-reflex/dist/es/ReflexSplitter.js (bundle.js:13360), <anonymous>:121:27)
It is possible to recreate this error (though minified) in your third example ...
<ReflexElement />
to their maximums, so that just a sliver of the left and right boxes are visible.<ReflexSplitter />
and attempt to move it right (to shrink the middle box).See attached screenshot -
P.S. Great plugin! I found this when I was running into the limitations of react-split-pane.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.