leefsmp / re-flex Goto Github PK

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')]
      },
     ...
    ]
  }

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>

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!

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 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>

Not sure why it's there, but you probably want to remove this line.

I tried to work with you package in IE 11 but it doesn't work. I see SCRIPT1002 error. Babel and any pollyfill didn't help.
Any ideas as to what might be causing this?
SCRIPT1002 -

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

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,
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!

Updating ReflexElement's size does not recalculate the flex of the element

As seen in this demo: https://codesandbox.io/s/zqn73pl40x

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

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

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.

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?

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?

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

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.

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

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.

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.

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.

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 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

Package can't be found by importing import { ReflexContainer } from 'react-reflex'

For now, I'm setting the absolute path
import { ReflexContainer } from '../../../node_modules/react-reflex/dist/commonjs';

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!

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'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 ...

1. Size your window to somewhere around 300px.
2. Expand the left and right edges of the middle <ReflexElement /> to their maximums, so that just a sliver of the left and right boxes are visible.
3. Now, grab the left <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.

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.

Giving the .reflex-container a min-height: 0 resolves https://bugs.chromium.org/p/chromium/issues/detail?id=927066 for me.

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!

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.

Similar to minSize & maxSize (width) attributes for a horizontal <ReflexElement>.

like:
<ReflexElement defaultSize={150} minSize={100} maxSize={300}>
content

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

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.

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!

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

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>

I'm not being able to resize panels, Am I doing something wrong? Maybe you can see a clue by the markup

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.

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?

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?

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!

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.

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;
}

It would be nice if you could resize an element with a 'handle' in addition to a splitter.

For example:

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

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 property FlexElement (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