UNPKG

react-performant-collapsible

Version:
3 lines (2 loc) 3.14 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).reactPerformantCollapsible={},e.react)}(this,function(e,t){function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}}),t.default=e,t}var n=/*#__PURE__*/o(t);function r(e,t){return r=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},r(e,t)}var a=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 i(e,t,o){return"react-performant-collapsible-container"+(e?" react-performant-collapsible-container-collapsed"+(t?"-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);}"),e.Collapsible=/*#__PURE__*/function(e){var t,o;function a(t){var o;return(o=e.call(this,t)||this).state=void 0,o.handleAnimationFinish=function(){o.props.collapsible&&o.setState({containerClassName:i(!0,o.horizontalWithDefualtValue,o.props.className)})},o.state={containerClassName:i(t.collapsible,o.horizontalWithDefualtValue,t.className)},o}o=e,(t=a).prototype=Object.create(o.prototype),t.prototype.constructor=t,r(t,o);var l,s=a.prototype;return s.componentDidUpdate=function(e){e.collapsible&&!this.props.collapsible&&this.setState({containerClassName:i(!1,this.horizontalWithDefualtValue,this.props.className)})},s.render=function(){return n.createElement("div",{className:this.state.containerClassName},this.props.children,n.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 o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}(a.prototype,l),a}(t.Component)}); //# sourceMappingURL=index.umd.js.map