react-performant-collapsible/dist/index.module.js

A performant React.js Collapsible component

import*as t from"react";import{Component as e}from"react";function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}var a=function(){var t=document.createElement("style");if(document.head.appendChild(t),t.sheet)return t.sheet;for(var e=0;e<document.styleSheets.length;e++)if(document.styleSheets[e].ownerNode===t)return document.styleSheets[e]}();function r(t,e,o){return"react-performant-collapsible-container"+(t?" react-performant-collapsible-container-collapsed"+(e?"-horizontal":""):"")+(null!=o?" "+o:"")}a.insertRule(".react-performant-collapsible-container{position:relative;content-visibility:auto;overflow:hidden;}"),a.insertRule(".react-performant-collapsible-container-collapsed{height: 0;}"),a.insertRule(".react-performant-collapsible-container-collapsed-horizontal{width: 0;}"),a.insertRule(".react-performant-collapsible-mask{background-color:#fff;position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:bottom right;transition:transform 600ms;overflow:hidden;}"),a.insertRule(".react-performant-collapsible-mask-expand{transform:scaleY(0);}"),a.insertRule(".react-performant-collapsible-mask-expand-horizontal{transform:scaleX(0);}");var n=/*#__PURE__*/function(e){var a,n;function i(t){var o;return(o=e.call(this,t)||this).state=void 0,o.handleAnimationFinish=function(){o.props.collapsible&&o.setState({containerClassName:r(!0,o.horizontalWithDefualtValue,o.props.className)})},o.state={containerClassName:r(t.collapsible,o.horizontalWithDefualtValue,t.className)},o}n=e,(a=i).prototype=Object.create(n.prototype),a.prototype.constructor=a,o(a,n);var l,s=i.prototype;return s.componentDidUpdate=function(t){t.collapsible&&!this.props.collapsible&&this.setState({containerClassName:r(!1,this.horizontalWithDefualtValue,this.props.className)})},s.render=function(){return t.createElement("div",{className:this.state.containerClassName},this.props.children,t.createElement("div",{className:"react-performant-collapsible-mask"+(this.props.collapsible?"":" react-performant-collapsible-mask-expand"+(this.horizontalWithDefualtValue?"-horizontal":"")),style:{backgroundColor:this.props.maskColor,transitionDuration:this.props.animationDuration,transitionTimingFunction:this.props.animationTimingFunction},onTransitionEnd:this.handleAnimationFinish}))},(l=[{key:"horizontalWithDefualtValue",get:function(){var t;return null!=(t=this.props.horizontal)&&t}}])&&function(t,e){for(var o=0;o<e.length;o++){var a=e[o];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}(i.prototype,l),i}(e);export{n as Collapsible};
//# sourceMappingURL=index.module.js.map