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

actionListItem

Browse Source
This commit is contained in:
Nathan Bierema 2023-12-10 23:56:16 -05:00
parent 70ad944bf5
commit 627ae13300
2 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx
View File

@ -5,6 +5,13 @@ import debounce from 'lodash.debounce';
import { StylingFunction } from 'react-base16-styling'; import { StylingFunction } from 'react-base16-styling';
import { Action } from 'redux'; import { Action } from 'redux';
import RightSlider from './RightSlider'; import RightSlider from './RightSlider';
import {
actionListFromFutureCss,
actionListItemButtonsCss,
actionListItemCss,
actionListItemSelectedCss,
actionListItemSkippedCss,
} from './utils/createStylingFromTheme';
const BUTTON_SKIP = 'Skip'; const BUTTON_SKIP = 'Skip';
const BUTTON_JUMP = 'Jump'; const BUTTON_JUMP = 'Jump';
@ -74,16 +81,12 @@ export default class ActionListRow<
onMouseDown={this.handleMouseDown} onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseEnter} onMouseUp={this.handleMouseEnter}
data-id={actionId} data-id={actionId}
{...styling( css={[
[ actionListItemCss,
'actionListItem', isSelected && actionListItemSelectedCss,
isSelected && 'actionListItemSelected', isSkipped && actionListItemSkippedCss,
isSkipped && 'actionListItemSkipped', isInFuture && actionListFromFutureCss,
isInFuture && 'actionListFromFuture', ]}
],
isSelected,
action,
)}
> >
<div <div
{...styling([ {...styling([
@ -105,7 +108,7 @@ export default class ActionListRow<
</div> </div>
</RightSlider> </RightSlider>
) : ( ) : (
<div {...styling('actionListItemButtons')}> <div css={actionListItemButtonsCss}>
<RightSlider styling={styling} shown={!showButtons} rotate> <RightSlider styling={styling} shown={!showButtons} rotate>
<div {...styling('actionListItemTime')}> <div {...styling('actionListItemTime')}>
{timeDelta === 0 {timeDelta === 0

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

@ -106,37 +106,35 @@ export const actionListHeaderSelectorCss = css({
marginRight: '10px', marginRight: '10px',
}); });
const getSheetFromColorMap = (map: ColorMap) => ({ export const actionListItemCss: Interpolation<Theme> = (theme) => ({
actionListItem: { borderBottomWidth: '1px',
'border-bottom-width': '1px', borderBottomStyle: 'solid',
'border-bottom-style': 'solid',
display: 'flex', display: 'flex',
'justify-content': 'space-between', justifyContent: 'space-between',
padding: '5px 10px', padding: '5px 10px',
cursor: 'pointer', cursor: 'pointer',
'user-select': 'none', userSelect: 'none',
'border-bottom-color': map.BORDER_COLOR, borderBottomColor: colorMap(theme).BORDER_COLOR,
}, });
actionListItemSelected: { export const actionListItemSelectedCss: Interpolation<Theme> = (theme) => ({
'background-color': map.SELECTED_BACKGROUND_COLOR, backgroundColor: colorMap(theme).SELECTED_BACKGROUND_COLOR,
}, });
actionListItemSkipped: { export const actionListItemSkippedCss: Interpolation<Theme> = (theme) => ({
'background-color': map.SKIPPED_BACKGROUND_COLOR, backgroundColor: colorMap(theme).SKIPPED_BACKGROUND_COLOR,
}, });
actionListFromFuture: { export const actionListFromFutureCss = css({ opacity: '0.6' });
opacity: '0.6',
},
actionListItemButtons: { export const actionListItemButtonsCss = css({
position: 'relative', position: 'relative',
height: '20px', height: '20px',
display: 'flex', display: 'flex',
}, });
const getSheetFromColorMap = (map: ColorMap) => ({
actionListItemTime: { actionListItemTime: {
display: 'inline', display: 'inline',
padding: '4px 6px', padding: '4px 6px',