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

actionListHeaderSelector

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

7
packages/redux-devtools-inspector-monitor/src/ActionListHeader.tsx
View File

@ -1,7 +1,10 @@
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent } from 'react';
import { StylingFunction } from 'react-base16-styling'; import { StylingFunction } from 'react-base16-styling';
import RightSlider from './RightSlider'; import RightSlider from './RightSlider';
import { actionListHeaderCss } from './utils/createStylingFromTheme'; import {
actionListHeaderCss,
actionListHeaderSelectorCss,
} from './utils/createStylingFromTheme';
const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] => const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
[hasSkippedActions && 'Sweep', 'Commit'].filter( [hasSkippedActions && 'Sweep', 'Commit'].filter(
@ -39,7 +42,7 @@ const ActionListHeader: FunctionComponent<Props> = ({
{!hideMainButtons && ( {!hideMainButtons && (
<div {...styling('actionListHeaderWrapper')}> <div {...styling('actionListHeaderWrapper')}>
<RightSlider shown={hasStagedActions} styling={styling}> <RightSlider shown={hasStagedActions} styling={styling}>
<div {...styling('actionListHeaderSelector')}> <div css={actionListHeaderSelectorCss}>
{getActiveButtons(hasSkippedActions).map((btn) => ( {getActiveButtons(hasSkippedActions).map((btn) => (
<div <div
key={btn} key={btn}

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

@ -101,12 +101,12 @@ export const actionListHeaderCss: Interpolation<Theme> = (theme) => ({
export const actionListRowsCss = css({ overflow: 'auto' }); export const actionListRowsCss = css({ overflow: 'auto' });
const getSheetFromColorMap = (map: ColorMap) => ({ export const actionListHeaderSelectorCss = css({
actionListHeaderSelector: {
display: 'inline-flex', display: 'inline-flex',
'margin-right': '10px', marginRight: '10px',
}, });
const getSheetFromColorMap = (map: ColorMap) => ({
actionListItem: { actionListItem: {
'border-bottom-width': '1px', 'border-bottom-width': '1px',
'border-bottom-style': 'solid', 'border-bottom-style': 'solid',