UNPKG

react-slide-toggle

Version:

React component version of jQuery.slideToggle

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