UNPKG

react-slide-toggle

Version:

React component version of jQuery.slideToggle

3 lines (2 loc) 7.74 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self).ReactSlideToggle=t(e.React)}(this,(function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){for(var s=0;s<t.length;s++){var a=t[s];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function a(e,t,s){return t in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}function o(e){return(o=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function n(e,t){return(n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?r(e):t}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i="undefined"!=typeof window?window:global,p=i.requestAnimationFrame?i.requestAnimationFrame.bind(i):function(e){return i.setTimeout(e,16)},g=i.cancelAnimationFrame?i.cancelAnimationFrame.bind(i):i.clearInterval.bind(i),u=Object.freeze({EXPANDED:"EXPANDED",COLLAPSED:"COLLAPSED",EXPANDING:"EXPANDING",COLLAPSING:"COLLAPSING"}),c=function(e){return e<.5?4*e*e*e:.5*Math.pow(2*e-2,3)+1},d=function(e){return e===u.EXPANDING||e===u.COLLAPSING},h=function(e){var t=e.value,s=e.max,a=void 0===s?1:s,o=e.min,n=void 0===o?0:o;return t>a?a:t<n?n:t},_=function(){return Date.now()},f=function(e){return Math.max(0,parseInt(+e,10)||0)},v=function(e){var t=e.next,s=e.prev,a=Math.abs(t-s),o=t;return a>.15&&(t>s?o-=.75*a:o+=.75*a),o},E=function(e){function i(){var e,s;t(this,i);for(var n=arguments.length,g=new Array(n),c=0;c<n;c++)g[c]=arguments[c];return a(r(s=l(this,(e=o(i)).call.apply(e,[this].concat(g)))),"_state_",{collapsibleElement:null,toggleState:s.props.collapsed?u.COLLAPSED:u.EXPANDED}),a(r(s),"GET_HEIGHT",s.props.offsetHeight?"offsetHeight":"scrollHeight"),a(r(s),"state",{toggleState:s._state_.toggleState,hasReversed:!1,range:s.props.collapsed?0:1,progress:s.props.collapsed?0:1}),a(r(s),"getCollapsible",(function(){return s._state_.collapsibleElement})),a(r(s),"updateCollapsible",(function(e,t){s.getCollapsible()&&(s._state_.collapsibleElement.style[e]=t)})),a(r(s),"setCollapsibleElement",(function(e){s._state_.collapsibleElement=e,s._state_.collapsibleElement&&!s.props.noOverflowHidden&&(s._state_.collapsibleElement.style.overflow="hidden"),s._state_.toggleState===u.COLLAPSED&&s.setCollapsedState({initialState:!0})})),a(r(s),"toggle",(function(){if(!s.props.irreversible||!d(s._state_.toggleState)){var e=function(){s.props.onCollapsing&&s.props.onCollapsing({range:s.state.range,progress:s.state.progress,hasReversed:s.state.hasReversed}),s.collapse()},t=function(){s.props.onExpanding&&s.props.onExpanding({range:s.state.range,progress:s.state.progress,hasReversed:s.state.hasReversed}),s.expand()},a=function(e){var t=e.toggleState,a=e.display,o=e.hasReversed;s._state_.toggleState=t,s._state_.hasReversed=!!o,void 0===a||s.props.noDisplayStyle||s.updateCollapsible("display",a);var n=_();if(o){var r=s._state_.startTime,l=f(s.props.duration),i=Math.min(l,n-r),p=Math.max(0,l-i);s._state_.startTime=n-p}else{var g=s.getCollapsible();g&&g.style.height&&s.updateCollapsible("height",null),s._state_.boxHeight=g?g[s.GET_HEIGHT]:0,s._state_.startTime=n,s._state_.startDirection=t}s.setState({toggleState:s._state_.toggleState,hasReversed:s._state_.hasReversed})};switch(s._state_.toggleState){case u.EXPANDED:a({toggleState:u.COLLAPSING}),e();break;case u.COLLAPSED:a({toggleState:u.EXPANDING,display:""}),t();break;case u.EXPANDING:a({toggleState:u.COLLAPSING,hasReversed:!0}),e();break;case u.COLLAPSING:a({toggleState:u.EXPANDING,display:"",hasReversed:!0}),t()}}})),a(r(s),"setExpandedState",(function(){s._state_.progress=1,s._state_.toggleState=u.EXPANDED,s.updateCollapsible("height",null),s.setState({toggleState:u.EXPANDED,range:1,progress:s._state_.progress}),s.props.onExpanded&&s.props.onExpanded({hasReversed:s.state.hasReversed})})),a(r(s),"expand",(function(){if(s._state_.toggleState===u.EXPANDING){var e=f(s.props.duration);if(e<=0)s.setExpandedState();else{var t=s._state_.startTime,a=Math.min(e,_()-t);if(a>=e)s.setExpandedState();else{var o,n=s._state_,r=n.startDirection,l=n.toggleState,i=n.boxHeight,p=h({value:a/e});o=s.props.whenReversedUseBackwardEase&&r!==l?1-s.props.easeCollapse(1-p):s.props.easeExpand(p),s.props.bestPerformance||s.setState({range:p,progress:o}),s.props.interpolateOnReverse&&s._state_.hasReversed&&(o=v({next:o,prev:s._state_.progress}));var g=Math.round(i*o);s._state_.progress=o,s.updateCollapsible("height","".concat(g,"px")),s.nextTick(s.expand)}}}})),a(r(s),"setCollapsedState",(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.initialState;s._state_.progress=0,s._state_.toggleState=u.COLLAPSED,s.props.noDisplayStyle?s.updateCollapsible("height","0px"):(s.updateCollapsible("display","none"),s.updateCollapsible("height",null)),s.setState({toggleState:u.COLLAPSED,range:0,progress:s._state_.progress}),!t&&s.props.onCollapsed&&s.props.onCollapsed({hasReversed:s.state.hasReversed})})),a(r(s),"collapse",(function(){if(s._state_.toggleState===u.COLLAPSING){var e=f(s.props.duration);if(e<=0)s.setCollapsedState();else{var t=s._state_.startTime,a=Math.min(e,_()-t);if(a>=e)s.setCollapsedState();else{var o,n=s._state_,r=n.startDirection,l=n.boxHeight,i=n.toggleState,p=1-h({value:a/e}),g=s.props,c=g.whenReversedUseBackwardEase,d=g.easeExpand,E=g.easeCollapse;o=c&&r!==i?d(p):1-E(1-p),s.props.bestPerformance||s.setState({range:p,progress:o}),s.props.interpolateOnReverse&&s._state_.hasReversed&&(o=v({next:o,prev:s._state_.progress}));var S=Math.round(l*o);s._state_.progress=o,s._state_.timeout=s.nextTick(s.collapse),s.updateCollapsible("height","".concat(S,"px"))}}}})),a(r(s),"nextTick",(function(e){s._state_.timeout=p(e)})),s}var c,E,S;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&n(e,t)}(i,e),c=i,(E=[{key:"render",value:function(){var e={onToggle:this.toggle,toggle:this.toggle,setCollapsibleElement:this.setCollapsibleElement,toggleState:this.state.toggleState,hasReversed:this.state.hasReversed,isMoving:d(this.state.toggleState),range:this.state.range,progress:this.state.progress};return"function"==typeof this.props.children?this.props.children(e):this.props.render?this.props.render(e):this.props.children}},{key:"componentDidMount",value:function(){this.props.onMount&&this.props.onMount({toggleState:this.state.toggleState,toggle:this.toggle})}},{key:"componentDidUpdate",value:function(e,t){this.props.collapseEvent&&this.props.collapseEvent>e.collapseEvent&&(this._state_.toggleState!==u.EXPANDED&&this._state_.toggleState!==u.EXPANDING||this.toggle()),this.props.expandEvent&&this.props.expandEvent>e.expandEvent&&(this._state_.toggleState!==u.COLLAPSED&&this._state_.toggleState!==u.COLLAPSING||this.toggle()),this.props.toggleEvent&&this.props.toggleEvent>e.toggleEvent&&this.toggle()}},{key:"componentWillUnmount",value:function(){this.props.onUnmount&&this.props.onUnmount({toggleState:this.state.toggleState}),this._state_.timeout&&g(this._state_.timeout)}}])&&s(c.prototype,E),S&&s(c,S),i}(e.Component);return a(E,"defaultProps",{duration:300,easeCollapse:c,easeExpand:c}),E})); //# sourceMappingURL=ReactSlideToggle.umd.js.map