Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dialog: Animate when opening and closing #530

Merged
merged 5 commits into from
Nov 11, 2016
Merged

Dialog: Animate when opening and closing #530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5432921
Animate the Dialog in
Nov 10, 2016
25e2ab6
Animate the Dialog out
Nov 10, 2016
75c1586
Merge branch 'master' into miwhea/animate-dialog
Nov 10, 2016
daec33f
Merge branch 'master' into miwhea/animate-dialog
Nov 11, 2016
93b3cfc
Remove unnecessary timeout and add clarifying comments
Nov 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 29 additions & 11 deletions src/components/Dialog/Dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,27 @@ $Dialog-default-max-width: 340px;
width: 100%;
top: 0;
@include left(0);
display: none; // Hidden by default

// Fallback for IE9
.ms-Button.ms-Button--compound {
display: block;
@include margin-left(0);
}

.ms-Overlay {
@media screen and (-ms-high-contrast: active) {
opacity: 0;
}
}
}

// State: The dialog is open
.ms-Dialog.is-open {
display: block;
}

// Fallback for IE9 when dialog is open
.ms-Dialog.is-open {
display: block;
line-height: 100vh;
text-align: center;
Expand All @@ -37,17 +56,16 @@ $Dialog-default-max-width: 340px;
height: 100%;
width: 0;
}
}

.ms-Button.ms-Button--compound {
display: block;
@include margin-left(0);
}
// State: The dialog is animating open
.ms-Dialog.is-animatingOpen {
@include ms-u-fadeIn200;
}

.ms-Overlay {
@media screen and (-ms-high-contrast: active) {
opacity: 0;
}
}
// State: The dialog is animating closed
.ms-Dialog.is-animatingClose {
@include ms-u-fadeOut200;
}

// The actual dialog element
Expand Down Expand Up @@ -198,4 +216,4 @@ $Dialog-default-max-width: 340px;
min-width: $Dialog-default-min-width;
max-width: $Dialog-default-max-width;
}
}
}
135 changes: 102 additions & 33 deletions src/components/Dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,20 @@ import { css } from '../../utilities/css';
import { Popup } from '../Popup/index';
import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
import { getId } from '../../utilities/object';
import { BaseComponent } from '../../common/BaseComponent';
import './Dialog.scss';

// @TODO - need to add animations, pending Fabric Team + Coulton work
// @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)

export interface IDialogState {
isOpen?: boolean;
isAnimatingOpen?: boolean;
isAnimatingClose?: boolean;
id?: string;
}

@withResponsiveMode
export class Dialog extends React.Component<IDialogProps, any> {
export class Dialog extends BaseComponent<IDialogProps, IDialogState> {

public static defaultProps: IDialogProps = {
isOpen: false,
Expand All @@ -30,14 +37,37 @@ export class Dialog extends React.Component<IDialogProps, any> {
constructor(props: IDialogProps) {
super(props);

this._onDialogRef = this._onDialogRef.bind(this);

this.state = {
id: getId('Dialog'),
isAnimatingOpen: props.isOpen,
isAnimatingClose: false
};
}

public componentWillReceiveProps(newProps: IDialogProps) {
// Opening the dialog
if (newProps.isOpen && !this.state.isOpen) {
this.setState({
isOpen: true,
isAnimatingOpen: true,
isAnimatingClose: false
});
}

// Closing the dialog
if (!newProps.isOpen && this.state.isOpen) {
this.setState({
isAnimatingOpen: false,
isAnimatingClose: true
});
}
}

public render() {
let { isOpen, type, isDarkOverlay, onDismiss, title, subText, isBlocking, responsiveMode, elementToFocusOnDismiss, ignoreExternalFocusing, forceFocusInsideTrap, firstFocusableSelector, closeButtonAriaLabel, onLayerMounted, isClickableOutsideFocusTrap} = this.props;
let { id } = this.state;
let { type, isDarkOverlay, onDismiss, title, subText, isBlocking, responsiveMode, elementToFocusOnDismiss, ignoreExternalFocusing, forceFocusInsideTrap, firstFocusableSelector, closeButtonAriaLabel, onLayerMounted, isClickableOutsideFocusTrap} = this.props;
let { id, isOpen, isAnimatingOpen, isAnimatingClose } = this.state;
// @TODO - the discussion on whether the Dialog contain a property for rendering itself is still being discussed
if (!isOpen) {
return null;
Expand All @@ -46,7 +76,10 @@ export class Dialog extends React.Component<IDialogProps, any> {
let subTextContent;
const dialogClassName = css('ms-Dialog', this.props.className, {
'ms-Dialog--lgHeader': type === DialogType.largeHeader,
'ms-Dialog--close': type === DialogType.close
'ms-Dialog--close': type === DialogType.close,
'is-open': isOpen,
'is-animatingOpen': isAnimatingOpen,
'is-animatingClose': isAnimatingClose
});
let groupings = this._groupChildren();

Expand All @@ -59,41 +92,44 @@ export class Dialog extends React.Component<IDialogProps, any> {
return (
<Layer onLayerMounted={ onLayerMounted }>
<Popup
className={ dialogClassName }
role='dialog'
ariaLabelledBy={ title ? id + '-title' : '' }
ariaDescribedBy={ subText ? id + '-subText' : '' }
onDismiss={ onDismiss }
>
<Overlay isDarkThemed={ isDarkOverlay } onClick={ isBlocking ? null : onDismiss } />
<FocusTrapZone
className={ css('ms-Dialog-main', this.props.containerClassName) }
elementToFocusOnDismiss={ elementToFocusOnDismiss }
isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking }
ignoreExternalFocusing={ ignoreExternalFocusing }
forceFocusInsideTrap={ forceFocusInsideTrap }
firstFocusableSelector={ firstFocusableSelector }>
<div className='ms-Dialog-header'>
<p className='ms-Dialog-title' id={ id + '-title' }>{ title }</p>
<div className='ms-Dialog-topButton'>
<Button
className='ms-Dialog-button ms-Dialog-button--close'
buttonType={ ButtonType.icon }
icon='Cancel'
rootProps={ { title: closeButtonAriaLabel } }
ariaLabel={ closeButtonAriaLabel }
onClick={ onDismiss }
/>
<div
className={ dialogClassName }
ref={ this._onDialogRef }>
<Overlay isDarkThemed={ isDarkOverlay } onClick={ isBlocking ? null : onDismiss } />
<FocusTrapZone
className={ css('ms-Dialog-main', this.props.containerClassName) }
elementToFocusOnDismiss={ elementToFocusOnDismiss }
isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking }
ignoreExternalFocusing={ ignoreExternalFocusing }
forceFocusInsideTrap={ forceFocusInsideTrap }
firstFocusableSelector={ firstFocusableSelector }>
<div className='ms-Dialog-header'>
<p className='ms-Dialog-title' id={ id + '-title' }>{ title }</p>
<div className='ms-Dialog-topButton'>
<Button
className='ms-Dialog-button ms-Dialog-button--close'
buttonType={ ButtonType.icon }
icon='Cancel'
rootProps={ { title: closeButtonAriaLabel } }
ariaLabel={ closeButtonAriaLabel }
onClick={ onDismiss }
/>
</div>
</div>
</div>
<div className='ms-Dialog-inner'>
<div className={ css('ms-Dialog-content', this.props.contentClassName) }>
{ subTextContent }
{ groupings.contents }
<div className='ms-Dialog-inner'>
<div className={ css('ms-Dialog-content', this.props.contentClassName) }>
{ subTextContent }
{ groupings.contents }
</div>
{ groupings.footers }
</div>
{ groupings.footers }
</div>
</FocusTrapZone>
</FocusTrapZone>
</div>
</Popup>
</Layer>
);
Expand All @@ -120,4 +156,37 @@ export class Dialog extends React.Component<IDialogProps, any> {

return groupings;
}

private _onDialogRef(ref: HTMLDivElement) {
if (ref) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use onAnimationEnd in react 15+?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the onAnimationEnd handler was added for React 15. Here's the pull request.

this._events.on(ref, 'animationend', this._onAnimationEnd);
} else {
this._events.off();
}
}

// Watch for completed animations and set the state
private _onAnimationEnd(ev: AnimationEvent) {

// The dialog has just opened (faded in)
if (ev.animationName.indexOf('fadeIn') > -1) {
this.setState({
isOpen: true,
isAnimatingOpen: false
});
}

// The dialog has just closed (faded out)
if (ev.animationName.indexOf('fadeOut') > -1) {
this.setState({
isOpen: false,
isAnimatingClose: false
});

// Call the onDismiss callback
if (this.props.onDismiss) {
this.props.onDismiss();
}
}
}
}