seasharp/anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): hoist BriefNetworkInterface

Browse Source
This commit is contained in:
Tsu-ba-me 2022-07-19 14:28:03 -04:00
parent 2aeb789146
commit f697698a88
2 changed files with 67 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
striker-ui/components/BriefNetworkInterface.tsx Normal file
View File

@ -0,0 +1,66 @@
import { FC } from 'react';
import {
Box as MUIBox,
BoxProps as MUIBoxProps,
IconButton as MUIIconButton,
IconButtonProps as MUIIconButtonProps,
} from '@mui/material';
import { Close as MUICloseIcon } from '@mui/icons-material';
import { GREY } from '../lib/consts/DEFAULT_THEME';
import Decorator from './Decorator';
import { BodyText } from './Text';
type BriefNetworkInterfaceOptionalProps = {
onClose?: MUIIconButtonProps['onClick'];
};
const BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS: Required<
Omit<BriefNetworkInterfaceOptionalProps, 'onClose'>
> &
Pick<BriefNetworkInterfaceOptionalProps, 'onClose'> = {
onClose: undefined,
};
const BriefNetworkInterface: FC<
MUIBoxProps &
BriefNetworkInterfaceOptionalProps & {
networkInterface: NetworkInterfaceOverviewMetadata;
}
> = ({
networkInterface: { networkInterfaceName, networkInterfaceState },
onClose,
sx: rootSx,
...restRootProps
}) => (
<MUIBox
{...{
sx: {
display: 'flex',
flexDirection: 'row',
'& > :not(:first-child)': { marginLeft: '.5em' },
...rootSx,
},
...restRootProps,
}}
>
<Decorator
colour={networkInterfaceState === 'up' ? 'ok' : 'off'}
sx={{ height: 'auto' }}
/>
<BodyText text={networkInterfaceName} />
{onClose && (
<MUIIconButton onClick={onClose} size="small" sx={{ color: GREY }}>
<MUICloseIcon />
</MUIIconButton>
)}
</MUIBox>
);
BriefNetworkInterface.defaultProps = BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS;
export default BriefNetworkInterface;

55
striker-ui/pages/init/index.tsx
View File

@ -2,14 +2,11 @@ import { FC, useEffect, useState } from 'react';
import {
Box as MUIBox,
BoxProps as MUIBoxProps,
IconButton as MUIIconButton,
IconButtonProps as MUIIconButtonProps,
iconButtonClasses as muiIconButtonClasses,
} from '@mui/material';
import {
Add as MUIAddIcon,
Check as MUICheckIcon,
Close as MUICloseIcon,
DragHandle as MUIDragHandleIcon,
} from '@mui/icons-material';
import {
@ -22,6 +19,7 @@ import { v4 as uuidv4 } from 'uuid';
import API_BASE_URL from '../../lib/consts/API_BASE_URL';
import { BLUE, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
import BriefNetworkInterface from '../../components/BriefNetworkInterface';
import Decorator from '../../components/Decorator';
import OutlinedInputWithLabel from '../../components/OutlinedInputWithLabel';
import {
@ -124,57 +122,6 @@ const DataGridCellText: FC<BodyTextProps> = ({
/>
);
type BriefNetworkInterfaceOptionalProps = {
onClose?: MUIIconButtonProps['onClick'];
};
const BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS: Required<
Omit<BriefNetworkInterfaceOptionalProps, 'onClose'>
> &
Pick<BriefNetworkInterfaceOptionalProps, 'onClose'> = {
onClose: undefined,
};
const BriefNetworkInterface: FC<
MUIBoxProps &
BriefNetworkInterfaceOptionalProps & {
networkInterface: NetworkInterfaceOverviewMetadata;
}
> = ({
networkInterface: { networkInterfaceName, networkInterfaceState },
onClose,
sx: rootSx,
...restRootProps
}) => (
<MUIBox
{...{
sx: {
display: 'flex',
flexDirection: 'row',
'& > :not(:first-child)': { marginLeft: '.5em' },
...rootSx,
},
...restRootProps,
}}
>
<Decorator
colour={networkInterfaceState === 'up' ? 'ok' : 'off'}
sx={{ height: 'auto' }}
/>
<BodyText text={networkInterfaceName} />
{onClose && (
<MUIIconButton onClick={onClose} size="small" sx={{ color: GREY }}>
<MUICloseIcon />
</MUIIconButton>
)}
</MUIBox>
);
BriefNetworkInterface.defaultProps = BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS;
const createNetworkInterfaceTableColumns = (
handleDragMouseDown: (
row: NetworkInterfaceOverviewMetadata,