feat: Update Dialog content supoort custom animation

myxvisual · Sep 13, 2017 · 1640b0a · 1640b0a
1 parent e6f6a36
commit 1640b0a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/src/Dialog/index.doc.json b/src/Dialog/index.doc.json
@@ -27,25 +27,37 @@
           "name": "defaultShow",
           "documentation": "Set Dialog show status.",
           "isRequired": false,
-          "type": "boolean"
+          "type": "prototype"
         },
         {
           "name": "isControlled",
           "documentation": "If set true, click the mask background will not close dialog.",
           "isRequired": false,
-          "type": "boolean"
+          "type": "prototype"
         },
         {
           "name": "contentStyle",
           "documentation": "Set custom content style.",
           "isRequired": false,
-          "type": "CSSProperties"
+          "type": "prototype"
+        },
+        {
+          "name": "contentEnterStyle",
+          "documentation": "Set custom content enter style.",
+          "isRequired": false,
+          "type": "prototype"
+        },
+        {
+          "name": "contentLeaveStyle",
+          "documentation": "Set custom content leave style.",
+          "isRequired": false,
+          "type": "prototype"
         },
         {
           "name": "onCloseDialog",
           "documentation": "Set onCloseDialog callback.",
           "isRequired": false,
-          "type": "() => void"
+          "type": "prototype"
         }
       ]
     },
@@ -62,7 +74,7 @@
         {
           "name": "showDialog",
           "isRequired": false,
-          "type": "boolean"
+          "type": "prototype"
         }
       ]
     },
@@ -71,7 +83,12 @@
       "exports": [
         {
           "name": "prototype",
-          "type": "prototype"
+          "type": "any"
+        },
+        {
+          "name": "defaultProps",
+          "initializerText": " {\n    contentEnterStyle: { transform: \"scale(1)\" },\n    contentLeaveStyle: { transform: \"scale(0)\" }\n  }",
+          "type": "DialogProps"
         },
         {
           "name": "contextTypes",

diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
@@ -18,6 +18,14 @@ export interface DataProps {
    * Set custom content style.
    */
   contentStyle?: React.CSSProperties;
+  /**
+   * Set custom content enter style.
+   */
+  contentEnterStyle?: React.CSSProperties;
+  /**
+   * Set custom content leave style.
+   */
+  contentLeaveStyle?: React.CSSProperties;
   /**
    * Set onCloseDialog callback.
    */
@@ -30,6 +38,10 @@ export interface DialogState {
 }
 
 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
   };
@@ -87,6 +99,8 @@ export class Dialog extends React.Component<DialogProps, DialogState> {
   render() {
     const {
       contentStyle,
+      contentEnterStyle,
+      contentLeaveStyle,
       defaultShow,
       children,
       onCloseDialog,
@@ -117,7 +131,16 @@ export class Dialog extends React.Component<DialogProps, DialogState> {
 }
 
 function getStyles(dialog: Dialog) {
-  const { context, state: { showDialog }, props: { style, contentStyle } } = dialog;
+  const {
+    context,
+    state: { showDialog },
+    props: {
+      style,
+      contentStyle,
+      contentEnterStyle,
+      contentLeaveStyle
+    }
+  } = dialog;
   const { theme } = context;
   const { prefixStyle } = theme;
 
@@ -143,8 +166,8 @@ function getStyles(dialog: Dialog) {
     content: prefixStyle({
       display: "inline-block",
       transition: "all .25s",
-      transform: `scale(${showDialog ? 1 : 0})`,
-      ...contentStyle
+      ...contentStyle,
+      ...(showDialog ? contentEnterStyle : contentLeaveStyle)
     })
   };
 }