@redux-devtools/rtk-query-monitor
Version:
rtk-query monitor for Redux DevTools
59 lines • 1.95 kB
JavaScript
import { createSelector } from '@reduxjs/toolkit';
import React, { PureComponent } from 'react';
import { QueryPreviewTabs } from '../types';
import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
import { emptyRecord, identity } from '../utils/object';
import { TreeView } from './TreeView';
import { jsx as ___EmotionJSX } from "@emotion/react";
const keySep = ' - ';
const rootProps = {
'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.actions),
id: renderTabPanelId(QueryPreviewTabs.actions),
role: 'tabpanel'
};
export class QueryPreviewActions extends PureComponent {
selectFormattedActions = (() => createSelector(identity, actions => {
const output = {};
if (actions.length === 0) {
return emptyRecord;
}
for (let i = 0, len = actions.length; i < len; i++) {
const action = actions[i];
const key = `${i}${keySep}${action?.type ?? ''}`;
output[key] = action;
}
return output;
}))();
isLastActionNode = (keyPath, layer) => {
if (layer >= 1) {
const len = this.props.actionsOfQuery.length;
const actionKey = keyPath[keyPath.length - 1];
if (typeof actionKey === 'string') {
const index = Number(actionKey.split(keySep)[0]);
return len > 0 && len - index < 2;
}
}
return false;
};
shouldExpandNodeInitially = (keyPath, value, layer) => {
if (layer === 1) {
return this.isLastActionNode(keyPath, layer);
}
if (layer === 2) {
return this.isLastActionNode(keyPath, layer) && (keyPath[0] === 'meta' || keyPath[0] === 'error');
}
return layer <= 1;
};
render() {
const {
isWideLayout,
actionsOfQuery
} = this.props;
return ___EmotionJSX(TreeView, {
rootProps: rootProps,
data: this.selectFormattedActions(actionsOfQuery),
isWideLayout: isWideLayout,
shouldExpandNodeInitially: this.shouldExpandNodeInitially
});
}
}