reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 00:19:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(rtk-query): add counters on tags & subs tab buttons

Browse Source
This commit is contained in:
FaberVitale 2021-06-19 12:44:17 +02:00
parent d574358c5d
commit e649318adb
3 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreview.tsx
View File

@ -50,6 +50,36 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
this.labelRenderer = createTreeItemLabelRenderer(this.props.styling);
}
renderLabelWithCounter = (label: React.ReactText, counter: number): string => {
let counterAsString = counter.toFixed(0);
if(counterAsString.length > 3) {
counterAsString = counterAsString.slice(0, 2) + '...';
}
return `${label} (${counterAsString})`
}
renderTabLabel = (tab: QueryPreviewTabOption): ReactNode => {
const { queryInfo, tags, querySubscriptions } = this.props;
if(queryInfo) {
if(tab.value === QueryPreviewTabs.queryTags && tags.length > 0) {
return this.renderLabelWithCounter(tab.label, tags.length);
}
if(tab.value === QueryPreviewTabs.querySubscriptions && querySubscriptions) {
const subsCount = Object.keys(querySubscriptions).length;
if(subsCount > 0) {
return this.renderLabelWithCounter(tab.label, subsCount);
}
}
}
return tab.label;
}
render(): ReactNode {
const {
queryInfo,
@ -73,6 +103,7 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
selectedTab={selectedTab}
onTabChange={onTabChange}
tabs={tabs}
renderTabLabel={this.renderTabLabel}
/>
</div>
)}
@ -89,6 +120,7 @@ export class QueryPreview extends React.PureComponent<QueryPreviewProps> {
selectedTab={selectedTab}
onTabChange={onTabChange}
tabs={tabs}
renderTabLabel={this.renderTabLabel}
/>
<TabComponent
styling={styling}

5
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewHeader.tsx
View File

@ -7,6 +7,7 @@ export interface QueryPreviewHeaderProps {
tabs: ReadonlyArray<QueryPreviewTabOption>;
onTabChange: (tab: QueryPreviewTabs) => void;
selectedTab: QueryPreviewTabs;
renderTabLabel?: (tab: QueryPreviewTabOption) => ReactNode;
}
export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps> {
@ -17,7 +18,7 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
};
render(): ReactNode {
const { tabs, selectedTab } = this.props;
const { tabs, selectedTab, renderTabLabel } = this.props;
return (
<StyleUtilsContext.Consumer>
@ -36,7 +37,7 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
tab.value === selectedTab
)}
>
{tab.label}
{renderTabLabel ? renderTabLabel(tab) : tab.label}
</div>
))}
</div>

4
packages/redux-devtools-rtk-query-inspector-monitor/src/utils/isIterable.ts
View File

@ -1,8 +1,8 @@
export default function isIterable(obj: any) {
export default function isIterable(obj: unknown): boolean {
return (
obj !== null &&
typeof obj === 'object' &&
!Array.isArray(obj) &&
typeof obj[window.Symbol.iterator] === 'function'
typeof (obj as any)[window.Symbol.iterator] === 'function'
);
}