├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── build └── build.js ├── index.html ├── package.json ├── src ├── js │ └── components │ │ ├── app.js │ │ └── index.js └── sass │ ├── _LoadingBar.sass │ └── main.sass └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Naufal Rabbani 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Loading Bar 2 | Simplest Youtube Like Loading Bar Component For [React JS](http://facebook.github.io/react) 3 | 4 | [DEMO](https://bosnaufal.github.io/react-loading-bar) 5 | 6 | ## Install 7 | You can import [react-loading-bar](./src/js/components/index.js) to your react component file like [this](./src/js/components/app.js) and process it with your preprocessor. 8 | 9 | or 10 | 11 | You can install it via NPM 12 | ```bash 13 | npm install react-loadingbar 14 | ``` 15 | 16 | 17 | ## Usage 18 | ```javascript 19 | 20 | import React from 'react'; 21 | import ReactDOM from 'react-dom'; 22 | 23 | import LoadingBar from 'react-loadingbar'; 24 | 25 | class App extends React.Component { 26 | 27 | constructor() { 28 | super(); 29 | this.state = { 30 | progress: 0, 31 | error: false 32 | } 33 | } 34 | 35 | render(){ 36 | return( 37 | 42 | ) 43 | } 44 | 45 | // Callback 46 | errorDone(){ 47 | this.setState({ error: false }) 48 | } 49 | 50 | progressDone() { 51 | this.setState({ progress: 0 }) 52 | } 53 | 54 | } 55 | 56 | 57 | ReactDOM.render(, document.getElementById("app")) 58 | 59 | 60 | ``` 61 | 62 | Usage With Full Props 63 | ```javascript 64 | 65 | render(){ 66 | return( 67 | 75 | ) 76 | } 77 | 78 | 79 | ``` 80 | 81 | ## Props 82 | ##### id (String) 83 | custom Id in react-loadingbar component 84 | 85 | ##### className (String) 86 | custom className in react-loadingbar component 87 | 88 | ##### progress (Number) 89 | The Progress Percentage of react-loadingbar component 90 | 91 | ##### direction (String) 92 | The Animation Direction of react-loadingbar component. You can fill it with `'right'` or `'left'` default is `'right'` 93 | 94 | ##### error (Boolean) 95 | Indicate the component to showing the error state. 96 | 97 | ##### onErrorDone (Function) 98 | Should change the parent state when the loadingbar has finished with its error state 99 | 100 | ##### onProgressDone (Function) 101 | Should netralize the parent's progress state to be `0` 102 | 103 | 104 | ## Thank You for Making this useful~ 105 | 106 | ## Let's talk about some projects with me 107 | Just Contact Me At: 108 | - Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com) 109 | - Skype Id: bosnaufal254 110 | - twitter: [@BosNaufal](https://twitter.com/BosNaufal) 111 | 112 | ## License 113 | [MIT](http://opensource.org/licenses/MIT) 114 | Copyright (c) 2016 - forever Naufal Rabbani 115 | -------------------------------------------------------------------------------- /build/build.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 i(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 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 u=function(){function e(e,t){for(var n=0;n1){for(var f=Array(d),h=0;h1){for(var v=Array(m),g=0;g-1?void 0:a(!1),!l.plugins[n]){t.extractEvents?void 0:a(!1),l.plugins[n]=t;var r=t.eventTypes;for(var i in r)o(r[i],t,i)?void 0:a(!1)}}}function o(e,t,n){l.eventNameDispatchConfigs.hasOwnProperty(n)?a(!1):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];i(u,t,n)}return!0}return!!e.registrationName&&(i(e.registrationName,t,n),!0)}function i(e,t,n){l.registrationNameModules[e]?a(!1):void 0,l.registrationNameModules[e]=t,l.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var a=n(1),u=null,s={},l={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){u?a(!1):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]?a(!1):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 Object.prototype.hasOwnProperty.call(e,v)||(e[v]=h++,d[e[v]]={}),d[e[v]]}var o,i=n(3),a=n(10),u=n(22),s=n(120),l=n(73),c=n(148),p=n(45),d={},f=!1,h=0,m={topAbort:"abort",topAnimationEnd:c("animationend")||"animationend",topAnimationIteration:c("animationiteration")||"animationiteration",topAnimationStart:c("animationstart")||"animationstart",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:c("transitionend")||"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},v="_reactListenersID"+String(Math.random()).slice(2),g=i({},s,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(g.handleTopLevel),g.ReactEventListener=e}},setEnabled:function(e){g.ReactEventListener&&g.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!g.ReactEventListener||!g.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,o=r(n),i=u.registrationNameDependencies[e],s=a.topLevelTypes,l=0;l":">","<":"<",'"':""","'":"'"},i=/[&><"']/g;e.exports=r},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";var r=n(1),o=function(e){var t,n={};e instanceof Object&&!Array.isArray(e)?void 0:r(!1);for(t in e)e.hasOwnProperty(t)&&(n[t]=t);return n};e.exports=o},function(e,t,n){"use strict";function r(e,t){return Array.isArray(t)&&(t=t[1]),t?t.nextSibling:e.firstChild}function o(e,t,n){c.insertTreeBefore(e,t,n)}function i(e,t,n){Array.isArray(t)?u(e,t[0],t[1],n):v(e,t,n)}function a(e,t){if(Array.isArray(t)){var n=t[1];t=t[0],s(e,t,n),e.removeChild(n)}e.removeChild(t)}function u(e,t,n,r){for(var o=t;;){var i=o.nextSibling;if(v(e,o,r),o===n)break;o=i}}function s(e,t,n){for(;;){var r=t.nextSibling;if(r===n)break;e.removeChild(r)}}function l(e,t,n){var r=e.parentNode,o=e.nextSibling;o===t?n&&v(r,document.createTextNode(n),o):n?(m(o,n),s(r,o,t)):s(r,e,t)}var c=n(16),p=n(92),d=n(66),f=(n(4),n(6),n(40)),h=n(46),m=n(80),v=f(function(e,t,n){e.insertBefore(t,n)}),g=p.dangerouslyReplaceNodeWithMarkup,y={dangerouslyReplaceNodeWithMarkup:g,replaceDelimitedText:l,processUpdates:function(e,t){for(var n=0;n=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){"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";/** 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(!i.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var a=document.createElement("div");a.setAttribute(n,"return;"),r="function"==typeof a[n]}return!r&&o&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var o,i=n(5);i.canUseDOM&&(o=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t,n){"use strict";var r=n(5),o=/^[ \r\n\t\f]/,i=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,a=n(40),u=a(function(e,t){e.innerHTML=t});if(r.canUseDOM){var s=document.createElement("div");s.innerHTML=" ",""===s.innerHTML&&(u=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),o.test(t)||"<"===t[0]&&i.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),s=null}e.exports=u},function(e,t){"use strict";function n(e,t){var n=null===e||e===!1,o=null===t||t===!1;if(n||o)return n===o;var i="undefined"==typeof e?"undefined":r(e),a="undefined"==typeof t?"undefined":r(t);return"string"===i||"number"===i?"string"===a||"number"===a:"object"===a&&e.type===t.type&&e.key===t.key}var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};e.exports=n},function(e,t,n){"use strict";function r(e,t){return e&&"object"===("undefined"==typeof e?"undefined":a(e))&&null!=e.key?c.escape(e.key):t.toString(36)}function o(e,t,n,i){var f="undefined"==typeof e?"undefined":a(e);if("undefined"!==f&&"boolean"!==f||(e=null),null===e||"string"===f||"number"===f||u.isValidElement(e))return n(i,e,""===t?p+r(e,0):t),1;var h,m,v=0,g=""===t?p:t+d;if(Array.isArray(e))for(var y=0;y.")}var a=m[e]||(m[e]={});if(a[o])return null;a[o]=!0;var u={parentOrOwner:o,url:" See https://fb.me/react-warning-keys for more information.",childOwner:null};return t&&t._owner&&t._owner!==d.current&&(u.childOwner=" It was passed a child from "+t._owner.getName()+"."),u}function a(e,t){if("object"===("undefined"==typeof e?"undefined":l(e)))if(Array.isArray(e))for(var n=0;n>",w={array:i("array"),bool:i("boolean"),func:i("function"),number:i("number"),object:i("object"),string:i("string"),any:a(),arrayOf:u,element:s(),instanceOf:l,node:f(),objectOf:p,oneOf:c,oneOfType:d,shape:h};e.exports=w},function(e,t,n){"use strict";function r(e){a.enqueueUpdate(e)}function o(e,t){var n=i.get(e);return n?n:null}var i=("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},n(13),n(38)),a=n(9),u=n(1),s=(n(2),{isMounted:function(e){var t=i.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){s.validateCallback(t,n);var i=o(e);return i?(i._pendingCallbacks?i._pendingCallbacks.push(t):i._pendingCallbacks=[t],void r(i)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=o(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=o(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=o(e,"setState");if(n){var i=n._pendingStateQueue||(n._pendingStateQueue=[]);i.push(t),r(n)}},enqueueElementInternal:function(e,t){e._pendingElement=t,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?u(!1):void 0}});e.exports=s},function(e,t){"use strict";e.exports="15.1.0"},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){if(null==t?o(!1):void 0,null==e)return t;var n=Array.isArray(e),r=Array.isArray(t);return n&&r?(e.push.apply(e,t),e):n?(e.push(t),e):r?[e].concat(t):[e,t]}var o=n(1);e.exports=r},function(e,t){"use strict";var n=function(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.NATIVE?e._renderedComponent:t===o.EMPTY?null:void 0}var o=n(68);e.exports=r},function(e,t,n){"use strict";function r(){return!i&&o.canUseDOM&&(i="textContent"in document.documentElement?"textContent":"innerText"),i}var o=n(5),i=null;e.exports=r},function(e,t,n){"use strict";function r(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function o(e){var t,n=null===e||e===!1;if(n)t=s.create(o);else if("object"===("undefined"==typeof e?"undefined":i(e))){var a=e;!a||"function"!=typeof a.type&&"string"!=typeof a.type?c(!1):void 0,t="string"==typeof a.type?l.createInternalComponent(a):r(a.type)?new a.type(a):new p(a)}else"string"==typeof e||"number"==typeof e?t=l.createInstanceForText(e):c(!1);t._mountIndex=0,t._mountImage=null;return t}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},a=n(3),u=n(99),s=n(62),l=n(67),c=(n(6),n(1)),p=(n(2),function(e){this.construct(e)});a(p.prototype,u.Mixin,{_instantiateReactComponent:o});e.exports=o},function(e,t){"use strict";function n(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("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(5),o=n(28),i=n(46),a=function(e,t){e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(a=function(e,t){i(e,o(t))})),e.exports=a},function(e,t,n){"use strict";var r=n(8),o={listen:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!1),{remove:function(){e.removeEventListener(t,n,!1)}}):e.attachEvent?(e.attachEvent("on"+t,n),{remove:function(){e.detachEvent("on"+t,n)}}):void 0},capture:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};e.exports=o},function(e,t){"use strict";function n(e){try{e.focus()}catch(t){}}e.exports=n},function(e,t){"use strict";function n(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}e.exports=n},function(e,t,n){"use strict";function r(e){return a?void 0:i(!1),d.hasOwnProperty(e)||(e="*"),u.hasOwnProperty(e)||("*"===e?a.innerHTML="":a.innerHTML="<"+e+">",u[e]=!a.firstChild),u[e]?d[e]:null}var o=n(5),i=n(1),a=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,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function r(e,t){if(n(e,t))return!0;if("object"!==("undefined"==typeof e?"undefined":o(e))||null===e||"object"!==("undefined"==typeof t?"undefined":o(t))||null===t)return!1;var r=Object.keys(e),a=Object.keys(t);if(r.length!==a.length)return!1;for(var u=0;u=0&&b.splice(t,1)}function u(e){var t=document.createElement("style");return t.type="text/css",i(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",i(e,t),t}function l(e,t){var n,r,o;if(t.singleton){var i=y++;n=g||(g=u(t)),r=c.bind(null,n,i,!1),o=c.bind(null,n,i,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(t),r=d.bind(null,n),o=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=u(t),r=p.bind(null,n),o=function(){a(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function c(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=C(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function p(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function d(e,t){var n=t.css,r=t.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var f={},h=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},m=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=h(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,y=0,b=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=m()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var n=o(e);return r(n,t),function(e){for(var i=[],a=0;a8&&N<=11),P=32,T=String.fromCharCode(P),k=h.topLevelTypes,M={beforeInput:{phasedRegistrationNames:{bubbled:C({onBeforeInput:null}),captured:C({onBeforeInputCapture:null})},dependencies:[k.topCompositionEnd,k.topKeyPress,k.topTextInput,k.topPaste]},compositionEnd:{phasedRegistrationNames:{bubbled:C({onCompositionEnd:null}),captured:C({onCompositionEndCapture:null})},dependencies:[k.topBlur,k.topCompositionEnd,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]},compositionStart:{phasedRegistrationNames:{bubbled:C({onCompositionStart:null}),captured:C({onCompositionStartCapture:null})},dependencies:[k.topBlur,k.topCompositionStart,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]},compositionUpdate:{phasedRegistrationNames:{bubbled:C({onCompositionUpdate:null}),captured:C({onCompositionUpdateCapture:null})},dependencies:[k.topBlur,k.topCompositionUpdate,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]}},R=!1,D=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(52),o=n(5),i=(n(6),n(153),n(143)),a=n(159),u=n(163),s=(n(2),u(function(e){return a(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+=i(r,o,t)+";")}return n||null},setValueForStyles:function(e,t,n){var o=e.style;for(var a in t)if(t.hasOwnProperty(a)){var u=i(a,t[a],n);if("float"!==a&&"cssFloat"!==a||(a=c),u)o[a]=u;else{var s=l&&r.shorthandPropertyExpansions[a];if(s)for(var p in s)o[p]="";else o[a]=""}}}};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=N.getPooled(M.change,D,e,w(e));C.accumulateTwoPhaseDispatches(t),x.batchedUpdates(i,t)}function i(e){b.enqueueEvents(e),b.processEventQueue(!1)}function a(e,t){R=e,D=t,R.attachEvent("onchange",o)}function u(){R&&(R.detachEvent("onchange",o),R=null,D=null)}function s(e,t){if(e===k.topChange)return t}function l(e,t,n){e===k.topFocus?(u(),a(t,n)):e===k.topBlur&&u()}function c(e,t){R=e,D=t,O=e.value,I=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,D=null,O=null,I=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==O&&(O=t,o(e))}}function f(e,t){if(e===k.topInput)return t}function h(e,t,n){e===k.topFocus?(p(),c(t,n)):e===k.topBlur&&p()}function m(e,t){if((e===k.topSelectionChange||e===k.topKeyUp||e===k.topKeyDown)&&R&&R.value!==O)return O=R.value,D}function v(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function g(e,t){if(e===k.topClick)return t}var y=n(10),b=n(18),C=n(19),_=n(5),E=n(4),x=n(9),N=n(11),w=n(43),S=n(45),P=n(79),T=n(14),k=y.topLevelTypes,M={change:{phasedRegistrationNames:{bubbled:T({onChange:null}),captured:T({onChangeCapture:null})},dependencies:[k.topBlur,k.topChange,k.topClick,k.topFocus,k.topInput,k.topKeyDown,k.topKeyUp,k.topSelectionChange]}},R=null,D=null,O=null,I=null,A=!1;_.canUseDOM&&(A=S("change")&&(!("documentMode"in document)||document.documentMode>8));var L=!1;_.canUseDOM&&(L=S("input")&&(!("documentMode"in document)||document.documentMode>11));var U={get:function(){return I.get.call(this)},set:function(e){O=""+e,I.set.call(this,e)}},F={eventTypes:M,extractEvents:function(e,t,n,o){var i,a,u=t?E.getNodeFromInstance(t):window;if(r(u)?A?i=s:a=l:P(u)?L?i=f:(i=m,a=h):v(u)&&(i=g),i){var c=i(e,t);if(c){var p=N.getPooled(M.change,c,n,o);return p.type="change",C.accumulateTwoPhaseDispatches(p),p}}a&&a(e,u,t)}};e.exports=F},function(e,t,n){"use strict";function r(e){return e.substring(1,e.indexOf(" "))}var o=n(16),i=n(5),a=n(156),u=n(8),s=n(84),l=n(1),c=/^(<[^ \/>]+)/,p="data-danger-index",d={dangerouslyRenderMarkup:function(e){i.canUseDOM?void 0:l(!1);for(var t,n={},o=0;o1?1-t:void 0;return this._fallbackText=o.slice(e,u),this._fallbackText}}),i.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";var r=n(15),o=r.injection.MUST_USE_PROPERTY,i=r.injection.HAS_BOOLEAN_VALUE,a=r.injection.HAS_SIDE_EFFECTS,u=r.injection.HAS_NUMERIC_VALUE,s=r.injection.HAS_POSITIVE_NUMERIC_VALUE,l=r.injection.HAS_OVERLOADED_BOOLEAN_VALUE,c={isCustomAttribute:RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+r.ATTRIBUTE_NAME_CHAR+"]*$")),Properties:{accept:0,acceptCharset:0,accessKey:0,action:0,allowFullScreen:i,allowTransparency:0,alt:0,async:i,autoComplete:0,autoPlay:i,capture:i,cellPadding:0,cellSpacing:0,charSet:0,challenge:0,checked:o|i,cite:0,classID:0,className:0,cols:s,colSpan:0,content:0,contentEditable:0,contextMenu:0,controls:i,coords:0,crossOrigin:0,data:0,dateTime:0,"default":i,defer:i,dir:0,disabled:i,download:l,draggable:0,encType:0,form:0,formAction:0,formEncType:0,formMethod:0,formNoValidate:i,formTarget:0,frameBorder:0,headers:0,height:0,hidden:i,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:i,low:0,manifest:0,marginHeight:0,marginWidth:0,max:0,maxLength:0,media:0,mediaGroup:0,method:0,min:0,minLength:0,multiple:o|i,muted:o|i,name:0,nonce:0,noValidate:i,open:i,optimum:0,pattern:0,placeholder:0,poster:0,preload:0,profile:0,radioGroup:0,readOnly:i,rel:0,required:i,reversed:i,role:0,rows:s,rowSpan:u,sandbox:0,scope:0,scoped:i,scrolling:0,seamless:i,selected:o|i,shape:0,size:s,sizes:0,span:s,spellCheck:0,src:0,srcDoc:0,srcLang:0,srcSet:0,start:u,step:0,style:0,summary:0,tabIndex:0,target:0,title:0,type:0,useMap:0,value:o|a,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:i,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=c},function(e,t,n){"use strict";var r=n(3),o=n(55),i=n(57),a=n(56),u=n(106),s=n(7),l=(n(61),n(70)),c=n(72),p=n(149),d=(n(2),s.createElement),f=s.createFactory,h=s.cloneElement,m=r,v={Children:{map:o.map,forEach:o.forEach,count:o.count,toArray:o.toArray,only:p},Component:i,createElement:d,cloneElement:h,isValidElement:s.isValidElement,PropTypes:l,createClass:a.createClass,createFactory:f,createMixin:function(e){return e},DOM:u,version:c,__spread:m};e.exports=v},function(e,t,n){"use strict";function r(e,t,n){var r=void 0===e[n];null!=t&&r&&(e[n]=i(t))}var o=n(17),i=n(78),a=(n(34),n(47)),u=n(48),s=(n(2),{instantiateChildren:function(e,t,n){if(null==e)return null;var o={};return u(e,r,o),o},updateChildren:function(e,t,n,r,u){if(t||e){var s,l;for(s in t)if(t.hasOwnProperty(s)){l=e&&e[s];var c=l&&l._currentElement,p=t[s];if(null!=l&&a(c,p))o.receiveComponent(l,p,r,u),t[s]=l;else{l&&(n[s]=o.getNativeNode(l),o.unmountComponent(l,!1));var d=i(p);t[s]=d}}for(s in e)!e.hasOwnProperty(s)||t&&t.hasOwnProperty(s)||(l=e[s],n[s]=o.getNativeNode(l),o.unmountComponent(l,!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},function(e,t,n){"use strict";function r(e){var t=e._currentElement._owner||null;if(t){var n=t.getName();if(n)return" Check the render method of `"+n+"`."}return""}function o(e){}function i(e,t){}function a(e){return e.prototype&&e.prototype.isReactComponent}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},s=n(3),l=n(36),c=n(13),p=n(7),d=n(37),f=n(38),h=(n(6),n(68)),m=n(25),v=(n(24),n(17)),g=n(71),y=n(29),b=n(1),C=n(47);n(2);o.prototype.render=function(){var e=f.get(this)._currentElement.type,t=e(this.props,this.context,this.updater);return i(e,t),t};var _=1,E={construct:function(e){this._currentElement=e,this._rootNodeID=null,this._instance=null,this._nativeParent=null,this._nativeContainerInfo=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,r){this._context=r,this._mountOrder=_++,this._nativeParent=t,this._nativeContainerInfo=n;var s,l=this._processProps(this._currentElement.props),c=this._processContext(r),d=this._currentElement.type,h=this._constructComponent(l,c);a(d)||null!=h&&null!=h.render||(s=h,i(d,s),null===h||h===!1||p.isValidElement(h)?void 0:b(!1),h=new o(d));h.props=l,h.context=c,h.refs=y,h.updater=g,this._instance=h,f.set(h,this);var m=h.state;void 0===m&&(h.state=m=null),"object"!==("undefined"==typeof m?"undefined":u(m))||Array.isArray(m)?b(!1):void 0,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1;var v;return v=h.unstable_handleError?this.performInitialMountWithErrorHandling(s,t,n,e,r):this.performInitialMount(s,t,n,e,r),h.componentDidMount&&e.getReactMountReady().enqueue(h.componentDidMount,h),v},_constructComponent:function(e,t){return this._constructComponentWithoutOwner(e,t)},_constructComponentWithoutOwner:function(e,t){var n,r=this._currentElement.type;return n=a(r)?new r(e,t,g):r(e,t,g)},performInitialMountWithErrorHandling:function(e,t,n,r,o){var i,a=r.checkpoint();try{i=this.performInitialMount(e,t,n,r,o)}catch(u){r.rollback(a),this._instance.unstable_handleError(u),this._pendingStateQueue&&(this._instance.state=this._processPendingState(this._instance.props,this._instance.context)),a=r.checkpoint(),this._renderedComponent.unmountComponent(!0),r.rollback(a),i=this.performInitialMount(e,t,n,r,o)}return i},performInitialMount:function(e,t,n,r,o){var i=this._instance;i.componentWillMount&&(i.componentWillMount(),this._pendingStateQueue&&(i.state=this._processPendingState(i.props,i.context))),void 0===e&&(e=this._renderValidatedComponent()),this._renderedNodeType=h.getType(e),this._renderedComponent=this._instantiateReactComponent(e);var a=v.mountComponent(this._renderedComponent,r,t,n,this._processChildContext(o));return a},getNativeNode:function(){return v.getNativeNode(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&&(v.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=null,this._topLevelWrapper=null,f.remove(t)}},_maskContext:function(e){var t=this._currentElement.type,n=t.contextTypes;if(!n)return y;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"!==u(t.childContextTypes)?b(!1):void 0;for(var o in r)o in t.childContextTypes?void 0:b(!1);return s({},e,r)}return e},_processProps:function(e){return e},_checkPropTypes:function(e,t,n){var o=this.getName();for(var i in e)if(e.hasOwnProperty(i)){var a;try{"function"!=typeof e[i]?b(!1):void 0,a=e[i](t,i,o,n)}catch(u){a=u}if(a instanceof Error){r(this);n===m.prop}}},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?v.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 i,a,u=this._instance,s=!1;this._context===o?i=u.context:(i=this._processContext(o),s=!0),t===n?a=n.props:(a=this._processProps(n.props),s=!0),s&&u.componentWillReceiveProps&&u.componentWillReceiveProps(a,i);var l=this._processPendingState(a,i),c=!0;!this._pendingForceUpdate&&u.shouldComponentUpdate&&(c=u.shouldComponentUpdate(a,l,i)),this._updateBatchNumber=null,c?(this._pendingForceUpdate=!1,this._performComponentUpdate(n,a,l,i,e,o)):(this._currentElement=n,this._context=o,u.props=a,u.state=l,u.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 i=s({},o?r[0]:n.state),a=o?1:0;a=0||null!=t.is}function p(e){var t=e.type;l(t),this._currentElement=e,this._tag=t.toLowerCase(),this._namespaceURI=null,this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._nativeNode=null,this._nativeParent=null,this._rootNodeID=null,this._domID=null,this._nativeContainerInfo=null,this._wrapperState=null,this._topLevelWrapper=null,this._flags=0}var d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},f=n(3),h=n(88),m=n(90),v=n(16),g=n(54),y=n(15),b=n(32),C=n(10),_=n(18),E=n(22),x=n(23),N=n(58),w=n(101),S=n(59),P=n(4),T=n(109),k=n(111),M=n(60),R=n(114),D=(n(6),n(124)),O=n(128),I=(n(8),n(28)),A=n(1),L=(n(45),n(14)),U=(n(85),n(49),n(2),S),F=_.deleteListener,B=P.getNodeFromInstance,j=x.listenTo,V=E.registrationNameModules,W={string:!0,number:!0},K=L({style:null}),H=L({__html:null}),q={children:null,dangerouslySetInnerHTML:null,suppressContentEditableWarning:null},Y=11,z={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},X={listing:!0,pre:!0,textarea:!0},Q=f({menuitem:!0},G),$=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,Z={},J={}.hasOwnProperty,ee=1;p.displayName="ReactDOMComponent",p.Mixin={mountComponent:function(e,t,n,o){this._rootNodeID=ee++,this._domID=n._idCounter++,this._nativeParent=t,this._nativeContainerInfo=n;var i=this._currentElement.props;switch(this._tag){case"iframe":case"object":case"img":case"form":case"video":case"audio":this._wrapperState={listeners:null},e.getReactMountReady().enqueue(u,this);break;case"button":i=w.getNativeProps(this,i,t);break;case"input":T.mountWrapper(this,i,t),i=T.getNativeProps(this,i),e.getReactMountReady().enqueue(u,this);break;case"option":k.mountWrapper(this,i,t),i=k.getNativeProps(this,i);break;case"select":M.mountWrapper(this,i,t),i=M.getNativeProps(this,i),e.getReactMountReady().enqueue(u,this);break;case"textarea":R.mountWrapper(this,i,t),i=R.getNativeProps(this,i),e.getReactMountReady().enqueue(u,this)}r(this,i);var s,l;null!=t?(s=t._namespaceURI,l=t._tag):n._tag&&(s=n._namespaceURI,l=n._tag),(null==s||s===g.svg&&"foreignobject"===l)&&(s=g.html),s===g.html&&("svg"===this._tag?s=g.svg:"math"===this._tag&&(s=g.mathml)),this._namespaceURI=s;var c;if(e.useCreateElement){var p,d=n._ownerDocument;if(s===g.html)if("script"===this._tag){var f=d.createElement("div"),m=this._currentElement.type;f.innerHTML="<"+m+">",p=f.removeChild(f.firstChild)}else p=d.createElement(this._currentElement.type,i.is||null);else p=d.createElementNS(s,this._currentElement.type);P.precacheNode(this,p),this._flags|=U.hasCachedChildNodes,this._nativeParent||b.setAttributeForRoot(p),this._updateDOMProperties(null,i,e);var y=v(p);this._createInitialChildren(e,i,o,y),c=y}else{var C=this._createOpenTagMarkupAndPutListeners(e,i),_=this._createContentMarkup(e,i,o);c=!_&&G[this._tag]?C+"/>":C+">"+_+""}switch(this._tag){case"button":case"input":case"select":case"textarea":i.autoFocus&&e.getReactMountReady().enqueue(h.focusDOMComponent,this);break;case"option":e.getReactMountReady().enqueue(a,this)}return c},_createOpenTagMarkupAndPutListeners:function(e,t){var n="<"+this._currentElement.type;for(var r in t)if(t.hasOwnProperty(r)){var i=t[r];if(null!=i)if(V.hasOwnProperty(r))i&&o(this,r,i,e);else{r===K&&(i&&(i=this._previousStyleCopy=f({},t.style)),i=m.createMarkupForStyles(i,this));var a=null;null!=this._tag&&c(this._tag,t)?q.hasOwnProperty(r)||(a=b.createMarkupForCustomAttribute(r,i)):a=b.createMarkupForProperty(r,i),a&&(n+=" "+a)}}return e.renderToStaticMarkup?n:(this._nativeParent||(n+=" "+b.createMarkupForRoot()),n+=" "+b.createMarkupForID(this._domID))},_createContentMarkup:function(e,t,n){var r="",o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&(r=o.__html);else{var i=W[d(t.children)]?t.children:null,a=null!=i?null:t.children;if(null!=i)r=I(i);else if(null!=a){var u=this.mountChildren(a,e,n);r=u.join("")}}return X[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&&v.queueHTML(r,o.__html);else{var i=W[d(t.children)]?t.children:null,a=null!=i?null:t.children;if(null!=i)v.queueText(r,i);else if(null!=a)for(var u=this.mountChildren(a,e,n),s=0;s"},receiveComponent:function(){},getNativeNode:function(){return i.getNodeFromInstance(this)},unmountComponent:function(){i.uncacheNode(this)}}),e.exports=a},function(e,t,n){"use strict";function r(e){return o.createFactory(e)}var o=n(7),i=(n(61),n(162)),a=i({a:"a",abbr:"abbr",address:"address",area:"area",article:"article",aside:"aside",audio:"audio",b:"b",base:"base",bdi:"bdi",bdo:"bdo",big:"big",blockquote:"blockquote",body:"body",br:"br",button:"button",canvas:"canvas",caption:"caption",cite:"cite",code:"code",col:"col",colgroup:"colgroup",data:"data",datalist:"datalist",dd:"dd",del:"del",details:"details",dfn:"dfn",dialog:"dialog",div:"div",dl:"dl",dt:"dt",em:"em",embed:"embed",fieldset:"fieldset",figcaption:"figcaption",figure:"figure",footer:"footer",form:"form",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",head:"head",header:"header",hgroup:"hgroup",hr:"hr",html:"html",i:"i",iframe:"iframe",img:"img",input:"input",ins:"ins",kbd:"kbd",keygen:"keygen",label:"label",legend:"legend",li:"li",link:"link",main:"main",map:"map",mark:"mark",menu:"menu",menuitem:"menuitem",meta:"meta",meter:"meter",nav:"nav",noscript:"noscript",object:"object",ol:"ol",optgroup:"optgroup",option:"option",output:"output",p:"p",param:"param",picture:"picture",pre:"pre",progress:"progress",q:"q",rp:"rp",rt:"rt",ruby:"ruby",s:"s",samp:"samp",script:"script",section:"section",select:"select",small:"small",source:"source",span:"span",strong:"strong",style:"style",sub:"sub",summary:"summary",sup:"sup",table:"table",tbody:"tbody",td:"td",textarea:"textarea",tfoot:"tfoot",th:"th",thead:"thead",time:"time",title:"title",tr:"tr",track:"track",u:"u",ul:"ul","var":"var",video:"video",wbr:"wbr",circle:"circle",clipPath:"clipPath",defs:"defs",ellipse:"ellipse",g:"g",image:"image",line:"line",linearGradient:"linearGradient",mask:"mask",path:"path",pattern:"pattern",polygon:"polygon",polyline:"polyline",radialGradient:"radialGradient",rect:"rect",stop:"stop",svg:"svg",text:"text",tspan:"tspan"},r);e.exports=a},function(e,t){"use strict";var n={useCreateElement:!0};e.exports=n},function(e,t,n){"use strict";var r=n(31),o=n(4),i={dangerouslyProcessChildrenUpdates:function(e,t){var n=o.getNodeFromInstance(e);r.processUpdates(n,t)}};e.exports=i},function(e,t,n){"use strict";function r(){this._rootNodeID&&d.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);c.asap(r,this);var o=t.name;if("radio"===t.type&&null!=o){for(var i=l.getNodeFromInstance(this),a=i;a.parentNode;)a=a.parentNode;for(var u=a.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),i=void 0===t.end?o:Math.min(t.end,r);if(!n.extend&&o>i){var a=i;i=o,o=a}var u=l(e,o),s=l(e,i);if(u&&s){var p=document.createRange();p.setStart(u.node,u.offset),n.removeAllRanges(),o>i?(n.addRange(p),n.extend(s.node,s.offset)):(p.setEnd(s.node,s.offset),n.addRange(p))}}}var s=n(5),l=n(147),c=n(77),p=s.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:p?o:i,setOffsets:p?a:u};e.exports=d},function(e,t,n){"use strict";var r=n(3),o=n(31),i=n(16),a=n(4),u=(n(6),n(28)),s=n(1),l=(n(49),function(e){this._currentElement=e,this._stringText=""+e,this._nativeNode=null,this._nativeParent=null,this._domID=null,this._mountIndex=0,this._closingComment=null,this._commentNodes=null});r(l.prototype,{mountComponent:function(e,t,n,r){var o=n._idCounter++,s=" react-text: "+o+" ",l=" /react-text ";if(this._domID=o,this._nativeParent=t,e.useCreateElement){var c=n._ownerDocument,p=c.createComment(s),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)),a.precacheNode(this,p),this._closingComment=d,f}var h=u(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.getNativeNode();o.replaceDelimitedText(r[0],r[1],n)}}},getNativeNode:function(){var e=this._commentNodes;if(e)return e;if(!this._closingComment)for(var t=a.getNodeFromInstance(this),n=t.nextSibling;;){if(null==n?s(!1):void 0,8===n.nodeType&&" /react-text "===n.nodeValue){this._closingComment=n;break}n=n.nextSibling}return e=[this._nativeNode,this._closingComment],this._commentNodes=e,e},unmountComponent:function(){this._closingComment=null,this._commentNodes=null,a.uncacheNode(this)}}),e.exports=l},function(e,t,n){"use strict";function r(){this._rootNodeID&&d.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);return c.asap(r,this),n}var i=n(3),a=n(21),u=n(32),s=n(35),l=n(4),c=n(9),p=n(1),d=(n(2),{getNativeProps:function(e,t){null!=t.dangerouslySetInnerHTML?p(!1):void 0;var n=i({},a.getNativeProps(e,t),{defaultValue:void 0,value:void 0,children:e._wrapperState.initialValue,onChange:e._wrapperState.onChange});return n},mountWrapper:function(e,t){var n=t.defaultValue,r=t.children;null!=r&&(null!=n?p(!1):void 0,Array.isArray(r)&&(r.length<=1?void 0:p(!1),r=r[0]),n=""+r),null==n&&(n="");var i=s.getValue(t);e._wrapperState={initialValue:""+(null!=i?i:n),listeners:null,onChange:o.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=s.getValue(t);null!=n&&u.setValueForProperty(l.getNodeFromInstance(e),"value",""+n)}});e.exports=d},function(e,t,n){"use strict";function r(e,t){"_nativeNode"in e?void 0:s(!1),"_nativeNode"in t?void 0:s(!1);for(var n=0,r=e;r;r=r._nativeParent)n++;for(var o=0,i=t;i;i=i._nativeParent)o++;for(;n-o>0;)e=e._nativeParent,n--;for(;o-n>0;)t=t._nativeParent,o--;for(var a=n;a--;){if(e===t)return e;e=e._nativeParent,t=t._nativeParent}return null}function o(e,t){"_nativeNode"in e?void 0:s(!1),"_nativeNode"in t?void 0:s(!1);for(;t;){if(t===e)return!0;t=t._nativeParent}return!1}function i(e){return"_nativeNode"in e?void 0:s(!1),e._nativeParent}function a(e,t,n){for(var r=[];e;)r.push(e),e=e._nativeParent;var o;for(o=r.length;o-- >0;)t(r[o],!1,n);for(o=0;o0;)n(s[l],!1,i)}var s=n(1);e.exports={isAncestor:o,getLowestCommonAncestor:r,getParentInstance:i,traverseTwoPhase:a,traverseEnterLeave:u}},function(e,t,n){"use strict";var r,o=(n(15),n(22),n(2),{onCreateMarkupForProperty:function(e,t){r(e)},onSetValueForProperty:function(e,t,n){r(t)},onDeleteValueForProperty:function(e,t){r(t)}});e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,o,i){}function o(e){}var i=(n(5),n(165),n(2),[]),a={addDevtool:function(e){i.push(e)},removeDevtool:function(e){for(var t=0;t/,i=/^<\!\-\-/,a={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return i.test(e)?e:e.replace(o," "+a.CHECKSUM_ATTR_NAME+'="'+t+'"$&')},canReuseMarkup:function(e,t){var n=t.getAttribute(a.CHECKSUM_ATTR_NAME);n=n&&parseInt(n,10);var o=r(e);return o===n}};e.exports=a},function(e,t,n){"use strict";function r(e,t,n){return{type:p.INSERT_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:n,afterNode:t}}function o(e,t,n){return{type:p.MOVE_EXISTING,content:null,fromIndex:e._mountIndex,fromNode:d.getNativeNode(e),toIndex:n,afterNode:t}}function i(e,t){return{type:p.REMOVE_NODE,content:null,fromIndex:e._mountIndex,fromNode:t,toIndex:null,afterNode:null}}function a(e){return{type:p.SET_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function u(e){return{type:p.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){c.processChildrenUpdates(e,t)}var c=n(36),p=(n(6),n(66)),d=(n(13),n(17)),f=n(98),h=(n(8),n(145)),m=n(1),v={Mixin:{_reconcilerInstantiateChildren:function(e,t,n){return f.instantiateChildren(e,t,n)},_reconcilerUpdateChildren:function(e,t,n,r,o){var i;return i=h(t),f.updateChildren(e,i,n,r,o),i},mountChildren:function(e,t,n){var r=this._reconcilerInstantiateChildren(e,t,n);this._renderedChildren=r;var o=[],i=0;for(var a in r)if(r.hasOwnProperty(a)){var u=r[a],s=d.mountComponent(u,t,this,this._nativeContainerInfo,n);u._mountIndex=i++,o.push(s)}return o},updateTextContent:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&m(!1);var r=[u(e)];l(this,r)},updateMarkup:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&m(!1);var r=[a(e)];l(this,r)},updateChildren:function(e,t,n){this._updateChildren(e,t,n)},_updateChildren:function(e,t,n){var r=this._renderedChildren,o={},i=this._reconcilerUpdateChildren(r,e,o,t,n);if(i||r){var a,u=null,c=0,p=0,f=null;for(a in i)if(i.hasOwnProperty(a)){var h=r&&r[a],m=i[a];h===m?(u=s(u,this.moveChild(h,f,p,c)),c=Math.max(h._mountIndex,c),h._mountIndex=p):(h&&(c=Math.max(h._mountIndex,c)),u=s(u,this._mountChildAtIndex(m,f,p,t,n))),p++,f=d.getNativeNode(m)}for(a in o)o.hasOwnProperty(a)&&(u=s(u,this._unmountChild(r[a],o[a])));u&&l(this,u),this._renderedChildren=i}},unmountChildren:function(e){var t=this._renderedChildren;f.unmountChildren(t,e),this._renderedChildren=null},moveChild:function(e,t,n,r){if(e._mountIndex=t)return{node:o,offset:t-i};i=a}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(!a[e])return e;var t=a[e];for(var n in t)if(t.hasOwnProperty(n)&&n in s)return u[e]=t[n];return""}var i=n(5),a={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},u={},s={};i.canUseDOM&&(s=document.createElement("div").style,"AnimationEvent"in window||(delete a.animationend.animation,delete a.animationiteration.animation,delete a.animationstart.animation),"TransitionEvent"in window||delete a.transitionend.transition),e.exports=o},function(e,t,n){"use strict";function r(e){return o.isValidElement(e)?void 0:i(!1),e}var o=n(7),i=n(1);e.exports=r},function(e,t,n){"use strict";function r(e){return'"'+o(e)+'"'}var o=n(28);e.exports=r},function(e,t,n){"use strict";var r=n(65);e.exports=r.renderSubtreeIntoContainer},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(i,"ms-"))}var o=n(152),i=/^-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(161);e.exports=r},function(e,t,n){"use strict";function r(e){var t=e.length;if(Array.isArray(e)||"object"!==("undefined"==typeof e?"undefined":a(e))&&"function"!=typeof e?u(!1):void 0,"number"!=typeof t?u(!1):void 0,0===t||t-1 in e?void 0:u(!1),"function"==typeof e.callee?u(!1):void 0,e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(n){}for(var r=Array(t),o=0;o 2 | 3 | 4 | React Loading Bar | Simplest Youtube Like Loading Bar Component For React Js 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-loadingbar", 3 | "version": "0.0.1", 4 | "description": "Simplest Youtube Like Loading Bar Component For React Js", 5 | "main": "./src/js/components/index.js", 6 | "style": "./src/sass/_LoadingBar.sass", 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --hot", 9 | "build": "webpack -p" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/BosNaufal/react-loading-bar.git" 14 | }, 15 | "keywords": [ 16 | "web-components", 17 | "react", 18 | "component", 19 | "react js", 20 | "loading", 21 | "loading bar", 22 | "component", 23 | "progress" 24 | ], 25 | "author": "Naufal Rabbani ", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/BosNaufal/react-loading-bar/issues" 29 | }, 30 | "homepage": "https://github.com/BosNaufal/react-loading-bar#readme", 31 | "devDependencies": { 32 | "babel-loader": "^6.2.4", 33 | "babel-preset-es2015": "^6.6.0", 34 | "babel-preset-react": "^6.5.0", 35 | "css-loader": "^0.23.1", 36 | "es6-promise": "^3.1.2", 37 | "sass-loader": "^3.2.0", 38 | "style-loader": "^0.13.1", 39 | "webpack": "^1.13.0", 40 | "webpack-dev-server": "^1.14.1" 41 | }, 42 | "dependencies": { 43 | "react": "^15.0.2", 44 | "react-dom": "^15.0.2" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/js/components/app.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | require('../../sass/main.sass') 6 | 7 | import LoadingBar from './index.js'; 8 | 9 | class App extends React.Component { 10 | 11 | constructor() { 12 | super(); 13 | this.state = { 14 | progress: 0, 15 | direction: "right", 16 | error: false 17 | } 18 | } 19 | 20 | render(){ 21 | 22 | let { progress, error, direction } = this.state 23 | let { progressTo, changeDirection, setToError, errorDone, progressDone } = this 24 | 25 | return( 26 |
27 | 33 | 34 |
35 |

React Loading Bar

36 |

Progress is { progress }% { error }

37 |
38 | 39 | 40 | 41 | 42 | 43 |
44 |
45 |
46 |

Fork Me On Github!

47 |
48 | ) 49 | } 50 | 51 | // Events 52 | progressTo(number) { 53 | this.setState({ progress: number }) 54 | } 55 | 56 | changeDirection() { 57 | let { direction } = this.state 58 | this.setState({ direction: direction === 'right' ? 'left' : 'right' }) 59 | } 60 | 61 | setToError(bool){ 62 | this.setState({ error: bool }) 63 | } 64 | 65 | // Callback 66 | errorDone(){ 67 | this.setState({ error: false }) 68 | } 69 | 70 | progressDone() { 71 | this.setState({ progress: 0 }) 72 | } 73 | 74 | } 75 | 76 | ReactDOM.render(, document.getElementById("app")) 77 | -------------------------------------------------------------------------------- /src/js/components/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { PropTypes } from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | require('../../sass/_LoadingBar.sass') 6 | 7 | class LoadingBar extends React.Component { 8 | 9 | constructor() { 10 | super() 11 | 12 | // Initial State 13 | this.state = { 14 | // To show 15 | show: true, 16 | 17 | // binding class when it end 18 | full: '', 19 | 20 | // state to animate the width of loading bar 21 | width: 0, 22 | 23 | // indicate the loading bar is in 100% ( so, wait it till gone ) 24 | wait: false, 25 | 26 | // Error State 27 | myError: false 28 | } 29 | } 30 | 31 | render(){ 32 | 33 | let { direction, className, id } = this.props 34 | let { width, show, full, myError } = this.state 35 | 36 | return( 37 |
38 | { show ? 39 |
47 |
48 |
49 | : null } 50 |
51 | ) 52 | } 53 | 54 | componentWillReceiveProps(nextProps) { 55 | 56 | // Watching Progress Changes 57 | if(nextProps.progress !== this.props.progress){ 58 | this.setState({ width: nextProps.progress }, this.isFull.bind(this)) 59 | } 60 | 61 | // Watching Error 62 | if(nextProps.error !== this.props.error){ 63 | if(nextProps.error) this.setState({ width: 100, myError: true }, this.isFull.bind(this)); 64 | } 65 | 66 | } 67 | 68 | // Check whether the proggress is full 69 | isFull() { 70 | // Full Indicator 71 | let isFull = this.state.width === 100 72 | 73 | // When the progress end or full 74 | if(isFull){ 75 | // Prevent new progress change 76 | this.setState({ wait: true }) 77 | 78 | // Start animate it 79 | setTimeout(() => { 80 | 81 | // animate when element removed 82 | this.setState({ 83 | full: true, 84 | myError: false 85 | }) 86 | 87 | this.props.onErrorDone() 88 | 89 | setTimeout(() => { 90 | this.setState({ 91 | //remove bar element 92 | show: false, 93 | // New Element is available to create now 94 | width: 0, 95 | wait: false 96 | }) 97 | 98 | setTimeout(() => { 99 | 100 | this.setState({ 101 | // Show Bar 102 | full: '', 103 | show: true 104 | }) 105 | 106 | this.props.onProgressDone() 107 | 108 | }); 109 | 110 | // Duration to Waiting for slick hiding animation 111 | },250); 112 | 113 | // Duration is depend on css animation-duration of loading-bar 114 | },700); 115 | } 116 | } 117 | 118 | styling(){ 119 | // When loading bar still in progress 120 | if(!this.state.wait){ 121 | return { width: `${this.state.width}%` }; 122 | 123 | // When loading bar end 124 | }else{ 125 | // Make it stuck at 100 to waiting the animation 126 | return{ width: `100%` }; 127 | } 128 | } 129 | 130 | 131 | } 132 | 133 | // The Props 134 | LoadingBar.propTypes = { 135 | id: PropTypes.string, 136 | className: PropTypes.string, 137 | progress: PropTypes.number, 138 | direction: PropTypes.string, 139 | error: PropTypes.bool, 140 | onErrorDone: PropTypes.func, 141 | onProgressDone: PropTypes.func 142 | } 143 | 144 | LoadingBar.defaultProps = { 145 | progress: 0, 146 | direction: 'right', 147 | onErrorDone: () => {}, 148 | onProgressDone: () => {} 149 | } 150 | 151 | 152 | export default LoadingBar; 153 | -------------------------------------------------------------------------------- /src/sass/_LoadingBar.sass: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal) 2 | * Licensed Under MIT (http://opensource.org/licenses/MIT) 3 | * 4 | * React Loading Bar - Version 0.0.1 5 | * 6 | */ 7 | 8 | .LoadingBar 9 | transition: all 0.3s ease 10 | -moz-transition: all 0.3s ease 11 | -webkit-transition: all 0.3s ease 12 | -o-transition: all 0.3s ease 13 | position: fixed 14 | top: 0 15 | background: #1AF184 16 | height: 3px 17 | opacity: 1 18 | 19 | &-glow 20 | top: 0 21 | position: absolute 22 | width: 100px 23 | height: 100% 24 | box-shadow: -3px 0 15px 1px rgba(0, 255, 231, 0.4) 25 | 26 | &--to_right 27 | left: 0 28 | 29 | .LoadingBar-glow 30 | right: 0 31 | 32 | &--to_left 33 | right: 0 34 | 35 | .LoadingBar-glow 36 | left: 0 37 | 38 | &--full 39 | transition: all 0.1s ease 40 | -moz-transition: all 0.1s ease 41 | -webkit-transition: all 0.1s ease 42 | -o-transition: all 0.1s ease 43 | height: 0 44 | opacity: 0 45 | 46 | &--error 47 | background: #F44336 48 | 49 | .LoadingBar-glow 50 | box-shadow: -3px 0 15px 1px rgba(244, 67, 54, 0.4) 51 | -------------------------------------------------------------------------------- /src/sass/main.sass: -------------------------------------------------------------------------------- 1 | 2 | body 3 | font-family: sans-serif 4 | 5 | h1 6 | margin-top: 95px 7 | 8 | p 9 | margin-bottom: 45px 10 | 11 | h1,p, .text-center 12 | text-align: center 13 | 14 | button 15 | font-size: 15px 16 | outline: none 17 | color: #0EC77A 18 | cursor: pointer 19 | border: 1px solid #0EC77A 20 | background: none 21 | border-radius: 3px 22 | padding: 10px 15px 23 | display: block 24 | margin: 20px auto 25 | 26 | button:hover 27 | color: #fff 28 | background: #0EC77A 29 | 30 | button.error 31 | color: #F11A1A 32 | border-color: #F11A1A 33 | 34 | button.error:hover 35 | color: white 36 | background: #F11A1A 37 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | var webpack = require('webpack'); 3 | require('es6-promise').polyfill(); 4 | 5 | module.exports = { 6 | 7 | entry: './src/js/components/app.js', 8 | 9 | output: { 10 | path: './build', 11 | filename: 'build.js' 12 | }, 13 | 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.js$/, 18 | loader: 'babel' 19 | }, 20 | { 21 | test: /\.sass$/, 22 | loaders: ['style','css', 'sass'] 23 | } 24 | ] 25 | }, 26 | plugins: [ 27 | new webpack.DefinePlugin({ 28 | 'process.env': { 29 | 'NODE_ENV': '"production"' 30 | } 31 | }) 32 | ] 33 | 34 | }; 35 | --------------------------------------------------------------------------------