fix(striker-ui): separate type and render() in ContainedButton

main
Tsu-ba-me 2 years ago
parent fa3fc07d85
commit 37c856d383
  1. 28
      striker-ui/components/ContainedButton.tsx
  2. 2
      striker-ui/components/ProvisionServerDialog.tsx
  3. 2
      striker-ui/components/SuggestButton.tsx
  4. 1
      striker-ui/types/ContainedButton.d.ts

@ -1,17 +1,11 @@
import { import { Button as MUIButton, SxProps, Theme } from '@mui/material';
Button as MUIButton, import { FC, useMemo } from 'react';
ButtonProps as MUIButtonProps,
} from '@mui/material';
import { BLACK, GREY, TEXT } from '../lib/consts/DEFAULT_THEME'; import { BLACK, GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
type ContainedButtonProps = MUIButtonProps; const ContainedButton: FC<ContainedButtonProps> = ({ sx, ...restProps }) => {
const combinedSx = useMemo<SxProps<Theme>>(
const ContainedButton = ( () => ({
containedButtonProps: ContainedButtonProps,
): JSX.Element => {
const { children, sx } = containedButtonProps;
const combinedSx: ContainedButtonProps['sx'] = {
backgroundColor: TEXT, backgroundColor: TEXT,
color: BLACK, color: BLACK,
textTransform: 'none', textTransform: 'none',
@ -21,21 +15,19 @@ const ContainedButton = (
}, },
...sx, ...sx,
}; }),
[sx],
);
return ( return (
<MUIButton <MUIButton
{...{ {...{
variant: 'contained', variant: 'contained',
...containedButtonProps, ...restProps,
sx: combinedSx, sx: combinedSx,
}} }}
> />
{children}
</MUIButton>
); );
}; };
export type { ContainedButtonProps };
export default ContainedButton; export default ContainedButton;

@ -15,7 +15,7 @@ import { BLUE, RED, TEXT } from '../lib/consts/DEFAULT_THEME';
import Autocomplete from './Autocomplete'; import Autocomplete from './Autocomplete';
import ConfirmDialog from './ConfirmDialog'; import ConfirmDialog from './ConfirmDialog';
import ContainedButton, { ContainedButtonProps } from './ContainedButton'; import ContainedButton from './ContainedButton';
import { dsize, dsizeToByte } from '../lib/format_data_size_wrappers'; import { dsize, dsizeToByte } from '../lib/format_data_size_wrappers';
import IconButton, { IconButtonProps } from './IconButton'; import IconButton, { IconButtonProps } from './IconButton';
import mainAxiosInstance from '../lib/singletons/mainAxiosInstance'; import mainAxiosInstance from '../lib/singletons/mainAxiosInstance';

@ -1,6 +1,6 @@
import { FC } from 'react'; import { FC } from 'react';
import ContainedButton, { ContainedButtonProps } from './ContainedButton'; import ContainedButton from './ContainedButton';
type SuggestButtonOptionalProps = { type SuggestButtonOptionalProps = {
show?: boolean; show?: boolean;

@ -0,0 +1 @@
type ContainedButtonProps = import('@mui/material').ButtonProps;
Loading…
Cancel
Save