streakyc / react-smooth-collapse Goto Github PK

Hey man, I just wanted to say thanks! I've tested this a lot today and it's working absolutely beautifully! Job well done

It would be beneficial ti have a min-height prop so that one could create an effect of not entirely closed content with some fade going on.

I have a use case where max-width of the SmoothCollapse has to be updated dynamically from javascript. Currently I've been using additional div wrapper for children.

<SmoothCollapse expanded={isExpanded}>
    <div style={{ maxWidth: calculateMaxWidth() }}>
        ...

I'd like to be able to control style of the most outer element and drop the need of additional divs.

<SmoothCollapse expanded={isExpanded} style={{ maxWidth: calculateMaxWidth() }}>

Style prop can be merged with SmoothCollapse's internal styles without breaking anything.

Hey,

I just want to say: thank you for creating this project! I use it extensively and I love it, this is by far the best component of this type.

Quick question: would you say that the component is finished and do you plan to add/change something?

I don't know if it's a known issue or if I'm doing something wrong, but the animation is not that smooth on mobile.

Live site: https://www.luismorcilloluque.com/en/skills (check on mobile or reduce the browser window to show the collapse buttons).

It plays reasonable smooth on my MacMini, but not at all on my Xiaomi phone.

The code:

            <CollapseButton
              title={skills?.name[lang]}
              expanded={open}
              toggleFunc={toggleOpen}
            />

          <SmoothCollapse expanded={open} heightTransition=".5s ease-out">
            <div className="justify-center grid gap-2 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 mt-4">
              {skills?.data?.map((skill, index) => {
                return (
                  <div key={index} className="items-center ">
                    <SkillItem nombre={skill.name} puntuacion={skill.level} />
                  </div>
                );
              })}
            </div>
          </SmoothCollapse>

I have a case where I need to collapse from auto not to 0 but some initial height. Would it not be fun to be able pass collapsedHeight as props too?

I have noticed your library adds two additional divs to the structure - one animating height, another setting overflow: hidden. This is undesired, the effect should be applied directly to the child instead of creating any new parent elements.

It would be great to have display none optional, among other things, this would allow one so achieve #12

It would help styling of the inner component if classnames of the expander were set to collapsed or expanded accordingly.

I'll be happy to help with
#14 #13 #12 but I'll be gone for 2 weeks. It's fairly simple stuff. Should be couple hours work tops. I'll check this once I am back and see what I can do to help then.

I noticed it doesn't work for absolute components. Do you have a plan to support it?

Thanks for making the awesome library!

One thing I noticed is that elements inside the collapsible have lower z-indices than anything outside the collapsible. I'm using a dropdown component from semantic-react in a collapsible, and the dropdown gets cutoff by items outside the collapsible. Do you know of a way to force the elements within the collapsible to have a higher z-index?

The component doesn't allow passing additional CSS classes via the className property. This would be very useful! Allowing other props to just pass through (such as aria attributes) would be very nice as well.

Hi, I'm using your excellent library in react/redux/es6. I'm using it basically like in the example, but saving the collapsed state for each entity in the redux store. When it re-renders, it scrolls me to the top (on Chromium and Firefox) and it's a showstopper.

  renderFileList(fileList) {
    let { entity } = this.props;
    let collapsed = entity.file_list_collapse;
    return(
      <SmoothCollapse expanded={!collapsed}>
        {fileList.map( file =>
          <li key={file.path} className="file-list-item monospace">
            <span className="fa fa-hand-o-right small-info"/>
            {file.path}
          </li>)}
      </SmoothCollapse>
    );
  }

<a href="#" onClick={e => this.handleToggle(e, entity.isCollapsed)}>Toggle</a>
// (handleToggle fires off the redux action to change isCollapsed)

Can you tell me why this is happening? Am I doing something wrong? How to stop it from doing that? Thanks!

I think overflow:hidden is too restrictive when expansion is finished.

I have inner components like dropdowns (position: absolute) which are forced to be enclosed within the collapse body div.

Of course its needed during transition phase, but maybe it's reasonable to turn overflow:hidden off when expansion finished?

As the title states. I'd be happy to put in a PR given guidance on your preference on allowing just the wrapper's id to be set, or for any uncaptured props to be assigned to the main <div>.

As context for this request, we need to assign an id value to a DOM element (currently an otherwise unnecessary wrapping <div>) in order to use it as a target of ARIA properties, for accessibility.

Does it also expand dynamic generated content?
That is: children items of a parent items are retrieved from the backend and should then be shown in smooth expandable way.

I get an error message saying, impossible to get property 'collapse Height' of undefined or null reference

Is there any solution for that?

Hi StreakYC,

Thanks for this little nib, it saved my life today :) Would you consider adding opacity transition as well? It would be nice to collapse and fade at the same time.

Cheers.