react-toggle-button/demo/react-toggle-buttonDemo.js

A React Component.

!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){e.exports=n(17)},function(e,t,n){"use strict";e.exports=n(40)},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){e.exports=n(28)()},function(e,t){"use strict";function n(e){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]="number"==typeof e[n]?e[n]:e[n].val);return t}t.__esModule=!0,t.default=n,e.exports=t.default},function(e,t,n){(function(t){(function(){var n,r,o;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof t&&null!==t&&t.hrtime?(e.exports=function(){return(n()-o)/1e6},r=t.hrtime,n=function(){var e;return e=r(),1e9*e[0]+e[1]},o=n()):Date.now?(e.exports=function(){return Date.now()-o},o=Date.now()):(e.exports=function(){return(new Date).getTime()-o},o=(new Date).getTime())}).call(this)}).call(t,n(12))},function(e,t,n){(function(t){for(var r=n(30),o="undefined"==typeof window?t:window,a=["moz","webkit"],l="AnimationFrame",i=o["request"+l],u=o["cancel"+l]||o["cancelRequest"+l],c=0;!i&&c<a.length;c++)i=o[a[c]+"Request"+l],u=o[a[c]+"Cancel"+l]||o[a[c]+"CancelRequest"+l];if(!i||!u){var s=0,f=0,p=[],d=1e3/60;i=function(e){if(0===p.length){var t=r(),n=Math.max(0,d-(t-s));s=n+t,setTimeout(function(){var e=p.slice(0);p.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(s)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return p.push({handle:++f,callback:e,cancelled:!1}),f},u=function(e){for(var t=0;t<p.length;t++)p[t].handle===e&&(p[t].cancelled=!0)}}e.exports=function(e){return i.call(o,e)},e.exports.cancel=function(){u.apply(o,arguments)},e.exports.polyfill=function(e){e||(e=o),e.requestAnimationFrame=i,e.cancelAnimationFrame=u}}).call(t,function(){return this}())},function(e,t){"use strict";function n(e){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=0);return t}t.__esModule=!0,t.default=n,e.exports=t.default},function(e,t){"use strict";function n(e,t,n){for(var r in t)if(Object.prototype.hasOwnProperty.call(t,r)){if(0!==n[r])return!1;var o="number"==typeof t[r]?t[r]:t[r].val;if(e[r]!==o)return!1}return!0}t.__esModule=!0,t.default=n,e.exports=t.default},function(e,t){"use strict";function n(e,t,n,o,a,l,i){var u=-a*(t-o),c=-l*n,s=u+c,f=n+s*e,p=t+f*e;return Math.abs(f)<i&&Math.abs(p-o)<i?(r[0]=o,r[1]=0,r):(r[0]=p,r[1]=f,r)}t.__esModule=!0,t.default=n;var r=[0,0];e.exports=t.default},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t){"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function r(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==r.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;e.exports=r()?Object.assign:function(e,t){for(var r,i,u=n(e),c=1;c<arguments.length;c++){r=Object(arguments[c]);for(var s in r)a.call(r,s)&&(u[s]=r[s]);if(o){i=o(r);for(var f=0;f<i.length;f++)l.call(r,i[f])&&(u[i[f]]=r[i[f]])}}return u}},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(s===setTimeout)return setTimeout(e,0);if((s===n||!s)&&setTimeout)return s=setTimeout,setTimeout(e,0);try{return s(e,0)}catch(t){try{return s.call(null,e,0)}catch(t){return s.call(this,e,0)}}}function a(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function l(){m&&d&&(m=!1,d.length?h=d.concat(h):y=-1,h.length&&i())}function i(){if(!m){var e=o(l);m=!0;for(var t=h.length;t;){for(d=h,h=[];++y<t;)d&&d[y].run();y=-1,t=h.length}d=null,m=!1,a(e)}}function u(e,t){this.fun=e,this.array=t}function c(){}var s,f,p=e.exports={};!function(){try{s="function"==typeof setTimeout?setTimeout:n}catch(e){s=n}try{f="function"==typeof clearTimeout?clearTimeout:r}catch(e){f=r}}();var d,h=[],m=!1,y=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];h.push(new u(e,t)),1!==h.length||m||o(i)},u.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.prependListener=c,p.prependOnceListener=c,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t){"use strict";t.__esModule=!0,t.default={noWobble:{stiffness:170,damping:26},gentle:{stiffness:120,damping:14},wobbly:{stiffness:180,damping:12},stiff:{stiffness:210,damping:20}},e.exports=t.default},function(e,t){"use strict";function n(e){var t=e;if(i[t])return i[t];t=t.replace("#",""),3===t.length&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]);var n=t.match(/.{2}/g),r={r:parseInt(n[0],16),g:parseInt(n[1],16),b:parseInt(n[2],16)};return i[t]=r,r}function r(e){var t=e.indexOf("rgb")!=-1,n=e.indexOf("rgba")!=-1,r=e.match(/\d+/g);if(t&&!n)return{r:parseInt(r[0]),g:parseInt(r[1]),b:parseInt(r[2])};if(t&&n){var o="0"==r[3]?"0."+r[4]:r[3];return{r:parseInt(r[0]),g:parseInt(r[1]),b:parseInt(r[2]),a:parseFloat(o)}}return null}function o(e,t,n){var r=e.toString(16),o=t.toString(16),a=n.toString(16);return r=r.length<2?"0"+r:r,o=o.length<2?"0"+o:o,a=a.length<2?"0"+a:a,"#"+r+o+a}function a(e,t,n,r,o){var a=n-t,l=o-r,i=(e-t)/a;return r+i*l}function l(e,t,n,o,l,i){var u=void 0===o?0:o,c=void 0===l?1:l,s=r(t),f=r(n),p=Math.floor(a(e,u,c,s.r,f.r)),d=Math.floor(a(e,u,c,s.g,f.g)),h=Math.floor(a(e,u,c,s.b,f.b)),m=!1,y=null;return s.a&&f.a&&(m=!0,y=a(e,u,c,s.a,f.a)),y?"rgb("+p+","+d+","+h+","+y+")":"rgb("+p+","+d+","+h+")"}Object.defineProperty(t,"__esModule",{value:!0}),t.hexToRGB=n,t.rgbToObj=r,t.rgbToHex=o,t.mapValueInRange=a,t.interpolateColor=l;var i={}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.X=t.Check=void 0;var o=n(1),a=r(o);t.Check=function(){return a.default.createElement("svg",{width:"14",height:"10",viewBox:"0 0 14 11",xmlns:"http://www.w3.org/2000/svg"},a.default.createElement("title",null,"switch-check"),a.default.createElement("path",{d:"M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0",fill:"#fff",fillRule:"evenodd"}))},t.X=function(){return a.default.createElement("svg",{width:"10",height:"10",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},a.default.createElement("title",null,"switch-x"),a.default.createElement("path",{d:"M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12",fill:"#fff",fillRule:"evenodd"}))}},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(!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 l(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=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(1),s=r(c),f=n(37),p=n(3),d=r(p),h=n(18),m=n(14),y={active:{base:"rgb(1,124,66)",hover:"rgb(1,124,66)"},inactive:{base:"rgb(65,66,68)",hover:"rgb(65,66,68)"},activeThumb:{base:"rgb(250,250,250)",hover:"rgb(250,250,250)"},inactiveThumb:{base:"rgb(250,250,250)",hover:"rgb(250,250,250)"}},v={},g=function(e){function t(e){o(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={isHover:!1},n}return l(t,e),u(t,[{key:"onMouseOver",value:function(){this.setState({isHover:!0})}},{key:"onMouseOut",value:function(){this.setState({isHover:!1})}},{key:"_convertToRgb",value:function(e,t){if(e.indexOf("#")!=-1){var n=(0,m.hexToRGB)(e);return"rgb("+n.r+", "+n.g+", "+n.b+")"}return e.indexOf("rgb")==-1?t:e}},{key:"checkAllColors",value:function(e){var t=this;return Object.keys(e).forEach(function(n){t.checkColors(e,n)}),e}},{key:"checkColors",value:function(e,t){e[t]?e[t].hover?(e[t].base=this._convertToRgb(e[t].base,y[t].base),e[t].hover=this._convertToRgb(e[t].hover,y[t].hover)):e[t].base?(e[t].base=this._convertToRgb(e[t].base,y[t].base),e[t].hover=e[t].base):(console.warn('Color prop should have a "base" style and a "hover" style!'),e[t]=y[t]):e[t]=y[t]}},{key:"interpolateColorWithHover",value:function(e,t,n){var r=this.props.colors;return this.checkColors(r,t),this.checkColors(r,n),this.state.isHover?{backgroundColor:(0,m.interpolateColor)(e,r[t].hover,r[n].hover,0,400)}:{backgroundColor:(0,m.interpolateColor)(e,r[t].base,r[n].base,0,400)}}},{key:"makeStyle",value:function(e,t){return this.state.isHover?i({},e,t):e}},{key:"handleClick",value:function(e){e.target!==this._input&&(e.preventDefault(),this._input.focus(),this._input.click())}},{key:"render",value:function(){var e=this,t=this.props,n=t.internalSpringSetting,r=t.internalHoverSpringSetting,o=t.value,a=t.thumbAnimateRange,l=(t.isHover,t.containerStyle),u=t.trackStyle,c=t.animateTrackStyleToggle,p=t.animateTrackStyleHover,d=t.thumbStyleHover,m=t.trackStyleHover,y=t.activeLabelStyle,v=t.activeLabelStyleHover,g=t.activeLabel,b=t.inactiveLabelStyle,T=t.inactiveLabelStyleHover,k=t.inactiveLabel,S=t.thumbStyle,w=t.animateThumbStyleHover,C=t.animateThumbStyleToggle,x=t.thumbIcon,E=t.onClick,P=t.onToggle,O=t.passThroughInputProps,_=n,I=r;return s.default.createElement(f.Motion,{style:{opacity:(0,f.spring)(o?1:0,_),left:(0,f.spring)(o?10*a[1]:10*a[0],_),colorNumber:(0,f.spring)(o?0:400,_),toggleNumber:(0,f.spring)(o?400:0,_),hoverNumber:(0,f.spring)(this.state.isHover?400:0,I)}},function(t){var n=t.opacity,r=t.left,a=t.colorNumber,f=t.hoverNumber,_=t.toggleNumber;return s.default.createElement("div",{style:i({},e.makeStyle(i({},h.reactToggle,l))),onMouseOver:e.onMouseOver.bind(e),onMouseOut:e.onMouseOut.bind(e),onClick:e.handleClick.bind(e)},s.default.createElement("div",{style:i({},e.makeStyle(i({},h.reactToggleTrack,u,e.interpolateColorWithHover(a,"active","inactive"),c(_/400)),i({},m,p(f/400))))},s.default.createElement("div",{style:i({},e.makeStyle(i({},h.reactToggleOn,y),v),{opacity:n})},g),s.default.createElement("div",{style:i({},e.makeStyle(i({},h.reactToggleOff,b),T),{opacity:1-n})},k)),s.default.createElement("div",{style:h.reactThumbCenteringContainer},s.default.createElement("div",{style:i({},e.makeStyle(i({},h.reactToggleThumb,S,e.interpolateColorWithHover(a,"activeThumb","inactiveThumb"),C(_/400)),i({},d,w(f/400))),{position:"relative",left:Math.round(r/10)})},x)),s.default.createElement("input",i({ref:function(t){e._input=t},type:"checkbox",style:h.reactToggleScreenReaderOnly,onClick:function(e){E&&E(e),P(o)},value:o},O)))})}}]),t}(c.Component);g.defaultProps={value:!1,onToggle:function(){},colors:y,passThroughInputProps:{},activeLabel:"ON",containerStyle:v,activeLabelStyle:v,activeLabelStyleHover:v,inactiveLabel:"OFF",inactiveLabelStyle:v,inactiveLabelStyleHover:v,thumbStyle:v,thumbStyleHover:v,animateThumbStyleHover:function(){return{}},animateThumbStyleToggle:function(){return{}},trackStyle:v,trackStyleHover:v,animateTrackStyleHover:function(){return{}},animateTrackStyleToggle:function(){return{}},thumbAnimateRange:[1,33],internalSpringSetting:{stiffness:180,damping:22},internalHoverSpringSetting:{stiffness:180,damping:20}},g.displayName="Toggle",t.default=g,g.propTypes={value:d.default.bool.isRequired,onToggle:d.default.func.isRequired,passThroughInputProps:d.default.object,onClick:d.default.func,colors:d.default.object,activeLabel:d.default.oneOfType([d.default.string,d.default.object]),containerStyle:d.default.object,activeLabelStyle:d.default.object,activeLabelStyleHover:d.default.object,activeThumbStyle:d.default.object,activeThumbStyleHover:d.default.object,inactiveLabel:d.default.oneOfType([d.default.string,d.default.object]),inactiveLabelStyle:d.default.object,inactiveLabelStyleHover:d.default.object,thumbStyle:d.default.object,thumbStyleHover:d.default.object,trackStyle:d.default.object,trackStyleHover:d.default.object,animateThumbStyleHover:d.default.func,animateTrackStyleHover:d.default.func,animateTrackStyleToggle:d.default.func,animateThumbStyleToggle:d.default.func,internalSpringSetting:d.default.object,internalHoverSpringSetting:d.default.object,thumbIcon:d.default.oneOfType([d.default.string,d.default.object]),thumbAnimateRange:d.default.array}},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(!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 l(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=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(1),s=r(c),f=n(32),p=n(16),d=r(p),h=n(15),m={container:{display:"flex",flexDirection:"column",alignItems:"center",flex:1,fontFamily:"Helvetica Neue"},exampleContainer:{display:"flex",alignItems:"center",flexDirection:"column"},titleStyle:{fontWeight:500},subTitleStyle:{fontWeight:500},exampleInternal:{display:"flex",flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},informationBlock:{display:"flex",flex:1,flexDirection:"column",alignItems:"center",justifyContent:"center"},toggleContainer:{height:100,width:800,display:"flex",alignItems:"center",justifyContent:"flex-start"},descriptionStyle:{lineHeight:1.5,fontWeight:500,fontSize:14,marginLeft:50,width:800,overflow:"auto"},codeBlock:{display:"flex",flex:1,width:800,overflow:"auto",backgroundColor:"#f5f5f5",fontSize:13,padding:10,border:"1px solid #ccc",borderRadius:4,marginBottom:-20}},y=[{code:"<ToggleButton\n  value={ self.state.value || false }\n  onToggle={(value) => {\n    self.setState({\n      value: !value,\n    })\n  }} />",description:"// ToggleButton requires only two props...\n\n\n// 'value', the state of the button.\n\n// 'onToggle', called on each click, is given the current state\n//  of the button.",example:function(e){return s.default.createElement(d.default,{value:e.state.value,onToggle:function(t){e.setState({value:!t})}})}},{code:"<ToggleButton\n  inactiveLabel={<X/>}\n  activeLabel={<Check/>}\n  value={self.state.value}\n  onToggle={(value) => {\n    self.setState({\n      value: !value,\n    })\n  }} />",description:"// Different labels example...\n\n// 'inactiveLabel' - a string or component to display when OFF.\n// 'activeLabel' - a string or component to display when ON.",example:function(e){return s.default.createElement(d.default,{value:e.state.value2,inactiveLabel:s.default.createElement(h.X,null),activeLabel:s.default.createElement(h.Check,null),onToggle:function(t){e.setState({value2:!t})}})}},{code:"<ToggleButton\n  inactiveLabel={''}\n  activeLabel={''}\n  colors={{\n    activeThumb: {\n      base: 'rgb(250,250,250)',\n    },\n    inactiveThumb: {\n      base: 'rgb(62,130,247)',\n    },\n    active: {\n      base: 'rgb(207,221,245)',\n      hover: 'rgb(177, 191, 215)',\n    },\n    inactive: {\n      base: 'rgb(65,66,68)',\n      hover: 'rgb(95,96,98)',\n    }\n  }}\n  trackStyle={styles.trackStyle}\n  thumbStyle={styles.thumbStyle}\n  thumbAnimateRange={[-10, 36]}\n  thumbIcon={<ThumbIcon/>}\n  value={self.state.value}\n  onToggle={(value) => {\n    self.setState({\n      value: !value,\n    })\n  }} />",description:"// Material Design example...\n\n// Your button can look very different, if you want.\n",example:function(e){return s.default.createElement(d.default,{value:e.state.value3,inactiveLabel:"",activeLabel:"",colors:{activeThumb:{base:"rgb(250,250,250)"},inactiveThumb:{base:"rgb(62,130,247)"},active:{base:"rgb(207,221,245)",hover:"rgb(177, 191, 215)"},inactive:{base:"rgb(65,66,68)",hover:"rgb(95,96,98)"}},trackStyle:{height:15},thumbStyle:{position:"absolute",width:30,height:30,boxShadow:"0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24)"},thumbAnimateRange:[-10,36],thumbIcon:s.default.createElement("div",{style:{position:"absolute",top:5.5,left:8}},s.default.createElement(h.Check,null)),onToggle:function(t){e.setState({value3:!t})}})}},{code:"<ToggleButton\n  // ... same props as above\n  thumbStyle={styles.thumbStyle}\n  thumbStyleHover={styles.thumbStyleHover}\n  animateThumbStyleHover={(n) => {\n    return {\n      boxShadow: `0 0 ${2 + 4*n}px rgba(0,0,0,.16),0 ${2 + 3*n}px ${4 + 8*n}px rgba(0,0,0,.32)`,\n    }\n  }} />",description:"// Such hover, much wow!\n\n// Hover and toggle animation props use a function\n// that lets you interpolate your own styles.\n",example:function(e){return s.default.createElement(d.default,{value:e.state.value4,inactiveLabel:"",activeLabel:"",colors:{activeThumb:{base:"rgb(250,250,250)"},inactiveThumb:{base:"rgb(62,130,247)"},active:{base:"rgb(207,221,245)",hover:"rgb(177, 191, 215)"},inactive:{base:"rgb(65,66,68)",hover:"rgb(95,96,98)"}},trackStyle:{height:15},thumbStyle:{position:"absolute",width:30,height:30,boxShadow:"0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24)",display:"flex",borderRadius:15,alignItems:"center",justifyContent:"center"},thumbStyleHover:{width:32,height:32},thumbAnimateRange:[-10,36],animateThumbStyleHover:function(e){return{boxShadow:"0 0 "+(2+4*e)+"px rgba(0,0,0,.16),0 "+(2+3*e)+"px "+(4+8*e)+"px rgba(0,0,0,.32)"}},thumbIcon:s.default.createElement("div",null,s.default.createElement(h.Check,null)),onToggle:function(t){e.setState({value4:!t})}})}},{code:"const borderRadiusStyle = { borderRadius: 2 }\n\n// ... some lines of code later\n\n<ToggleButton\n  value={ self.state.value || false }\n  thumbStyle={borderRadiusStyle}\n  trackStyle={borderRadiusStyle}\n  onToggle={(value) => {\n    self.setState({\n      value: !value,\n    })\n  }} />",description:"// A square toggle, just for funsies...",example:function(e){return s.default.createElement(d.default,{value:e.state.value5,thumbStyle:{borderRadius:2},trackStyle:{borderRadius:2},onToggle:function(t){e.setState({value5:!t})}})}}],v=function(e,t,n){var r=t.code,o=t.example,a=t.description,l=t.title;return s.default.createElement("div",{key:n,style:m.exampleContainer},s.default.createElement("h2",{style:m.subTitleStyle},l),s.default.createElement("div",{style:m.exampleInternal},s.default.createElement("pre",{style:m.descriptionStyle},a),s.default.createElement("div",{style:m.informationBlock},s.default.createElement("div",{style:m.toggleContainer},o(e)),s.default.createElement("pre",{style:m.codeBlock},r))))},g=function(e){function t(e){o(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={value:!1,value2:!1,value3:!1,value4:!1,value5:!1},n}return l(t,e),u(t,[{key:"render",value:function(){var e=this;return s.default.createElement("div",{style:m.container},s.default.createElement("pre",{style:i({},m.codeBlock,{width:145,marginBottom:20})},"react-toggle-button"),s.default.createElement("div",{style:{maxWidth:500,lineHeight:1.5,fontSize:16,fontWeight:500,marginBottom:10}},"A highly customizable and portable toggle button for React."),s.default.createElement("pre",{style:i({},m.codeBlock,{width:500,marginBottom:20})},"//  Easy to install and works out-of-the-box\n\n//  Change a few things, or change everything\n\n//  Uses react-motion for animating toggle.\n\n//  Animates hover states too!\n\n//  Quacks like an <input> checkbox, if that's your thing.\n\n//  Sticks to the UI stuff (Redux approved!)\n"),s.default.createElement("h1",{style:m.titleStyle},"Install"),s.default.createElement("pre",{style:i({},m.codeBlock,{marginBottom:20})},"npm install react-toggle-button"),s.default.createElement("pre",{style:i({},m.codeBlock,{marginTop:0,marginBottom:60})},"//ES6\nimport ToggleButton from 'react-toggle-button'\n\n//ES5\nvar ToggleButton = require('react-toggle-button')"),s.default.createElement("h1",{style:m.titleStyle}," Examples "),y.map(function(t,n){return v(e,t,n)}),s.default.createElement("div",{style:{marginBottom:50}}),s.default.createElement("h1",{style:m.subTitleStyle}," React Toggle Button API "),s.default.createElement("pre",{style:i({},m.codeBlock,{marginBottom:20})},"import ToggleButton from 'react-toggle-button'\n\n/**\n * 'react-toggle-button' PropTypes\n */\nToggleButton.propTypes = {\n  //\n  //\n  // REQUIRED PROPS\n  //\n  //\n\n  value: React.PropTypes.bool.isRequired,\n  /**\n   * Called during onClick\n   * 1. triggers 'focus' and 'click' on internal checkbox\n   * 2. calls onToggle(this.props.active)\n   */\n  onToggle: React.PropTypes.func.isRequired,\n\n  //\n  //\n  // OPTIONAL PROPS\n  //\n  //\n  /**\n   * Object with four properties { active, inactive, activeThumb, inactiveThumb }\n   *\n   * each property should have a 'base' key and a 'hover' key\n   * ( if hover is undefined, that property will use the base value )\n   *\n   */\n  colors: React.PropTypes.object,\n\n\n  /**\n   * The label used inside the track, can also take a component\n   *\n   * activeLabel (defaultValue: 'ON')\n   * inactiveLabel (defaultValue: 'OFF')\n   */\n  activeLabel: React.PropTypes.oneOfType([\n    React.PropTypes.string,\n    React.PropTypes.object,\n  ]),\n  inactiveLabel: React.PropTypes.oneOfType([\n    React.PropTypes.string,\n    React.PropTypes.object,\n  ]),\n\n\n  /**\n   * These props specify style,\n   * hover style is used during mouseOver event\n   *\n   *\n   */\n  activeLabelStyle: React.PropTypes.object,\n  activeLabelStyleHover: React.PropTypes.object,\n  activeThumbStyle: React.PropTypes.object,\n  activeThumbStyleHover: React.PropTypes.object,\n  inactiveLabelStyle: React.PropTypes.object,\n  inactiveLabelStyleHover: React.PropTypes.object,\n  thumbStyle: React.PropTypes.object,\n  thumbStyleHover: React.PropTypes.object,\n  trackStyle: React.PropTypes.object,\n  trackStyleHover: React.PropTypes.object,\n\n\n  /**\n   * These props take a function that receives a real number [0, 1] and\n   * returns an interpolated style.\n   *\n   * No Hover -> Hover :  0 -> 1 : No Toggle -> Toggle\n   */\n  animateThumbStyleHover: React.PropTypes.func,\n  animateTrackStyleHover: React.PropTypes.func,\n  animateTrackStyleToggle: React.PropTypes.func,\n  animateThumbStyleToggle: React.PropTypes.func,\n\n\n  /**\n   * passes through internal spring settings for react-motion\n   * { stiffness, damping }\n   */\n  internalSpringSetting: React.PropTypes.object,\n  internalHoverSpringSetting: React.PropTypes.object,\n\n\n  /**\n   * Optional if one wants an icon inside the thumb, take a string or component\n   */\n  thumbIcon: React.PropTypes.oneOfType([\n    React.PropTypes.string,\n    React.PropTypes.object,\n  ]),\n\n  /**\n   * The range to move the thumb on toggle [starting, ending]\n   */\n  thumbAnimateRange: React.PropTypes.array,\n\n  /**\n   * If you want to put some props on the underlying <input> element\n   * you can pass them through this prop.\n   *\n   * Example:\n   *\n   *  passThroughInputProps={{\n   *   \tonChange: () => console.log('Hello!')\n   *  }}\n   *\n   */\n   passThroughInputProps: React.PropTypes.object,\n\n}"))}}]),t}(c.Component);(0,f.render)(s.default.createElement(g,null),document.getElementById("root"))},function(e,t){"use strict";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=(t.reactToggle=n({display:"flex",width:52,alignItems:"center",justifyContent:"flex-start",position:"relative",cursor:"pointer",backgroundColor:"transparent",border:0,padding:0,WebkitTouchCallout:"none",WebkitUserSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none",WebkitTapHighlightColor:"rgba(0,0,0,0)"},"WebkitTapHighlightColor","transparent"),{fontSize:11,display:"flex",alignItems:"center",justifyContent:"center",fontFamily:"'Helvetica Neue', Helvetica, sans-serif"});t.reactToggleScreenReaderOnly={border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1},t.reactToggleTrack={width:"52px",height:"20px",padding:0,borderRadius:"26px",display:"flex",alignItems:"center",justifyContent:"center"},t.reactToggleOn=r({},o,{position:"relative",color:"#FAFAFA",marginTop:"auto",marginBottom:"auto",lineHeight:0,opacity:0,width:26,height:20,left:4}),t.reactToggleOff=r({},o,{position:"relative",color:"rgba(255,255,255,0.6)",bottom:"0px",marginTop:"auto",marginBottom:"auto",paddingRight:5,lineHeight:0,width:26,height:20}),t.reactToggleThumb={width:"18px",height:"18px",display:"flex",alignSelf:"center",boxShadow:"0 0 0 1px rgba(0,0,0,0.3)",borderRadius:"50%",WebkitBoxSizing:"border-box",MozBoxSizing:"border-box",boxSizing:"border-box"},t.reactThumbCenteringContainer={position:"absolute",height:"100%",top:0,left:0,display:"flex",flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"flex-start"}},function(e,t,n){"use strict";var r=n(2),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";var n=!("undefined"==typeof window||!window.document||!window.document.createElement),r={canUseDOM:n,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:n&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:n&&!!window.screen,isInWorker:!n};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(26);e.exports=r},function(e,t){"use strict";function n(e){try{e.focus()}catch(e){}}e.exports=n},function(e,t){"use strict";function n(e){if(e=e||("undefined"!=typeof document?document:void 0),"undefined"==typeof e)return null;try{return e.activeElement||e.body}catch(t){return e.body}}e.exports=n},function(e,t,n){"use strict";function r(e,t,n,r,a,l,i,u){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,r,a,l,i,u],f=0;c=new Error(t.replace(/%s/g,function(){return s[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=r},function(e,t){"use strict";function n(e){var t=e?e.ownerDocument||e:document,n=t.defaultView||window;return!(!e||!("function"==typeof n.Node?e instanceof n.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(25);e.exports=r},function(e,t){"use strict";function n(e,t){return e===t?0!==e||0!==t||1/e===1/t:e!==e&&t!==t}function r(e,t){if(n(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var r=Object.keys(e),a=Object.keys(t);if(r.length!==a.length)return!1;for(var l=0;l<r.length;l++)if(!o.call(t,r[l])||!n(e[r[l]],t[r[l]]))return!1;return!0}var o=Object.prototype.hasOwnProperty;e.exports=r},function(e,t,n){"use strict";var r=n(2),o=n(24),a=n(29);e.exports=function(){function e(e,t,n,r,l,i){i!==a&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){(function(){var n,r,o,a,l,i;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof t&&null!==t&&t.hrtime?(e.exports=function(){return(n()-l)/1e6},r=t.hrtime,n=function(){var e;return e=r(),1e9*e[0]+e[1]},a=n(),i=1e9*t.uptime(),l=a-i):Date.now?(e.exports=function(){return Date.now()-o},o=Date.now()):(e.exports=function(){return(new Date).getTime()-o},o=(new Date).getTime())}).call(this)}).call(t,n(12))},function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r<t;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);throw t=Error(n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."),t.name="Invariant Violation",t.framesToPop=1,t}function o(e,t){return(e&t)===t}function a(e,t){if(On.hasOwnProperty(e)||2<e.length&&("o"===e[0]||"O"===e[0])&&("n"===e[1]||"N"===e[1]))return!1;if(null===t)return!0;switch(typeof t){case"boolean":return On.hasOwnProperty(e)?e=!0:(t=l(e))?e=t.hasBooleanValue||t.hasStringBooleanValue||t.hasOverloadedBooleanValue:(e=e.toLowerCase().slice(0,5),e="data-"===e||"aria-"===e),e;case"undefined":case"number":case"string":case"object":return!0;default:return!1}}function l(e){return In.hasOwnProperty(e)?In[e]:null}function i(e){return e[1].toUpperCase()}function u(e,t,n,r,o,a,l,i,u){Bn._hasCaughtError=!1,Bn._caughtError=null;var c=Array.prototype.slice.call(arguments,3);
try{t.apply(n,c)}catch(e){Bn._caughtError=e,Bn._hasCaughtError=!0}}function c(){if(Bn._hasRethrowError){var e=Bn._rethrowError;throw Bn._rethrowError=null,Bn._hasRethrowError=!1,e}}function s(){if(Wn)for(var e in Kn){var t=Kn[e],n=Wn.indexOf(e);if(-1<n?void 0:r("96",e),!qn[n]){t.extractEvents?void 0:r("97",e),qn[n]=t,n=t.eventTypes;for(var o in n){var a=void 0,l=n[o],i=t,u=o;$n.hasOwnProperty(u)?r("99",u):void 0,$n[u]=l;var c=l.phasedRegistrationNames;if(c){for(a in c)c.hasOwnProperty(a)&&f(c[a],i,u);a=!0}else l.registrationName?(f(l.registrationName,i,u),a=!0):a=!1;a?void 0:r("98",o,e)}}}}function f(e,t,n){Qn[e]?r("100",e):void 0,Qn[e]=t,Gn[e]=t.eventTypes[n].dependencies}function p(e){Wn?r("101"):void 0,Wn=Array.prototype.slice.call(e),s()}function d(e){var t,n=!1;for(t in e)if(e.hasOwnProperty(t)){var o=e[t];Kn.hasOwnProperty(t)&&Kn[t]===o||(Kn[t]?r("102",t):void 0,Kn[t]=o,n=!0)}n&&s()}function h(e,t,n,r){t=e.type||"unknown-event",e.currentTarget=Jn(r),Bn.invokeGuardedCallbackAndCatchFirstError(t,n,void 0,e),e.currentTarget=null}function m(e,t){return null==t?r("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]}function y(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}function v(e,t){if(e){var n=e._dispatchListeners,r=e._dispatchInstances;if(Array.isArray(n))for(var o=0;o<n.length&&!e.isPropagationStopped();o++)h(e,t,n[o],r[o]);else n&&h(e,t,n,r);e._dispatchListeners=null,e._dispatchInstances=null,e.isPersistent()||e.constructor.release(e)}}function g(e){return v(e,!0)}function b(e){return v(e,!1)}function T(e,t){var n=e.stateNode;if(!n)return null;var o=Xn(n);if(!o)return null;n=o[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":(o=!o.disabled)||(e=e.type,o=!("button"===e||"input"===e||"select"===e||"textarea"===e)),e=!o;break e;default:e=!1}return e?null:(n&&"function"!=typeof n?r("231",t,typeof n):void 0,n)}function k(e,t,n,r){for(var o,a=0;a<qn.length;a++){var l=qn[a];l&&(l=l.extractEvents(e,t,n,r))&&(o=m(o,l))}return o}function S(e){e&&(er=m(er,e))}function w(e){var t=er;er=null,e?y(t,g):y(t,b),er?r("95"):void 0,Bn.rethrowCaughtError()}function C(e){if(e[or])return e[or];for(var t=[];!e[or];){if(t.push(e),!e.parentNode)return null;e=e.parentNode}var n=void 0,r=e[or];if(5===r.tag||6===r.tag)return r;for(;e&&(r=e[or]);e=t.pop())n=r;return n}function x(e){return 5===e.tag||6===e.tag?e.stateNode:void r("33")}function E(e){return e[ar]||null}function P(e){do e=e.return;while(e&&5!==e.tag);return e?e:null}function O(e,t,n){for(var r=[];e;)r.push(e),e=P(e);for(e=r.length;0<e--;)t(r[e],"captured",n);for(e=0;e<r.length;e++)t(r[e],"bubbled",n)}function _(e,t,n){(t=T(e,n.dispatchConfig.phasedRegistrationNames[t]))&&(n._dispatchListeners=m(n._dispatchListeners,t),n._dispatchInstances=m(n._dispatchInstances,e))}function I(e){e&&e.dispatchConfig.phasedRegistrationNames&&O(e._targetInst,_,e)}function N(e){if(e&&e.dispatchConfig.phasedRegistrationNames){var t=e._targetInst;t=t?P(t):null,O(t,_,e)}}function R(e,t,n){e&&n&&n.dispatchConfig.registrationName&&(t=T(e,n.dispatchConfig.registrationName))&&(n._dispatchListeners=m(n._dispatchListeners,t),n._dispatchInstances=m(n._dispatchInstances,e))}function M(e){e&&e.dispatchConfig.registrationName&&R(e._targetInst,null,e)}function D(e){y(e,I)}function L(e,t,n,r){if(n&&r)e:{for(var o=n,a=r,l=0,i=o;i;i=P(i))l++;i=0;for(var u=a;u;u=P(u))i++;for(;0<l-i;)o=P(o),l--;for(;0<i-l;)a=P(a),i--;for(;l--;){if(o===a||o===a.alternate)break e;o=P(o),a=P(a)}o=null}else o=null;for(a=o,o=[];n&&n!==a&&(l=n.alternate,null===l||l!==a);)o.push(n),n=P(n);for(n=[];r&&r!==a&&(l=r.alternate,null===l||l!==a);)n.push(r),r=P(r);for(r=0;r<o.length;r++)R(o[r],"bubbled",e);for(e=n.length;0<e--;)R(n[e],"captured",t)}function j(){return!ur&&bn.canUseDOM&&(ur="textContent"in document.documentElement?"textContent":"innerText"),ur}function A(){if(cr._fallbackText)return cr._fallbackText;var e,t,n=cr._startText,r=n.length,o=H(),a=o.length;for(e=0;e<r&&n[e]===o[e];e++);var l=r-e;for(t=1;t<=l&&n[r-t]===o[a-t];t++);return cr._fallbackText=o.slice(e,1<t?1-t:void 0),cr._fallbackText}function H(){return"value"in cr._root?cr._root.value:cr._root[j()]}function F(e,t,n,r){this.dispatchConfig=e,this._targetInst=t,this.nativeEvent=n,e=this.constructor.Interface;for(var o in e)e.hasOwnProperty(o)&&((t=e[o])?this[o]=t(n):"target"===o?this.target=r:this[o]=n[o]);return this.isDefaultPrevented=(null!=n.defaultPrevented?n.defaultPrevented:!1===n.returnValue)?kn.thatReturnsTrue:kn.thatReturnsFalse,this.isPropagationStopped=kn.thatReturnsFalse,this}function U(e,t,n,r){if(this.eventPool.length){var o=this.eventPool.pop();return this.call(o,e,t,n,r),o}return new this(e,t,n,r)}function V(e){e instanceof this?void 0:r("223"),e.destructor(),10>this.eventPool.length&&this.eventPool.push(e)}function z(e){e.eventPool=[],e.getPooled=U,e.release=V}function B(e,t,n,r){return F.call(this,e,t,n,r)}function W(e,t,n,r){return F.call(this,e,t,n,r)}function K(e,t){switch(e){case"topKeyUp":return-1!==pr.indexOf(t.keyCode);case"topKeyDown":return 229!==t.keyCode;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function q(e){return e=e.detail,"object"==typeof e&&"data"in e?e.data:null}function $(e,t){switch(e){case"topCompositionEnd":return q(t);case"topKeyPress":return 32!==t.which?null:(Sr=!0,Tr);case"topTextInput":return e=t.data,e===Tr&&Sr?null:e;default:return null}}function Q(e,t){if(wr)return"topCompositionEnd"===e||!dr&&K(e,t)?(e=A(),cr._root=null,cr._startText=null,cr._fallbackText=null,wr=!1,e):null;switch(e){case"topPaste":return null;case"topKeyPress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"topCompositionEnd":return br?null:t.data;default:return null}}function G(e){if(e=Zn(e)){xr&&"function"==typeof xr.restoreControlledState?void 0:r("194");var t=Xn(e.stateNode);xr.restoreControlledState(e.stateNode,e.type,t)}}function Y(e){Er?Pr?Pr.push(e):Pr=[e]:Er=e}function X(){if(Er){var e=Er,t=Pr;if(Pr=Er=null,G(e),t)for(e=0;e<t.length;e++)G(t[e])}}function Z(e,t){return e(t)}function J(e,t){if(Ir)return Z(e,t);Ir=!0;try{return Z(e,t)}finally{Ir=!1,X()}}function ee(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!Nr[e.type]:"textarea"===t}function te(e){return e=e.target||e.srcElement||window,e.correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}function ne(e,t){if(!bn.canUseDOM||t&&!("addEventListener"in document))return!1;t="on"+e;var n=t in document;return n||(n=document.createElement("div"),n.setAttribute(t,"return;"),n="function"==typeof n[t]),!n&&vr&&"wheel"===e&&(n=document.implementation.hasFeature("Events.wheel","3.0")),n}function re(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function oe(e){var t=re(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&"function"==typeof n.get&&"function"==typeof n.set)return Object.defineProperty(e,t,{enumerable:n.enumerable,configurable:!0,get:function(){return n.get.call(this)},set:function(e){r=""+e,n.set.call(this,e)}}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}function ae(e){e._valueTracker||(e._valueTracker=oe(e))}function le(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=re(e)?e.checked?"true":"false":e.value),e=r,e!==n&&(t.setValue(e),!0)}function ie(e,t,n){return e=F.getPooled(Rr.change,e,t,n),e.type="change",Y(n),D(e),e}function ue(e){S(e),w(!1)}function ce(e){var t=x(e);if(le(t))return e}function se(e,t){if("topChange"===e)return t}function fe(){Mr&&(Mr.detachEvent("onpropertychange",pe),Dr=Mr=null)}function pe(e){"value"===e.propertyName&&ce(Dr)&&(e=ie(Dr,e,te(e)),J(ue,e))}function de(e,t,n){"topFocus"===e?(fe(),Mr=t,Dr=n,Mr.attachEvent("onpropertychange",pe)):"topBlur"===e&&fe()}function he(e){if("topSelectionChange"===e||"topKeyUp"===e||"topKeyDown"===e)return ce(Dr)}function me(e,t){if("topClick"===e)return ce(t)}function ye(e,t){if("topInput"===e||"topChange"===e)return ce(t)}function ve(e,t,n,r){return F.call(this,e,t,n,r)}function ge(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Ar[e])&&!!t[e]}function be(){return ge}function Te(e,t,n,r){return F.call(this,e,t,n,r)}function ke(e){return e=e.type,"string"==typeof e?e:"function"==typeof e?e.displayName||e.name:null}function Se(e){var t=e;if(e.alternate)for(;t.return;)t=t.return;else{if(0!==(2&t.effectTag))return 1;for(;t.return;)if(t=t.return,0!==(2&t.effectTag))return 1}return 3===t.tag?2:3}function we(e){return!!(e=e._reactInternalFiber)&&2===Se(e)}function Ce(e){2!==Se(e)?r("188"):void 0}function xe(e){var t=e.alternate;if(!t)return t=Se(e),3===t?r("188"):void 0,1===t?null:e;for(var n=e,o=t;;){var a=n.return,l=a?a.alternate:null;if(!a||!l)break;if(a.child===l.child){for(var i=a.child;i;){if(i===n)return Ce(a),e;if(i===o)return Ce(a),t;i=i.sibling}r("188")}if(n.return!==o.return)n=a,o=l;else{i=!1;for(var u=a.child;u;){if(u===n){i=!0,n=a,o=l;break}if(u===o){i=!0,o=a,n=l;break}u=u.sibling}if(!i){for(u=l.child;u;){if(u===n){i=!0,n=l,o=a;break}if(u===o){i=!0,o=l,n=a;break}u=u.sibling}i?void 0:r("189")}}n.alternate!==o?r("190"):void 0}return 3!==n.tag?r("188"):void 0,n.stateNode.current===n?e:t}function Ee(e){if(e=xe(e),!e)return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function Pe(e){if(e=xe(e),!e)return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child&&4!==t.tag)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function Oe(e){var t=e.targetInst;do{if(!t){e.ancestors.push(t);break}var n;for(n=t;n.return;)n=n.return;if(n=3!==n.tag?null:n.stateNode.containerInfo,!n)break;e.ancestors.push(t),t=C(n)}while(t);for(n=0;n<e.ancestors.length;n++)t=e.ancestors[n],Br(e.topLevelType,t,e.nativeEvent,te(e.nativeEvent))}function _e(e){zr=!!e}function Ie(e,t,n){return n?Sn.listen(n,t,Re.bind(null,e)):null}function Ne(e,t,n){return n?Sn.capture(n,t,Re.bind(null,e)):null}function Re(e,t){if(zr){var n=te(t);if(n=C(n),null===n||"number"!=typeof n.tag||2===Se(n)||(n=null),Vr.length){var r=Vr.pop();r.topLevelType=e,r.nativeEvent=t,r.targetInst=n,e=r}else e={topLevelType:e,nativeEvent:t,targetInst:n,ancestors:[]};try{J(Oe,e)}finally{e.topLevelType=null,e.nativeEvent=null,e.targetInst=null,e.ancestors.length=0,10>Vr.length&&Vr.push(e)}}}function Me(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 De(e){if(qr[e])return qr[e];if(!Kr[e])return e;var t,n=Kr[e];for(t in n)if(n.hasOwnProperty(t)&&t in $r)return qr[e]=n[t];return""}function Le(e){return Object.prototype.hasOwnProperty.call(e,Xr)||(e[Xr]=Yr++,Gr[e[Xr]]={}),Gr[e[Xr]]}function je(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function Ae(e,t){var n=je(e);e=0;for(var r;n;){if(3===n.nodeType){if(r=e+n.textContent.length,e<=t&&r>=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=je(n)}}function He(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&"text"===e.type||"textarea"===t||"true"===e.contentEditable)}function Fe(e,t){if(ro||null==eo||eo!==wn())return null;var n=eo;return"selectionStart"in n&&He(n)?n={start:n.selectionStart,end:n.selectionEnd}:window.getSelection?(n=window.getSelection(),n={anchorNode:n.anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset}):n=void 0,no&&Cn(no,n)?null:(no=n,e=F.getPooled(Jr.select,to,e,t),e.type="select",e.target=eo,D(e),e)}function Ue(e,t,n,r){return F.call(this,e,t,n,r)}function Ve(e,t,n,r){return F.call(this,e,t,n,r)}function ze(e,t,n,r){return F.call(this,e,t,n,r)}function Be(e){var t=e.keyCode;return"charCode"in e?(e=e.charCode,0===e&&13===t&&(e=13)):e=t,32<=e||13===e?e:0}function We(e,t,n,r){return F.call(this,e,t,n,r)}function Ke(e,t,n,r){return F.call(this,e,t,n,r)}function qe(e,t,n,r){return F.call(this,e,t,n,r)}function $e(e,t,n,r){return F.call(this,e,t,n,r)}function Qe(e,t,n,r){return F.call(this,e,t,n,r)}function Ge(e){0>fo||(e.current=so[fo],so[fo]=null,fo--)}function Ye(e,t){fo++,so[fo]=e.current,e.current=t}function Xe(e){return Je(e)?bo:vo.current}function Ze(e,t){var n=e.type.contextTypes;if(!n)return Pn;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var o,a={};for(o in n)a[o]=t[o];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=a),a}function Je(e){return 2===e.tag&&null!=e.type.childContextTypes}function et(e){Je(e)&&(Ge(go,e),Ge(vo,e))}function tt(e,t,n){null!=vo.cursor?r("168"):void 0,Ye(vo,t,e),Ye(go,n,e)}function nt(e,t){var n=e.stateNode,o=e.type.childContextTypes;if("function"!=typeof n.getChildContext)return t;n=n.getChildContext();for(var a in n)a in o?void 0:r("108",ke(e)||"Unknown",a);return Tn({},t,n)}function rt(e){if(!Je(e))return!1;var t=e.stateNode;return t=t&&t.__reactInternalMemoizedMergedChildContext||Pn,bo=vo.current,Ye(vo,t,e),Ye(go,go.current,e),!0}function ot(e,t){var n=e.stateNode;if(n?void 0:r("169"),t){var o=nt(e,bo);n.__reactInternalMemoizedMergedChildContext=o,Ge(go,e),Ge(vo,e),Ye(vo,o,e)}else Ge(go,e);Ye(go,t,e)}function at(e,t,n){this.tag=e,this.key=t,this.stateNode=this.type=null,this.sibling=this.child=this.return=null,this.index=0,this.memoizedState=this.updateQueue=this.memoizedProps=this.pendingProps=this.ref=null,this.internalContextTag=n,this.effectTag=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.expirationTime=0,this.alternate=null}function lt(e,t,n){var r=e.alternate;return null===r?(r=new at(e.tag,e.key,e.internalContextTag),r.type=e.type,r.stateNode=e.stateNode,r.alternate=e,e.alternate=r):(r.effectTag=0,r.nextEffect=null,r.firstEffect=null,r.lastEffect=null),r.expirationTime=n,r.pendingProps=t,r.child=e.child,r.memoizedProps=e.memoizedProps,r.memoizedState=e.memoizedState,r.updateQueue=e.updateQueue,r.sibling=e.sibling,r.index=e.index,r.ref=e.ref,r}function it(e,t,n){var o=void 0,a=e.type,l=e.key;return"function"==typeof a?(o=a.prototype&&a.prototype.isReactComponent?new at(2,l,t):new at(0,l,t),o.type=a,o.pendingProps=e.props):"string"==typeof a?(o=new at(5,l,t),o.type=a,o.pendingProps=e.props):"object"==typeof a&&null!==a&&"number"==typeof a.tag?(o=a,o.pendingProps=e.props):r("130",null==a?a:typeof a,""),o.expirationTime=n,o}function ut(e,t,n,r){return t=new at(10,r,t),t.pendingProps=e,t.expirationTime=n,t}function ct(e,t,n){return t=new at(6,null,t),t.pendingProps=e,t.expirationTime=n,t}function st(e,t,n){return t=new at(7,e.key,t),t.type=e.handler,t.pendingProps=e,t.expirationTime=n,t}function ft(e,t,n){return e=new at(9,null,t),e.expirationTime=n,e}function pt(e,t,n){return t=new at(4,e.key,t),t.pendingProps=e.children||[],t.expirationTime=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function dt(e){return function(t){try{return e(t)}catch(e){}}}function ht(e){if("undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);To=dt(function(e){return t.onCommitFiberRoot(n,e)}),ko=dt(function(e){return t.onCommitFiberUnmount(n,e)})}catch(e){}return!0}function mt(e){"function"==typeof To&&To(e)}function yt(e){"function"==typeof ko&&ko(e)}function vt(e){return{baseState:e,expirationTime:0,first:null,last:null,callbackList:null,hasForceUpdate:!1,isInitialized:!1}}function gt(e,t){null===e.last?e.first=e.last=t:(e.last.next=t,e.last=t),(0===e.expirationTime||e.expirationTime>t.expirationTime)&&(e.expirationTime=t.expirationTime)}function bt(e,t){var n=e.alternate,r=e.updateQueue;null===r&&(r=e.updateQueue=vt(null)),null!==n?(e=n.updateQueue,null===e&&(e=n.updateQueue=vt(null))):e=null,e=e!==r?e:null,null===e?gt(r,t):null===r.last||null===e.last?(gt(r,t),gt(e,t)):(gt(r,t),e.last=t)}function Tt(e,t,n,r){return e=e.partialState,"function"==typeof e?e.call(t,n,r):e}function kt(e,t,n,r,o,a){null!==e&&e.updateQueue===n&&(n=t.updateQueue={baseState:n.baseState,expirationTime:n.expirationTime,first:n.first,last:n.last,isInitialized:n.isInitialized,callbackList:null,hasForceUpdate:!1}),n.expirationTime=0,n.isInitialized?e=n.baseState:(e=n.baseState=t.memoizedState,n.isInitialized=!0);for(var l=!0,i=n.first,u=!1;null!==i;){var c=i.expirationTime;if(c>a){var s=n.expirationTime;(0===s||s>c)&&(n.expirationTime=c),u||(u=!0,n.baseState=e)}else u||(n.first=i.next,null===n.first&&(n.last=null)),i.isReplace?(e=Tt(i,r,e,o),l=!0):(c=Tt(i,r,e,o))&&(e=l?Tn({},e,c):Tn(e,c),l=!1),i.isForced&&(n.hasForceUpdate=!0),null!==i.callback&&(c=n.callbackList,null===c&&(c=n.callbackList=[]),c.push(i));i=i.next}return null!==n.callbackList?t.effectTag|=32:null!==n.first||n.hasForceUpdate||(t.updateQueue=null),u||(n.baseState=e),e}function St(e,t){var n=e.callbackList;if(null!==n)for(e.callbackList=null,e=0;e<n.length;e++){var o=n[e],a=o.callback;o.callback=null,"function"!=typeof a?r("191",a):void 0,a.call(t)}}function wt(e,t,n,o){function a(e,t){t.updater=l,e.stateNode=t,t._reactInternalFiber=e}var l={isMounted:we,enqueueSetState:function(n,r,o){n=n._reactInternalFiber,o=void 0===o?null:o;var a=t(n);bt(n