feat(Alert): 按钮使用 Button 组件

aotuzuche · Jan 16, 2019 · dd3a57b · dd3a57b
1 parent 0d3acda
commit dd3a57b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 29 deletions.
diff --git a/docs/src/mobile/alert/index.jsx b/docs/src/mobile/alert/index.jsx
@@ -51,20 +51,17 @@ class A extends React.Component {
                   name: 'monkey',
                   onClick: () => {
                     Toast('monkey')
-                  }
-                },
-                {
-                  name: 'kitty',
-                  onClick: () => {
-                    Toast('kitty')
-                  }
+                  },
+                  mini: true
                 },
                 {
                   name: 'world',
                   className: 'alert-world',
                   onClick: () => {
                     Toast('world')
                   },
+                  mini: true,
+                  type: 'danger',
                   report: {
                     name: 'world'
                   }

diff --git a/packages/alert/index.tsx b/packages/alert/index.tsx
@@ -3,18 +3,11 @@ import { createBrowserHistory } from 'history'
 import React, { MouseEventHandler } from 'react'
 import { createPortal, render, unmountComponentAtNode } from 'react-dom'
 
-import { Report } from '../utils'
+import Button, { ButtonProps } from '../button'
 
 export interface AlertProps {
   title?: React.ReactNode
-  btns?: [
-    {
-      name: string;
-      className?: string;
-      onClick?: MouseEventHandler<Element>;
-      [otherProps: string]: any;
-    }
-  ]
+  btns?: ButtonProps[]
   className?: string
   desc?: React.ReactNode
   onClose?: MouseEventHandler<Element>
@@ -33,28 +26,51 @@ class AlertCom extends React.Component<AlertProps, any> {
         <div className="x-alert__btns">
           {!!btns &&
             btns.map((btn, index) => {
-              const { name, className, onClick, ...otherProps } = btn
-              let composeClassName
-              if (index === 0) {
-                composeClassName = cn('x-alert__btn-y', className)
-              } else if (index === 1) {
-                composeClassName = cn('x-alert__btn-n', className)
-              } else {
-                composeClassName = cn('x-alert__btn-y', className)
-              }
+              const {
+                name,
+                onClick,
+                className,
+                type = 'primary',
+                ...otherProps
+              } = btn
+
+              const composeClassName = cn('auto-ui-alert__btns-btn', className)
+
               return (
-                <Report
+                <Button
                   className={composeClassName}
-                  {...otherProps}
                   onClick={e => {
                     onClick && onClick(e)
                     onClose && onClose(e)
                   }}
                   key={index}
+                  type={type}
+                  {...otherProps}
                 >
                   {name}
-                </Report>
+                </Button>
               )
+              // let composeClassName
+              // if (index === 0) {
+              //   composeClassName = cn('x-alert__btn-y', className)
+              // } else if (index === 1) {
+              //   composeClassName = cn('x-alert__btn-n', className)
+              // } else {
+              //   composeClassName = cn('x-alert__btn-y', className)
+              // }
+              // return (
+              //   <Report
+              //     className={composeClassName}
+              //     {...otherProps}
+              //     onClick={e => {
+              //       onClick && onClick(e)
+              //       onClose && onClose(e)
+              //     }}
+              //     key={index}
+              //   >
+              //     {name}
+              //   </Report>
+              // )
             })}
         </div>
       </div>

diff --git a/packages/alert/style.scss b/packages/alert/style.scss
@@ -41,6 +41,12 @@
   &__btns {
     display: flex;
     padding: 40px;
+    .auto-ui-alert__btns-btn {
+      margin-right: 20px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
 
     a {
       display: block;

diff --git a/packages/button/index.tsx b/packages/button/index.tsx
@@ -14,7 +14,7 @@ export interface ButtonProps {
   [otherProps: string]: any
 }
 
-export default class Button extends Component<ButtonProps, null> {
+export default class Button extends Component<ButtonProps, any> {
   public render() {
     const {
       type = 'default',

diff --git a/packages/button/style.scss b/packages/button/style.scss
@@ -20,6 +20,7 @@
   }
   &__text {
     padding: 0 10px;
+    white-space: nowrap;
   }
   &--primary {
     background: #00bb55;