diff --git a/docs/src/mobile/alert/index.jsx b/docs/src/mobile/alert/index.jsx index e9ad753b..06c949e6 100644 --- a/docs/src/mobile/alert/index.jsx +++ b/docs/src/mobile/alert/index.jsx @@ -51,13 +51,8 @@ class A extends React.Component { name: 'monkey', onClick: () => { Toast('monkey') - } - }, - { - name: 'kitty', - onClick: () => { - Toast('kitty') - } + }, + mini: true }, { name: 'world', @@ -65,6 +60,8 @@ class A extends React.Component { onClick: () => { Toast('world') }, + mini: true, + type: 'danger', report: { name: 'world' } diff --git a/packages/alert/index.tsx b/packages/alert/index.tsx index 05308bd2..095934be 100644 --- 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; - [otherProps: string]: any; - } - ] + btns?: ButtonProps[] className?: string desc?: React.ReactNode onClose?: MouseEventHandler @@ -33,28 +26,51 @@ class AlertCom extends React.Component {
{!!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 ( - { onClick && onClick(e) onClose && onClose(e) }} key={index} + type={type} + {...otherProps} > {name} - + ) + // 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 ( + // { + // onClick && onClick(e) + // onClose && onClose(e) + // }} + // key={index} + // > + // {name} + // + // ) })}
diff --git a/packages/alert/style.scss b/packages/alert/style.scss index cd53d36b..7798a44e 100644 --- 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 index b509a054..ed8ef8cc 100644 --- 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 { +export default class Button extends Component { public render() { const { type = 'default', diff --git a/packages/button/style.scss b/packages/button/style.scss index 6252e948..8d054f25 100644 --- a/packages/button/style.scss +++ b/packages/button/style.scss @@ -20,6 +20,7 @@ } &__text { padding: 0 10px; + white-space: nowrap; } &--primary { background: #00bb55;