react-on-off
Version:
Flexible React components to manage on/off states
2 lines (1 loc) • 5.99 kB
JavaScript
(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports,require('react'),require('prop-types')):'function'==typeof define&&define.amd?define(['exports','react','prop-types'],b):b(a.OnOff={},a.React,null)})(this,function(a,b,c){'use strict';function d(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function e(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function f(a,b,c){return b&&e(a.prototype,b),c&&e(a,c),a}function g(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function h(){return h=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},h.apply(this,arguments)}function i(a){for(var b=1;b<arguments.length;b++){var c=null==arguments[b]?{}:arguments[b],d=Object.keys(c);'function'==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){g(a,b,c[b])})}return a}function j(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function');l(a.prototype,b&&b.prototype),b&&l(a,b)}function k(a){return k=Object.getPrototypeOf||function(a){return a.__proto__},k(a)}function l(a,b){return l=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},l(a,b)}function m(a){if(void 0===a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return a}function n(a,b){return b&&('object'==typeof b||'function'==typeof b)?b:m(a)}var o='default'in b?b['default']:b;c=c&&c.hasOwnProperty('default')?c['default']:c;var p=function(){},q=function(a){function b(){var a,c,e;d(this,b);for(var f=arguments.length,h=Array(f),i=0;i<f;i++)h[i]=arguments[i];return n(e,(c=e=n(this,(a=k(b)).call.apply(a,[this].concat(h))),g(g(g(g(g(g(m(m(e)),'state',{on:!!e.props.defaultOn}),'getOnState',function(){return e.isControlled()?!!e.props.on:e.state.on}),'setOnState',function(a){var b=e.getOnState(),c=b!==a,d=e.isControlled();d&&c?e.props.onChange(a):!d&&c&&e.setState({on:a},function(){return e.props.onChange(a)})}),'setOn',function(){return e.setOnState(!0)}),'setOff',function(){return e.setOnState(!1)}),'toggle',function(){return e.setOnState(!e.getOnState())}),c))}return f(b,[{key:'shouldComponentUpdate',value:function(a,b){return this.isControlled()?this.props.on!==a.on:this.state.on!==b.on}},{key:'isControlled',value:function(){return void 0!==this.props.on}},{key:'render',value:function(){var a=this.getOnState();return this.props.children({on:a,off:!a,setOn:this.setOn,setOff:this.setOff,toggle:this.toggle})}}]),j(b,a),b}(b.Component);g(g(q,'propTypes',{defaultOn:c.bool,on:c.bool,onChange:c.func,children:c.func.isRequired}),'defaultProps',{defaultOn:!1,onChange:p});var r=b.createContext({on:void 0,setOn:p,setOff:p,toggle:p,registerItem:function(a){return a||'_internalDefaultId'},unregisterItem:p}),s=r.Provider,t=r.Consumer,u=function(a){return function(){return a++}}(0),v=function(a){function b(){var a,c,e;d(this,b);for(var f=arguments.length,h=Array(f),i=0;i<f;i++)h[i]=arguments[i];return n(e,(c=e=n(this,(a=k(b)).call.apply(a,[this].concat(h))),g(g(g(g(g(g(g(g(g(m(m(e)),'getOnState',function(){return e.isControlled()?e.props.on:e.state.on}),'setOnState',function(a){var b=e.getOnState(),c=b!==a,d=e.isControlled();d&&c?e.props.onChange(a):!d&&c&&e.setState({on:a},function(){return e.props.onChange(a)})}),'setOn',function(a){return e.setOnState(a)}),'setOff',function(a){a===e.state.on&&e.setOnState(null)}),'toggle',function(a){var b=e.getOnState();e.setOnState(b===a?null:a)}),'registerItem',function(a){return a||e.idGenerator()+''}),'unregisterItem',function(a){a===e.getOnState()&&e.setOnState(null)}),'idGenerator',u),'state',{on:e.props.defaultOn,setOn:e.setOn,setOff:e.setOff,toggle:e.toggle,registerItem:e.registerItem,unregisterItem:e.unregisterItem}),c))}return f(b,[{key:'shouldComponentUpdate',value:function(a,b){return this.isControlled()?this.props.on!==a.on:this.state.on!==b.on}},{key:'isControlled',value:function(){return void 0!==this.props.on}},{key:'render',value:function(){return o.createElement(s,{value:i({},this.state,{on:this.getOnState()})},this.props.children)}}]),j(b,a),b}(b.Component);g(g(v,'propTypes',{defaultOn:c.string,on:c.string,onChange:c.func}),'defaultProps',{defaultOn:null,onChange:p});var w=function(a){function b(){var a,c,e;d(this,b);for(var f=arguments.length,h=Array(f),i=0;i<f;i++)h[i]=arguments[i];return n(e,(c=e=n(this,(a=k(b)).call.apply(a,[this].concat(h))),g(g(g(g(m(m(e)),'state',{id:e.props.context.registerItem(e.props.id)}),'setOn',function(){return e.props.context.setOn(e.state.id)}),'setOff',function(){return e.props.context.setOff(e.state.id)}),'toggle',function(){return e.props.context.toggle(e.state.id)}),c))}return f(b,[{key:'componentWillUnmount',value:function(){this.props.context.unregisterItem(this.props.id)}},{key:'shouldComponentUpdate',value:function(a){var b=this.state.id,c=this.props.context.on,d=a.context.on,e=c===b;return e&&d!==b||!e&&d===b}},{key:'render',value:function(){var a=this.state.id,b=this.props.context.on===a;return this.props.children({id:a,on:b,off:!b,setOn:this.setOn,setOff:this.setOff,toggle:this.toggle})}}]),j(b,a),b}(b.Component);g(w,'propTypes',{id:c.string,children:c.func.isRequired,context:c.shape({on:c.string,setOn:c.func.isRequired,setOff:c.func.isRequired,toggle:c.func.isRequired,registerItem:c.func.isRequired,unregisterItem:c.func.isRequired}).isRequired});var x=function(a){return o.createElement(t,null,function(b){return o.createElement(w,h({},a,{context:b}))})};x.propTypes={id:c.string,children:c.func.isRequired},a.OnOff=q,a.OnOffCollection=v,a.OnOffItem=x,Object.defineProperty(a,'__esModule',{value:!0})});