react-state-trace - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_semanticUiReact=require("semantic-ui-react"),_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _templateObject11(){var a=_taggedTemplateLiteral(["\n    border: 1px solid #000;\n    margin-top: 40px;\n    font-size: ",";\n"]);return _templateObject11=function(){return a},a}function _templateObject10(){var a=_taggedTemplateLiteral(["\n    margin: 0 !important;\n"]);return _templateObject10=function(){return a},a}function _templateObject9(){var a=_taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 10px;\n   > input[type=\"range\"] {\n        width: 68%;\n    }\n    > div > button {\n        padding: 3px !important;\n    }\n    > span {\n        margin-right: 10px;\n    }\n"]);return _templateObject9=function(){return a},a}function _templateObject8(){var a=_taggedTemplateLiteral(["\n    border: 1px solid #333232;\n    border-radius: 10px;\n    margin-top: 10px;\n    position: relative;\n    -webkit-transition: opacity 0.3s;\n    -moz-transition: opacity 0.3s;\n    -ms-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    opacity: ",";\n    height: ",";\n    z-index: ",";\n    padding: ",";\n    margin-bottom: ",";\n"]);return _templateObject8=function(){return a},a}function _templateObject7(){var a=_taggedTemplateLiteral(["\n    background: ",";\n    color: ",";\n    margin-bottom: 10px !important;\n"]);return _templateObject7=function(){return a},a}function _templateObject6(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: ",";\n    background: black;\n    color: white;\n    overflow: scroll;\n    padding: 30px;\n    z-index: 2000;\n    -webkit-transition: opacity 0.5s;\n    -moz-transition: opacity 0.5s;\n    -ms-transition: opacity 0.5s;\n    -o-transition: opacity 0.5s;\n    transition: opacity 0.5s;\n    max-height: 100%;\n"]);return _templateObject6=function(){return a},a}function _templateObject5(){var a=_taggedTemplateLiteral(["\n    margin-top: 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    > i.icon {\n        opacity: ",";\n        &:hover {\n            opacity: ",";\n        }\n    }\n"]);return _templateObject5=function(){return a},a}function _templateObject4(){var a=_taggedTemplateLiteral(["\n    cursor: pointer;\n    font-size: 18px;\n    -webkit-transition: opacity 0.3s;\n    -moz-transition: opacity 0.3s;\n    -ms-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n"]);return _templateObject4=function(){return a},a}function _templateObject3(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    cursor: pointer;\n    &:hover {\n        opacity: 0.88;\n    }\n"]);return _templateObject3=function(){return a},a}function _templateObject2(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 10px;\n    right: -5px;\n    cursor: pointer;\n    font-size: 18px;\n"]);return _templateObject2=function(){return a},a}function _templateObject(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 8px;\n    right: 2px;\n    height: 20px !important;\n    width: 25px;\n    cursor: pointer;\n    color: black;\n    background: white;\n    border: 1px solid black;\n    z-index: 2000;\n    font-size: 18px;\n    -webkit-transition: opacity 0.5s;\n    -moz-transition: opacity 0.5s;\n    -ms-transition: opacity 0.5s;\n    -o-transition: opacity 0.5s;\n    transition: opacity 0.5s;\n"]);return _templateObject=function(){return a},a}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _toConsumableArray(a){return _arrayWithoutHoles(a)||_iterableToArray(a)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(a){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a))return Array.from(a)}function _arrayWithoutHoles(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}}function _objectSpread(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){_defineProperty(a,b,c[b])})}return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(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 _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _possibleConstructorReturn(a,b){return b&&("object"===_typeof(b)||"function"==typeof b)?b:_assertThisInitialized(a)}function _getPrototypeOf(a){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},_getPrototypeOf(a)}function _inherits(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&_setPrototypeOf(a,b)}function _setPrototypeOf(a,b){return _setPrototypeOf=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},_setPrototypeOf(a,b)}function _assertThisInitialized(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}var StateViewer=function(a){function b(a){var c;_classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a));var d=c.getAppState(a),e=c.FONT_SIZE,f=c.INDENTATION,g=c.SHOW_ADJUSTERS;return c.state={appState:d,stateJson:JSON.stringify(_objectSpread({},d),null,f),viewedState:_objectSpread({},d),showViewer:!0,viewerWidth:50,visible:!1,arrayIndex:"",fields:[],fontSize:e,indentation:f,showAdjusters:g},c.changeViewedState=c.changeViewedState.bind(_assertThisInitialized(_assertThisInitialized(c))),c.setPrevViewedState=c.setPrevViewedState.bind(_assertThisInitialized(_assertThisInitialized(c))),c.changeStateJson=c.changeStateJson.bind(_assertThisInitialized(_assertThisInitialized(c))),c.onKeyDown=c.onKeyDown.bind(_assertThisInitialized(_assertThisInitialized(c))),c}return _inherits(b,a),_createClass(b,[{key:"getAppState",value:function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},b=a.store,c=a.state;if(c)return c;if(b){if(b.getState&&"function"==typeof b.getState)return b.getState();if(b.state)return b.state}return{}}},{key:"changeViewedState",value:function(){var a=this.state,b=a.appState,c=a.fields,d=a.arrayIndex,e=_objectSpread({},b);c.forEach(function(a){return e=e[a]});var f={};Array.isArray(e)?""!==d&&(e=e[d]):f.arrayIndex="",f.viewedState=e,this.setState(f)}},{key:"setPrevViewedState",value:function(){var a=this.state,b=a.fields,c=a.appState;return 0<b.length?this.setState({fields:b.slice(0,b.length-1)}):void this.setState({viewedState:_objectSpread({},c),fields:[]})}},{key:"onKeyDown",value:function(a){var b=a.shiftKey,c=83===a.which||83===a.keyCode;b&&c&&this.setState({showViewer:!this.state.showViewer})}},{key:"changeStateJson",value:function(){var a=this.state,b=a.viewedState,c=a.indentation,d=JSON.stringify(b,null,c),e=d.replace(/"\w+":/g,function(a){return a.replace(/"/g,"")});this.setState({stateJson:e})}},{key:"componentDidMount",value:function(){document.addEventListener("keydown",this.onKeyDown)}},{key:"componentDidUpdate",value:function(a,b){this.props!==a&&this.setState({appState:this.getAppState(this.props)}),this.state.appState!==b.appState&&this.changeViewedState(),this.state.indentation!==b.indentation&&(localStorage.setItem("stateViewer.indentation",this.state.indentation),this.changeViewedState()),this.state.fontSize!==b.fontSize&&localStorage.setItem("stateViewer.fontSize",this.state.fontSize),this.state.fields!==b.fields&&this.changeViewedState(),this.state.arrayIndex!==b.arrayIndex&&this.changeViewedState(),this.state.viewedState!==b.viewedState&&this.changeStateJson(),this.state.showAdjusters!==b.showAdjusters&&localStorage.setItem("stateViewer.showAdjusters",this.state.showAdjusters)}},{key:"render",value:function(){var a=this;if(!1===this.props.dev||!this.state.showViewer)return null;var b=this.state,c=b.visible,d=b.indentation,e=b.fontSize,f=b.viewerWidth,g=b.viewedState,h=b.arrayIndex,i=b.fields,j=b.stateJson,k=b.showAdjusters;return _react.default.createElement("div",null,_react.default.createElement("link",{rel:"stylesheet",href:"//cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"}),_react.default.createElement(ArrowIcon,{name:"angle double left",onClick:function(){return a.setState({visible:!0})},style:{opacity:c?0:1,visibility:c?"hidden":"",height:c?0:"auto"}}),_react.default.createElement(StateViewerContainer,{indentation:d,viewerWidth:f,style:{opacity:c?1:0,visibility:c?"":"hidden",height:c?0===d?"300px":"auto":0}},_react.default.createElement(TimesIcon,{name:"times",onClick:function(){return a.setState({visible:!c})}}),_react.default.createElement(Title,{as:"h3",color:"grey",showAdjusters:k},_react.default.createElement("span",null,"React State Trace"),_react.default.createElement(DownArrowIcon,{name:"angle double down",onClick:function(){return a.setState({showAdjusters:!0})}})),_react.default.createElement(_semanticUiReact.Divider,{fitted:!0}),_react.default.createElement(Adjusters,{showAdjusters:k},_react.default.createElement(UpArrowIcon,{name:"angle double up",onClick:function(){return a.setState({showAdjusters:!1})}}),_react.default.createElement(Adjuster,null,_react.default.createElement("span",null,"Adjust width"),_react.default.createElement("input",{type:"range",min:"40",max:"100",step:"2",value:f,onChange:function(b){var c=b.target.value;return a.setState({viewerWidth:c})}})),_react.default.createElement(_semanticUiReact.Divider,null),_react.default.createElement(Adjuster,null,_react.default.createElement("span",null,"Adjust indentation"),_react.default.createElement("div",null,_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({indentation:d-1})},disabled:0===d},_react.default.createElement(AdjusterIcon,{name:"minus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({indentation:d+1})}},_react.default.createElement(AdjusterIcon,{name:"plus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({indentation:2})},disabled:2===d},_react.default.createElement(AdjusterIcon,{name:"refresh"})))),_react.default.createElement(_semanticUiReact.Divider,null),_react.default.createElement(Adjuster,null,_react.default.createElement("span",null,"Adjust font size"),_react.default.createElement("div",null,_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({fontSize:e-1})}},_react.default.createElement(AdjusterIcon,{name:"minus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({fontSize:e+1})}},_react.default.createElement(AdjusterIcon,{name:"plus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({fontSize:16})},disabled:16===e},_react.default.createElement(AdjusterIcon,{name:"refresh"}))))),Array.isArray(g)&&0<g.length&&_react.default.createElement("div",null,_react.default.createElement("div",{style:{marginBottom:10}},_react.default.createElement("span",null,"Choose a specific index to show: "," ",_react.default.createElement("strong",null,"(0 - ",g.length-1,")")),_react.default.createElement("input",{type:"number",min:"0",max:g.length-1,value:h,onChange:function(b){var c=b.target.value;c>g.length-1&&(c=0),a.setState({arrayIndex:c})},style:{marginLeft:10}}))),_react.default.createElement("div",{style:{marginBottom:15}},0<i.length&&_react.default.createElement(_semanticUiReact.Label,{as:"a",color:"teal",tag:!0,onClick:this.setPrevViewedState},i[i.length-1])),_react.default.createElement("div",{style:{display:""===h?"":"none"}},isObject(g)&&Object.keys(g).map(function(b){return _react.default.createElement(StateNavigationButton,{size:"tiny",key:b,onClick:function(){return a.setState({fields:[].concat(_toConsumableArray(i),[b])})},active:i[i.length-1]===b},b)})),_react.default.createElement(StateJson,{fontSize:e},j)))}},{key:"FONT_SIZE",get:function(){var a=parseInt(localStorage.getItem("stateViewer.fontSize"));return isNaN(a)?16:a}},{key:"INDENTATION",get:function(){var a=parseInt(localStorage.getItem("stateViewer.indentation"));return isNaN(a)?2:a}},{key:"SHOW_ADJUSTERS",get:function(){var a=localStorage.getItem("stateViewer.showAdjusters");return"false"!==a}}]),b}(_react.default.PureComponent);exports.default=StateViewer;var ArrowIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject()),TimesIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject2()),UpArrowIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject3()),DownArrowIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject4()),Title=(0,_styledComponents.default)(_semanticUiReact.Header)(_templateObject5(),function(a){return a.showAdjusters?0:1},function(a){return a.showAdjusters?0:.88}),StateViewerContainer=_styledComponents.default.div(_templateObject6(),function(a){return a.viewerWidth+"%"}),StateNavigationButton=(0,_styledComponents.default)(_semanticUiReact.Button)(_templateObject7(),function(a){return a.active?"#00b5ad !important":""},function(a){return a.disabled?"white !important":""}),Adjusters=_styledComponents.default.div(_templateObject8(),function(a){return a.showAdjusters?1:0},function(a){return a.showAdjusters?"auto":0},function(a){return a.showAdjusters?1:-10},function(a){return a.showAdjusters?"25px 10px 10px 10px":0},function(a){return a.showAdjusters?"10px":0}),Adjuster=_styledComponents.default.div(_templateObject9()),AdjusterIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject10()),StateJson=_styledComponents.default.pre(_templateObject11(),function(a){return a.fontSize+"px"});function isObject(a){return!!(a&&"number"!=typeof a&&"string"!=typeof a&&!Array.isArray(a)&&a.constructor)&&"Object"===a.constructor.name}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_semanticUiReact=require("semantic-ui-react"),_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _templateObject11(){var a=_taggedTemplateLiteral(["\n    border: 1px solid #000;\n    margin-top: 40px;\n    font-size: ",";\n"]);return _templateObject11=function(){return a},a}function _templateObject10(){var a=_taggedTemplateLiteral(["\n    margin: 0 !important;\n"]);return _templateObject10=function(){return a},a}function _templateObject9(){var a=_taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 10px;\n   > input[type=\"range\"] {\n        width: 68%;\n    }\n    > div > button {\n        padding: 3px !important;\n    }\n    > span {\n        margin-right: 10px;\n    }\n"]);return _templateObject9=function(){return a},a}function _templateObject8(){var a=_taggedTemplateLiteral(["\n    border: 1px solid #333232;\n    border-radius: 10px;\n    margin-top: 10px;\n    position: relative;\n    -webkit-transition: opacity 0.3s;\n    -moz-transition: opacity 0.3s;\n    -ms-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    opacity: ",";\n    height: ",";\n    z-index: ",";\n    padding: ",";\n    margin-bottom: ",";\n"]);return _templateObject8=function(){return a},a}function _templateObject7(){var a=_taggedTemplateLiteral(["\n    background: ",";\n    color: ",";\n    margin-bottom: 10px !important;\n"]);return _templateObject7=function(){return a},a}function _templateObject6(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: ",";\n    background: black;\n    color: white;\n    overflow: scroll;\n    padding: 30px;\n    z-index: 2000;\n    -webkit-transition: opacity 0.5s;\n    -moz-transition: opacity 0.5s;\n    -ms-transition: opacity 0.5s;\n    -o-transition: opacity 0.5s;\n    transition: opacity 0.5s;\n    max-height: 100%;\n"]);return _templateObject6=function(){return a},a}function _templateObject5(){var a=_taggedTemplateLiteral(["\n    margin-top: 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    > i.icon {\n        opacity: ",";\n        &:hover {\n            opacity: ",";\n        }\n    }\n"]);return _templateObject5=function(){return a},a}function _templateObject4(){var a=_taggedTemplateLiteral(["\n    cursor: pointer;\n    font-size: 18px;\n    -webkit-transition: opacity 0.3s;\n    -moz-transition: opacity 0.3s;\n    -ms-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n"]);return _templateObject4=function(){return a},a}function _templateObject3(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    cursor: pointer;\n    &:hover {\n        opacity: 0.88;\n    }\n"]);return _templateObject3=function(){return a},a}function _templateObject2(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 10px;\n    right: -5px;\n    cursor: pointer;\n    font-size: 18px;\n"]);return _templateObject2=function(){return a},a}function _templateObject(){var a=_taggedTemplateLiteral(["\n    position: absolute;\n    top: 8px;\n    right: 2px;\n    height: 20px !important;\n    width: 25px;\n    cursor: pointer;\n    color: black;\n    background: white;\n    border: 1px solid black;\n    z-index: 2000;\n    font-size: 18px;\n    -webkit-transition: opacity 0.5s;\n    -moz-transition: opacity 0.5s;\n    -ms-transition: opacity 0.5s;\n    -o-transition: opacity 0.5s;\n    transition: opacity 0.5s;\n"]);return _templateObject=function(){return a},a}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _toConsumableArray(a){return _arrayWithoutHoles(a)||_iterableToArray(a)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(a){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a))return Array.from(a)}function _arrayWithoutHoles(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}}function _objectSpread(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){_defineProperty(a,b,c[b])})}return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(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 _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _possibleConstructorReturn(a,b){return b&&("object"===_typeof(b)||"function"==typeof b)?b:_assertThisInitialized(a)}function _getPrototypeOf(a){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},_getPrototypeOf(a)}function _inherits(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&_setPrototypeOf(a,b)}function _setPrototypeOf(a,b){return _setPrototypeOf=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},_setPrototypeOf(a,b)}function _assertThisInitialized(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}var StateViewer=function(a){function b(a){var c;_classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a));var d=c.getAppState(a),e=c.FONT_SIZE,f=c.INDENTATION,g=c.SHOW_ADJUSTERS;return c.state={appState:d,stateJson:JSON.stringify(_objectSpread({},d),null,f),viewedState:_objectSpread({},d),showViewer:!0,viewerWidth:50,visible:!1,fields:[],fontSize:e,indentation:f,showAdjusters:g},c.changeViewedState=c.changeViewedState.bind(_assertThisInitialized(_assertThisInitialized(c))),c.setPrevViewedState=c.setPrevViewedState.bind(_assertThisInitialized(_assertThisInitialized(c))),c.changeStateJson=c.changeStateJson.bind(_assertThisInitialized(_assertThisInitialized(c))),c.onKeyDown=c.onKeyDown.bind(_assertThisInitialized(_assertThisInitialized(c))),c}return _inherits(b,a),_createClass(b,[{key:"getAppState",value:function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},b=a.store,c=a.state;if(c)return c;if(b){if(b.getState&&"function"==typeof b.getState)return b.getState();if(b.state)return b.state}return{}}},{key:"changeViewedState",value:function(){var a=this.state,b=a.appState,c=a.fields,d=_objectSpread({},b);c.forEach(function(a){return isObject(a)?d=d[a.index]:void(d=d[a])}),this.setState({viewedState:d})}},{key:"setPrevViewedState",value:function(){var a=this.state,b=a.fields,c=a.appState;return 0<b.length?this.setState({fields:b.slice(0,b.length-1)}):void this.setState({viewedState:_objectSpread({},c),fields:[]})}},{key:"onKeyDown",value:function(a){var b=a.shiftKey,c=83===a.which||83===a.keyCode;b&&c&&this.setState({showViewer:!this.state.showViewer})}},{key:"changeStateJson",value:function(){var a=this.state,b=a.viewedState,c=a.indentation,d=JSON.stringify(b,null,c),e=d.replace(/"\w+":/g,function(a){return a.replace(/"/g,"")});this.setState({stateJson:e})}},{key:"componentDidMount",value:function(){document.addEventListener("keydown",this.onKeyDown)}},{key:"componentDidUpdate",value:function(a,b){this.props!==a&&this.setState({appState:this.getAppState(this.props)}),this.state.appState!==b.appState&&this.changeViewedState(),this.state.indentation!==b.indentation&&(localStorage.setItem("stateViewer.indentation",this.state.indentation),this.changeViewedState()),this.state.fontSize!==b.fontSize&&localStorage.setItem("stateViewer.fontSize",this.state.fontSize),this.state.fields!==b.fields&&this.changeViewedState(),this.state.viewedState!==b.viewedState&&this.changeStateJson(),this.state.showAdjusters!==b.showAdjusters&&localStorage.setItem("stateViewer.showAdjusters",this.state.showAdjusters)}},{key:"render",value:function(){var a=this;if(!1===this.props.dev||!this.state.showViewer)return null;var b=this.state,c=b.visible,d=b.indentation,e=b.fontSize,f=b.viewerWidth,g=b.viewedState,h=b.fields,i=b.stateJson,j=b.showAdjusters;return _react.default.createElement("div",null,_react.default.createElement("link",{rel:"stylesheet",href:"//cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"}),_react.default.createElement(ArrowIcon,{name:"angle double left",onClick:function(){return a.setState({visible:!0})},style:{opacity:c?0:1,visibility:c?"hidden":"",height:c?0:"auto"}}),_react.default.createElement(StateViewerContainer,{indentation:d,viewerWidth:f,style:{opacity:c?1:0,visibility:c?"":"hidden",height:c?0===d?"300px":"auto":0}},_react.default.createElement(TimesIcon,{name:"times",onClick:function(){return a.setState({visible:!c})}}),_react.default.createElement(Title,{as:"h3",color:"grey",showAdjusters:j},_react.default.createElement("span",null,"React State Trace"),_react.default.createElement(DownArrowIcon,{name:"angle double down",onClick:function(){return a.setState({showAdjusters:!0})}})),_react.default.createElement(_semanticUiReact.Divider,{fitted:!0}),_react.default.createElement(Adjusters,{showAdjusters:j},_react.default.createElement(UpArrowIcon,{name:"angle double up",onClick:function(){return a.setState({showAdjusters:!1})}}),_react.default.createElement(Adjuster,null,_react.default.createElement("span",null,"Adjust width"),_react.default.createElement("input",{type:"range",min:"40",max:"100",step:"2",value:f,onChange:function(b){var c=b.target.value;return a.setState({viewerWidth:c})}})),_react.default.createElement(_semanticUiReact.Divider,null),_react.default.createElement(Adjuster,null,_react.default.createElement("span",null,"Adjust indentation"),_react.default.createElement("div",null,_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({indentation:d-1})},disabled:0===d},_react.default.createElement(AdjusterIcon,{name:"minus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({indentation:d+1})}},_react.default.createElement(AdjusterIcon,{name:"plus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({indentation:2})},disabled:2===d},_react.default.createElement(AdjusterIcon,{name:"refresh"})))),_react.default.createElement(_semanticUiReact.Divider,null),_react.default.createElement(Adjuster,null,_react.default.createElement("span",null,"Adjust font size"),_react.default.createElement("div",null,_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({fontSize:e-1})}},_react.default.createElement(AdjusterIcon,{name:"minus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({fontSize:e+1})}},_react.default.createElement(AdjusterIcon,{name:"plus"})),_react.default.createElement(_semanticUiReact.Button,{onClick:function(){return a.setState({fontSize:16})},disabled:16===e},_react.default.createElement(AdjusterIcon,{name:"refresh"}))))),Array.isArray(g)&&0<g.length&&_react.default.createElement("div",null,_react.default.createElement("div",{style:{marginBottom:10}},_react.default.createElement("span",null,"Choose a specific index to show: "," ",_react.default.createElement("strong",null,"(0 - ",g.length-1,")")),_react.default.createElement("input",{type:"number",min:"0",max:g.length-1,onChange:function(b){var c=b.target.value;c>g.length-1&&(c=0),a.setState({fields:[].concat(_toConsumableArray(h),[{index:c}])})},style:{marginLeft:10}}))),_react.default.createElement("div",{style:{marginBottom:15}},0<h.length&&_react.default.createElement(_semanticUiReact.Label,{as:"a",color:"teal",tag:!0,onClick:this.setPrevViewedState},isObject(h[h.length-1])?h[h.length-2]+" ["+h[h.length-1].index+"]":h[h.length-1])),_react.default.createElement("div",null,isObject(g)&&Object.keys(g).map(function(b){return _react.default.createElement(StateNavigationButton,{size:"tiny",key:b,onClick:function(){return a.setState({fields:[].concat(_toConsumableArray(h),[b])})},active:h[h.length-1]===b},b)})),_react.default.createElement(StateJson,{fontSize:e},i)))}},{key:"FONT_SIZE",get:function(){var a=parseInt(localStorage.getItem("stateViewer.fontSize"));return isNaN(a)?16:a}},{key:"INDENTATION",get:function(){var a=parseInt(localStorage.getItem("stateViewer.indentation"));return isNaN(a)?2:a}},{key:"SHOW_ADJUSTERS",get:function(){var a=localStorage.getItem("stateViewer.showAdjusters");return"false"!==a}}]),b}(_react.default.PureComponent);exports.default=StateViewer;var ArrowIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject()),TimesIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject2()),UpArrowIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject3()),DownArrowIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject4()),Title=(0,_styledComponents.default)(_semanticUiReact.Header)(_templateObject5(),function(a){return a.showAdjusters?0:1},function(a){return a.showAdjusters?0:.88}),StateViewerContainer=_styledComponents.default.div(_templateObject6(),function(a){return a.viewerWidth+"%"}),StateNavigationButton=(0,_styledComponents.default)(_semanticUiReact.Button)(_templateObject7(),function(a){return a.active?"#00b5ad !important":""},function(a){return a.disabled?"white !important":""}),Adjusters=_styledComponents.default.div(_templateObject8(),function(a){return a.showAdjusters?1:0},function(a){return a.showAdjusters?"auto":0},function(a){return a.showAdjusters?1:-10},function(a){return a.showAdjusters?"25px 10px 10px 10px":0},function(a){return a.showAdjusters?"10px":0}),Adjuster=_styledComponents.default.div(_templateObject9()),AdjusterIcon=(0,_styledComponents.default)(_semanticUiReact.Icon)(_templateObject10()),StateJson=_styledComponents.default.pre(_templateObject11(),function(a){return a.fontSize+"px"});function isObject(a){return!!(a&&"number"!=typeof a&&"string"!=typeof a&&!Array.isArray(a)&&a.constructor)&&"Object"===a.constructor.name}

package.json

 {
   "name": "react-state-trace",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A state trace viewer for react apps",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

47497

increased by0.33%

No dependency changes