@redux-devtools/rtk-query-monitor
Version:
rtk-query monitor for Redux DevTools
72 lines (71 loc) • 3.35 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.QueryPreviewApi = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _types = require("../types");
var _TreeView = require("./TreeView");
var _a11y = require("../utils/a11y");
var _react2 = require("@emotion/react");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const rootProps = {
'aria-labelledby': (0, _a11y.renderTabPanelButtonId)(_types.QueryPreviewTabs.apiConfig),
id: (0, _a11y.renderTabPanelId)(_types.QueryPreviewTabs.apiConfig),
role: 'tabpanel'
};
class QueryPreviewApi extends _react.PureComponent {
shouldExpandApiStateNode = (keyPath, value, layer) => {
const lastKey = keyPath[keyPath.length - 1];
return layer <= 1 && lastKey !== 'config';
};
render() {
const {
apiStats,
isWideLayout,
apiState
} = this.props;
if (!apiState) {
return null;
}
const hasMutations = Object.keys(apiState.mutations).length > 0;
const hasQueries = Object.keys(apiState.queries).length > 0;
return (0, _react2.jsx)("article", (0, _extends2.default)({}, rootProps, {
css: theme => ({
display: 'block',
overflowY: 'auto',
padding: '0.5em 0',
color: theme.TAB_CONTENT_COLOR,
'& h2': {
color: theme.ULIST_STRONG_COLOR,
padding: '0.5em 1em',
fontWeight: 700
},
'& h3': {
color: theme.ULIST_STRONG_COLOR
}
})
}), (0, _react2.jsx)("h2", null, apiState.config.reducerPath), (0, _react2.jsx)(_TreeView.TreeView, {
before: (0, _react2.jsx)("h3", null, "State"),
data: apiState,
shouldExpandNodeInitially: this.shouldExpandApiStateNode,
isWideLayout: isWideLayout
}), apiStats && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_TreeView.TreeView, {
before: (0, _react2.jsx)("h3", null, "Tally"),
data: apiStats.tally,
isWideLayout: isWideLayout
}), hasQueries && (0, _react2.jsx)(_TreeView.TreeView, {
before: (0, _react2.jsx)("h3", null, "Queries Timings"),
data: apiStats.timings.queries,
isWideLayout: isWideLayout
}), hasMutations && (0, _react2.jsx)(_TreeView.TreeView, {
before: (0, _react2.jsx)("h3", null, "Mutations Timings"),
data: apiStats.timings.mutations,
isWideLayout: isWideLayout
})));
}
}
exports.QueryPreviewApi = QueryPreviewApi;