1 | import{createContext as e,Component as t}from"react";import i from"prop-types";var r="MOBILE",o=e(r),n=function(e){function t(t){e.call(this,t),this.state={deviceType:r},this.resize=this.resize.bind(this)}return e&&(t.__proto__=e),(t.prototype=Object.create(e&&e.prototype)).constructor=t,t.prototype.componentDidMount=function(){"undefined"!=typeof window&&window.matchMedia&&(this.media=window.matchMedia("("+this.props.breakpoint+")"),this.media.addListener(this.resize),this.resize())},t.prototype.componentWillUnmount=function(){this.media&&this.media.removeListener(this.resize)},t.prototype.resize=function(){var e=this.media.matches?"DESKTOP":r;this.state.deviceType!==e&&this.setState({deviceType:e})},t.prototype.render=function(){return h(o.Provider,{value:this.state.deviceType},this.props.children)},t}(t);n.propTypes={breakpoint:i.string.isRequired,children:i.node.isRequired};var p=function(e){var t=e.desktopRender,i=e.mobileRender;return h(o.Consumer,null,function(e){return"DESKTOP"===e&&t?t:e===r&&i?i:null})};p.propTypes={mobileRender:i.oneOfType([i.bool,i.node]),desktopRender:i.oneOfType([i.bool,i.node])},p.defaultProps={mobileRender:!1,desktopRender:!1};var d=function(e){return h(p,{mobileRender:e.children})};d.propTypes={children:i.node.isRequired};var s=function(e){return h(p,{desktopRender:e.children})};s.propTypes={children:i.node.isRequired};export{n as DeviceSizeListener,p as DeviceSwitch,d as DeviceMobile,s as DeviceDesktop};
|