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

actionPreview

Browse Source
This commit is contained in:
Nathan Bierema 2023-12-11 20:18:49 -05:00
parent 6f7649b169
commit e85caa5759
2 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
View File

@ -10,6 +10,7 @@ import ActionPreviewHeader from './ActionPreviewHeader';
import DiffTab from './tabs/DiffTab'; import DiffTab from './tabs/DiffTab';
import StateTab from './tabs/StateTab'; import StateTab from './tabs/StateTab';
import ActionTab from './tabs/ActionTab'; import ActionTab from './tabs/ActionTab';
import { actionPreviewCss } from './utils/createStylingFromTheme';
export interface TabComponentProps<S, A extends Action<string>> { export interface TabComponentProps<S, A extends Action<string>> {
labelRenderer: LabelRenderer; labelRenderer: LabelRenderer;
@ -121,7 +122,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName)!; renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName)!;
return ( return (
<div key="actionPreview" {...styling('actionPreview')}> <div key="actionPreview" css={actionPreviewCss}>
<ActionPreviewHeader <ActionPreviewHeader
tabs={renderedTabs as unknown as Tab<unknown, Action<string>>[]} tabs={renderedTabs as unknown as Tab<unknown, Action<string>>[]}
{...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }} {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}

30
packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts
View File

@ -184,24 +184,24 @@ export const actionListHeaderWrapperCss = css({
height: '20px', height: '20px',
}); });
const getSheetFromColorMap = (map: ColorMap) => ({ export const actionPreviewCss: Interpolation<Theme> = (theme) => ({
actionPreview: { flex: 1,
flex: 1, display: 'flex',
display: 'flex', flexDirection: 'column',
'flex-direction': 'column', flexGrow: 1,
'flex-grow': 1, overflowY: 'hidden',
'overflow-y': 'hidden',
'& pre': { '& pre': {
border: 'inherit', border: 'inherit',
'border-radius': '3px', borderRadius: '3px',
'line-height': 'inherit', lineHeight: 'inherit',
color: 'inherit', color: 'inherit',
},
'background-color': map.BACKGROUND_COLOR,
}, },
backgroundColor: colorMap(theme).BACKGROUND_COLOR,
});
const getSheetFromColorMap = (map: ColorMap) => ({
actionPreviewContent: { actionPreviewContent: {
flex: 1, flex: 1,
'overflow-y': 'auto', 'overflow-y': 'auto',