feat: Add ContentDialog support empty button

myxvisual · Jan 23, 2019 · 50aaf4f · 50aaf4f
1 parent 27319ec
commit 50aaf4f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/docs/src/routes/Components/ContentDialog/SimpleExample.tsx b/docs/src/routes/Components/ContentDialog/SimpleExample.tsx
@@ -76,7 +76,6 @@ export default class SimpleExample extends React.Component<{}, SimpleExampleStat
             {...statusBarProps}
             defaultShow={showStatusBarDialog}
             primaryButtonAction={this.toggleShowStatusBarDialog}
-            secondaryButtonAction={this.toggleShowStatusBarDialog}
             closeButtonAction={this.toggleShowStatusBarDialog}
             onCloseDialog={() => {
               this.setState({ showStatusBarDialog: false });
@@ -96,6 +95,8 @@ export default class SimpleExample extends React.Component<{}, SimpleExampleStat
             primaryButtonAction={this.toggleShowDialog}
             secondaryButtonAction={this.toggleShowDialog}
             closeButtonAction={this.toggleShowDialog}
+            primaryButtonText="Sure"
+            secondaryButtonText={null}
             onCloseDialog={() => {
               this.setState({ showDialog: false });
             }}

diff --git a/src/ContentDialog/index.tsx b/src/ContentDialog/index.tsx
@@ -206,20 +206,20 @@ export class ContentDialog extends React.Component<ContentDialogProps, ContentDi
             </div>
             {contentNode}
             <div {...styles.content}>
-              <div {...styles.buttonGroup}>
-                <Button
+              {(primaryButtonText || secondaryButtonText) && <div {...styles.buttonGroup}>
+                {primaryButtonText && <Button
                   onClick={e => { primaryButtonAction(e), this.closeDialog(); }}
                   style={inlineStyles.button}
                 >
                   {primaryButtonText}
-                </Button>
-                <Button
+                </Button>}
+                {secondaryButtonText && <Button
                   onClick={e => { secondaryButtonAction(e), this.closeDialog(); }}
                   style={inlineStyles.button}
                 >
                   {secondaryButtonText}
-                </Button>
-              </div>
+                </Button>}
+              </div>}
             </div>
           </div>
         </div>
@@ -243,7 +243,9 @@ function getStyles(contentDialog: ContentDialog): {
   const { context, props: {
     style,
     background,
-    padding
+    padding,
+    primaryButtonText,
+    secondaryButtonText
   }, state: { showDialog } } = contentDialog;
   const { theme } = context;
   const { prefixStyle } = theme;
@@ -333,7 +335,7 @@ function getStyles(contentDialog: ContentDialog): {
       justifyContent: "space-between"
     }),
     button: {
-      width: "calc(50% - 2px)"
+      width: (primaryButtonText && secondaryButtonText) ? "calc(50% - 2px)" : "100%"
     }
   };
 }