├── .gitignore ├── LICENSE ├── README.md ├── demo ├── dist │ ├── demo.css │ ├── demo.js │ └── index.html └── src │ ├── index.js │ └── test.css ├── es6 └── index.js ├── lib └── index.js ├── nwb.config.js ├── package.json ├── src └── index.js └── umd ├── react-container-query-container.js ├── react-container-query-container.min.js └── react-container-query-container.min.js.map /.gitignore: -------------------------------------------------------------------------------- 1 | /coverage 2 | /node_modules 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Vincent Speelman 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React ContainerQueryContainer 2 | 3 | [![npm package][npm-badge]][npm] 4 | 5 | 6 | ## Usage 7 | 8 | 1. `npm i -D react-container-query-container` 9 | 2. initialize the [container queries 10 | prolyfill](https://github.com/ausi/cq-prolyfill) *once* in the top of your app. (set `postcss: true` if you're using the [postcss-plugin](https://github.com/ausi/cq-prolyfill/blob/master/docs/postcss.md)): 11 | ``` 12 | import ContainerQueryContainer, { cq } from 'react-container-query-container'; 13 | const cqAPI = cq({ postcss: true }); 14 | ``` 15 | 3. decorate your component with the higher-order component, passing an optional 16 | callback to execute when the component is reevaluated: 17 | ``` 18 | @ContainerQueryContainer({ 19 | cqAPI, 20 | componentShouldReevaluate: () => console.log('reevaluated.'), 21 | }) 22 | class DemoComponent extends Component { … 23 | ``` 24 | 25 | Welcome to the future! 26 | 27 | 28 | 29 | 30 | Collaborating on this React component: 31 | 32 | ## Prerequisites 33 | 34 | You will need the following things properly installed on your computer. 35 | 36 | * [Git](http://git-scm.com/) 37 | * [Node.js](http://nodejs.org/) (with npm) 38 | * [nwb](https://github.com/insin/nwb/) - `npm install -g nwb` 39 | 40 | ## Installation 41 | 42 | * `git clone https://github.com/VinSpee/react-container-query-container.git` this repository 43 | * change into the new directory 44 | * `npm install` 45 | 46 | ## Running / Development 47 | 48 | * `nwb serve` will run the component's demo app 49 | * Visit the demo at [http://localhost:3000](http://localhost:3000) 50 | 51 | ### Running Tests 52 | 53 | * `nwb test` will run the tests once 54 | * `nwb test --server` will run the tests on every change 55 | 56 | ### Building 57 | 58 | * `nwb build` 59 | 60 | [npm-badge]: https://img.shields.io/npm/v/react-container-query-container.svg?style=flat-square 61 | [npm]: https://www.npmjs.org/package/react-container-query-containe 62 | 63 | 64 | -------------------------------------------------------------------------------- /demo/dist/demo.css: -------------------------------------------------------------------------------- 1 | .Demo{background:cyan}.Demo:container(width>= 15rem){background:#f0f}.Demo:container(width>= 20rem){background:#ff0} -------------------------------------------------------------------------------- /demo/dist/demo.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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)}var i=function(){function e(e,t){for(var n=0;n1){for(var v=Array(m),g=0;g1){for(var b=Array(y),C=0;C]/;e.exports=r},function(e,t,n){"use strict";var r,o=n(6),a=n(34),i=/^[ \r\n\t\f]/,u=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,s=n(48),l=s(function(e,t){if(e.namespaceURI!==a.svg||"innerHTML"in e)e.innerHTML=t;else{r=r||document.createElement("div"),r.innerHTML=""+t+"";for(var n=r.firstChild.childNodes,o=0;o1)for(var n=1;n-1?void 0:i("96",e),!l.plugins[n]){t.extractEvents?void 0:i("97",e),l.plugins[n]=t; 2 | var r=t.eventTypes;for(var a in r)o(r[a],t,a)?void 0:i("98",a,e)}}}function o(e,t,n){l.eventNameDispatchConfigs.hasOwnProperty(n)?i("99",n):void 0,l.eventNameDispatchConfigs[n]=e;var r=e.phasedRegistrationNames;if(r){for(var o in r)if(r.hasOwnProperty(o)){var u=r[o];a(u,t,n)}return!0}return!!e.registrationName&&(a(e.registrationName,t,n),!0)}function a(e,t,n){l.registrationNameModules[e]?i("100",e):void 0,l.registrationNameModules[e]=t,l.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var i=n(2),u=(n(1),null),s={},l={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){u?i("101"):void 0,u=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var n in e)if(e.hasOwnProperty(n)){var o=e[n];s.hasOwnProperty(n)&&s[n]===o||(s[n]?i("102",n):void 0,s[n]=o,t=!0)}t&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return l.registrationNameModules[t.registrationName]||null;for(var n in t.phasedRegistrationNames)if(t.phasedRegistrationNames.hasOwnProperty(n)){var r=l.registrationNameModules[t.phasedRegistrationNames[n]];if(r)return r}return null},_resetEventPlugins:function(){u=null;for(var e in s)s.hasOwnProperty(e)&&delete s[e];l.plugins.length=0;var t=l.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=l.registrationNameModules;for(var o in r)r.hasOwnProperty(o)&&delete r[o]}};e.exports=l},function(e,t,n){"use strict";function r(e){return e===y.topMouseUp||e===y.topTouchEnd||e===y.topTouchCancel}function o(e){return e===y.topMouseMove||e===y.topTouchMove}function a(e){return e===y.topMouseDown||e===y.topTouchStart}function i(e,t,n,r){var o=e.type||"unknown-event";e.currentTarget=b.getNodeFromInstance(r),t?v.invokeGuardedCallbackWithCatch(o,n,e):v.invokeGuardedCallback(o,n,e),e.currentTarget=null}function u(e,t){var n=e._dispatchListeners,r=e._dispatchInstances;if(Array.isArray(n))for(var o=0;o0&&r.length<20?n+" (keys: "+r.join(", ")+")":n}function a(e,t){var n=u.get(e);if(!n){return null}return n}var i=n(2),u=(n(15),n(22)),s=(n(8),n(10)),l=(n(1),n(3),{isMounted:function(e){var t=u.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){l.validateCallback(t,n);var o=a(e);return o?(o._pendingCallbacks?o._pendingCallbacks.push(t):o._pendingCallbacks=[t],void r(o)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=a(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=a(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=a(e,"setState");if(n){var o=n._pendingStateQueue||(n._pendingStateQueue=[]);o.push(t),r(n)}},enqueueElementInternal:function(e,t,n){e._pendingElement=t,e._context=n,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?i("122",t,o(e)):void 0}});e.exports=l},function(e,t){"use strict";var n=function(e){return"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,o){MSApp.execUnsafeLocalFunction(function(){return e(t,n,r,o)})}:e};e.exports=n},function(e,t){"use strict";function n(e){var t,n=e.keyCode;return"charCode"in e?(t=e.charCode,0===t&&13===n&&(t=13)):t=n,t>=32||13===t?t:0}e.exports=n},function(e,t){"use strict";function n(e){var t=this,n=t.nativeEvent;if(n.getModifierState)return n.getModifierState(e);var r=o[e];return!!r&&!!n[r]}function r(e){return n}var o={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};e.exports=r},function(e,t){"use strict";function n(e){var t=e.target||e.srcElement||window;return t.correspondingUseElement&&(t=t.correspondingUseElement),3===t.nodeType?t.parentNode:t}e.exports=n},function(e,t,n){"use strict";/** 3 | * Checks if an event is supported in the current execution environment. 4 | * 5 | * NOTE: This will not work correctly for non-generic events such as `change`, 6 | * `reset`, `load`, `error`, and `select`. 7 | * 8 | * Borrows from Modernizr. 9 | * 10 | * @param {string} eventNameSuffix Event name, e.g. "click". 11 | * @param {?boolean} capture Check if the capture phase is supported. 12 | * @return {boolean} True if the event is supported. 13 | * @internal 14 | * @license Modernizr 3.0.0pre (Custom Build) | MIT 15 | */ 16 | function r(e,t){if(!a.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var i=document.createElement("div");i.setAttribute(n,"return;"),r="function"==typeof i[n]}return!r&&o&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var o,a=n(6);a.canUseDOM&&(o=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t){"use strict";function n(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var o=typeof e,a=typeof t;return"string"===o||"number"===o?"string"===a||"number"===a:"object"===a&&e.type===t.type&&e.key===t.key}e.exports=n},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?l.escape(e.key):t.toString(36)}function o(e,t,n,a){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||u.isValidElement(e))return n(a,e,""===t?c+r(e,0):t),1;var f,h,m=0,v=""===t?c:t+p;if(Array.isArray(e))for(var g=0;g.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or .":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var i,u=C(F,null,null,null,null,null,t);if(e){var s=E.get(e);i=s._processChildContext(s._context)}else i=P;var c=d(n);if(c){var p=c._currentElement,h=p.props;if(S(h,t)){var m=c._renderedComponent.getPublicInstance(),v=r&&function(){r.call(m)};return j._updateRootComponent(c,u,i,n,v),m}j.unmountComponentAtNode(n)}var g=o(n),y=g&&!!a(g),b=l(n),_=y&&!c&&!b,x=j._renderNewRootComponent(u,n,_,i)._renderedComponent.getPublicInstance();return r&&r.call(x),x},render:function(e,t,n){return j._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){c(e)?void 0:f("40");var t=d(e);if(!t){l(e),1===e.nodeType&&e.hasAttribute(O);return!1}return delete L[t._instance.rootID],N.batchedUpdates(s,t,e,!1),!0},_mountImageIntoNode:function(e,t,n,a,i){if(c(t)?void 0:f("41"),a){var u=o(t);if(x.canReuseMarkup(e,u))return void g.precacheNode(n,u);var s=u.getAttribute(x.CHECKSUM_ATTR_NAME);u.removeAttribute(x.CHECKSUM_ATTR_NAME);var l=u.outerHTML;u.setAttribute(x.CHECKSUM_ATTR_NAME,s);var p=e,d=r(p,l),m=" (client) "+p.substring(d-20,d+20)+"\n (server) "+l.substring(d-20,d+20);t.nodeType===D?f("42",m):void 0}if(t.nodeType===D?f("43"):void 0,i.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);h.insertTreeBefore(t,e,null)}else M(t,e),g.precacheNode(n,t.firstChild)}};e.exports=j},function(e,t,n){"use strict";var r=n(25),o=r({INSERT_MARKUP:null,MOVE_EXISTING:null,REMOVE_NODE:null,SET_MARKUP:null,TEXT_CONTENT:null});e.exports=o},function(e,t,n){"use strict";var r=n(2),o=n(9),a=(n(1),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?a.EMPTY:o.isValidElement(e)?"function"==typeof e.type?a.COMPOSITE:a.HOST:void r("26",e)}});e.exports=a},function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function o(e){this.message=e,this.stack=""}function a(e){function t(t,n,r,a,i,u,s){a=a||N,u=u||r;if(null==n[r]){var l=E[i];return t?new o("Required "+l+" `"+u+"` was not specified in "+("`"+a+"`.")):null}return e(n,r,a,i,u)}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function i(e){function t(t,n,r,a,i,u){var s=t[n],l=y(s);if(l!==e){var c=E[a],p=b(s);return new o("Invalid "+c+" `"+i+"` of type "+("`"+p+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return a(t)}function u(){return a(T.thatReturns(null))}function s(e){function t(t,n,r,a,i){if("function"!=typeof e)return new o("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var s=E[a],l=y(u);return new o("Invalid "+s+" `"+i+"` of type "+("`"+l+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c>"),P={array:i("array"),bool:i("boolean"),func:i("function"),number:i("number"),object:i("object"),string:i("string"),symbol:i("symbol"),any:u(),arrayOf:s,element:l(),instanceOf:c,node:h(),objectOf:d,oneOf:p,oneOfType:f,shape:m};o.prototype=Error.prototype,e.exports=P},function(e,t){"use strict";e.exports="15.3.1"},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t,n){"use strict";function r(e,t){return null==t?o("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var o=n(2);n(1);e.exports=r},function(e,t,n){"use strict";var r=!1;e.exports=r},function(e,t){"use strict";function n(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=n},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===o.COMPOSITE;)e=e._renderedComponent;return t===o.HOST?e._renderedComponent:t===o.EMPTY?null:void 0}var o=n(72);e.exports=r},function(e,t){"use strict";function n(e){var t=e&&(r&&e[r]||e[o]);if("function"==typeof t)return t}var r="function"==typeof Symbol&&Symbol.iterator,o="@@iterator";e.exports=n},function(e,t,n){"use strict";function r(){return!a&&o.canUseDOM&&(a="textContent"in document.documentElement?"textContent":"innerText"),a}var o=n(6),a=null;e.exports=r},function(e,t,n){"use strict";function r(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function o(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function a(e,t){var n;if(null===e||e===!1)n=l.create(a);else if("object"==typeof e){var u=e;!u||"function"!=typeof u.type&&"string"!=typeof u.type?i("130",null==u.type?u.type:typeof u.type,r(u._owner)):void 0,"string"==typeof u.type?n=c.createInternalComponent(u):o(u.type)?(n=new u.type(u),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new p(u)}else"string"==typeof e||"number"==typeof e?n=c.createInstanceForText(e):i("131",typeof e);return n._mountIndex=0,n._mountImage=null,n}var i=n(2),u=n(4),s=n(114),l=n(66),c=n(68),p=(n(1),n(3),function(e){this.construct(e)});u(p.prototype,s.Mixin,{_instantiateReactComponent:a});e.exports=a},function(e,t){"use strict";function n(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!r[e.type]:"textarea"===t}var r={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=n},function(e,t,n){"use strict";var r=n(6),o=n(29),a=n(30),i=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(i=function(e,t){a(e,o(t))})),e.exports=i},function(e,t,n){"use strict";e.exports=n(111)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n+~])*).*$/,"$1")).replace(ee,"").replace(ce,"").replace(/:(?:active|hover|focus|checked|before|after)/gi,"");l.substr(-1).trim()||(l+="*");var c=[b(a),b(u)].filter(Boolean),p=r||c[0].match(oe)?"n":c[0].match(re)?"l":"s";"n"===p&&(c=c.map(parseFloat)),G[l+t]={_selector:l,_prop:b(n),_filter:r&&r.substr(2),_types:[b(o),b(i)].filter(Boolean),_values:c,_valueType:p,_className:b(t.substr(1))}})})}function b(e){return e&&e.replace(/\\(.)/g,"$1")}function C(e){return(e.match(/(?:\\.|"(?:\\.|[^"])*"|\([^)]*\)|[^,])+/g)||[]).map(function(e){ 17 | return e.trim()})}function _(){Q={width:{},height:{}};for(var e,t=0;t+~]\s*/,"");o.match(ce)||o.match(/:(?:before|after)/i)||(o=o.replace(pe,"").trim(),["width","height"].forEach(function(n){if(e[t].style.getPropertyValue(n)){var a=o.match(se);a||(a=o.match(le)),a||(a=o.match(de),a&&(a=[a[0].toLowerCase()])),a||(a="*"),Q[n][a[0]]||(Q[n][a[0]]=[]),Q[n][a[0]].push(r)}}))}):e[t].cssRules&&E(e[t].cssRules)}function x(e,t){if(!e&&$||($=B()),Object.keys(G).length){for(var n=N(t);T(n);)w(n);w(n)}}function T(e,t){var n,r,o,a,i=!1;for(n=0;n"!==t._types[0][0]&&"<"!==t._types[0][0]||"number"==typeof r&&"number"==typeof a[0]))return!1;for(n=0;n="===t._types[n]&&r>=a[n]||"<="===t._types[n]&&r<=a[n]||">"===t._types[n]&&r>a[n]||"<"===t._types[n]&&r.5?2-i-u:i+u),t=i===r?(o-a)/l+6*(o!=]=?)\s*[^)]+\s*\)/gi,ee=/\.\\:container\\\(([a-z-]+)(\\\|[a-z-]+)?(\\[<>!=](?:\\=)?)([^)]+?)(?:(\\[<>!=](?:\\=)?)([^)]+?))?\\\)/gi,te=/[.:()<>!=%]/g,ne=/ /g,re=/^(-?(?:\d*\.)?\d+)(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc)$/i,oe=/^-?(?:\d*\.)?\d+$/i,ae=/url\(\s*(?:(["'])(.*?)\1|([^)\s]*))\s*\)/gi,ie=/\[.+?\]/g,ue=/:not\(/g,se=/#[^\s\[\\#+,.:>~]+/g,le=/\.[^\s\[\\#+,.:>~]+/g,ce=/::[^\s\[\\#+,.:>~]+/g,pe=/:[^\s\[\\#+,.:>~]+/g,de=/[a-z-]+/gi,fe={px:1,pt:16/12,pc:16,"in":96,cm:96/2.54,mm:96/25.4},he=B(),me=[],ve=!1,ge=!1,ye=a.documentElement,be=a.styleSheets,Ce=a.createElement.bind(a);return X})}(window,document)},function(e,t){},function(e,t){"use strict";function n(e){return e.replace(r,function(e,t){return t.toUpperCase()})}var r=/-(.)/g;e.exports=n},function(e,t,n){"use strict";function r(e){return o(e.replace(a,"ms-"))}var o=n(89),a=/^-ms-/;e.exports=r},function(e,t,n){"use strict";function r(e,t){return!(!e||!t)&&(e===t||!o(e)&&(o(t)?r(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}var o=n(99);e.exports=r},function(e,t,n){"use strict";function r(e){var t=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?i(!1):void 0,"number"!=typeof t?i(!1):void 0,0===t||t-1 in e?void 0:i(!1),"function"==typeof e.callee?i(!1):void 0,e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(n){}for(var r=Array(t),o=0;o":i.innerHTML="<"+e+">",u[e]=!i.firstChild),u[e]?d[e]:null}var o=n(6),a=n(1),i=o.canUseDOM?document.createElement("div"):null,u={},s=[1,'"],l=[1,"","
"],c=[3,"","
"],p=[1,'',""],d={"*":[1,"?
","
"],area:[1,"",""],col:[2,"","
"],legend:[1,"
","
"],param:[1,"",""],tr:[2,"","
"],optgroup:s,option:s,caption:l,colgroup:l,tbody:l,tfoot:l,thead:l,td:c,th:c},f=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];f.forEach(function(e){d[e]=p,u[e]=!0}),e.exports=r},function(e,t){"use strict";function n(e){return e===window?{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}:{x:e.scrollLeft,y:e.scrollTop}}e.exports=n},function(e,t){"use strict";function n(e){return e.replace(r,"-$1").toLowerCase()}var r=/([A-Z])/g;e.exports=n},function(e,t,n){"use strict";function r(e){return o(e).replace(a,"-ms-")}var o=n(96),a=/^ms-/;e.exports=r},function(e,t){"use strict";function n(e){return!(!e||!("function"==typeof Node?e instanceof Node:"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName))}e.exports=n},function(e,t,n){"use strict";function r(e){return o(e)&&3==e.nodeType}var o=n(98);e.exports=r},function(e,t){"use strict";function n(e){var t={};return function(n){return t.hasOwnProperty(n)||(t[n]=e.call(this,n)),t[n]}}e.exports=n},function(e,t,n){"use strict";e.exports=n(115)},function(e,t,n){"use strict";var r=n(5),o=n(57),a={focusDOMComponent:function(){o(r.getNodeFromInstance(this))}};e.exports=a},function(e,t,n){"use strict";function r(){var e=window.opera;return"object"==typeof e&&"function"==typeof e.version&&parseInt(e.version(),10)<=12}function o(e){return(e.ctrlKey||e.altKey||e.metaKey)&&!(e.ctrlKey&&e.altKey)}function a(e){switch(e){case k.topCompositionStart:return M.compositionStart;case k.topCompositionEnd:return M.compositionEnd;case k.topCompositionUpdate:return M.compositionUpdate}}function i(e,t){return e===k.topKeyDown&&t.keyCode===_}function u(e,t){switch(e){case k.topKeyUp:return C.indexOf(t.keyCode)!==-1;case k.topKeyDown:return t.keyCode!==_;case k.topKeyPress:case k.topMouseDown:case k.topBlur:return!0;default:return!1}}function s(e){var t=e.detail;return"object"==typeof t&&"data"in t?t.data:null}function l(e,t,n,r){var o,l;if(E?o=a(e):R?u(e,n)&&(o=M.compositionEnd):i(e,n)&&(o=M.compositionStart),!o)return null;w&&(R||o!==M.compositionStart?o===M.compositionEnd&&R&&(l=R.getData()):R=v.getPooled(r));var c=g.getPooled(o,t,n,r);if(l)c.data=l;else{var p=s(n);null!==p&&(c.data=p)}return h.accumulateTwoPhaseDispatches(c),c}function c(e,t){switch(e){case k.topCompositionEnd:return s(t);case k.topKeyPress:var n=t.which;return n!==N?null:(S=!0,P);case k.topTextInput:var r=t.data;return r===P&&S?null:r;default:return null}}function p(e,t){if(R){if(e===k.topCompositionEnd||u(e,t)){var n=R.getData();return v.release(R),R=null,n}return null}switch(e){case k.topPaste:return null;case k.topKeyPress:return t.which&&!o(t)?String.fromCharCode(t.which):null;case k.topCompositionEnd:return w?null:t.data;default:return null}}function d(e,t,n,r){var o;if(o=T?c(e,n):p(e,n),!o)return null;var a=y.getPooled(M.beforeInput,t,n,r);return a.data=o,h.accumulateTwoPhaseDispatches(a),a}var f=n(11),h=n(21),m=n(6),v=n(109),g=n(147),y=n(150),b=n(13),C=[9,13,27,32],_=229,E=m.canUseDOM&&"CompositionEvent"in window,x=null;m.canUseDOM&&"documentMode"in document&&(x=document.documentMode);var T=m.canUseDOM&&"TextEvent"in window&&!x&&!r(),w=m.canUseDOM&&(!E||x&&x>8&&x<=11),N=32,P=String.fromCharCode(N),k=f.topLevelTypes,M={beforeInput:{phasedRegistrationNames:{bubbled:b({onBeforeInput:null}),captured:b({onBeforeInputCapture:null})},dependencies:[k.topCompositionEnd,k.topKeyPress,k.topTextInput,k.topPaste]},compositionEnd:{phasedRegistrationNames:{bubbled:b({onCompositionEnd:null}),captured:b({onCompositionEndCapture:null})},dependencies:[k.topBlur,k.topCompositionEnd,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]},compositionStart:{phasedRegistrationNames:{bubbled:b({onCompositionStart:null}),captured:b({onCompositionStartCapture:null})},dependencies:[k.topBlur,k.topCompositionStart,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]},compositionUpdate:{phasedRegistrationNames:{bubbled:b({onCompositionUpdate:null}),captured:b({onCompositionUpdateCapture:null})},dependencies:[k.topBlur,k.topCompositionUpdate,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]}},S=!1,R=null,O={eventTypes:M,extractEvents:function(e,t,n,r){return[l(e,t,n,r),d(e,t,n,r)]}};e.exports=O},function(e,t,n){"use strict";var r=n(59),o=n(6),a=(n(8),n(90),n(157)),i=n(97),u=n(100),s=(n(3),u(function(e){return i(e)})),l=!1,c="cssFloat";if(o.canUseDOM){var p=document.createElement("div").style;try{p.font=""}catch(d){l=!0}void 0===document.documentElement.style.cssFloat&&(c="styleFloat")}var f={createMarkupForStyles:function(e,t){var n="";for(var r in e)if(e.hasOwnProperty(r)){var o=e[r];null!=o&&(n+=s(r)+":",n+=a(r,o,t)+";")}return n||null},setValueForStyles:function(e,t,n){var o=e.style;for(var i in t)if(t.hasOwnProperty(i)){var u=a(i,t[i],n);if("float"!==i&&"cssFloat"!==i||(i=c),u)o[i]=u;else{var s=l&&r.shorthandPropertyExpansions[i];if(s)for(var p in s)o[p]="";else o[i]=""}}}};e.exports=f},function(e,t,n){"use strict";function r(e){var t=e.nodeName&&e.nodeName.toLowerCase();return"select"===t||"input"===t&&"file"===e.type}function o(e){var t=T.getPooled(S.change,O,e,w(e));C.accumulateTwoPhaseDispatches(t),x.batchedUpdates(a,t)}function a(e){b.enqueueEvents(e),b.processEventQueue(!1)}function i(e,t){R=e,O=t,R.attachEvent("onchange",o)}function u(){R&&(R.detachEvent("onchange",o),R=null,O=null)}function s(e,t){if(e===M.topChange)return t}function l(e,t,n){e===M.topFocus?(u(),i(t,n)):e===M.topBlur&&u()}function c(e,t){R=e,O=t,I=e.value,D=Object.getOwnPropertyDescriptor(e.constructor.prototype,"value"),Object.defineProperty(R,"value",U),R.attachEvent?R.attachEvent("onpropertychange",d):R.addEventListener("propertychange",d,!1)}function p(){R&&(delete R.value,R.detachEvent?R.detachEvent("onpropertychange",d):R.removeEventListener("propertychange",d,!1),R=null,O=null,I=null,D=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==I&&(I=t,o(e))}}function f(e,t){if(e===M.topInput)return t}function h(e,t,n){e===M.topFocus?(p(),c(t,n)):e===M.topBlur&&p()}function m(e,t){if((e===M.topSelectionChange||e===M.topKeyUp||e===M.topKeyDown)&&R&&R.value!==I)return I=R.value,O}function v(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function g(e,t){if(e===M.topClick)return t}var y=n(11),b=n(20),C=n(21),_=n(6),E=n(5),x=n(10),T=n(12),w=n(51),N=n(52),P=n(83),k=n(13),M=y.topLevelTypes,S={change:{phasedRegistrationNames:{bubbled:k({onChange:null}),captured:k({onChangeCapture:null})},dependencies:[M.topBlur,M.topChange,M.topClick,M.topFocus,M.topInput,M.topKeyDown,M.topKeyUp,M.topSelectionChange]}},R=null,O=null,I=null,D=null,A=!1;_.canUseDOM&&(A=N("change")&&(!("documentMode"in document)||document.documentMode>8));var L=!1;_.canUseDOM&&(L=N("input")&&(!("documentMode"in document)||document.documentMode>11));var U={get:function(){return D.get.call(this)},set:function(e){I=""+e,D.set.call(this,e)}},F={eventTypes:S,extractEvents:function(e,t,n,o){var a,i,u=t?E.getNodeFromInstance(t):window;if(r(u)?A?a=s:i=l:P(u)?L?a=f:(a=m,i=h):v(u)&&(a=g),a){var c=a(e,t);if(c){var p=T.getPooled(S.change,c,n,o);return p.type="change",C.accumulateTwoPhaseDispatches(p),p}}i&&i(e,u,t)}};e.exports=F},function(e,t,n){"use strict";var r=n(2),o=n(16),a=n(6),i=n(93),u=n(7),s=(n(1),{dangerouslyReplaceNodeWithMarkup:function(e,t){if(a.canUseDOM?void 0:r("56"),t?void 0:r("57"),"HTML"===e.nodeName?r("58"):void 0,"string"==typeof t){var n=i(t,u)[0];e.parentNode.replaceChild(n,e)}else o.replaceChildWithTree(e,t)}});e.exports=s},function(e,t,n){"use strict";var r=n(13),o=[r({ResponderEventPlugin:null}),r({SimpleEventPlugin:null}),r({TapEventPlugin:null}),r({EnterLeaveEventPlugin:null}),r({ChangeEventPlugin:null}),r({SelectEventPlugin:null}),r({BeforeInputEventPlugin:null})];e.exports=o},function(e,t,n){"use strict";var r=n(11),o=n(21),a=n(5),i=n(28),u=n(13),s=r.topLevelTypes,l={mouseEnter:{registrationName:u({onMouseEnter:null}),dependencies:[s.topMouseOut,s.topMouseOver]},mouseLeave:{registrationName:u({onMouseLeave:null}),dependencies:[s.topMouseOut,s.topMouseOver]}},c={eventTypes:l,extractEvents:function(e,t,n,r){if(e===s.topMouseOver&&(n.relatedTarget||n.fromElement))return null;if(e!==s.topMouseOut&&e!==s.topMouseOver)return null;var u;if(r.window===r)u=r;else{var c=r.ownerDocument;u=c?c.defaultView||c.parentWindow:window}var p,d;if(e===s.topMouseOut){p=t;var f=n.relatedTarget||n.toElement;d=f?a.getClosestInstanceFromNode(f):null}else p=null,d=t;if(p===d)return null;var h=null==p?u:a.getNodeFromInstance(p),m=null==d?u:a.getNodeFromInstance(d),v=i.getPooled(l.mouseLeave,p,n,r);v.type="mouseleave",v.target=h,v.relatedTarget=m;var g=i.getPooled(l.mouseEnter,d,n,r);return g.type="mouseenter",g.target=m,g.relatedTarget=h,o.accumulateEnterLeaveDispatches(v,g,p,d),[v,g]}};e.exports=c},function(e,t,n){"use strict";function r(e){this._root=e,this._startText=this.getText(),this._fallbackText=null}var o=n(4),a=n(14),i=n(81);o(r.prototype,{destructor:function(){this._root=null,this._startText=null,this._fallbackText=null},getText:function(){return"value"in this._root?this._root.value:this._root[i()]},getData:function(){if(this._fallbackText)return this._fallbackText;var e,t,n=this._startText,r=n.length,o=this.getText(),a=o.length;for(e=0;e1?1-t:void 0;return this._fallbackText=o.slice(e,u),this._fallbackText}}),a.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";var r=n(17),o=r.injection.MUST_USE_PROPERTY,a=r.injection.HAS_BOOLEAN_VALUE,i=r.injection.HAS_NUMERIC_VALUE,u=r.injection.HAS_POSITIVE_NUMERIC_VALUE,s=r.injection.HAS_OVERLOADED_BOOLEAN_VALUE,l={isCustomAttribute:RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+r.ATTRIBUTE_NAME_CHAR+"]*$")),Properties:{accept:0,acceptCharset:0,accessKey:0,action:0,allowFullScreen:a,allowTransparency:0,alt:0,async:a,autoComplete:0,autoPlay:a,capture:a,cellPadding:0,cellSpacing:0,charSet:0,challenge:0,checked:o|a,cite:0,classID:0,className:0,cols:u,colSpan:0,content:0,contentEditable:0,contextMenu:0,controls:a,coords:0,crossOrigin:0,data:0,dateTime:0,"default":a,defer:a,dir:0,disabled:a,download:s,draggable:0,encType:0,form:0,formAction:0,formEncType:0,formMethod:0,formNoValidate:a,formTarget:0,frameBorder:0,headers:0,height:0,hidden:a,high:0,href:0,hrefLang:0,htmlFor:0,httpEquiv:0,icon:0,id:0,inputMode:0,integrity:0,is:0,keyParams:0,keyType:0,kind:0,label:0,lang:0,list:0,loop:a,low:0,manifest:0,marginHeight:0,marginWidth:0,max:0,maxLength:0,media:0,mediaGroup:0,method:0,min:0,minLength:0,multiple:o|a,muted:o|a,name:0,nonce:0,noValidate:a,open:a,optimum:0,pattern:0,placeholder:0,poster:0,preload:0,profile:0,radioGroup:0,readOnly:a,referrerPolicy:0,rel:0,required:a,reversed:a,role:0,rows:u,rowSpan:i,sandbox:0,scope:0,scoped:a,scrolling:0,seamless:a,selected:o|a,shape:0,size:u,sizes:0,span:u,spellCheck:0,src:0,srcDoc:0,srcLang:0,srcSet:0,start:i,step:0,style:0,summary:0,tabIndex:0,target:0,title:0,type:0,useMap:0,value:0,width:0,wmode:0,wrap:0,about:0,datatype:0,inlist:0,prefix:0,property:0,resource:0,"typeof":0,vocab:0,autoCapitalize:0,autoCorrect:0,autoSave:0,color:0,itemProp:0,itemScope:a,itemType:0,itemID:0,itemRef:0,results:0,security:0,unselectable:0},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{}};e.exports=l},function(e,t,n){"use strict";var r=n(4),o=n(62),a=n(39),i=n(137),u=n(63),s=n(120),l=n(9),c=n(73),p=n(74),d=n(163),f=(n(3),l.createElement),h=l.createFactory,m=l.cloneElement,v=r,g={Children:{map:o.map,forEach:o.forEach,count:o.count,toArray:o.toArray,only:d},Component:a,PureComponent:i,createElement:f,cloneElement:m,isValidElement:l.isValidElement,PropTypes:c,createClass:u.createClass,createFactory:h,createMixin:function(e){return e},DOM:s,version:p,__spread:v};e.exports=g},function(e,t,n){(function(t){"use strict";function r(e,t,n,r){var o=void 0===e[n];null!=t&&o&&(e[n]=a(t,!0))}var o=n(18),a=n(82),i=(n(37),n(53)),u=n(54);n(3);"undefined"!=typeof t&&t.env,1;var s={instantiateChildren:function(e,t,n,o){if(null==e)return null;var a={};return u(e,r,a),a},updateChildren:function(e,t,n,r,u,s,l,c,p){if(t||e){var d,f;for(d in t)if(t.hasOwnProperty(d)){f=e&&e[d];var h=f&&f._currentElement,m=t[d];if(null!=f&&i(h,m))o.receiveComponent(f,m,u,c),t[d]=f;else{f&&(r[d]=o.getHostNode(f),o.unmountComponent(f,!1));var v=a(m,!0);t[d]=v;var g=o.mountComponent(v,u,s,l,c,p);n.push(g)}}for(d in e)!e.hasOwnProperty(d)||t&&t.hasOwnProperty(d)||(f=e[d],r[d]=o.getHostNode(f),o.unmountComponent(f,!1))}},unmountChildren:function(e,t){for(var n in e)if(e.hasOwnProperty(n)){var r=e[n];o.unmountComponent(r,t)}}};e.exports=s}).call(t,n(32))},function(e,t,n){"use strict";var r=n(33),o=n(122),a={processChildrenUpdates:o.dangerouslyProcessChildrenUpdates,replaceNodeWithMarkup:r.dangerouslyReplaceNodeWithMarkup};e.exports=a},function(e,t,n){"use strict";function r(e){}function o(e,t){}function a(e){return!(!e.prototype||!e.prototype.isReactComponent)}function i(e){return!(!e.prototype||!e.prototype.isPureReactComponent)}var u=n(2),s=n(4),l=n(40),c=n(15),p=n(9),d=n(42),f=n(22),h=(n(8),n(72)),m=(n(45),n(18)),v=n(156),g=n(19),y=(n(1),n(31)),b=n(53),C=(n(3),{ImpureClass:0,PureClass:1,StatelessFunctional:2});r.prototype.render=function(){var e=f.get(this)._currentElement.type,t=e(this.props,this.context,this.updater);return o(e,t),t};var _=1,E={construct:function(e){this._currentElement=e,this._rootNodeID=0,this._compositeType=null,this._instance=null,this._hostParent=null,this._hostContainerInfo=null,this._updateBatchNumber=null,this._pendingElement=null,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._renderedNodeType=null,this._renderedComponent=null,this._context=null,this._mountOrder=0,this._topLevelWrapper=null,this._pendingCallbacks=null,this._calledComponentWillUnmount=!1},mountComponent:function(e,t,n,s){this._context=s,this._mountOrder=_++,this._hostParent=t,this._hostContainerInfo=n;var l,c=this._currentElement.props,d=this._processContext(s),h=this._currentElement.type,m=e.getUpdateQueue(),v=a(h),y=this._constructComponent(v,c,d,m);v||null!=y&&null!=y.render?i(h)?this._compositeType=C.PureClass:this._compositeType=C.ImpureClass:(l=y,o(h,l),null===y||y===!1||p.isValidElement(y)?void 0:u("105",h.displayName||h.name||"Component"),y=new r(h),this._compositeType=C.StatelessFunctional);y.props=c,y.context=d,y.refs=g,y.updater=m,this._instance=y,f.set(y,this);var b=y.state;void 0===b&&(y.state=b=null),"object"!=typeof b||Array.isArray(b)?u("106",this.getName()||"ReactCompositeComponent"):void 0,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1;var E;return E=y.unstable_handleError?this.performInitialMountWithErrorHandling(l,t,n,e,s):this.performInitialMount(l,t,n,e,s),y.componentDidMount&&e.getReactMountReady().enqueue(y.componentDidMount,y),E},_constructComponent:function(e,t,n,r){return this._constructComponentWithoutOwner(e,t,n,r)},_constructComponentWithoutOwner:function(e,t,n,r){var o,a=this._currentElement.type;return o=e?new a(t,n,r):a(t,n,r)},performInitialMountWithErrorHandling:function(e,t,n,r,o){var a,i=r.checkpoint();try{a=this.performInitialMount(e,t,n,r,o)}catch(u){r.rollback(i),this._instance.unstable_handleError(u),this._pendingStateQueue&&(this._instance.state=this._processPendingState(this._instance.props,this._instance.context)),i=r.checkpoint(),this._renderedComponent.unmountComponent(!0),r.rollback(i),a=this.performInitialMount(e,t,n,r,o)}return a},performInitialMount:function(e,t,n,r,o){var a=this._instance;a.componentWillMount&&(a.componentWillMount(),this._pendingStateQueue&&(a.state=this._processPendingState(a.props,a.context))),void 0===e&&(e=this._renderValidatedComponent());var i=h.getType(e);this._renderedNodeType=i;var u=this._instantiateReactComponent(e,i!==h.EMPTY);this._renderedComponent=u;var s=0,l=m.mountComponent(u,r,t,n,this._processChildContext(o),s);return l},getHostNode:function(){return m.getHostNode(this._renderedComponent)},unmountComponent:function(e){if(this._renderedComponent){var t=this._instance;if(t.componentWillUnmount&&!t._calledComponentWillUnmount)if(t._calledComponentWillUnmount=!0,e){var n=this.getName()+".componentWillUnmount()";d.invokeGuardedCallback(n,t.componentWillUnmount.bind(t))}else t.componentWillUnmount();this._renderedComponent&&(m.unmountComponent(this._renderedComponent,e),this._renderedNodeType=null,this._renderedComponent=null,this._instance=null),this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._pendingCallbacks=null,this._pendingElement=null,this._context=null,this._rootNodeID=0,this._topLevelWrapper=null,f.remove(t)}},_maskContext:function(e){var t=this._currentElement.type,n=t.contextTypes;if(!n)return g;var r={};for(var o in n)r[o]=e[o];return r},_processContext:function(e){var t=this._maskContext(e);return t},_processChildContext:function(e){var t=this._currentElement.type,n=this._instance,r=n.getChildContext&&n.getChildContext();if(r){"object"!=typeof t.childContextTypes?u("107",this.getName()||"ReactCompositeComponent"):void 0;for(var o in r)o in t.childContextTypes?void 0:u("108",this.getName()||"ReactCompositeComponent",o);return s({},e,r)}return e},_checkContextTypes:function(e,t,n){v(e,t,n,this.getName(),null,this._debugID)},receiveComponent:function(e,t,n){var r=this._currentElement,o=this._context;this._pendingElement=null,this.updateComponent(t,r,e,o,n)},performUpdateIfNecessary:function(e){null!=this._pendingElement?m.receiveComponent(this,this._pendingElement,e,this._context):null!==this._pendingStateQueue||this._pendingForceUpdate?this.updateComponent(e,this._currentElement,this._currentElement,this._context,this._context):this._updateBatchNumber=null},updateComponent:function(e,t,n,r,o){var a=this._instance;null==a?u("136",this.getName()||"ReactCompositeComponent"):void 0;var i,s=!1;this._context===o?i=a.context:(i=this._processContext(o),s=!0);var l=t.props,c=n.props;t!==n&&(s=!0),s&&a.componentWillReceiveProps&&a.componentWillReceiveProps(c,i);var p=this._processPendingState(c,i),d=!0;this._pendingForceUpdate||(a.shouldComponentUpdate?d=a.shouldComponentUpdate(c,p,i):this._compositeType===C.PureClass&&(d=!y(l,c)||!y(a.state,p))),this._updateBatchNumber=null,d?(this._pendingForceUpdate=!1,this._performComponentUpdate(n,c,p,i,e,o)):(this._currentElement=n,this._context=o,a.props=c,a.state=p,a.context=i)},_processPendingState:function(e,t){var n=this._instance,r=this._pendingStateQueue,o=this._pendingReplaceState;if(this._pendingReplaceState=!1,this._pendingStateQueue=null,!r)return n.state;if(o&&1===r.length)return r[0];for(var a=s({},o?r[0]:n.state),i=o?1:0;i=0||null!=t.is}function h(e){var t=e.type;d(t),this._currentElement=e,this._tag=t.toLowerCase(),this._namespaceURI=null,this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._hostNode=null,this._hostParent=null,this._rootNodeID=0,this._domID=0,this._hostContainerInfo=null,this._wrapperState=null,this._topLevelWrapper=null,this._flags=0}var m=n(2),v=n(4),g=n(102),y=n(104),b=n(16),C=n(34),_=n(17),E=n(61),x=n(11),T=n(20),w=n(35),N=n(27),P=n(116),k=n(64),M=n(5),S=n(123),R=n(124),O=n(65),I=n(127),D=(n(8),n(135)),A=n(140),L=(n(7),n(29)),U=(n(1),n(52),n(13)),F=(n(31),n(55),n(3),k),j=T.deleteListener,V=M.getNodeFromInstance,B=N.listenTo,W=w.registrationNameModules,H={string:!0,number:!0},q=U({style:null}),K=U({__html:null}),z={children:null,dangerouslySetInnerHTML:null,suppressContentEditableWarning:null},Y=11,X={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},G={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},$={listing:!0,pre:!0,textarea:!0},Q=v({menuitem:!0},G),Z=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,J={},ee={}.hasOwnProperty,te=1;h.displayName="ReactDOMComponent",h.Mixin={mountComponent:function(e,t,n,r){this._rootNodeID=te++,this._domID=n._idCounter++,this._hostParent=t,this._hostContainerInfo=n;var a=this._currentElement.props;switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":this._wrapperState={listeners:null},e.getReactMountReady().enqueue(c,this);break;case"button":a=P.getHostProps(this,a,t);break;case"input":S.mountWrapper(this,a,t),a=S.getHostProps(this,a),e.getReactMountReady().enqueue(c,this);break;case"option":R.mountWrapper(this,a,t),a=R.getHostProps(this,a);break;case"select":O.mountWrapper(this,a,t),a=O.getHostProps(this,a),e.getReactMountReady().enqueue(c,this);break;case"textarea":I.mountWrapper(this,a,t),a=I.getHostProps(this,a),e.getReactMountReady().enqueue(c,this)}o(this,a);var i,p;null!=t?(i=t._namespaceURI,p=t._tag):n._tag&&(i=n._namespaceURI,p=n._tag),(null==i||i===C.svg&&"foreignobject"===p)&&(i=C.html),i===C.html&&("svg"===this._tag?i=C.svg:"math"===this._tag&&(i=C.mathml)),this._namespaceURI=i;var d;if(e.useCreateElement){var f,h=n._ownerDocument;if(i===C.html)if("script"===this._tag){var m=h.createElement("div"),v=this._currentElement.type;m.innerHTML="<"+v+">",f=m.removeChild(m.firstChild)}else f=a.is?h.createElement(this._currentElement.type,a.is):h.createElement(this._currentElement.type);else f=h.createElementNS(i,this._currentElement.type);M.precacheNode(this,f),this._flags|=F.hasCachedChildNodes,this._hostParent||E.setAttributeForRoot(f),this._updateDOMProperties(null,a,e);var y=b(f);this._createInitialChildren(e,a,r,y),d=y}else{var _=this._createOpenTagMarkupAndPutListeners(e,a),x=this._createContentMarkup(e,a,r);d=!x&&G[this._tag]?_+"/>":_+">"+x+""}switch(this._tag){case"input":e.getReactMountReady().enqueue(u,this),a.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"textarea":e.getReactMountReady().enqueue(s,this),a.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"select":a.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"button":a.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"option":e.getReactMountReady().enqueue(l,this)}return d},_createOpenTagMarkupAndPutListeners:function(e,t){var n="<"+this._currentElement.type;for(var r in t)if(t.hasOwnProperty(r)){var o=t[r];if(null!=o)if(W.hasOwnProperty(r))o&&a(this,r,o,e);else{r===q&&(o&&(o=this._previousStyleCopy=v({},t.style)),o=y.createMarkupForStyles(o,this));var i=null;null!=this._tag&&f(this._tag,t)?z.hasOwnProperty(r)||(i=E.createMarkupForCustomAttribute(r,o)):i=E.createMarkupForProperty(r,o),i&&(n+=" "+i)}}return e.renderToStaticMarkup?n:(this._hostParent||(n+=" "+E.createMarkupForRoot()),n+=" "+E.createMarkupForID(this._domID))},_createContentMarkup:function(e,t,n){var r="",o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&(r=o.__html);else{var a=H[typeof t.children]?t.children:null,i=null!=a?null:t.children;if(null!=a)r=L(a);else if(null!=i){var u=this.mountChildren(i,e,n);r=u.join("")}}return $[this._tag]&&"\n"===r.charAt(0)?"\n"+r:r},_createInitialChildren:function(e,t,n,r){var o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&b.queueHTML(r,o.__html);else{var a=H[typeof t.children]?t.children:null,i=null!=a?null:t.children;if(null!=a)b.queueText(r,a);else if(null!=i)for(var u=this.mountChildren(i,e,n),s=0;s"},receiveComponent:function(){},getHostNode:function(){return a.getNodeFromInstance(this)},unmountComponent:function(){a.uncacheNode(this)}}),e.exports=i},function(e,t,n){"use strict";var r=n(9),o=r.createFactory,a={a:o("a"),abbr:o("abbr"),address:o("address"),area:o("area"),article:o("article"),aside:o("aside"),audio:o("audio"),b:o("b"),base:o("base"),bdi:o("bdi"),bdo:o("bdo"),big:o("big"),blockquote:o("blockquote"),body:o("body"),br:o("br"),button:o("button"),canvas:o("canvas"),caption:o("caption"),cite:o("cite"),code:o("code"),col:o("col"),colgroup:o("colgroup"),data:o("data"),datalist:o("datalist"),dd:o("dd"),del:o("del"),details:o("details"),dfn:o("dfn"),dialog:o("dialog"),div:o("div"),dl:o("dl"),dt:o("dt"),em:o("em"),embed:o("embed"),fieldset:o("fieldset"),figcaption:o("figcaption"),figure:o("figure"),footer:o("footer"),form:o("form"),h1:o("h1"),h2:o("h2"),h3:o("h3"),h4:o("h4"),h5:o("h5"),h6:o("h6"),head:o("head"),header:o("header"),hgroup:o("hgroup"),hr:o("hr"),html:o("html"),i:o("i"),iframe:o("iframe"),img:o("img"),input:o("input"),ins:o("ins"),kbd:o("kbd"),keygen:o("keygen"),label:o("label"),legend:o("legend"),li:o("li"),link:o("link"),main:o("main"),map:o("map"),mark:o("mark"),menu:o("menu"),menuitem:o("menuitem"),meta:o("meta"),meter:o("meter"),nav:o("nav"),noscript:o("noscript"),object:o("object"),ol:o("ol"),optgroup:o("optgroup"),option:o("option"),output:o("output"),p:o("p"),param:o("param"),picture:o("picture"),pre:o("pre"),progress:o("progress"),q:o("q"),rp:o("rp"),rt:o("rt"),ruby:o("ruby"),s:o("s"),samp:o("samp"),script:o("script"),section:o("section"),select:o("select"),small:o("small"),source:o("source"),span:o("span"),strong:o("strong"),style:o("style"),sub:o("sub"),summary:o("summary"),sup:o("sup"),table:o("table"),tbody:o("tbody"),td:o("td"),textarea:o("textarea"),tfoot:o("tfoot"),th:o("th"),thead:o("thead"),time:o("time"),title:o("title"),tr:o("tr"),track:o("track"),u:o("u"),ul:o("ul"),"var":o("var"),video:o("video"),wbr:o("wbr"),circle:o("circle"),clipPath:o("clipPath"),defs:o("defs"),ellipse:o("ellipse"),g:o("g"),image:o("image"),line:o("line"),linearGradient:o("linearGradient"),mask:o("mask"),path:o("path"),pattern:o("pattern"),polygon:o("polygon"),polyline:o("polyline"),radialGradient:o("radialGradient"),rect:o("rect"),stop:o("stop"),svg:o("svg"),text:o("text"),tspan:o("tspan")};e.exports=a},function(e,t){"use strict";var n={useCreateElement:!0};e.exports=n},function(e,t,n){"use strict";var r=n(33),o=n(5),a={dangerouslyProcessChildrenUpdates:function(e,t){var n=o.getNodeFromInstance(e);r.processUpdates(n,t)}};e.exports=a},function(e,t,n){"use strict";function r(){this._rootNodeID&&d.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=l.executeOnChange(t,e);p.asap(r,this);var o=t.name;if("radio"===t.type&&null!=o){for(var i=c.getNodeFromInstance(this),u=i;u.parentNode;)u=u.parentNode;for(var s=u.querySelectorAll("input[name="+JSON.stringify(""+o)+'][type="radio"]'),d=0;dt.end?(n=t.end,r=t.start):(n=t.start,r=t.end),o.moveToElementText(e),o.moveStart("character",n),o.setEndPoint("EndToStart",o),o.moveEnd("character",r-n),o.select()}function u(e,t){if(window.getSelection){var n=window.getSelection(),r=e[c()].length,o=Math.min(t.start,r),a=void 0===t.end?o:Math.min(t.end,r);if(!n.extend&&o>a){var i=a;a=o,o=i}var u=l(e,o),s=l(e,a);if(u&&s){var p=document.createRange();p.setStart(u.node,u.offset),n.removeAllRanges(),o>a?(n.addRange(p),n.extend(s.node,s.offset)):(p.setEnd(s.node,s.offset),n.addRange(p))}}}var s=n(6),l=n(161),c=n(81),p=s.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:p?o:a,setOffsets:p?i:u};e.exports=d},function(e,t,n){"use strict";var r=n(2),o=n(4),a=n(33),i=n(16),u=n(5),s=n(29),l=(n(1),n(55),function(e){this._currentElement=e,this._stringText=""+e,this._hostNode=null,this._hostParent=null,this._domID=0,this._mountIndex=0,this._closingComment=null,this._commentNodes=null});o(l.prototype,{mountComponent:function(e,t,n,r){var o=n._idCounter++,a=" react-text: "+o+" ",l=" /react-text ";if(this._domID=o,this._hostParent=t,e.useCreateElement){var c=n._ownerDocument,p=c.createComment(a),d=c.createComment(l),f=i(c.createDocumentFragment());return i.queueChild(f,i(p)),this._stringText&&i.queueChild(f,i(c.createTextNode(this._stringText))),i.queueChild(f,i(d)),u.precacheNode(this,p),this._closingComment=d,f}var h=s(this._stringText);return e.renderToStaticMarkup?h:""+h+""},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var r=this.getHostNode();a.replaceDelimitedText(r[0],r[1],n)}}},getHostNode:function(){var e=this._commentNodes;if(e)return e;if(!this._closingComment)for(var t=u.getNodeFromInstance(this),n=t.nextSibling;;){if(null==n?r("67",this._domID):void 0,8===n.nodeType&&" /react-text "===n.nodeValue){this._closingComment=n;break}n=n.nextSibling}return e=[this._hostNode,this._closingComment],this._commentNodes=e,e},unmountComponent:function(){this._closingComment=null,this._commentNodes=null,u.uncacheNode(this)}}),e.exports=l},function(e,t,n){"use strict";function r(){this._rootNodeID&&p.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);return c.asap(r,this),n}var a=n(2),i=n(4),u=n(26),s=n(38),l=n(5),c=n(10),p=(n(1),n(3),{getHostProps:function(e,t){null!=t.dangerouslySetInnerHTML?a("91"):void 0;var n=i({},u.getHostProps(e,t),{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue,onChange:e._wrapperState.onChange});return n},mountWrapper:function(e,t){var n=s.getValue(t),r=n;if(null==n){var i=t.defaultValue,u=t.children;null!=u&&(null!=i?a("92"):void 0,Array.isArray(u)&&(u.length<=1?void 0:a("93"),u=u[0]),i=""+u),null==i&&(i=""),r=i}e._wrapperState={initialValue:""+r,listeners:null,onChange:o.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=l.getNodeFromInstance(e),r=s.getValue(t);if(null!=r){var o=""+r;o!==n.value&&(n.value=o),null==t.defaultValue&&(n.defaultValue=o)}null!=t.defaultValue&&(n.defaultValue=t.defaultValue)},postMountWrapper:function(e){var t=l.getNodeFromInstance(e);t.value=t.textContent}});e.exports=p},function(e,t,n){"use strict";function r(e,t){"_hostNode"in e?void 0:s("33"),"_hostNode"in t?void 0:s("33");for(var n=0,r=e;r;r=r._hostParent)n++;for(var o=0,a=t;a;a=a._hostParent)o++;for(;n-o>0;)e=e._hostParent,n--;for(;o-n>0;)t=t._hostParent,o--;for(var i=n;i--;){if(e===t)return e;e=e._hostParent,t=t._hostParent}return null}function o(e,t){"_hostNode"in e?void 0:s("35"),"_hostNode"in t?void 0:s("35");for(;t;){if(t===e)return!0;t=t._hostParent}return!1}function a(e){return"_hostNode"in e?void 0:s("36"),e._hostParent}function i(e,t,n){for(var r=[];e;)r.push(e),e=e._hostParent;var o;for(o=r.length;o-- >0;)t(r[o],!1,n);for(o=0;o0;)n(s[l],!1,a)}var s=n(2);n(1);e.exports={isAncestor:o,getLowestCommonAncestor:r,getParentInstance:a,traverseTwoPhase:i,traverseEnterLeave:u}},function(e,t,n){"use strict";function r(){this.reinitializeTransaction()}var o=n(4),a=n(10),i=n(24),u=n(7),s={initialize:u,close:function(){d.isBatchingUpdates=!1}},l={initialize:u,close:a.flushBatchedUpdates.bind(a)},c=[l,s];o(r.prototype,i.Mixin,{getTransactionWrappers:function(){return c}});var p=new r,d={isBatchingUpdates:!1,batchedUpdates:function(e,t,n,r,o,a){var i=d.isBatchingUpdates;d.isBatchingUpdates=!0,i?e(t,n,r,o,a):p.perform(e,null,t,n,r,o,a)}};e.exports=d},function(e,t,n){"use strict";function r(){E||(E=!0,g.EventEmitter.injectReactEventListener(v),g.EventPluginHub.injectEventPluginOrder(i),g.EventPluginUtils.injectComponentTree(p),g.EventPluginUtils.injectTreeTraversal(f),g.EventPluginHub.injectEventPluginsByName({SimpleEventPlugin:_,EnterLeaveEventPlugin:u,ChangeEventPlugin:a,SelectEventPlugin:C,BeforeInputEventPlugin:o}),g.HostComponent.injectGenericComponentClass(c),g.HostComponent.injectTextComponentClass(h),g.DOMProperty.injectDOMPropertyConfig(s),g.DOMProperty.injectDOMPropertyConfig(b),g.EmptyComponent.injectEmptyComponentFactory(function(e){return new d(e)}),g.Updates.injectReconcileTransaction(y),g.Updates.injectBatchingStrategy(m),g.Component.injectEnvironment(l))}var o=n(103),a=n(105),i=n(107),u=n(108),s=n(110),l=n(113),c=n(117),p=n(5),d=n(119),f=n(128),h=n(126),m=n(129),v=n(132),g=n(133),y=n(138),b=n(142),C=n(143),_=n(144),E=!1;e.exports={inject:r}},function(e,t,n){"use strict";function r(e){o.enqueueEvents(e),o.processEventQueue(!1)}var o=n(20),a={handleTopLevel:function(e,t,n,a){var i=o.extractEvents(e,t,n,a);r(i)}};e.exports=a},function(e,t,n){"use strict";function r(e){for(;e._hostParent;)e=e._hostParent;var t=p.getNodeFromInstance(e),n=t.parentNode;return p.getClosestInstanceFromNode(n)}function o(e,t){this.topLevelType=e,this.nativeEvent=t,this.ancestors=[]}function a(e){var t=f(e.nativeEvent),n=p.getClosestInstanceFromNode(t),o=n;do e.ancestors.push(o),o=o&&r(o);while(o);for(var a=0;a/,a=/^<\!\-\-/,i={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return a.test(e)?e:e.replace(o," "+i.CHECKSUM_ATTR_NAME+'="'+t+'"$&')},canReuseMarkup:function(e,t){var n=t.getAttribute(i.CHECKSUM_ATTR_NAME);n=n&&parseInt(n,10);var o=r(e);return o===n}};e.exports=i},function(e,t,n){"use strict";function r(e,t,n){return{type:d.INSERT_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:n,afterNode:t}}function o(e,t,n){return{type:d.MOVE_EXISTING,content:null,fromIndex:e._mountIndex,fromNode:f.getHostNode(e),toIndex:n,afterNode:t}}function a(e,t){return{type:d.REMOVE_NODE,content:null,fromIndex:e._mountIndex,fromNode:t,toIndex:null,afterNode:null}}function i(e){return{type:d.SET_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function u(e){return{type:d.TEXT_CONTENT,content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function s(e,t){return t&&(e=e||[],e.push(t)),e}function l(e,t){p.processChildrenUpdates(e,t)}var c=n(2),p=n(40),d=(n(22),n(8),n(71)),f=(n(15),n(18)),h=n(112),m=(n(7),n(159)),v=(n(1),{Mixin:{_reconcilerInstantiateChildren:function(e,t,n){return h.instantiateChildren(e,t,n)},_reconcilerUpdateChildren:function(e,t,n,r,o,a){var i,u=0;return i=m(t,u),h.updateChildren(e,i,n,r,o,this,this._hostContainerInfo,a,u),i},mountChildren:function(e,t,n){var r=this._reconcilerInstantiateChildren(e,t,n);this._renderedChildren=r;var o=[],a=0;for(var i in r)if(r.hasOwnProperty(i)){var u=r[i],s=0,l=f.mountComponent(u,t,this,this._hostContainerInfo,n,s);u._mountIndex=a++,o.push(l)}return o},updateTextContent:function(e){var t=this._renderedChildren;h.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[u(e)];l(this,r)},updateMarkup:function(e){var t=this._renderedChildren;h.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[i(e)];l(this,r)},updateChildren:function(e,t,n){this._updateChildren(e,t,n)},_updateChildren:function(e,t,n){var r=this._renderedChildren,o={},a=[],i=this._reconcilerUpdateChildren(r,e,a,o,t,n);if(i||r){var u,c=null,p=0,d=0,h=0,m=null;for(u in i)if(i.hasOwnProperty(u)){var v=r&&r[u],g=i[u];v===g?(c=s(c,this.moveChild(v,m,p,d)),d=Math.max(v._mountIndex,d),v._mountIndex=p):(v&&(d=Math.max(v._mountIndex,d)),c=s(c,this._mountChildAtIndex(g,a[h],m,p,t,n)),h++),p++,m=f.getHostNode(g)}for(u in o)o.hasOwnProperty(u)&&(c=s(c,this._unmountChild(r[u],o[u])));c&&l(this,c),this._renderedChildren=i}},unmountChildren:function(e){var t=this._renderedChildren;h.unmountChildren(t,e),this._renderedChildren=null},moveChild:function(e,t,n,r){if(e._mountIndex=t)return{node:o,offset:t-a};a=i}o=n(r(o))}}e.exports=o},function(e,t,n){"use strict";function r(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function o(e){if(u[e])return u[e];if(!i[e])return e;var t=i[e];for(var n in t)if(t.hasOwnProperty(n)&&n in s)return u[e]=t[n];return""}var a=n(6),i={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},u={},s={};a.canUseDOM&&(s=document.createElement("div").style,"AnimationEvent"in window||(delete i.animationend.animation,delete i.animationiteration.animation,delete i.animationstart.animation),"TransitionEvent"in window||delete i.transitionend.transition),e.exports=o},function(e,t,n){"use strict";function r(e){return a.isValidElement(e)?void 0:o("143"),e}var o=n(2),a=n(9);n(1);e.exports=r},function(e,t,n){"use strict";function r(e){return'"'+o(e)+'"'}var o=n(29);e.exports=r},function(e,t,n){"use strict";var r=n(70);e.exports=r.renderSubtreeIntoContainer}]); -------------------------------------------------------------------------------- /demo/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react-container-query-container 1.1.0 Demo 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import {render} from 'react-dom'; 3 | 4 | import './test.css'; 5 | import ContainerQueryContainer, { cq } from '../../src'; 6 | 7 | const cqAPI = cq({ postcss: false }); 8 | 9 | @ContainerQueryContainer({ 10 | cqAPI, 11 | componentShouldReevaluate: () => console.log('reevaluated.'), 12 | }) 13 | class DemoComponent extends Component { 14 | static propTypes = { 15 | name: PropTypes.string.isRequired, 16 | } 17 | render() { 18 | return ( 19 |
20 |

{this.props.name}

21 |
22 | ); 23 | } 24 | }; 25 | 26 | const Demo = React.createClass({ 27 | render() { 28 | return ( 29 |
30 |

Container Query Container Demo

31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | ); 42 | } 43 | }); 44 | 45 | render(, document.querySelector('#demo')); 46 | -------------------------------------------------------------------------------- /demo/src/test.css: -------------------------------------------------------------------------------- 1 | .Demo { 2 | background: cyan; 3 | } 4 | 5 | .Demo:container(width >= 15rem) { 6 | background: magenta; 7 | } 8 | 9 | .Demo:container(width >= 20rem) { 10 | background: yellow; 11 | } 12 | -------------------------------------------------------------------------------- /es6/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 6 | 7 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 8 | 9 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 10 | 11 | import cq from 'cq-prolyfill'; 12 | import React, { Component } from 'react'; 13 | 14 | var isFunction = function isFunction(obj) { 15 | return obj && obj instanceof Function ? true : false; 16 | }; 17 | 18 | var Container = function Container() { 19 | var args = arguments.length <= 0 || arguments[0] === undefined ? { 20 | cqAPI: false, 21 | componentShouldReevaluate: false 22 | } : arguments[0]; 23 | var cqAPI = args.cqAPI; 24 | var componentShouldReevaluate = args.componentShouldReevaluate; 25 | 26 | return function (ComponentToContain) { 27 | return (function (_Component) { 28 | _inherits(_class, _Component); 29 | 30 | function _class() { 31 | _classCallCheck(this, _class); 32 | 33 | _get(Object.getPrototypeOf(_class.prototype), 'constructor', this).apply(this, arguments); 34 | } 35 | 36 | _createClass(_class, [{ 37 | key: 'reevaluate', 38 | value: function reevaluate(clearCache, callback) { 39 | if (clearCache === undefined) clearCache = false; 40 | 41 | cqAPI.reevaluate(clearCache, function () { 42 | if (isFunction(callback)) { 43 | return callback(); 44 | } else { 45 | return false; 46 | } 47 | }); 48 | } 49 | }, { 50 | key: 'reparse', 51 | value: function reparse(callback) { 52 | cqAPI.reparse(function () { 53 | if (isFunction(callback)) { 54 | return callback(); 55 | } else { 56 | return false; 57 | } 58 | }); 59 | } 60 | }, { 61 | key: 'reprocess', 62 | value: function reprocess(callback) { 63 | cqAPI.reprocess(function () { 64 | if (isFunction(callback)) { 65 | return callback(); 66 | } else { 67 | return false; 68 | } 69 | }); 70 | } 71 | }, { 72 | key: 'componentWillMount', 73 | value: function componentWillMount() { 74 | this.reevaluate(false, componentShouldReevaluate); 75 | } 76 | }, { 77 | key: 'render', 78 | value: function render() { 79 | return React.createElement(ComponentToContain, this.props); 80 | } 81 | }]); 82 | 83 | return _class; 84 | })(Component); 85 | }; 86 | }; 87 | 88 | export { Container as default, cq }; -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { 4 | value: true 5 | }); 6 | 7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 8 | 9 | var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12 | 13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 14 | 15 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 16 | 17 | var _cqProlyfill = require('cq-prolyfill'); 18 | 19 | var _cqProlyfill2 = _interopRequireDefault(_cqProlyfill); 20 | 21 | var _react = require('react'); 22 | 23 | var _react2 = _interopRequireDefault(_react); 24 | 25 | var isFunction = function isFunction(obj) { 26 | return obj && obj instanceof Function ? true : false; 27 | }; 28 | 29 | var Container = function Container() { 30 | var args = arguments.length <= 0 || arguments[0] === undefined ? { 31 | cqAPI: false, 32 | componentShouldReevaluate: false 33 | } : arguments[0]; 34 | var cqAPI = args.cqAPI; 35 | var componentShouldReevaluate = args.componentShouldReevaluate; 36 | 37 | return function (ComponentToContain) { 38 | return (function (_Component) { 39 | _inherits(_class, _Component); 40 | 41 | function _class() { 42 | _classCallCheck(this, _class); 43 | 44 | _get(Object.getPrototypeOf(_class.prototype), 'constructor', this).apply(this, arguments); 45 | } 46 | 47 | _createClass(_class, [{ 48 | key: 'reevaluate', 49 | value: function reevaluate(clearCache, callback) { 50 | if (clearCache === undefined) clearCache = false; 51 | 52 | cqAPI.reevaluate(clearCache, function () { 53 | if (isFunction(callback)) { 54 | return callback(); 55 | } else { 56 | return false; 57 | } 58 | }); 59 | } 60 | }, { 61 | key: 'reparse', 62 | value: function reparse(callback) { 63 | cqAPI.reparse(function () { 64 | if (isFunction(callback)) { 65 | return callback(); 66 | } else { 67 | return false; 68 | } 69 | }); 70 | } 71 | }, { 72 | key: 'reprocess', 73 | value: function reprocess(callback) { 74 | cqAPI.reprocess(function () { 75 | if (isFunction(callback)) { 76 | return callback(); 77 | } else { 78 | return false; 79 | } 80 | }); 81 | } 82 | }, { 83 | key: 'componentWillMount', 84 | value: function componentWillMount() { 85 | this.reevaluate(false, componentShouldReevaluate); 86 | } 87 | }, { 88 | key: 'render', 89 | value: function render() { 90 | return _react2['default'].createElement(ComponentToContain, this.props); 91 | } 92 | }]); 93 | 94 | return _class; 95 | })(_react.Component); 96 | }; 97 | }; 98 | 99 | exports['default'] = Container; 100 | exports.cq = _cqProlyfill2['default']; -------------------------------------------------------------------------------- /nwb.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // Let nwb know this is a React component module when generic build commands 3 | // are used. 4 | type: 'react-component', 5 | // Should nwb create a UMD build for this module? 6 | umd: true, 7 | // The name of the global variable the UMD build of this module will export 8 | global: 'ContainerQueryContainer', 9 | // ... 10 | babel: { 11 | stage: 0, 12 | }, 13 | // Mapping from the npm package names of this module's peerDependencies to the 14 | // global variables they're expected to be available as for use by the UMD 15 | // build. 16 | externals: { 17 | 'react': 'React', 18 | 'cq-prolyfill': 'cq' 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-container-query-container", 3 | "version": "1.1.0", 4 | "description": "A higher-order react component enabling container queries today", 5 | "main": "lib/index.js", 6 | "jsnext:main": "es6/index.js", 7 | "files": [ 8 | "css", 9 | "es6", 10 | "lib", 11 | "umd" 12 | ], 13 | "scripts": { 14 | "build": "nwb build", 15 | "clean": "nwb clean", 16 | "start": "nwb serve", 17 | "push_pages": "nwb build && git add . && git commit -m 'update demo' && git subtree push --prefix demo/dist/ origin gh-pages" 18 | }, 19 | "dependencies": {}, 20 | "peerDependencies": { 21 | "react": "^0.14.0 || ^15.0.0", 22 | "cq-prolyfill": "^0.3.0" 23 | }, 24 | "devDependencies": { 25 | "nwb": "~0.4.1", 26 | "cq-prolyfill": "^0.3.0", 27 | "react": "~0.14.0 || ^15.0.0", 28 | "react-dom": "~0.14.0 || ^15.0.0" 29 | }, 30 | "author": "Vince Speelman", 31 | "homepage": "", 32 | "license": "MIT", 33 | "repository": "https://github.com/VinSpee/react-container-query-container.git", 34 | "keywords": [ 35 | "react-component", 36 | "container queries", 37 | "element queries" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import cq from 'cq-prolyfill'; 2 | import React, { Component } from 'react'; 3 | 4 | const isFunction = (obj) => obj && obj instanceof Function ? true : false; 5 | 6 | const Container = (args = { 7 | cqAPI: false, 8 | componentShouldReevaluate: false, 9 | }) => { 10 | const { 11 | cqAPI, 12 | componentShouldReevaluate, 13 | } = args; 14 | 15 | return (ComponentToContain) => { 16 | return class extends Component { 17 | reevaluate(clearCache = false, callback) { 18 | cqAPI.reevaluate(clearCache, () => { 19 | if (isFunction(callback)) { 20 | return callback(); 21 | } else { 22 | return false; 23 | } 24 | }); 25 | } 26 | 27 | reparse(callback) { 28 | cqAPI.reparse(() => { 29 | if (isFunction(callback)) { 30 | return callback(); 31 | } else { 32 | return false; 33 | } 34 | }); 35 | } 36 | 37 | reprocess(callback) { 38 | cqAPI.reprocess(() => { 39 | if (isFunction(callback)) { 40 | return callback(); 41 | } else { 42 | return false; 43 | } 44 | }); 45 | } 46 | 47 | componentWillMount() { 48 | this.reevaluate(false, componentShouldReevaluate); 49 | } 50 | 51 | render() { 52 | return ; 53 | } 54 | }; 55 | }; 56 | }; 57 | 58 | export { 59 | Container as default, 60 | cq, 61 | }; 62 | -------------------------------------------------------------------------------- /umd/react-container-query-container.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * react-container-query-container 1.1.0 3 | * MIT Licensed 4 | */ 5 | (function webpackUniversalModuleDefinition(root, factory) { 6 | if(typeof exports === 'object' && typeof module === 'object') 7 | module.exports = factory(require("react"), require("cq-prolyfill")); 8 | else if(typeof define === 'function' && define.amd) 9 | define(["react", "cq-prolyfill"], factory); 10 | else if(typeof exports === 'object') 11 | exports["ContainerQueryContainer"] = factory(require("react"), require("cq-prolyfill")); 12 | else 13 | root["ContainerQueryContainer"] = factory(root["React"], root["cq"]); 14 | })(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) { 15 | return /******/ (function(modules) { // webpackBootstrap 16 | /******/ // The module cache 17 | /******/ var installedModules = {}; 18 | 19 | /******/ // The require function 20 | /******/ function __webpack_require__(moduleId) { 21 | 22 | /******/ // Check if module is in cache 23 | /******/ if(installedModules[moduleId]) 24 | /******/ return installedModules[moduleId].exports; 25 | 26 | /******/ // Create a new module (and put it into the cache) 27 | /******/ var module = installedModules[moduleId] = { 28 | /******/ exports: {}, 29 | /******/ id: moduleId, 30 | /******/ loaded: false 31 | /******/ }; 32 | 33 | /******/ // Execute the module function 34 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 35 | 36 | /******/ // Flag the module as loaded 37 | /******/ module.loaded = true; 38 | 39 | /******/ // Return the exports of the module 40 | /******/ return module.exports; 41 | /******/ } 42 | 43 | 44 | /******/ // expose the modules object (__webpack_modules__) 45 | /******/ __webpack_require__.m = modules; 46 | 47 | /******/ // expose the module cache 48 | /******/ __webpack_require__.c = installedModules; 49 | 50 | /******/ // __webpack_public_path__ 51 | /******/ __webpack_require__.p = ""; 52 | 53 | /******/ // Load entry module and return exports 54 | /******/ return __webpack_require__(0); 55 | /******/ }) 56 | /************************************************************************/ 57 | /******/ ([ 58 | /* 0 */ 59 | /***/ function(module, exports, __webpack_require__) { 60 | 61 | 'use strict'; 62 | 63 | Object.defineProperty(exports, '__esModule', { 64 | value: true 65 | }); 66 | 67 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 68 | 69 | var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 70 | 71 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 72 | 73 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 74 | 75 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 76 | 77 | var _cqProlyfill = __webpack_require__(2); 78 | 79 | var _cqProlyfill2 = _interopRequireDefault(_cqProlyfill); 80 | 81 | var _react = __webpack_require__(1); 82 | 83 | var _react2 = _interopRequireDefault(_react); 84 | 85 | var isFunction = function isFunction(obj) { 86 | return obj && obj instanceof Function ? true : false; 87 | }; 88 | 89 | var Container = function Container() { 90 | var args = arguments.length <= 0 || arguments[0] === undefined ? { 91 | cqAPI: false, 92 | componentShouldReevaluate: false 93 | } : arguments[0]; 94 | var cqAPI = args.cqAPI; 95 | var componentShouldReevaluate = args.componentShouldReevaluate; 96 | 97 | return function (ComponentToContain) { 98 | return (function (_Component) { 99 | _inherits(_class, _Component); 100 | 101 | function _class() { 102 | _classCallCheck(this, _class); 103 | 104 | _get(Object.getPrototypeOf(_class.prototype), 'constructor', this).apply(this, arguments); 105 | } 106 | 107 | _createClass(_class, [{ 108 | key: 'reevaluate', 109 | value: function reevaluate(clearCache, callback) { 110 | if (clearCache === undefined) clearCache = false; 111 | 112 | cqAPI.reevaluate(clearCache, function () { 113 | if (isFunction(callback)) { 114 | return callback(); 115 | } else { 116 | return false; 117 | } 118 | }); 119 | } 120 | }, { 121 | key: 'reparse', 122 | value: function reparse(callback) { 123 | cqAPI.reparse(function () { 124 | if (isFunction(callback)) { 125 | return callback(); 126 | } else { 127 | return false; 128 | } 129 | }); 130 | } 131 | }, { 132 | key: 'reprocess', 133 | value: function reprocess(callback) { 134 | cqAPI.reprocess(function () { 135 | if (isFunction(callback)) { 136 | return callback(); 137 | } else { 138 | return false; 139 | } 140 | }); 141 | } 142 | }, { 143 | key: 'componentWillMount', 144 | value: function componentWillMount() { 145 | this.reevaluate(false, componentShouldReevaluate); 146 | } 147 | }, { 148 | key: 'render', 149 | value: function render() { 150 | return _react2['default'].createElement(ComponentToContain, this.props); 151 | } 152 | }]); 153 | 154 | return _class; 155 | })(_react.Component); 156 | }; 157 | }; 158 | 159 | exports['default'] = Container; 160 | exports.cq = _cqProlyfill2['default']; 161 | 162 | /***/ }, 163 | /* 1 */ 164 | /***/ function(module, exports) { 165 | 166 | module.exports = __WEBPACK_EXTERNAL_MODULE_1__; 167 | 168 | /***/ }, 169 | /* 2 */ 170 | /***/ function(module, exports) { 171 | 172 | module.exports = __WEBPACK_EXTERNAL_MODULE_2__; 173 | 174 | /***/ } 175 | /******/ ]) 176 | }); 177 | ; -------------------------------------------------------------------------------- /umd/react-container-query-container.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * react-container-query-container 1.1.0 3 | * MIT Licensed 4 | */ 5 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("cq-prolyfill")):"function"==typeof define&&define.amd?define(["react","cq-prolyfill"],t):"object"==typeof exports?exports.ContainerQueryContainer=t(require("react"),require("cq-prolyfill")):e.ContainerQueryContainer=t(e.React,e.cq)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r obj && obj instanceof Function ? true : false;\n\nconst Container = (args = {\n\tcqAPI: false,\n\tcomponentShouldReevaluate: false,\n}) => {\n\tconst {\n\t\tcqAPI,\n\t\tcomponentShouldReevaluate,\n\t} = args;\n\n\treturn (ComponentToContain) => {\n\t\treturn class extends Component {\n\t\t\treevaluate(clearCache = false, callback) {\n\t\t\t\tcqAPI.reevaluate(clearCache, () => {\n\t\t\t\t\tif (isFunction(callback)) {\n\t\t\t\t\t\treturn callback();\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treparse(callback) {\n\t\t\t\tcqAPI.reparse(() => {\n\t\t\t\t\tif (isFunction(callback)) {\n\t\t\t\t\t\treturn callback();\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treprocess(callback) {\n\t\t\t\tcqAPI.reprocess(() => {\n\t\t\t\t\tif (isFunction(callback)) {\n\t\t\t\t\t\treturn callback();\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tcomponentWillMount() {\n\t\t\t\tthis.reevaluate(false, componentShouldReevaluate);\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn ;\n\t\t\t}\n\t\t};\n\t};\n};\n\nexport {\n\tContainer as default,\n\tcq,\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}\n ** module id = 1\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"cq\",\"commonjs2\":\"cq-prolyfill\",\"commonjs\":\"cq-prolyfill\",\"amd\":\"cq-prolyfill\"}\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} --------------------------------------------------------------------------------