Skip to content

Commit

Permalink
feat(component): Add more API to Toast component
Browse files Browse the repository at this point in the history
  • Loading branch information
@myxvisual
myxvisual committed Jun 23, 2017
1 parent 483cd95 commit 6e09b6c
Show file tree
Hide file tree
Showing 5 changed files with 218 additions and 18 deletions.
Binary file added docs/src/assets/images/icon-32x32.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 46 additions & 6 deletions docs/src/routes/Components/Toast/SimpleExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,89 @@ import * as React from "react";
import * as PropTypes from "prop-types";

import Toast from "react-uwp/Toast";
import Image from "react-uwp/Image";
import Icon from "react-uwp/Icon";
import TextBox from "react-uwp/TextBox";
import Toggle from "react-uwp/Toggle";

export interface SimpleExampleState {
showToast1?: boolean;
showToast2?: boolean;
showToast3?: boolean;
}

const toggleStyle: React.CSSProperties = {
margin: 8
};
export default class SimpleExample extends React.Component<{}, SimpleExampleState> {
static contextTypes = { theme: PropTypes.object };
state: SimpleExampleState = {
showToast1: true,
showToast2: false
showToast2: true,
showToast3: true
};
context: { theme: ReactUWP.ThemeType };

render() {
const { showToast1, showToast2 } = this.state;
const { showToast1, showToast2, showToast3 } = this.state;

return (
<div>
<Toggle
style={toggleStyle}
defaultToggled={showToast1}
onToggle={showToast1 => this.setState({ showToast1 })}
label="Toggle show Toast1"
/>
<Toggle
style={toggleStyle}
defaultToggled={showToast2}
onToggle={showToast2 => this.setState({ showToast2 })}
label="Toggle show Toast2"
/>
<Toggle
style={toggleStyle}
defaultToggled={showToast3}
onToggle={showToast3 => this.setState({ showToast3 })}
label="Toggle show Toast3"
/>

{/*
* Toasts Codes
*/}
<Toast
defaultShow={showToast1}
onToggleShowToast={showToast1 => this.setState({ showToast1 })}
logoNode={<Image src={require("assets/images/icon-32x32.png")} />}
title="Adaptive Tiles Meeting"
description={["Conf Room 2001 / Building 135", "10:00 AM - 10:30 AM"]}
showCloseIcon
>
Toast1
</Toast>
/>

<Toast
defaultShow={showToast2}
onToggleShowToast={showToast2 => this.setState({ showToast2 })}
logoNode={<Icon>ActionCenterNotification</Icon>}
title="Adam Wilson tagged you in a photo"
description={["The Enchantments were absolutely spectacular - with Andrew Bares", "Notifications visualizer"]}
showCloseIcon
>
<Image
style={{ width: "100%", marginTop: 10 }}
src={require("../FlipView/images/dog-2332240_1280.jpg")}
/>
</Toast>

<Toast
defaultShow={showToast3}
onToggleShowToast={showToast3 => this.setState({ showToast3 })}
logoNode={<Icon>ContactSolid</Icon>}
title="Andrew B."
closeDelay={5000}
description={["Shall we meet up at 8?", "Notifications visualizer"]}
showCloseIcon
>
Toast2
<TextBox placeholder="Type a Reply" style={{ marginTop: 10 }} />
</Toast>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/Toast/ToastWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class ToastWrapper extends React.Component<ToastWrapperProps, ToastWrappe
right: 0,
height: "100%",
width: 360,
padding: "10px 0",
padding: "10px 4px",
position: "fixed",
display: "flex",
flexDirection: "column-reverse",
Expand Down
54 changes: 52 additions & 2 deletions src/Toast/index.doc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,30 @@
"isRequired": false,
"type": "boolean"
},
{
"name": "logoNode",
"documentation": "Set custom `logo` with `ReactNode`.",
"isRequired": false,
"type": "ReactNode"
},
{
"name": "title",
"documentation": "Set Toast title.",
"isRequired": false,
"type": "string"
},
{
"name": "description",
"documentation": "Set Toast description.",
"isRequired": false,
"type": "string | string[]"
},
{
"name": "closeDelay",
"documentation": "Set Toast close after showed timeout.",
"isRequired": false,
"type": "number"
},
{
"name": "onToggleShowToast",
"documentation": "Set onChange show Toast status `callback`.",
Expand Down Expand Up @@ -120,6 +144,26 @@
"documentation": "",
"type": "number"
},
{
"name": "hiddenTimer",
"documentation": "",
"type": "any"
},
{
"name": "closeTimer",
"documentation": "",
"type": "any"
},
{
"name": "customAnimate",
"documentation": "",
"type": "any"
},
{
"name": "customAnimateElm",
"documentation": "",
"type": "HTMLDivElement"
},
{
"name": "componentWillReceiveProps",
"documentation": "",
Expand All @@ -130,6 +174,12 @@
"documentation": "",
"type": "() => void"
},
{
"name": "addCloseDelay",
"initializerText": " () => {\n clearTimeout(this.closeTimer);\n const { closeDelay, onToggleShowToast } = this.props;\n if (closeDelay === void 0) {\n return;\n } else {\n this.closeTimer = setTimeout(() => {\n this.setState({ showToast: false });\n onToggleShowToast(false);\n }, closeDelay);\n }\n }",
"documentation": "",
"type": "() => void"
},
{
"name": "componentDidUpdate",
"documentation": "",
Expand All @@ -148,7 +198,7 @@
},
{
"name": "trueRender",
"initializerText": " () => {\n const {\n children,\n defaultShow,\n onToggleShowToast,\n showCloseIcon,\n ...attributes\n } = this.props;\n const { theme } = this.context;\n const styles = getStyles(this);\n\n return (\n <CustomAnimate\n {...slideRightInProps}\n appearAnimate\n wrapperStyle={{ display: \"inherit\" }}\n >\n <div\n {...attributes}\n style={styles.root}\n >\n {showCloseIcon && (\n <Icon\n style={styles.closeIcon}\n hoverStyle={{ color: theme.baseHigh }}\n onClick={() => this.toggleShowToast(false)}\n >\n ClearLegacy\n </Icon>\n )}\n {children}\n </div>\n </CustomAnimate>\n );\n }",
"initializerText": " () => {\n const {\n children,\n defaultShow,\n logoNode,\n title,\n description,\n onToggleShowToast,\n closeDelay,\n showCloseIcon,\n ...attributes\n } = this.props;\n const { theme } = this.context;\n const styles = getStyles(this);\n\n return (\n <CustomAnimate\n {...slideRightInProps}\n leaveStyle={slideRightInProps}\n appearAnimate={false}\n wrapperStyle={styles.wrapper}\n ref={customAnimate => this.customAnimate = customAnimate}\n >\n <div\n {...attributes}\n style={styles.root}\n >\n <div style={styles.card}>\n {logoNode}\n <span style={styles.descContent}>\n <p style={styles.title}>{title}</p>\n {typeof description === \"string\" ? (\n <p style={styles.description}>{description}</p>\n ) : (description && description.map((desc, index) => (\n <p style={styles.description} key={`${index}`}>\n {desc}\n </p>\n )))}\n </span>\n </div>\n {showCloseIcon && (\n <Icon\n style={styles.closeIcon}\n hoverStyle={{ color: theme.baseHigh }}\n onClick={() => this.toggleShowToast(false)}\n >\n ClearLegacy\n </Icon>\n )}\n {children}\n </div>\n </CustomAnimate>\n );\n }",
"documentation": "",
"type": "() => Element"
},
Expand All @@ -166,7 +216,7 @@
{
"name": "getStyles",
"documentation": "",
"type": "(Toast: Toast) => { root?: CSSProperties; closeIcon?: CSSProperties; }"
"type": "(Toast: Toast) => { wrapper?: CSSProperties; root?: CSSProperties; closeIcon?: CSSProperties; car..."
}
],
"documentation": "",
Expand Down
Loading

0 comments on commit 6e09b6c

Please sign in to comment.