Skip to content

Commit 7efc2e1

Browse files
AJIXuMuKAJIXuMuK
authored
Merge pull request #816 from anoopt/animated-dialog
Animated dialog control
2 parents 623239b + 4075706 commit 7efc2e1

16 files changed

+621
-1
lines changed

‎docs/documentation/docs/assets/AnimatedDialog.gif

11.1 MB
Loading

‎docs/documentation/docs/assets/AnimatedDialogCustomFooter.gif

7.22 MB
Loading

‎docs/documentation/docs/assets/AnimatedDialogWithIcon.gif

7.12 MB
Loading

‎docs/documentation/docs/assets/CustomisedAnimatedDialog.gif

4.17 MB
Loading

‎docs/documentation/docs/assets/DefaultAnimatedDialog.gif

3.3 MB
Loading

‎docs/documentation/docs/controls/AnimatedDialog.md

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
# Animated Dialog
2+
3+
Animated Dialog control is an extended version of the [Office UI Fabric React Dialog](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog#IDialog). Animated Dialog control adds the following to the dialog
4+
- Entrance and exit animations
5+
- Animated icon above the title
6+
7+
This control uses [Animate.css](https://animate.style/) to add the animations.
8+
9+
Here is an example of the control in action:
10+
11+
![Animated dialog control](../assets/AnimatedDialog.gif)
12+
13+
## Animate.css and animation names
14+
15+
[Animate.css](https://animate.style/) is a library that adds css animtions to controls. The website has all the names of the animations and any of them can be used in the `Animated Dialog` control. The default entrance animation name used in this control is `bounceIn` and the default exit animaton name is `zoomOut`.
16+
17+
## How to use this control in your solutions
18+
19+
- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
20+
- In your component file, import the `AnimatedDialog` control as follows:
21+
22+
```TypeScript
23+
import { AnimatedDialog } from "@pnp/spfx-controls-react/lib/AnimatedDialog";
24+
```
25+
26+
## Different ways of using the control
27+
28+
### 1. Simple way
29+
30+
The code below adds a dialog with an entrance animation of `bounceIn` and exit animation of `zoomOut`. (These are the default animations)
31+
32+
```TypeScript
33+
const animatedDialogContentProps: IDialogContentProps = {
34+
type: DialogType.normal,
35+
title: 'Animated Dialog',
36+
subText: 'Do you like the animated dialog?',
37+
};
38+
39+
const animatedModalProps: IModalProps = {
40+
isDarkOverlay: true
41+
};
42+
...
43+
...
44+
<AnimatedDialog
45+
hidden={!this.state.showAnimatedDialog}
46+
onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}
47+
dialogContentProps={animatedDialogContentProps}
48+
modalProps={animatedModalProps}
49+
>
50+
<DialogFooter>
51+
<PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text="Yes" />
52+
<DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text="No" />
53+
</DialogFooter>
54+
</AnimatedDialog>
55+
```
56+
#### Simple animated dialog
57+
58+
![Simple animated dialog control](../assets/DefaultAnimatedDialog.gif)
59+
60+
### 2. Adding custom animations
61+
62+
The code below adds adds a dialog with an entrance animation of `fadeInDown` and exit animation of `fadeInDown`.
63+
64+
```TypeScript
65+
const animatedDialogContentProps: IDialogContentProps = {
66+
type: DialogType.normal,
67+
title: 'Animated Dialog',
68+
subText: 'Do you like the animated dialog?',
69+
};
70+
71+
const animatedModalProps: IModalProps = {
72+
isDarkOverlay: true
73+
};
74+
...
75+
...
76+
<AnimatedDialog
77+
hidden={!this.state.showAnimatedDialog}
78+
onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}
79+
dialogContentProps={animatedDialogContentProps}
80+
modalProps={animatedModalProps}
81+
dialogAnimationInType='fadeInDown'
82+
dialogAnimationOutType='fadeOutDown'
83+
>
84+
<DialogFooter>
85+
<PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text="Yes" />
86+
<DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text="No" />
87+
</DialogFooter>
88+
</AnimatedDialog>
89+
```
90+
91+
#### Animated dialog with custom animations
92+
93+
![Animated dialog control with custom animations](../assets/CustomisedAnimatedDialog.gif)
94+
95+
### 3. Adding icons and functions
96+
97+
The code below does the following:
98+
- adds an icon (question mark) above the title
99+
- adds `Yes` and `No` buttons in the footer as `showAnimatedDialogFooter` is set to `true`.
100+
- passes 3 functions
101+
- onOkClick : The function that gets executed when the `No` button is clicked.
102+
- onSuccess : The function that gets executed on successful operation of the above function.
103+
- onError: The function that gets executed when the `onOkClick` function fails.
104+
105+
```TypeScript
106+
const animatedDialogContentProps: IDialogContentProps = {
107+
type: DialogType.normal,
108+
title: 'Animated Dialog with icon'
109+
};
110+
111+
const animatedModalProps: IModalProps = {
112+
isDarkOverlay: true,
113+
containerClassName: `${styles.dialogContainer}`
114+
};
115+
116+
// The operation that does something - e.g. update data
117+
const timeout = (ms: number): Promise<void> => {
118+
return new Promise((resolve, reject) => setTimeout(resolve, ms));
119+
};
120+
...
121+
...
122+
<AnimatedDialog
123+
hidden={!this.state.showCustomisedAnimatedDialog}
124+
onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}
125+
dialogContentProps={animatedDialogContentProps}
126+
modalProps={animatedModalProps}
127+
iconName='UnknownSolid'
128+
showAnimatedDialogFooter={true}
129+
okButtonText="Yes"
130+
cancelButtonText="No"
131+
onOkClick={() => timeout(1500)}
132+
onSuccess={() => {
133+
this.setState({ showCustomisedAnimatedDialog: false });
134+
this.setState({ showSuccessDialog: true });
135+
}}
136+
onError={() => {
137+
this.setState({ showCustomisedAnimatedDialog: false });
138+
this.setState({ showErrorDialog: true });
139+
}}>
140+
<div className={styles.dialogContent}>
141+
<span>Do you like the animated dialog?</span>
142+
</div>
143+
</AnimatedDialog>
144+
145+
// Success dialog
146+
147+
<AnimatedDialog
148+
hidden={!this.state.showSuccessDialog}
149+
onDismiss={() => { this.setState({ showSuccessDialog: false }); }}
150+
dialogContentProps={successDialogContentProps}
151+
modalProps={customizedAnimatedModalProps}
152+
iconName='CompletedSolid'
153+
>
154+
<div className={styles.dialogContent}><span>Thank you.</span></div>
155+
<div className={styles.resultDialogFooter}>
156+
<PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text="OK" >
157+
</PrimaryButton>
158+
</div>
159+
</AnimatedDialog>
160+
```
161+
162+
#### Animated dialog with icon
163+
164+
![Animated dialog control with icon](../assets/AnimatedDialogWithIcon.gif)
165+
166+
### 4. Custom footer
167+
168+
If the dialog content and footer buttons need to be controlled by our code and not the animated dialog control then the code below can be used
169+
170+
```TypeScript
171+
const animatedDialogContentProps: IDialogContentProps = {
172+
type: DialogType.normal,
173+
title: 'Custom content and footer'
174+
};
175+
176+
const animatedModalProps: IModalProps = {
177+
isDarkOverlay: true,
178+
containerClassName: `${styles.dialogContainer}`
179+
};
180+
181+
// The operation that does something - e.g. update data
182+
const timeout = (ms: number): Promise<void> => {
183+
return new Promise((resolve, reject) => setTimeout(reject, ms));
184+
};
185+
...
186+
...
187+
<AnimatedDialog
188+
hidden={!this.state.showCustomisedAnimatedDialog}
189+
onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}
190+
dialogContentProps={animatedDialogContentProps}
191+
modalProps={animatedModalProps}
192+
iconName='UnknownSolid'>
193+
194+
<div className={styles.dialogContent}>
195+
<span>Do you like the animated dialog?</span>
196+
</div>
197+
198+
<div className={styles.dialogFooter}>
199+
<PrimaryButton
200+
onClick={() => {
201+
this.setState({ showLoading: true });
202+
setTimeout(() => {
203+
this.setState({ showLoading: true });
204+
this.setState({ showCustomisedAnimatedDialog: false });
205+
this.setState({ showSuccessDialog: true });
206+
}, 1500);
207+
}}
208+
disabled={this.state.showLoading} text={!this.state.showLoading && "Yeah!"}>
209+
{this.state.showLoading && <Spinner size={SpinnerSize.medium} />}
210+
</PrimaryButton>
211+
212+
<DefaultButton
213+
onClick={this.setState({ showCustomisedAnimatedDialog: false });}
214+
text="Nope"
215+
disabled={this.state.showLoading} />
216+
</div>
217+
218+
</AnimatedDialog>
219+
220+
// Success dialog
221+
222+
<AnimatedDialog
223+
hidden={!this.state.showSuccessDialog}
224+
onDismiss={() => { this.setState({ showSuccessDialog: false }); }}
225+
dialogContentProps={successDialogContentProps}
226+
modalProps={customizedAnimatedModalProps}
227+
iconName='CompletedSolid'>
228+
<div className={styles.dialogContent}><span>Thank you.</span></div>
229+
<div className={styles.resultDialogFooter}>
230+
<PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text="OK" >
231+
</PrimaryButton>
232+
</div>
233+
</AnimatedDialog>
234+
```
235+
236+
#### Animated dialog with custom content and footer
237+
238+
![Animated dialog control with icon](../assets/AnimatedDialogCustomFooter.gif)
239+
240+
### SCSS used in the above examples
241+
242+
```scss
243+
244+
$themePrimary: '[theme:themePrimary, default:#0078d7]';
245+
246+
.dialogContainer {
247+
border-top: 4px;
248+
border-top-color: $themePrimary;
249+
border-top-style: solid;
250+
min-width: 400px;
251+
252+
.dialogContent {
253+
text-align: center;
254+
padding-bottom: 10px;
255+
font-size: 1.125em;
256+
}
257+
258+
.dialogFooter {
259+
text-align: right;
260+
margin-top: 1.25em;
261+
262+
button {
263+
min-width: 75px;
264+
margin: 0px 10px;
265+
border-radius: 5px;
266+
}
267+
268+
.loader{
269+
margin-top: 15px;
270+
}
271+
}
272+
273+
.resultDialogFooter {
274+
text-align: center;
275+
margin-top: 1.25em;
276+
277+
button {
278+
min-width: 100px;
279+
margin: 0px 10px;
280+
}
281+
}
282+
}
283+
284+
```
285+
286+
## Implementation
287+
288+
In addition to the`Office UI Fabric dialog` [properties](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog#implementation), the `AnimatedDialog` control can be configured with the following properties:
289+
290+
| Property | Type | Required | Description | Default |
291+
| ---- | ---- | ---- | ---- | ---- |
292+
| dialogAnimationInType | string | no | The name of the dialog entrace animation. See [animate.css](https://animate.style/) for values | bounceIn |
293+
| dialogAnimationOutType | string | no | The name of the dialog exit animation. See [animate.css](https://animate.style/) for values | zoomOut |
294+
| iconName | string | no | The name of the Fabric UI icon that appears above title. | |
295+
| iconAnimationType | string | no | The name of the icon entrace animation. See [animate.css](https://animate.style/) for values. | zoomIn |
296+
| showAnimatedDialogFooter | boolean | no | Should the animated dialog show it's own footer. [See example 3 and 4](#3.-Adding-icons-and-functions) above for usage. | false |
297+
| okButtonText | string | no | The text of the the OK button if showAnimatedDialogFooter is `true`. [See example 3](#3.-Adding-icons-and-functions) above for usage. | Ok |
298+
| cancelButtonText | string | no | The text of the the Cancel button if showAnimatedDialogFooter is `true`. [See example 3](#3.-Adding-icons-and-functions) above for usage. | Cancel |
299+
| onOkClick | function | no | The function to be executed when Ok button is clicked. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3.-Adding-icons-and-functions) above for usage. | |
300+
| onSuccess | function | no | The function to be executed after successful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. See example 3 above for usage. | |
301+
| onError | function | no | The function to be executed after unsuccessful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. See example 3 above for usage. | |
302+
303+
304+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AnimatedDialog)

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"@pnp/sp": "2.0.6",
3232
"@pnp/telemetry-js": "2.0.0",
3333
"@uifabric/icons": "7.3.0",
34+
"animate.css": "^4.1.1",
3435
"chart.js": "2.7.3",
3536
"color": "3.1.2",
3637
"lodash": "4.17.13",

‎src/AnimatedDialog.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./controls/animatedDialog/index";

‎src/controls/animatedDialog/AnimatedDialog.module.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@import "~office-ui-fabric-react/dist/sass/References.scss";
2+
3+
$themePrimary: "[theme:themePrimary, default:#0078d7]";
4+
5+
.animatedDialogTitleContainer {
6+
text-align: center;
7+
i {
8+
font-size: 52px;
9+
color: $themePrimary;
10+
}
11+
12+
span {
13+
font-size: 32px;
14+
font-weight: 600;
15+
margin: 0 0 0.4em;
16+
}
17+
}
18+
19+
.animatedDialogFooter {
20+
text-align: center;
21+
margin-top: 1.25em;
22+
23+
button {
24+
min-width: 100px;
25+
margin: 0px 10px;
26+
}
27+
28+
.loader {
29+
margin-top: 15px;
30+
}
31+
}

0 commit comments

Comments
 (0)