Skip to content

Commit

Permalink
fix: panel: fix panel animation while closing (#414)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ychhabra-eightfold
ychhabra-eightfold authored Oct 11, 2022
1 parent 651d4fd commit 7e12a20
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 97 deletions.
139 changes: 69 additions & 70 deletions src/components/Dialog/BaseDialog/BaseDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,79 +116,78 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(

const getDialog = (): JSX.Element => (
<NoFormStyle status override>
<FocusTrap trap={visible && focusTrap}>
<FocusTrap
trap={visible && focusTrap}
{...rest}
ref={ref}
role="dialog"
aria-modal={true}
aria-labelledby={labelId}
style={dialogBackdropStyle}
className={dialogBackdropClasses}
onClick={(e: React.MouseEvent<HTMLDivElement>) => {
maskClosable && onClose?.(e);
}}
>
<div
{...rest}
ref={ref}
role="dialog"
aria-modal={true}
aria-labelledby={labelId}
style={dialogBackdropStyle}
className={dialogBackdropClasses}
onClick={(e: React.MouseEvent<HTMLDivElement>) => {
maskClosable && onClose?.(e);
}}
className={dialogClasses}
style={dialogStyle}
onClick={stopPropagation}
>
<div
className={dialogClasses}
style={dialogStyle}
onClick={stopPropagation}
>
<div className={headerClasses}>
<span id={labelId}>
{headerButtonProps && (
<NeutralButton
classNames={styles.headerButton}
shape={ButtonShape.Round}
iconProps={{ path: headerIcon }}
style={{
transform:
htmlDir === 'rtl'
? 'rotate(180deg)'
: 'none',
}}
{...headerButtonProps}
/>
)}
{header}
</span>
<span className={styles.headerButtons}>
{actionButtonThreeProps && (
<NeutralButton
shape={ButtonShape.Round}
{...actionButtonThreeProps}
/>
)}
{actionButtonTwoProps && (
<NeutralButton
shape={ButtonShape.Round}
{...actionButtonTwoProps}
/>
)}
{actionButtonOneProps && (
<NeutralButton
shape={ButtonShape.Round}
{...actionButtonOneProps}
/>
)}
{closable && (
<NeutralButton
ariaLabel={closeButtonAriaLabelText}
iconProps={{ path: closeIcon }}
shape={ButtonShape.Round}
onClick={onClose}
{...closeButtonProps}
/>
)}
</span>
</div>
<div ref={scrollRef} className={bodyClasses}>
{body}
</div>
{actions && (
<div className={actionsClasses}>{actions}</div>
)}
<div className={headerClasses}>
<span id={labelId}>
{headerButtonProps && (
<NeutralButton
classNames={styles.headerButton}
shape={ButtonShape.Round}
iconProps={{ path: headerIcon }}
style={{
transform:
htmlDir === 'rtl'
? 'rotate(180deg)'
: 'none',
}}
{...headerButtonProps}
/>
)}
{header}
</span>
<span className={styles.headerButtons}>
{actionButtonThreeProps && (
<NeutralButton
shape={ButtonShape.Round}
{...actionButtonThreeProps}
/>
)}
{actionButtonTwoProps && (
<NeutralButton
shape={ButtonShape.Round}
{...actionButtonTwoProps}
/>
)}
{actionButtonOneProps && (
<NeutralButton
shape={ButtonShape.Round}
{...actionButtonOneProps}
/>
)}
{closable && (
<NeutralButton
ariaLabel={closeButtonAriaLabelText}
iconProps={{ path: closeIcon }}
shape={ButtonShape.Round}
onClick={onClose}
{...closeButtonProps}
/>
)}
</span>
</div>
<div ref={scrollRef} className={bodyClasses}>
{body}
</div>
{actions && (
<div className={actionsClasses}>{actions}</div>
)}
</div>
</FocusTrap>
</NoFormStyle>
Expand Down
39 changes: 19 additions & 20 deletions src/components/Panel/Panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,28 +282,27 @@ export const Panel = React.forwardRef<PanelRef, PanelProps>(
return (
<PanelContext.Provider value={operations}>
<NoFormStyle status override>
<FocusTrap trap={visible && focusTrap}>
<FocusTrap
trap={visible && focusTrap}
{...rest}
ref={containerRef}
classNames={panelBackdropClasses}
onClick={(
e: React.MouseEvent<HTMLDivElement>
) => {
maskClosable && onClose(e);
}}
aria-hidden={!visible}
>
<div
{...rest}
ref={containerRef}
className={panelBackdropClasses}
onClick={(
e: React.MouseEvent<HTMLDivElement>
) => {
maskClosable && onClose(e);
}}
aria-hidden={!visible}
ref={panelRef}
className={panelClasses}
onClick={stopPropagation}
style={getPanelStyle()}
>
<div
ref={panelRef}
className={panelClasses}
onClick={stopPropagation}
style={getPanelStyle()}
>
{getHeader()}
{getBody()}
{getFooter()}
</div>
{getHeader()}
{getBody()}
{getFooter()}
</div>
</FocusTrap>
</NoFormStyle>
Expand Down
27 changes: 20 additions & 7 deletions src/shared/FocusTrap/FocusTrap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
import React from 'react';

import React, { FC } from 'react';
import { useFocusTrap } from './hooks/useFocusTrap';
import { OcBaseProps } from '../../components/OcBase';

interface Pros {
children: React.ReactElement;
interface FocusTrapProps extends OcBaseProps<HTMLDivElement> {
trap: boolean;
}

export const FocusTrap = ({ children, trap = true }: Pros): JSX.Element => {
export const FocusTrap: FC<FocusTrapProps> = ({
trap = true,
children,
classNames,
'data-test-id': dataTestId,
...rest
}) => {
const focusRef = useFocusTrap(trap);
if (!trap) return children;
return <div ref={focusRef}>{children}</div>;
return (
<div
ref={focusRef}
className={classNames}
data-test-id={dataTestId}
{...rest}
>
{children}
</div>
);
};

0 comments on commit 7e12a20

Please sign in to comment.