react-slide-toggle/dist/ReactSlideToggle.esm.es2015.js

React component version of jQuery.slideToggle

import t from"react";function e(t,e,s){return e in t?Object.defineProperty(t,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[e]=s,t}const s="undefined"!=typeof window?window:global,a=s.requestAnimationFrame?s.requestAnimationFrame.bind(s):t=>s.setTimeout(t,16),i=s.cancelAnimationFrame?s.cancelAnimationFrame.bind(s):s.clearInterval.bind(s),o=Object.freeze({EXPANDED:"EXPANDED",COLLAPSED:"COLLAPSED",EXPANDING:"EXPANDING",COLLAPSING:"COLLAPSING"}),l=t=>t<.5?4*t*t*t:.5*Math.pow(2*t-2,3)+1,h=t=>t===o.EXPANDING||t===o.COLLAPSING,r=({value:t,max:e=1,min:s=0})=>t>e?e:t<s?s:t,p=()=>Date.now(),n=t=>Math.max(0,parseInt(+t,10)||0),g=({next:t,prev:e})=>{const s=Math.abs(t-e);let a=t;return s>.15&&(t>e?a-=.75*s:a+=.75*s),a};class d extends t.Component{constructor(...t){super(...t),e(this,"_state_",{collapsibleElement:null,toggleState:this.props.collapsed?o.COLLAPSED:o.EXPANDED}),e(this,"GET_HEIGHT",this.props.offsetHeight?"offsetHeight":"scrollHeight"),e(this,"state",{toggleState:this._state_.toggleState,hasReversed:!1,range:this.props.collapsed?0:1,progress:this.props.collapsed?0:1}),e(this,"getCollapsible",()=>this._state_.collapsibleElement),e(this,"updateCollapsible",(t,e)=>{this.getCollapsible()&&(this._state_.collapsibleElement.style[t]=e)}),e(this,"setCollapsibleElement",t=>{this._state_.collapsibleElement=t,this._state_.collapsibleElement&&!this.props.noOverflowHidden&&(this._state_.collapsibleElement.style.overflow="hidden"),this._state_.toggleState===o.COLLAPSED&&this.setCollapsedState({initialState:!0})}),e(this,"toggle",()=>{if(this.props.irreversible&&h(this._state_.toggleState))return;const t=()=>{this.props.onCollapsing&&this.props.onCollapsing({range:this.state.range,progress:this.state.progress,hasReversed:this.state.hasReversed}),this.collapse()},e=()=>{this.props.onExpanding&&this.props.onExpanding({range:this.state.range,progress:this.state.progress,hasReversed:this.state.hasReversed}),this.expand()},s=({toggleState:t,display:e,hasReversed:s})=>{this._state_.toggleState=t,this._state_.hasReversed=!!s,void 0===e||this.props.noDisplayStyle||this.updateCollapsible("display",e);const a=p();if(s){const{startTime:t}=this._state_,e=n(this.props.duration),s=Math.min(e,a-t),i=Math.max(0,e-s);this._state_.startTime=a-i}else{const e=this.getCollapsible();e&&e.style.height&&this.updateCollapsible("height",null),this._state_.boxHeight=e?e[this.GET_HEIGHT]:0,this._state_.startTime=a,this._state_.startDirection=t}this.setState({toggleState:this._state_.toggleState,hasReversed:this._state_.hasReversed})};switch(this._state_.toggleState){case o.EXPANDED:s({toggleState:o.COLLAPSING}),t();break;case o.COLLAPSED:s({toggleState:o.EXPANDING,display:""}),e();break;case o.EXPANDING:s({toggleState:o.COLLAPSING,hasReversed:!0}),t();break;case o.COLLAPSING:s({toggleState:o.EXPANDING,display:"",hasReversed:!0}),e()}}),e(this,"setExpandedState",()=>{this._state_.progress=1,this._state_.toggleState=o.EXPANDED,this.updateCollapsible("height",null),this.setState({toggleState:o.EXPANDED,range:1,progress:this._state_.progress}),this.props.onExpanded&&this.props.onExpanded({hasReversed:this.state.hasReversed})}),e(this,"expand",()=>{if(this._state_.toggleState!==o.EXPANDING)return;const t=n(this.props.duration);if(t<=0)return void this.setExpandedState();const{startTime:e}=this._state_,s=Math.min(t,p()-e);if(s>=t)this.setExpandedState();else{const{startDirection:e,toggleState:a,boxHeight:i}=this._state_,o=r({value:s/t});let l;l=this.props.whenReversedUseBackwardEase&&e!==a?1-this.props.easeCollapse(1-o):this.props.easeExpand(o),this.props.bestPerformance||this.setState({range:o,progress:l}),this.props.interpolateOnReverse&&this._state_.hasReversed&&(l=g({next:l,prev:this._state_.progress}));const h=Math.round(i*l);this._state_.progress=l,this.updateCollapsible("height",`${h}px`),this.nextTick(this.expand)}}),e(this,"setCollapsedState",({initialState:t}={})=>{this._state_.progress=0,this._state_.toggleState=o.COLLAPSED,this.props.noDisplayStyle?this.updateCollapsible("height","0px"):(this.updateCollapsible("display","none"),this.updateCollapsible("height",null)),this.setState({toggleState:o.COLLAPSED,range:0,progress:this._state_.progress}),!t&&this.props.onCollapsed&&this.props.onCollapsed({hasReversed:this.state.hasReversed})}),e(this,"collapse",()=>{if(this._state_.toggleState!==o.COLLAPSING)return;const t=n(this.props.duration);if(t<=0)return void this.setCollapsedState();const{startTime:e}=this._state_,s=Math.min(t,p()-e);if(s>=t)this.setCollapsedState();else{const{startDirection:e,boxHeight:a,toggleState:i}=this._state_,o=1-r({value:s/t}),{whenReversedUseBackwardEase:l,easeExpand:h,easeCollapse:p}=this.props;let n;n=l&&e!==i?h(o):1-p(1-o),this.props.bestPerformance||this.setState({range:o,progress:n}),this.props.interpolateOnReverse&&this._state_.hasReversed&&(n=g({next:n,prev:this._state_.progress}));const d=Math.round(a*n);this._state_.progress=n,this._state_.timeout=this.nextTick(this.collapse),this.updateCollapsible("height",`${d}px`)}}),e(this,"nextTick",t=>{this._state_.timeout=a(t)})}render(){const t={onToggle:this.toggle,toggle:this.toggle,setCollapsibleElement:this.setCollapsibleElement,toggleState:this.state.toggleState,hasReversed:this.state.hasReversed,isMoving:h(this.state.toggleState),range:this.state.range,progress:this.state.progress};return"function"==typeof this.props.children?this.props.children(t):this.props.render?this.props.render(t):this.props.children}componentDidMount(){this.props.onMount&&this.props.onMount({toggleState:this.state.toggleState,toggle:this.toggle})}componentDidUpdate(t,e){this.props.collapseEvent&&this.props.collapseEvent>t.collapseEvent&&(this._state_.toggleState!==o.EXPANDED&&this._state_.toggleState!==o.EXPANDING||this.toggle()),this.props.expandEvent&&this.props.expandEvent>t.expandEvent&&(this._state_.toggleState!==o.COLLAPSED&&this._state_.toggleState!==o.COLLAPSING||this.toggle()),this.props.toggleEvent&&this.props.toggleEvent>t.toggleEvent&&this.toggle()}componentWillUnmount(){this.props.onUnmount&&this.props.onUnmount({toggleState:this.state.toggleState}),this._state_.timeout&&i(this._state_.timeout)}}e(d,"defaultProps",{duration:300,easeCollapse:l,easeExpand:l});export default d;
//# sourceMappingURL=ReactSlideToggle.esm.es2015.js.map