feat(component): Add all components blur event

Update blur event to components: ContentDialog AutoSuggestBox CalendarDateOciker DatePicker TimePicker DropDownMenu Menu SplitView NavigationView TimePicker Close #2
myxvisual · Jun 21, 2017 · 00333e0 · 00333e0
1 parent 582a7d3
commit 00333e0
Show file tree

Hide file tree

Showing 17 changed files with 490 additions and 91 deletions.
diff --git a/docs/src/routes/Components/ContentDialog/SimpleExample.tsx b/docs/src/routes/Components/ContentDialog/SimpleExample.tsx
@@ -78,6 +78,9 @@ export default class SimpleExample extends React.Component<{}, SimpleExampleStat
             primaryButtonAction={this.toggleShowStatusBarDialog}
             secondaryButtonAction={this.toggleShowStatusBarDialog}
             closeButtonAction={this.toggleShowStatusBarDialog}
+            onCloseDialog={() => {
+              this.setState({ showStatusBarDialog: false });
+            }}
           />
         </div>
         <div style={wrapperStyle}>
@@ -93,6 +96,9 @@ export default class SimpleExample extends React.Component<{}, SimpleExampleStat
             primaryButtonAction={this.toggleShowDialog}
             secondaryButtonAction={this.toggleShowDialog}
             closeButtonAction={this.toggleShowDialog}
+            onCloseDialog={() => {
+              this.setState({ showDialog: false });
+            }}
           />
         </div>
       </div>

diff --git a/src/AutoSuggestBox/index.tsx b/src/AutoSuggestBox/index.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as PropTypes from "prop-types";
+import { codes } from "keycode";
 
 import Icon from "../Icon";
 import TextBox from "../TextBox";

diff --git a/src/Button/index.doc.json b/src/Button/index.doc.json
@@ -109,7 +109,7 @@
         },
         {
           "name": "defaultProps",
-          "initializerText": " {\n    borderSize: \"2px\",\n    children: \"Button\",\n    iconPosition: \"left\"\n  }",
+          "initializerText": " {\r\n    borderSize: \"2px\",\r\n    children: \"Button\",\r\n    iconPosition: \"left\"\r\n  }",
           "documentation": "",
           "type": "ButtonProps"
         },

diff --git a/src/CalendarDatePicker/index.tsx b/src/CalendarDatePicker/index.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as PropTypes from "prop-types";
+import { codes } from "keycode";
 
+import AddBlurEvent from "../common/AddBlurEvent";
 import Icon from "../Icon";
 import TextBox from "../TextBox";
 import CalendarView from "../CalendarView";
@@ -53,9 +55,37 @@ export class CalendarDatePicker extends React.Component<CalendarDatePickerProps,
     isInit: true
   };
 
+  addBlurEvent = new AddBlurEvent();
+  rootElm: HTMLDivElement;
+  textBox: TextBox;
+
   static contextTypes = { theme: PropTypes.object };
   context: { theme: ReactUWP.ThemeType };
-  textBox: TextBox;
+
+  addBlurEventMethod = () => {
+    this.addBlurEvent.setConfig({
+      addListener: this.state.showCalendarView,
+      clickExcludeElm: this.rootElm,
+      blurCallback: () => {
+        this.setState({
+          showCalendarView: false
+        });
+      },
+      blurKeyCodes: [codes.esc]
+    });
+  }
+
+  componentDidMount() {
+    this.addBlurEventMethod();
+  }
+
+  componentDidUpdate() {
+    this.addBlurEventMethod();
+  }
+
+  componentWillUnmount() {
+    this.addBlurEvent.cleanEvent();
+  }
 
   toggleShowCalendarView = (showCalendarView?: any) => {
     if (!this.textBox.rootElm.contains(showCalendarView.target)) return;
@@ -101,6 +131,7 @@ export class CalendarDatePicker extends React.Component<CalendarDatePickerProps,
       <div
         style={styles.root}
         onClick={this.toggleShowCalendarView}
+        ref={rootElm => this.rootElm = rootElm}
       >
         <TextBox
           {...attributes}

diff --git a/src/CommandBar/index.tsx b/src/CommandBar/index.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as PropTypes from "prop-types";
+import { codes } from "keycode";
 
+import AddBlurEvent from "../common/AddBlurEvent";
 import AppBarButton from "../AppBarButton";
 import AppBarSeparator from "../AppBarSeparator";
 import ListView from "../ListView";
@@ -70,6 +72,8 @@ export class CommandBar extends React.Component<CommandBarProps, CommandBarState
 
   static contextTypes = { theme: PropTypes.object };
   context: { theme: ReactUWP.ThemeType };
+  rootElm: HTMLDivElement;
+  addBlurEvent = new AddBlurEvent();
 
   componentWillReceiveProps(nextProps: CommandBarProps) {
     const { expanded } = nextProps;
@@ -78,6 +82,31 @@ export class CommandBar extends React.Component<CommandBarProps, CommandBarState
     }
   }
 
+  addBlurEventMethod = () => {
+    this.addBlurEvent.setConfig({
+      addListener: this.state.currExpanded,
+      clickExcludeElm: this.rootElm,
+      blurCallback: () => {
+        this.setState({
+          currExpanded: false
+        });
+      },
+      blurKeyCodes: [codes.esc]
+    });
+  }
+
+  componentDidMount() {
+    this.addBlurEventMethod();
+  }
+
+  componentDidUpdate() {
+    this.addBlurEventMethod();
+  }
+
+  componentWillUnmount() {
+    this.addBlurEvent.cleanEvent();
+  }
+
   toggleExpanded = (currExpanded?: any) => {
     if (typeof currExpanded === "boolean") {
       if (currExpanded !== this.state.currExpanded) this.setState({ currExpanded });
@@ -108,7 +137,7 @@ export class CommandBar extends React.Component<CommandBarProps, CommandBarState
     const expandedHeight = 72;
 
     return (
-      <div style={styles.wrapper}>
+      <div style={styles.wrapper} ref={rootElm => this.rootElm = rootElm}>
         <div {...attributes} style={styles.root}>
           {(content !== void 0 || contentNode !== void 0) && (
             <div style={styles.content}>{content || contentNode}</div>

diff --git a/src/ContentDialog/index.doc.json b/src/ContentDialog/index.doc.json
@@ -10,6 +10,10 @@
       "name": "ContentDialogProps",
       "documentation": ""
     },
+    {
+      "name": "ContentDialogState",
+      "documentation": ""
+    },
     {
       "name": "ContentDialog",
       "documentation": ""
@@ -91,6 +95,18 @@
           "documentation": "secondaryButton `click callback`.",
           "isRequired": false,
           "type": "(e: MouseEvent<HTMLButtonElement>) => void"
+        },
+        {
+          "name": "onCloseDialog",
+          "documentation": "callback run end close dialog.",
+          "isRequired": false,
+          "type": "() => void"
+        },
+        {
+          "name": "background",
+          "documentation": "Set custom background.",
+          "isRequired": false,
+          "type": "string"
         }
       ],
       "documentation": ""
@@ -103,6 +119,18 @@
         "HTMLAttributes"
       ]
     },
+    {
+      "name": "ContentDialogState",
+      "members": [
+        {
+          "name": "showDialog",
+          "documentation": "",
+          "isRequired": false,
+          "type": "boolean"
+        }
+      ],
+      "documentation": ""
+    },
     {
       "documentation": "",
       "name": "emptyFunc",
@@ -124,7 +152,7 @@
         },
         {
           "name": "defaultProps",
-          "initializerText": " {\n    primaryButtonText: \"Delete\",\n    secondaryButtonText: \"Cancel\",\n    closeButtonAction: emptyFunc,\n    primaryButtonAction: emptyFunc,\n    secondaryButtonAction: emptyFunc\n  }",
+          "initializerText": " {\n    primaryButtonText: \"Delete\",\n    secondaryButtonText: \"Cancel\",\n    closeButtonAction: emptyFunc,\n    primaryButtonAction: emptyFunc,\n    secondaryButtonAction: emptyFunc,\n    onCloseDialog: emptyFunc\n  }",
           "documentation": "",
           "type": "ContentDialogProps"
         },
@@ -137,15 +165,47 @@
       ],
       "members": [
         {
-          "name": "refs",
+          "name": "state",
+          "initializerText": " {\n    showDialog: this.props.defaultShow\n  }",
           "documentation": "",
-          "type": "{ renderToBody: any; }"
+          "type": "ContentDialogState"
+        },
+        {
+          "name": "addBlurEvent",
+          "initializerText": " new AddBlurEvent()",
+          "documentation": "",
+          "type": "AddBlurEvent"
         },
         {
           "name": "context",
           "documentation": "",
           "type": "{ theme: any; }"
         },
+        {
+          "name": "renderToBody",
+          "documentation": "",
+          "type": "any"
+        },
+        {
+          "name": "rootElm",
+          "documentation": "",
+          "type": "HTMLDivElement"
+        },
+        {
+          "name": "shouldComponentUpdate",
+          "documentation": "",
+          "type": "(nextProps: ContentDialogProps, nextState: ContentDialogState) => boolean"
+        },
+        {
+          "name": "componentDidUpdate",
+          "documentation": "",
+          "type": "() => void"
+        },
+        {
+          "name": "componentWillUnmount",
+          "documentation": "",
+          "type": "() => void"
+        },
         {
           "name": "containerMouseEnterHandle",
           "initializerText": " (e: React.MouseEvent<HTMLDivElement>) => {\n    e.currentTarget.style.border = `1px solid ${this.context.theme.accent}`;\n  }",
@@ -158,6 +218,12 @@
           "documentation": "",
           "type": "(e: MouseEvent<HTMLDivElement>) => void"
         },
+        {
+          "name": "closeDialog",
+          "initializerText": " () => {\n    this.setState({ showDialog: false });\n    this.props.onCloseDialog();\n  }",
+          "documentation": "",
+          "type": "() => void"
+        },
         {
           "name": "render",
           "documentation": "",