react-reveal/responsive.js

Really simple way to add reveal on scroll animation to your React app.

"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function _objectWithoutProperties(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function responsive(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{breakpoint:"768px"},n=t.effect,i=t.breakpoint,r=void 0===i?"768px":i,a=(_objectWithoutProperties(t,["effect","breakpoint"]),(0,_withReveal2.default)(e,n));return function(e){function t(e){_classCallCheck(this,t);var n=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.mql=!1,n.handleChange=n.handleChange.bind(n),n.handleClick=n.handleClick.bind(n),n.state={match:!0,isClicked:!1},n}return _inherits(t,e),_createClass(t,[{key:"handleChange",value:function(e){this.setState({match:e.matches,isClicked:!1})}},{key:"handleClick",value:function(){this.setState({isClicked:!this.state.isClicked})}},{key:"newQuery",value:function(e){this.unlisten(),"matchMedia"in window&&(this.mql=window.matchMedia("(min-width: "+r+")"),this.handleChange(this.mql),this.mql.addListener(this.handleChange))}},{key:"unlisten",value:function(){this.mql&&this.mql.removeListener(this.handleChange)}},{key:"componentWillUnmount",value:function(){this.unlisten()}},{key:"componentDidMount",value:function(){this.newQuery(this.props.query)}},{key:"componentWillReceiveProps",value:function(e){var t=e.query;this.newQuery(t)}},{key:"render",value:function(){return _react2.default.createElement(a,_extends({},this.props,{belowBreakpoint:!this.state.match,toggle:this.handleClick,isToggled:this.state.isClicked,collapse:!this.state.match,disabled:this.props.disableAboveBreakpoint&&this.state.match,when:this.state.match||this.state.isClicked,collapseOnly:!this.state.match}))}}]),t}(_react2.default.Component)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},_createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_withReveal=require("./withReveal"),_withReveal2=_interopRequireDefault(_withReveal);exports.default=responsive,module.exports=exports.default;