m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

migration of HeaderBase to use TS Box version (#20250)

Browse Source 
* migration of  HeaderBase to use TS Box version

* migration of  HeaderBase to use TS Box version

* update snapshot

* fix lint error

* Some small updates to types and removing deprecated storyook functions

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
jainex 2023-08-02 06:06:55 +05:30 committed by GitHub
parent b825ee8e37
commit 023249a944
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 145 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/component-library/header-base/__snapshots__/header-base.test.tsx.snap
View File

@ -3,12 +3,12 @@
exports[`HeaderBase should render HeaderBase element correctly 1`] = `
<div>
<div
class="box mm-header-base box--display-flex box--flex-direction-row box--justify-content-space-between"
class="mm-box mm-header-base mm-box--display-flex mm-box--justify-content-space-between"
data-testid="header-base"
title="HeaderBase test"
>
<div
class="box box--flex-direction-row box--width-full"
class="mm-box mm-box--width-full"
>
should render HeaderBase element correctly
</div>

10
ui/components/component-library/header-base/header-base.stories.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Box from '../../ui/box';
import { StoryFn, Meta } from '@storybook/react';
import {
IconName,
Button,
@ -8,6 +7,7 @@ import {
ButtonIcon,
ButtonIconSize,
Text,
Box,
} from '..';
import {
@ -27,11 +27,9 @@ export default {
page: README,
},
},
} as ComponentMeta<typeof HeaderBase>;
} as Meta<typeof HeaderBase>;
const Template: ComponentStory<typeof HeaderBase> = (args) => (
<HeaderBase {...args} />
);
const Template: StoryFn<typeof HeaderBase> = (args) => <HeaderBase {...args} />;
export const DefaultStory = Template.bind({});

210
ui/components/component-library/header-base/header-base.tsx
View File

@ -1,114 +1,122 @@
import React, { useRef, useEffect, useMemo, useState } from 'react';
import classnames from 'classnames';
import {
BLOCK_SIZES,
DISPLAY,
BlockSize,
Display,
JustifyContent,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Box } from '..';
import { HeaderBaseProps } from './header-base.types';
import type { PolymorphicRef, BoxProps } from '../box';
export const HeaderBase: React.FC<HeaderBaseProps> = ({
startAccessory,
endAccessory,
className = '',
children,
childrenWrapperProps,
startAccessoryWrapperProps,
endAccessoryWrapperProps,
...props
}) => {
const startAccessoryRef = useRef<HTMLDivElement>(null);
const endAccessoryRef = useRef<HTMLDivElement>(null);
const [accessoryMinWidth, setAccessoryMinWidth] = useState<number>();
import { HeaderBaseProps, HeaderBaseComponent } from './header-base.types';
useEffect(() => {
function handleResize() {
if (startAccessoryRef.current && endAccessoryRef.current) {
const accMinWidth = Math.max(
startAccessoryRef.current.scrollWidth,
endAccessoryRef.current.scrollWidth,
);
setAccessoryMinWidth(accMinWidth);
} else if (startAccessoryRef.current && !endAccessoryRef.current) {
setAccessoryMinWidth(startAccessoryRef.current.scrollWidth);
} else if (!startAccessoryRef.current && endAccessoryRef.current) {
setAccessoryMinWidth(endAccessoryRef.current.scrollWidth);
} else {
setAccessoryMinWidth(0);
export const HeaderBase: HeaderBaseComponent = React.forwardRef(
<C extends React.ElementType = 'div'>(
{
startAccessory,
endAccessory,
className = '',
children,
childrenWrapperProps,
startAccessoryWrapperProps,
endAccessoryWrapperProps,
...props
}: HeaderBaseProps<C>,
ref?: PolymorphicRef<C>,
) => {
const startAccessoryRef = useRef<HTMLDivElement>(null);
const endAccessoryRef = useRef<HTMLDivElement>(null);
const [accessoryMinWidth, setAccessoryMinWidth] = useState<number>();
useEffect(() => {
function handleResize() {
if (startAccessoryRef.current && endAccessoryRef.current) {
const accMinWidth = Math.max(
startAccessoryRef.current.scrollWidth,
endAccessoryRef.current.scrollWidth,
);
setAccessoryMinWidth(accMinWidth);
} else if (startAccessoryRef.current && !endAccessoryRef.current) {
setAccessoryMinWidth(startAccessoryRef.current.scrollWidth);
} else if (!startAccessoryRef.current && endAccessoryRef.current) {
setAccessoryMinWidth(endAccessoryRef.current.scrollWidth);
} else {
setAccessoryMinWidth(0);
}
}
}
handleResize();
window.addEventListener('resize', handleResize);
handleResize();
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [startAccessoryRef, endAccessoryRef, children]);
const getTitleStyles = useMemo(() => {
if (startAccessory && !endAccessory) {
return {
marginRight: `${accessoryMinWidth}px`,
return () => {
window.removeEventListener('resize', handleResize);
};
} else if (!startAccessory && endAccessory) {
return {
marginLeft: `${accessoryMinWidth}px`,
};
}
return {};
}, [accessoryMinWidth, startAccessory, endAccessory]);
}, [startAccessoryRef, endAccessoryRef, children]);
return (
<Box
className={classnames('mm-header-base', className)}
display={DISPLAY.FLEX}
justifyContent={JustifyContent.spaceBetween}
{...props}
>
{startAccessory && (
<Box
ref={startAccessoryRef}
style={
children
? {
minWidth: `${accessoryMinWidth}px`,
}
: undefined
}
{...startAccessoryWrapperProps}
>
{startAccessory}
</Box>
)}
{children && (
<Box
width={BLOCK_SIZES.FULL}
style={getTitleStyles}
{...childrenWrapperProps}
>
{children}
</Box>
)}
{endAccessory && (
<Box
display={DISPLAY.FLEX}
justifyContent={JustifyContent.flexEnd}
ref={endAccessoryRef}
style={
children
? {
minWidth: `${accessoryMinWidth}px`,
}
: undefined
}
{...endAccessoryWrapperProps}
>
{endAccessory}
</Box>
)}
</Box>
);
};
const getTitleStyles = useMemo(() => {
if (startAccessory && !endAccessory) {
return {
marginRight: `${accessoryMinWidth}px`,
};
} else if (!startAccessory && endAccessory) {
return {
marginLeft: `${accessoryMinWidth}px`,
};
}
return {};
}, [accessoryMinWidth, startAccessory, endAccessory]);
return (
<Box
className={classnames('mm-header-base', className)}
ref={ref}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
{...(props as BoxProps<C>)}
>
{startAccessory && (
<Box
ref={startAccessoryRef}
style={
children
? {
minWidth: `${accessoryMinWidth}px`,
}
: undefined
}
{...(startAccessoryWrapperProps as BoxProps<'div'>)}
>
{startAccessory}
</Box>
)}
{children && (
<Box
width={BlockSize.Full}
style={getTitleStyles}
{...(childrenWrapperProps as BoxProps<'div'>)}
>
{children}
</Box>
)}
{endAccessory && (
<Box
display={Display.Flex}
justifyContent={JustifyContent.flexEnd}
ref={endAccessoryRef}
style={
children
? {
minWidth: `${accessoryMinWidth}px`,
}
: undefined
}
{...(endAccessoryWrapperProps as BoxProps<'div'>)}
>
{endAccessory}
</Box>
)}
</Box>
);
},
);

22
ui/components/component-library/header-base/header-base.types.ts
View File

@ -1,7 +1,12 @@
import React from 'react';
import type { BoxProps } from '../../ui/box/box.d';
export interface HeaderBaseProps extends BoxProps {
import type {
StyleUtilityProps,
PolymorphicComponentPropWithRef,
BoxProps,
} from '../box';
export interface HeaderBaseStyleUtilityProps extends StyleUtilityProps {
/**
* The children is the title area of the HeaderBase
*/
@ -9,7 +14,7 @@ export interface HeaderBaseProps extends BoxProps {
/**
* Use the `childrenWrapperProps` prop to define the props to the children wrapper
*/
childrenWrapperProps?: BoxProps;
childrenWrapperProps?: BoxProps<'div'>;
/**
* The start(default left) content area of HeaderBase
*/
@ -17,7 +22,7 @@ export interface HeaderBaseProps extends BoxProps {
/**
* Use the `startAccessoryWrapperProps` prop to define the props to the start accessory wrapper
*/
startAccessoryWrapperProps?: BoxProps;
startAccessoryWrapperProps?: BoxProps<'div'>;
/**
* The end (default right) content area of HeaderBase
*/
@ -25,9 +30,16 @@ export interface HeaderBaseProps extends BoxProps {
/**
* Use the `endAccessoryWrapperProps` prop to define the props to the end accessory wrapper
*/
endAccessoryWrapperProps?: BoxProps;
endAccessoryWrapperProps?: BoxProps<'div'>;
/**
* An additional className to apply to the HeaderBase
*/
className?: string;
}
export type HeaderBaseProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, HeaderBaseStyleUtilityProps>;
export type HeaderBaseComponent = <C extends React.ElementType = 'div'>(
props: HeaderBaseProps<C>,
) => React.ReactElement | null;

6
ui/components/component-library/header-base/index.ts
View File

@ -1,2 +1,6 @@
export { HeaderBase } from './header-base';
export type { HeaderBaseProps } from './header-base.types';
export type {
HeaderBaseProps,
HeaderBaseComponent,
HeaderBaseStyleUtilityProps,
} from './header-base.types';

4
ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap
View File

@ -3,11 +3,11 @@
exports[`ModalHeader should render ModalHeader correctly 1`] = `
<div>
<div
class="box mm-header-base mm-modal-header box--display-flex box--flex-direction-row box--justify-content-space-between"
class="mm-box mm-header-base mm-modal-header mm-box--display-flex mm-box--justify-content-space-between"
data-testid="modal-header"
>
<div
class="box box--flex-direction-row box--width-full"
class="mm-box mm-box--width-full"
>
<header
class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"

4
ui/components/component-library/modal-header/modal-header.types.ts
View File

@ -1,8 +1,8 @@
import React from 'react';
import type { ButtonIconProps } from '../button-icon/button-icon.types';
import type { HeaderBaseProps } from '../header-base';
import type { HeaderBaseStyleUtilityProps } from '../header-base';
export interface ModalHeaderProps extends HeaderBaseProps {
export interface ModalHeaderProps extends HeaderBaseStyleUtilityProps {
/**
* The contents within the ModalHeader positioned middle (popular for title use case)
*/

4
ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap
View File

@ -3,11 +3,11 @@
exports[`PopoverHeader should render PopoverHeader correctly 1`] = `
<div>
<div
class="box mm-header-base mm-popover-header box--display-flex box--flex-direction-row box--justify-content-space-between"
class="mm-box mm-header-base mm-popover-header mm-box--display-flex mm-box--justify-content-space-between"
data-testid="popover-header"
>
<div
class="box box--flex-direction-row box--width-full"
class="mm-box mm-box--width-full"
>
<h4
class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-inherit"

4
ui/components/component-library/popover-header/popover-header.types.ts
View File

@ -1,8 +1,8 @@
import React from 'react';
import type { ButtonIconProps } from '../button-icon/button-icon.types';
import type { HeaderBaseProps } from '../header-base';
import type { HeaderBaseStyleUtilityProps } from '../header-base';
export interface PopoverHeaderProps extends HeaderBaseProps {
export interface PopoverHeaderProps extends HeaderBaseStyleUtilityProps {
/**
* The contents within the PopoverHeader positioned middle (popular for title use case)
*/