noeldelgado / react-gemini-scrollbar Goto Github PK

I have a div which I add to its children dynamically and as the result its height changes. Once the content's height is changed, the vertical scrollbar will be able to move too far to the bottom, so much that the bar will be cut off by the frame as if it has gone underneath it. But if I resize the window, the recalculation done makes everything alright again.

Is there some way I can fix this problem from my end?

I'm getting two react deprecation warning:

React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead

In the latest version of React these warnings were added can you upgrade to conform to the new standards?

GeminiScrollbar.prototype.update = function update() {
this._viewElement.style.width = ((this.element.offsetWidth + SCROLLBAR_WIDTH).toString() + 'px');
this._viewElement.style.height = ((this.element.offsetHeight + SCROLLBAR_WIDTH).toString() + 'px');

Error this. Add SCROLLBAR_WIDTH 17px every state change

If I zoom the page out (make things smaller) any smaller than 90%, the original native scrollbar will show. I think if you hide them deeper to support the worst case scenario of 67% makes sense:

When using the createElements I get the gemini scrollbar with no thumb as it doesn't have any width and height. I also get the native scrollbar

Hi,

I'm trying to use react-gemini-scrollbar in an isomorphic react app, and I have trouble making it work. How do I apply it to the whole page ?

Thanks !

React 15.2 added some (rather obtuse) warning messages about unknown props:

Warning: Unknown props `autoshow`, `forceGemini` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by GeminiScrollbar)

Hi.

When the parent of gm-scrollbar-container is a flexbox, gm-scrollbar-container need to be positioned absolutely for the height: 100% to have an effect.

see: http://stackoverflow.com/questions/15381172/css-flexbox-child-height-100

There is some easy workarounds just saying that it would be cool to be able to include it in :)

I did

npm install react-gemini-scrollbar --save

then found no node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css

In fact, there is no node_modules/react-gemini-scrollbar/node_modules folder and no css files anywhere.

does the scroll bar have an onScroll event or an onScrollToBottom event? if it does what are the values passed?

Current version still depends on gemini-scrollbar 1.3.x. I believe there was a pretty key change in 1.4 relating to how resizes are triggered, so it would be good to have this.

Not yet tested if it works with react 15.0.0-rc.2

When using the library and the tab is visible, the height CSS rule increases at about 1000 pixels per second, as long as the page is in view. Switching tabs stops this behavior, and the behavior resumes when switching back. This happens for all instance on the page. I've included a screenshot of two instances updating, and the relevant code attached to the event that's doing it.

Update: This appears to be related to using nested MUI grids that each have their own instance of Gemini on them, so this bug may be entirely from this specific use.

Seems work fine with React 0.13.x

I am getting a issue when trying to use Gemini. It's required and such. Any thoughts?

Here is my render....

render: function() {

    var namePrompt = null;

    if(!this.state.hasName) {
      namePrompt = (
          <div className="board-name-prompt-shadow">
            <div isOpen={true} onRequestClose={this.saveName} className="board-name-prompt" >
              <form onSubmit={this.saveName}>
                <h2>This Board Needs A Name</h2>
                <input ref="name" type="text" placeholder="name me!" />
                <button type="submit">Get Started!</button>
              </form>
            </div>
          </div>  
        );
    }

    var settingsCog = null;
    if(this.state.isSuperadmin) {
      settingsCog = <i onClick={this.toggleSettings} className="fa fa-cog board-settings-cog"></i>;
    }
    return (
      <div>
        <GeminiScrollbar>
          <div ref="moduleContainer" className="react-super-container">
            <div key="title" className="react-title"></div>
            <div key="mentions" className="react-mention-view"></div>
            {this.renderModules()}
            {this.renderNewModule()}
            <div key="spacer" className="spacer">X</div>
          </div>
       </GeminiScrollbar>
        {namePrompt}
        {settingsCog}
        {this.renderSettings()}
      </div>
    );
  }
});

Console error
Uncaught Error: Invariant Violation: GeminiScrollbar.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

How to see demo?