react-performant-collapsible/dist/index.js

A performant React.js Collapsible component

var e=require("react");function t(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,t}var r=/*#__PURE__*/t(e);function n(e,t){return n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(e,t)}var o=function(){var e=document.createElement("style");if(document.head.appendChild(e),e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}();function a(e,t,r){return"react-performant-collapsible-container"+(e?" react-performant-collapsible-container-collapsed"+(t?"-horizontal":""):"")+(null!=r?" "+r:"")}o.insertRule(".react-performant-collapsible-container{position:relative;content-visibility:auto;overflow:hidden;}"),o.insertRule(".react-performant-collapsible-container-collapsed{height: 0;}"),o.insertRule(".react-performant-collapsible-container-collapsed-horizontal{width: 0;}"),o.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;}"),o.insertRule(".react-performant-collapsible-mask-expand{transform:scaleY(0);}"),o.insertRule(".react-performant-collapsible-mask-expand-horizontal{transform:scaleX(0);}"),exports.Collapsible=/*#__PURE__*/function(e){var t,o;function i(t){var r;return(r=e.call(this,t)||this).state=void 0,r.handleAnimationFinish=function(){r.props.collapsible&&r.setState({containerClassName:a(!0,r.horizontalWithDefualtValue,r.props.className)})},r.state={containerClassName:a(t.collapsible,r.horizontalWithDefualtValue,t.className)},r}o=e,(t=i).prototype=Object.create(o.prototype),t.prototype.constructor=t,n(t,o);var l,s=i.prototype;return s.componentDidUpdate=function(e){e.collapsible&&!this.props.collapsible&&this.setState({containerClassName:a(!1,this.horizontalWithDefualtValue,this.props.className)})},s.render=function(){return r.createElement("div",{className:this.state.containerClassName},this.props.children,r.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 e;return null!=(e=this.props.horizontal)&&e}}])&&function(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}(i.prototype,l),i}(e.Component);
//# sourceMappingURL=index.js.map