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

A performant React.js Collapsible component

import*as t from"react";import{Component as e}from"react";const a=function(){const t=document.createElement("style");if(document.head.appendChild(t),t.sheet)return t.sheet;for(let e=0;e<document.styleSheets.length;e++)if(document.styleSheets[e].ownerNode===t)return document.styleSheets[e]}();function o(t,e,a){return`react-performant-collapsible-container${t?" react-performant-collapsible-container-collapsed"+(e?"-horizontal":""):""}${null!=a?` ${a}`:""}`}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);}");class i extends e{get horizontalWithDefualtValue(){var t;return null!=(t=this.props.horizontal)&&t}constructor(t){super(t),this.state=void 0,this.handleAnimationFinish=()=>{this.props.collapsible&&this.setState({containerClassName:o(!0,this.horizontalWithDefualtValue,this.props.className)})},this.state={containerClassName:o(t.collapsible,this.horizontalWithDefualtValue,t.className)}}componentDidUpdate(t){t.collapsible&&!this.props.collapsible&&this.setState({containerClassName:o(!1,this.horizontalWithDefualtValue,this.props.className)})}render(){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}))}}export{i as Collapsible};
//# sourceMappingURL=index.modern.js.map