feat: Dialog blur event callback suopport clickIncludeElm

myxvisual · Nov 17, 2017 · 695ab87 · 695ab87
1 parent 74f5a1a
commit 695ab87
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
@@ -41,13 +41,14 @@ export class Dialog extends React.Component<DialogProps, DialogState> {
   static defaultProps: DialogProps = {
     contentEnterStyle: { transform: "scale(1)" },
     contentLeaveStyle: { transform: "scale(0)" }
-  }
+  };
   state: DialogState = {
     showDialog: this.props.defaultShow
   };
 
   static contextTypes = { theme: PropTypes.object };
   context: { theme: ReactUWP.ThemeType };
+  renderToBody: RenderToBody;
   rootElm: HTMLDivElement;
   addBlurEvent = new AddBlurEvent();
 
@@ -84,7 +85,7 @@ export class Dialog extends React.Component<DialogProps, DialogState> {
     const { onCloseDialog, isControlled } = this.props;
     this.addBlurEvent.setConfig({
       addListener: this.state.showDialog,
-      clickExcludeElm: this.rootElm,
+      clickIncludeElm: this.renderToBody.rootElm,
       blurCallback: () => {
         if (isControlled) return;
         this.setState({
@@ -120,6 +121,7 @@ export class Dialog extends React.Component<DialogProps, DialogState> {
       <RenderToBody
         {...attributes}
         style={styles.root.style}
+        ref={renderToBody => this.renderToBody = renderToBody}
         className={theme.classNames(styles.root.className, className)}
       >
         <div ref={rootElm => this.rootElm = rootElm} {...styles.content}>

diff --git a/src/Slider/index.tsx b/src/Slider/index.tsx
@@ -225,6 +225,7 @@ export class Slider extends React.Component<SliderProps, SliderState> {
       onChangedValue,
       onChangeValueRatio
     } = this.props;
+
     const isHorizonMode = displayMode === "horizon";
     const useCustomBackground = barBackground || barBackgroundImage;
     const { left, width, bottom, height } = this.rootElm.getBoundingClientRect();