sparebankenvest / react-css-collapse Goto Github PK

Hi! It seems like this problem appears again. Here is a small example https://codesandbox.io/s/naughty-lederberg-ngz5t

Thank you for this component. It work's quite well :).

However, I have an idea for improvement: Right now it is required to specify the className to set the desired CSS transition. While this might be fine for most use cases, because most people should have some kind of CSS-in-JS solution or a bundler in use anyway, it is also somewhat limiting. In my opinion it would be very handy, if the transition could also be set directly as Component property. This way users are not forced to use some library to inject the styles into the HTML or to do this manually.

Example:

<Collapse isOpen={isOpen} transition="height 250ms cubic-bezier(.4, 0, .2, 1)">
   <div>foo</div>
</Collapse>

Moreover it might be a good idea to offer a reasonable default transition (could be the default value of this potentially new component property). I was confused first, because the element collapsed without an animation. I think you should make it clearer in the README, that it is required to define a CSS transition first to make the animation work.

After upgrade to React 16.9.0, React prints console warning because react-css-collapse still uses componentWillReceiveProps life-cycle method. This method will be removed in React 17.0.0.
Would you please rewrite the code to make it work after React 17.0.0 release?
Thank you!

I'm not sure what is causing this issue specifically only that it happens sporadically.

stacktrace:

webpack:///~/react-css-collapse/lib/components/Collapse.js:99setContentStyleProperty

  }, {
    key: 'setContentStyleProperty',
    value: function setContentStyleProperty(property, value) {
      this.content.style[property] = value;
    }
  }, {
    key: 'setCollapsed',

webpack:///~/react-css-collapse/lib/components/Collapse.js:104setCollapsed

}, {
   key: 'setCollapsed',
   value: function setCollapsed() {
     this.setContentStyleProperty('height', '0px');
     this.setContentStyleProperty('overflow', 'hidden');
   }
 }, {

Chai, Sinon and other test related things should be replaced with Jest

First off thanks for this component – came in handy in a pinch.

I have children components that have dropdowns that might spill over beyond the <Collapse /> parent component's height. The problem I'm encountering only happens when the initial render has isOpen={true}.

The inline style overflow: hidden is applied and remains on the component until you switch the state from isOpen={false}. In fact, once you toggle it yet again to isOpen={true} after being in the isOpen={false} state it does remove the overflow: hidden style with overflow: visible, which is what my child components require after the animation is complete.

can you update react to use the latest version 16

The repo should have a contribute document documenting how one should contribute to this projects. PRs, tests, etc.

Would love a way to forceMeasure boolean prop to force measuring the content with each height.

Currently a change in the content's height would not update the height.

Collapse components initialized with isOpen=true are rendered as closed, and only changes once the props are updated by setState.